How to configure the switch and display of multi-language content on the AnQiCMS website?

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

The core of multi-language strategy: understanding AnQiCMS multi-site management

The core strategy of AnQiCMS to implement multilingual functionality is to fully utilize its powerful multi-site management capabilities.This means that you usually create a separate site for each target language, rather than switching language versions directly within the same content entry.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 starting the configuration, it is necessary to plan the structure of the multilingual site. This mainly involves domain strategies, which are common and include the following:

  • Independent domain (such as:example.de,example.fr)This is the most ideal model, with excellent 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/)：Deployment and management are relatively simple, but make sure that 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 or path for each language and perform domain resolution in advance to ensure that they all point to your AnQiCMS server.

Step 2: Create a language site in AnQiCMS

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

  1. Login to the main site admin panel:Log in to the main site admin panel using the administrator account you created when initially installing AnQiCMS.
  2. Visit multi-site management:Find the "multi-site management" feature in the left menu of the background.
  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”, “German site”.
    • Site root directory:Specify a unique directory, for example/app/en_anqicms_comor/www/wwwroot/en.anqicms.comThis directory is used for storing the cache and other data for the language site independently, make sure 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.
    • Administrator account password:Set up an independent backend management 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 wish to reuse the database connection information of the main site, you can choose 'Reuse default database account information', AnQiCMS will automatically create new database tables.
    • Select the template you want to use:You can choose a different template for each language site, or use the same set of templates for localization modifications.

It is worth noting that there is a "Default Language Pack" option in the "Global Function Settings" of AnQiCMS backend. This option is mainly used for switchingAnQiCMS backend interface and system built-in prompt informationThe language specified here does not directly affect the content language of the website frontend. Localizing the content of the website frontend requires subsequent content management and template configuration.

Third step: Content Localization and Management

After creating a language site, the next core task is to perform content localization. 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 for the language site.
  2. Create and translate content:)
    • Documents (articles, products, etc.) and categories:You need to create or translate 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 the English site and the Chinese site respectively.
    • Single page:Similarly, single-page contents like “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 local languages.
  3. SEO localization:
    • TDK（Title, Description, Keywords）：Set TDK that conforms to local language conventions and search preferences for each article, category, and page of every language site.
    • URL structure:Ensure the URL structure also conforms to multilingual SEO**practices.
    • Hreflang tags:This is the key for SEO of the multilingual website.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 with template tags.

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

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

  1. Get the list of multilingual site:AnQiCMS provides a namedlanguagestemplate tags, used to get all configured multilingual site information.
    
{%- 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 iterate over 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, such as the header or footer.
  2. Configure Hreflang tag:Hreflang tag should be placed in the HTML's<head>area, which tells search engines 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 guide users to their preferred language version of the website.

Step five: Multilingual fine-tuning at the template level

Translation of content and possibly some static text in the website template, such as navigation menu items, footer copyright statements, form labels, etc. AnQiCMS providestrUse the 【en】tag to handle the translation of static text within these templates.

  1. Create a language file:Create a file named in your template directory,localesThe folder, and create a subfolder for each language inside it (for examplezh-cn/en-us), each subfolder containing onedefault.ymlfile. For example,zh-cn/default.yml:
    
"yourLocation": "您的位置"
"home": "首页"
"contactUs": "联系我们"
    correspondingen-us/default.yml:
    
"yourLocation": "Your Location"
"home": "Home"
"contactUs": "Contact Us"
  2. Used in the templatetrTags:In the template file, you can use{% tr "键名" %}Call the corresponding translation text. “`twig