How to configure the multi-language feature of AnQiCMS to ensure correct switching and display of content on the frontend?

AnQiCMS as an efficient and customizable content management system, provides strong multilingual support, helping websites to target global users.To effectively configure and use this feature, ensure that the content can be correctly switched and displayed on the frontend, we need to make detailed adjustments step by step from the backend to the frontend template.

Core Concept: Understand the multi-language management method of AnQiCMS in English

When using the multi-language function of AnQiCMS, an important core concept is: it does not provide an automatic translation feature, but rather managescontents in different language versionsTo implement multilingual support.This means that you need to create and maintain a separate set of content (articles, products, pages, etc.) for each target language, and provide corresponding translation files for static text.The system will display the corresponding language version of content and interface text when the user switches languages.

From a technical implementation standpoint, AnQiCMS usually treats each language version as an independent 'site', managed and configured in the background to achieve isolation of content and settings.

Step 1: Basic Backend Configuration and Content Preparation

Firstly, ensure that your AnQiCMS environment is ready for multilingual support.

  1. Set default language packageIn AnQiCMS backend, you will find a 'Default Language Pack' option in the 'Global Feature Settings'.Here you can set the default language for the current site.This setting mainly affects the display of built-in text information (such as background interface prompts, certain default system messages, etc.) on the current site.For example, if your Chinese site needs to display some system messages in Chinese, here you should select "Chinese".For your English site, select "English".

  2. Create and Configure Language Version SitesThe multi-language implementation of AnQiCMS often relies on its powerful 'Multi-site Management' feature. To support multiple languages, you need to create an independent site for each language version.

    • Created through multi-site management:In the "Multi-site Managementwww.yourdomain.com，English site usesen.yourdomain.com），or configure subdirectories through reverse proxy configurationwww.yourdomain.com/en/).
    • Site root directory and database：Ensure that an independent "site root directory" and "database name" are configured for each language site to achieve physical isolation and management of content. If you are using Docker deployment, the site root directory is typically set to/app/Start, it is also recommended to distinguish the database name according to the language, for exampleyourdomain_com_cnandyourdomain_com_en.
    • Default language package settings:When creating each language site, or in each site's 'Global Feature Settings', set the corresponding language for the 'Default Language Pack' respectively, for example, select 'English' for an English site.

  3. Enter and manage multilingual contentThis is a key step in the operation of a multilingual website.You need to enter and manage content separately under each language version site.For example, publish Chinese articles on Chinese sites and corresponding English articles on English sites.

    • Documents, categories, tags, etc:Whether it is an article, product, single page, or category, tag, it needs to be created and maintained under the corresponding language site.The association (such as the category of the article) should also be completed in their respective language environments.
    • Content model:If you use a custom content model, you also need to ensure that the configurations of these models and their fields are correct and consistent under each language version.

第二步：Front-end template implementation of multi-language switching and display

After the content is ready, the next step is to implement language switching and the correct display of content in the front-end template.

  1. Static text translation:localesDirectories andtrtagsFor the fixed text on the website interface (such as navigation menu items, copyright information, form prompts, etc.), AnQiCMS manages it through thelocalesDirectory andtr(translate) tag.

    • CreatelocalesDirectory:Under the template directory you are using, create a folder namedlocales.
    • Language folder:InlocalesInside the folder, create subfolders for each language, such aszh-CNRepresents Simplified Chinese,en-USRepresenting English.
    • Translation file:Create in each language subfolderdefault.ymlFile (or any other name you define), written in YAML format, with keys being the identifiers you use in the template and values being the translations in the corresponding language. For example,locales/zh-CN/default.ymlIn:
      
"yourLocation": "您的位置"
"contactUs": "联系我们"
      Inlocales/en-US/default.ymlIn:
      
"yourLocation": "Your Location"
"contactUs": "Contact Us"
    • UsetrTags:in your template file (such asheader.html,footer.htmletc.), use{% tr "键名" %}format to call the translated text. For example:<div>{% tr "yourLocation" %}</div>When the user visits the Chinese site, it will display "Your Location"; when visiting the English site, it will display "Your Location".

  2. Dynamic content display: Associated with the current site languageFor the articles, products, and other dynamic content you enter in the background, AnQiCMS will automatically load the corresponding language version based on the current visited 'language site'.

    • For example, when the user visitsen.yourdomain.comwhenarchiveList/categoryList/pageDetailsuch tags will automatically retrieve and display English content from the database of the English site. You do not need to specify any language parameters in these tags.
    • Ensure your template tags (such asarchiveList,categoryList) do not have fixedsiteIdparameters when called, so that they can automatically identify the current site's ID. Normally, these tags are not specifiedsiteIdWhen set, it will default to operate the current site's data.

  3. Front-end language switcherTo allow users to switch language versions freely, you need to add a language switcher in the frontend template. AnQiCMS provideslanguagestags to retrieve the list of all language sites.

    • UselanguagesTags: 
      
{%- languages websites %}
{%- if websites %}
<nav class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{ item.Link }}" {% if item.Nofollow == 1 %}rel="nofollow"{% endif %}>
        {%- if item.LanguageIcon %}
        <img src="{{ item.LanguageIcon }}" alt="{{ item.LanguageName }}" />
        {%- else %}
        {{ item.LanguageEmoji }}
        {% endif %}
        {{ item.LanguageName }}
    </a>
    {%- endfor %}
</nav>
{%- endif %}
{%- endlanguages %}
      This code will iterate through all the configured language sites and generate links to them. You can adjust the display style as needed, for example, using flag icons (LanguageIcon) or language codes (LanguageEmoji).

  4. SEO Optimization:hreflangtagsTo help search engines understand your multilingual content and display it to users in the correct language regions, add in each page,<head>tag.hreflangProperties are essential.

    • Inbase.htmlor in the page header:“`twig {%- languages websites %} {%- for item in websites %}{%-English%}