How to set up multilingual 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 to enterprises expanding into international markets and enhancing user experience.AnQiCMS has fully considered this requirement and provided users with a flexible and powerful multilingual solution to ensure that your content can reach users around the world and provide a friendly browsing experience in different cultural contexts.

The core strategy of AnQiCMS in implementing multilingual functionality is to treat each language as an independent "site" for management, and to build a complete multilingual system by combining template-based translation mechanisms and user-friendly language switching features.This means that you can not only set different domain names or subdirectories for different language versions of your website, but also manage the content of each language in detail and provide visitors with a convenient language switching entry.

Background configuration - Laying the foundation for multilingualism

To build a website that supports multiple languages, you first need to start configuring 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 a separate website instance for each language version.This multi-site management mode allows you to independently set content for different language versions, domain names, and even theme styles, thus ensuring maximum flexibility and maintainability.To start configuring a multilingual site, you first need to enter the 'Multi-site Management' feature in the AnQiCMS backend and add a new site here.When adding a new site, you need to specify a unique domain for each language version (for example, the Chinese site useswww.yourdomain.comEnglish site usageen.yourdomain.com), a separate site root directory (used to store the cache and specific data of the language site) as well as the corresponding database information.This way, each language site has an independent and isolated running environment, ensuring clear data and configuration.

To ensure that the system prompts and built-in text on each language site are displayed correctly, you can go to the "Global Settings" area of the AnQiCMS backend and find the "Default Language Package" option.Here, you can choose the built-in Chinese, English, or other supported language packs for the current site.Please note that the language package here mainly affects the backend interface, system prompts, and some built-in frontend component text of the AnQiCMS system.It will not automatically translate the articles, product descriptions, and other user-generated content you post. These contents need to be translated through subsequent site content management and template translation.

Front-end implementation - Create a seamless switching experience

After completing the basic backend 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 in front-end templates, AnQiCMS introducedlocalesmechanism and{% tr %}Translation labels. This allows you to centrally manage and translate all static text in the template (such as navigation menu items, button text, copyright statements, etc.)You need to create one in the root directory of the templatelocalesfolder, and create a corresponding subfolder for each language (such aszh-cn/en-usEach language folder should contain a YAML translation file (for exampledefault.yml), which defines translation content in key-value pairs. For example, inzh-cn/default.ymlyou can define\"yourLocation\": \"您的位置\", and inen-us/default.ymldefine\"yourLocation\": \"Your Location\".In the template, when you need to display this text, just use{% tr \"yourLocation\" %}Label, AnQiCMS will automatically load and display the corresponding translated text based on the current site language settings, thus avoiding the麻烦 of copying a set of template files for each language.

To allow visitors to easily switch between different language versions, AnQiCMS provides a powerful{% languages %}The tag can automatically retrieve all the multilingual 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 in a prominent location such as the header or footer of the website.

In the template, by looping through{% languages %}the tags returned bywebsitesSet, 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., making it convenient for you to customize the style of the toggle button.

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

`twig {%- languages websites %} {%- if websites %}

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