How to set multi-language support in AnQiCMS and provide language switching options on the front-end page?

Today, with the deepening of globalization, multilingual support for websites is no longer an option, but a key factor for enterprises to expand into international markets and enhance user experience.AnQiCMS fully considers this requirement, providing users with a flexible and powerful multilingual solution to ensure that your content can reach users worldwide and provide a friendly browsing experience in different cultural contexts.

The core strategy of AnQiCMS for implementing multi-language functionality is to treat each language as an independent 'site' for management, and by combining translation mechanisms at the template level, as well as front-end friendly language switching features, to jointly build a complete multi-language system.This means that you can set different domain names or subdirectories for different language versions of the website, and also manage the content of each language in detail, providing visitors with convenient language switching options.

Backend Configuration - Lay the foundation for multi-language support

To build a website that supports multiple languages, you first need to start the configuration from the AnQiCMS backend management system, which mainly involves multi-site management and language package settings.

In AnQiCMS, a multilingual site usually means that you need to configure an independent website instance for each language version.This multi-site management mode allows you to set up independently for different language versions of content, domains, and even themes, thus ensuring the maximum flexibility and maintainability.To start configuring multilingual sites, you first need to go to the 'Multi-site Management' feature in the AnQiCMS backend and add a new site here.www.yourdomain.comEnglish site usageen.yourdomain.com),an independent site root directory (used to store the cache and specific data of the language site), as well as the corresponding database information.So, each language site has its independent and isolated runtime environment, ensuring clear data and configuration.

To ensure that the system prompts and built-in texts on each language site can be displayed correctly, you can go to the "Global SettingsHere, you can choose built-in Chinese, English, or other supported language packages for the current site.Please note that the language package set here mainly affects the AnQiCMS system's backend interface, system prompt messages, and some built-in frontend component text.It does not automatically translate the articles, product descriptions, and other user-generated content you post, which need to be completed through subsequent site content management and template translation.

Front-end implementation - Create a seamless switching experience

After completing the basic background settings, the next step is to implement the true multi-language content display and language switching function on the website's frontend page, which cannot be separated from the template tags and file structure provided by AnQiCMS.

Implement multilingual support in the front-end template, AnQiCMS has introducedlocalesmechanism and{% tr %}Translate label.This allows you to centrally manage and translate all static text in the template (such as navigation menu items, button text, copyright statements, etc.).localesFolder, and create a subfolder for each language corresponding to it (such aszh-cn/en-us)。Inside each language folder, create a translation file in YAML format (for exampledefault.yml),which defines the translation content in key-value pair form. For example, inzh-cn/default.ymlYou can define in Chinese\"yourLocation\": \"您的位置\",while inen-us/default.ymlthere is defined\"yourLocation\": \"Your Location\". In the template, when you need to display this text, you just need to use{% tr \"yourLocation\" %}标签,AnQiCMS will automatically load and display the corresponding translation text based on the language settings of the current site, thereby avoiding the麻烦 of copying a set of template files for each language.

To enable visitors to switch between different language versions conveniently, AnQiCMS provides a powerful{% languages %}Label.This label can automatically retrieve all the multi-language site information you have configured, including their language names, link addresses, and even corresponding emojis or icons.You can use this tag to build a dynamic language switch menu at prominent positions such as the header or footer of the website.

In the template, by iterating over{% languages %}Tag returnswebsitesCollection, you can easily create a link for each language site. Eachitemwill include such asitem.Link(pointing to the URL of the language site),item.LanguageName(Language name, such as “Simplified Chinese”, “English”)、item.LanguageEmojioritem.LanguageIcon(Fields for displaying language flags or symbols) etc., convenient for you to customize the style of the switch button.

For example, a simple switch code may look like this:

English

<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 %}

{%- endif %} {%-