How to configure the switching and display of multilingual content on the AnQiCMS website?

In today's globalized internet environment, website support for multiple languages has become a key factor in expanding the market and serving different user groups.AnQiCMS (AnQiCMS) provides a practical solution for website multilingual content switching and display with its flexible and powerful features.This article will introduce how to configure multi-language content on AnQiCMS website, helping you easily achieve the internationalization layout of your website.

The core of multilingual strategy: Understanding AnQiCMS multi-site management

The core strategy of AnQiCMS in implementing multilingual functionality is to fully utilize its powerful multi-site management capabilities.This means that you would usually create an independent site for each target language, rather than switching language versions directly within the same content item.This design ensures the independence, customization, and SEO-friendliness of each language site's content, providing the most accurate and native experience for users of different languages.

Step 1: Plan your multilingual site structure

Before getting started with the configuration, it is first necessary to plan the structure of the multilingual site. This mainly involves domain strategies, which are commonly as follows:

• Independent domain (such as:example.de,example.fr)This is the most ideal model, with good SEO effects**, but the cost is high.
• Subdomain (such as:en.example.com,de.example.com)This is commonly used, with good SEO effects and easy to manage.
• Subdirectory (such as:example.com/en/,example.com/de/)The deployment and management are relatively simple, but make sure the server configuration supports URL rewriting so that AnQiCMS can parse it correctly.

No matter which mode you choose, you need to prepare the corresponding domain name or path for each language in advance, and perform domain name resolution in advance to ensure that they all point to your AnQiCMS server.

Step two: Create a language site in AnQiCMS

After planning the site structure, we can create corresponding sites for each language on the AnQiCMS backend.AnQiCMS allows multiple sites to be managed within a single system, and each site can have independent configurations and content.

1. Log in to the main site background:Log in to the admin panel of the main site using the administrator account you created when you first installed AnQiCMS.
2. Access Multi-Site Management:Find the "Multi-site Management" feature in the left menu of the backend.
3. Add a new site:Click the “Add New Site” button and fill in the site information according to your plan.
   • Site Name:Name your language site, for example, “English site” or “German site”.
   • Site root directory:Specify a unique directory, for example/app/en_anqicms_comor/www/wwwroot/en.anqicms.com. This directory will be used to store the cache and other data for the language site independently, make sure that it does not conflict with other site directories.
   • Website address:Enter the full URL of the language site, for examplehttps://en.yourdomain.comorhttps://yourdomain.com/en.
   • Admin account password:Set an independent administrator account and password for this new language site.
   • Database name:Specify a unique database for the new site, for exampleen_anqicms_com. If you are installing in a Docker environment and want to reuse the database connection information of the main site, you can choose to 'reuse the default database account information', AnQiCMS will automatically create a new database table.
   • Select the template to use:You can choose different templates for each language site or use the same set of templates for localization modifications.

It is noteworthy that in the AnQiCMS backend "Global Function Settings" there is an "Default Language Package" option. This option is mainly used for switchingAnQiCMS back-end interface and system built-in prompt informationThe language does not directly affect the content language of the website front-end. The localization of the website front-end content needs to be implemented through subsequent content management and template configuration.

Step 3: Content Localization and Management

After creating a language site, the core task ahead is to localize the content. Each language site will have its own independent content management system:

1. Log in to the backend of the corresponding language site:Log in using the administrator account you set up for the language site.
2. Create and translate content:
   • Documents (articles, products, etc.) and categories:You need to create or translate the corresponding documents (such as articles, product information) and categories independently for each language site.This means that an English article and its Chinese version will be two separate documents, published on English and Chinese sites respectively.
   • Single page:Similarly, single pages such as “About Us” and “Contact Us” also need to be created and translated according to the language.
   • Images and multimedia:Consider providing localized images or videos for users of different languages, such as videos with subtitles in their local language.
3. SEO localization:
   • TDK (Title, Description, Keywords):Set TDK for each article, category, and page on each language site to match local language habits and search preferences.
   • URL Structure:Ensure that the URL structure also conforms to multilingual SEO practices.
   • Hreflang tag:This is the key to multilingual website SEO. It tells search engines that your different language versions correspond to each other, avoiding the penalty for duplicate content.In AnQiCMS, you can easily implement it through template tags.

Step 4: Implement language switching and display on the website front-end

In order to allow users to easily switch between different language versions, we need to add a language switch function to the front end of the website and configurehreflangtags to optimize SEO.

1. Get the list of multilingual sites:AnQiCMS provides a namedlanguagestemplate tag to retrieve information about all configured multilingual sites.

   
   {%- languages websites %}
   {# websites 是一个包含所有语言站点信息的数组 #}
   {%- if websites %}
   <div>
       <span>切换语言：</span>
       {%- for item in websites %}
       <a href="{{item.Link}}">
           {%- if item.LanguageIcon %}
           <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
           {%- else %}
           {{item.LanguageEmoji}}
           {% endif %}
           {{item.LanguageName}}
       </a>
       {%- endfor %}
   </div>
   {%- endif %}
   {%- endLanguages %}
   

   This code will traverse all language sites and generate a link for each site, displaying the language name or icon. You can place it in a prominent position on the website's header or footer.
2. Configure Hreflang tag:Hreflang tag should be placed in the HTML's<head>area, which will tell the search engine which pages are alternative language versions of the same content.

   
   {%- languages websites %}
   {%- for item in websites %}
   <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
   {%- endfor %}
   {%- endLanguages %}
   

   Through this tag, search engines can understand the structure of your multilingual content and direct users to their preferred language version of the website.

Step five: Multilingual fine-tuning at the template level.

Translation of the content itself may also include some static text in the website template, such as navigation menu items, footer copyright statements, form labels, etc. AnQiCMS providestrThe (translate) tag is used to handle the translation of static text within these templates.

1. Create a language file:Under your template directory, create a folder namedlocalesfolder, and create a subfolder for each language (for example,zh-cn/en-usEach subfolder contains onedefault.ymlfile. For example,zh-cn/default.yml:

   
   "yourLocation": "您的位置"
   "home": "首页"
   "contactUs": "联系我们"
   

   the correspondingen-us/default.yml:

   
   "yourLocation": "Your Location"
   "home": "Home"
   "contactUs": "Contact Us"
   

2. Using the templatetrTags:In the template file, you can use{% tr "键名" %}Call the corresponding translation text. “`twig