How to perform multilingual translation for specific text in the AnQiCMS template?

As an experienced website operation expert, I know that in the context of globalization, the multilingual ability of a website is crucial for expanding the market and improving user experience.AnQiCMS as an efficient and flexible content management system, naturally also provides strong support in this regard.Today, let's delve into how to implement multilingual translation for specific, static text content in the AnQiCMS template.

AnQiCMS template multilingual translation guide: easily achieve text internationalization

In the digital age, a website that can support multiple languages is undoubtedly a key to businesses reaching global users and expanding their brand influence.AnQiCMS with its concise and efficient architecture, provides the possibility of international promotion for small and medium-sized enterprises and content operation teams.Especially for the fixed content in the template, such as navigation menu items, button text, form prompts, etc., AnQiCMS provides a直观而强大的多language translation mechanism, allowing your website to easily speak multiple languages.

AnQiCMS' "Multilingual Support" is not just a concept, it is one of the core features aimed at helping users expand into international markets and directly face users of different languages.However, we need to distinguish an important concept: AnQiCMS's 'Multi-site Management' feature is often used to build websites in different languages, each managing articles, products, and other dynamic content in their respective languages.{% tr %}Where to use translation tags.

AnQiCMS supports built-in language packages (just like itsv2.1.1As described in the update log), it allows you to create translation files for specific text in the template and switch them in the website background.This not only makes your website interface more internationalized, but also greatly enhances the localization experience of users.

Detailed steps: Add multilingual support for specific text in the template

To provide multilingual translation for the static text in the AnQiCMS template, you mainly need to complete the following steps: set up the website language package, prepare translation files, and use translation tags in the template.

First step: Set the default language package of the website

AnQiCMS backend "Global Function Settings" provides an option called "Default Language Pack".This setting determines the system's built-in prompts and which language translation file will be loaded first when your template does not specify a language explicitly.For example, if you select 'English' as the default language package, the system will try to load the English translation file.Remember, this setting affects the entire system, and in the case of multi-site deployment scenarios, each site can be independently configured in its own backend.

Second step: Create and manage language translation files

The translation mechanism of AnQiCMS relies on a specific file structure. You need to create a subdirectory named under your template directory (usually/template/[您的模板名]/),locales. In thislocalesIn the directory, you need to create a separate folder for each target language, and the folder name should use the standard language code (such as,zh-cnrepresenting Simplified Chinese,en-usrepresenting American English,jaRepresents Japanese and so on).

Inside each language folder, you need to create adefault.ymlFile. This YAML formatted file will contain key-value pairs, where the "key" is the unique identifier you use in the template, and the "value" is the corresponding translation text in that language.

For example, if you want to translate the text "Your location":

1. InlocalesCreate in the directoryzh-cnFolder, and create within itdefault.yml:

   
   # /template/[您的模板名]/locales/zh-cn/default.yml
   "yourLocation": "您的位置"
   

2. InlocalesCreate in the directoryen-usFolder, and create within itdefault.yml:

   
   # /template/[您的模板名]/locales/en-us/default.yml
   "yourLocation": "Your Location"
   

It is worth noting that all thedefault.ymlFiles should be saved with UTF-8 encoding to ensure correct character display in different language environments and to avoid garbled characters.

Step 3: Use in the template.{% tr %}Tag

After completing the preparation of the translation file, you can now use it in your AnQiCMS template{% tr %}The label is used to reference these translation texts. This label is very intuitive, as it automatically searches and displays the corresponding translation content based on the current language setting of the website.

Assume you have an area in the template that displays the user's current location, and you want it to switch the display of "Your Location

<div class="user-location">
    <span>{% tr "yourLocation" %}：</span>
    <span>{{ current_page_path }}</span> {# 假设这里是一个动态获取的页面路径 #}
</div>

When your website language is set to Simplified Chinese,{% tr "yourLocation" %}The translation will be "Your Location"; when the language is switched to English, it will display "Your Location".The AnQiCMS template engine will automatically match the corresponding key and language file to achieve seamless switching.

Step 4: Build a multilingual switcher and Hreflang tags (advanced application)

To allow users to freely switch website languages and optimize international SEO, you can further utilize the features provided by AnQiCMS{% languages %}The tag can list all the multi-language site information that has been configured, making it convenient for you to build a language switch menu and provide Hreflang information to search engines.

Build a language switcher:

At a suitable position in the template (such as the header or footer), you can add the following code to create a simple language switch menu:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" title="{{item.LanguageName}}">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}图标" />
        {%- else %}
        {{item.LanguageEmoji}} {# 如果没有图标，可以使用Emoji表情 #}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

This code will traverse all configured language sites and generate a link for each site, so that users can click to switch to the corresponding language website.

Add Hreflang tags:

To help search engines understand the content of your website for different languages or regions, it is recommended to add on each page's<head>the tag withhreflangProperties. This helps to avoid duplicate content issues and ensures that the correct language version is displayed to the correct users.

<head>
    {# ... 其他head内容 ... #}
    {%- languages websites %}
    {%- for item in websites %}
    <link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
    {%- endfor %}
    {%- endlanguages %}
</head>

item.Linkwill provide the URL of the corresponding language site,item.LanguageThen provide the language code, the search engine will judge accordingly.