How to implement quick multilingual switching of template content with translation tags in AnQiCMS?

As a senior operator of AnQiCMS (AnQiCMS) website, I am well aware of the core status of content in website operation, especially under the wave of globalization, the rapid switching of multilingual content is crucial for user experience and market expansion. AnQiCMS provides a powerful and concise multilingual support mechanism, the core of which lies in the flexible use of translation tags{% tr %}To implement the rapid multilingual switching of template content.

The foundation of AnQiCMS multilingual support

One of AnQiCMS's design concepts is to support multi-language content switching and display, aimed at helping enterprises seamlessly expand into international markets and allowing content to directly reach users of different languages.The ability to implement this global layout is reflected in the exquisite design of the template engine and the flexible configuration of the backend management system.By linking the fixed text in the template with an independent language package, AnQiCMS achieves fast dynamic translation of front-end content, greatly enhancing the adaptability and user experience of the website.

Core mechanism: translation tags{% tr %}

In AnQiCMS, the core tool for implementing template content multilingual switching is the translation tag{% tr %}. This tag is used to replace the hard-coded text in the template with the translated text defined in the language package. Its usage is intuitive and efficient:{% tr "你的翻译键" %}.

When the system parses to a{% tr "someKey" %}When labeling, it will check the language setting of the current website, look up the entry named "someKey" in the corresponding language package file, and output its value.This mechanism decouples the template structure from specific language content, making it exceptionally simple to maintain and update content for multiple language versions.

Build multilingual template file: Locales directory structure

In order to{% tr %}The label works normally, we first need to prepare translation files for different languages.AnQiCMS uses a clear directory structure to manage these language files.localesfolder. In thislocalesInside the folder, create a subfolder for each supported language, the folder name is usually the language code (for example,en-usRepresents American English,zh-cnRepresents Simplified Chinese). One can create one or more.ymllanguage package files in the format ofdefault.yml.

A typical multilingual file structure may look like this:

./locales
├── en-us
│   └── default.yml
├── ja
│   └── default.yml
└── zh-cn
    └── default.yml

default.ymlThe translation content is defined in the form of key-value pairs within the file. For example, inzh-cn/default.ymlwe may have:"yourLocation": "您的位置", and inen-us/default.ymlcorrespondingly written as:"yourLocation": "Your location". This way, when the template calls{% tr "yourLocation" %}When, the system will automatically load and display "Your location" or "Your location" based on the current language settings.

Backend language package settings and frontend switching

AnQiCMS's backend provides a 'default language package' setting, located in the 'Global Function Settings'.The administrator can select the default language of the website here, such as Chinese or English.This setting will affect the built-in display information of the system, ensuring that the background interface and some system-level prompts are displayed in the selected language.{% tr %}Content defined by tags, its switching mechanism is more dynamic.

To allow visitors to choose the language independently, we need to add language switching functionality in the frontend template.{% languages %}The tag provides convenience. By using this tag, we can retrieve the list of all configured multilingual sites and generate a switch link for each language. For example:

{%- languages websites %}
{%- if websites %}
<div>
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" />
        {%- else %}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

When the user clicks on these links, the website will load the corresponding language version of the page, at this time{% tr %}The label will be based on the new language setting, extracted and displayed from the corresponding language package file, thus realizing the rapid multi-language switching of template content. Moreover,{% languages %}Labels also support generationhreflangProperties, this is crucial for international SEO, as it helps search engines understand the content of different language versions of web pages and improve the visibility of the site globally.

Summary

AnQiCMS passes{% tr %}Translate tags and structured language package files are combined with the background language settings and{% languages %}The front-end switch function provides a complete and efficient template content multilingual switch solution.This design not only achieves the separation of template and content, simplifies the maintenance work of multilingual websites, but also ensures that users can obtain a smooth and consistent experience when switching between different language versions, laying a solid foundation for the globalization of website operations.

Frequently Asked Questions (FAQ)

1.{% tr %}Can tags only translate fixed text in templates? How can article content be displayed in multiple languages? {% tr %}The label is mainly used to translate the fixed text that is hard-coded in template files and does not change with the content of the article, such as navigation menu items, button text, auxiliary information of page titles, etc.For multi-language display of dynamic content such as articles or products, AnQiCMS usually achieves this through the multi-site management feature.{% tr %}Tags handle the translation of fixed text in templates.

How to ensure that the page URL also changes when the multilingual switch is made, for the benefit of SEO?AnQiCMS's multilingual site management and pseudo-static rules are well integrated. When you go through{% languages %}When creating language switch links, each link will point to the URL of the corresponding language site. At the same time, the system supports configurationhreflangTags({% languages websites %}{% for item in websites %}<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">{% endfor %}{% endlanguages %}This helps search engines understand the relationship between different language versions of pages, thus optimizing international SEO performance.

3. If the translation key is missing in the language package file,{% tr %}How will the tag perform?If{% tr "yourKey" %}The translation key corresponding to the tagyourKeyIn the current language,.ymlIf the file does not exist, AnQiCMS will usually default to displaying the key name itself (i.e.,yourKey)， or reverting to the default language translation in specific configurations.This reminds us that when adding new translation keys, we must ensure that all target language language package files contain the corresponding translations to avoid untranslated key names.