How to implement multi-language content switching and display in AnQiCMS template?

In today's digital world, your website may need to be accessible to global users.AnQiCMS fully understands this requirement and provides powerful multilingual support features, allowing you to easily build and manage multilingual websites, thereby better serving users in different countries and regions.How can I implement the switching and display of multilingual content in the AnQiCMS template?Let's explore step by step.

Understanding AnQiCMS' multilingual mechanism: processing two types of 'languages'.

In AnQiCMS, we need to distinguish between two types of 'language' content:

1. Built-in and template static text:This includes prompt information on the background management interface, fixed navigation items in templates (such as "Home", "Contact Us"), footer copyright statements, and so on, which usually do not change with the articles published by users.
2. User posted content:This refers to your articles, products, single pages, category descriptions, and other dynamic content, which are the core information of the website.

AnQiCMS provides different handling methods for these two types of content to ensure flexibility and management efficiency.

Implement the switching and display of built-in system and template static text.

In order to allow the interface elements of your website to switch languages according to the user's choice, AnQiCMS has introduced the language package and translation tag mechanism.

Firstly, you need to create a folder namedlocalesin the template directory. In this folder, you can create a subfolder for each supported language, such aszh-cn(Simplified Chinese),en-us(English) and so on. A language subfolder is created within each language folder.default.ymlfile.

For example, the directory structure may be as follows:

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

Inen-us/default.ymlIn the file, you can define the translation content in this way:

"homePage": "Home"
"contactUs": "Contact Us"
"yourLocation": "Your Location"

and in thezh-cn/default.ymlIn English, the corresponding content is:

"homePage": "首页"
"contactUs": "联系我们"
"yourLocation": "您的位置"

In your template file (for exampleheader.htmlorindex.htmlYou can use it in the{% tr "key" %}Translation tags are used to display this static text. For example:

<nav>
    <a href="/">{% tr "homePage" %}</a>
    <a href="/contact.html">{% tr "contactUs" %}</a>
</nav>
<p>{% tr "yourLocation" %}</p>

When the user switches to a different language, AnQiCMS will automatically load the correspondingdefault.ymlfile and display the corresponding translated text.

In addition, you can find the 'Default Language Pack' option in the 'Global Function Settings' on the AnQiCMS backend.You can set the language of the current site's backend interface and built-in prompts, for example, choose 'Chinese' or 'English'.Please note that this setting mainly affects the system's own language environment and will not directly change the language of the articles, categories, and other user-generated content in your templates.

Implement user content management and display

For articles, products, single pages, and other core content, AnQiCMS's design philosophy is to achieve independent management and display of multilingual content through the "multi-site management" feature. This means that you usually set up an independent site for each language, such as:

• www.yourdomain.com(Chinese site)
• en.yourdomain.com(English site)
• fr.yourdomain.com(French site)

This method has several significant advantages:

• Content independence:Each language content is completely independent, convenient for management and update, and avoids confusion.
• SEO friendly:Each language version has an independent URL structure, which is beneficial for search engines to crawl and rank different language content, and it is also convenient for configurationhreflang.
• Flexibility:Sites in different languages can even use different template designs to adapt to specific cultural or market needs.

In the 'Multi-site Management' section of the AnQiCMS backend, you can easily add these independent language sites.Each site will have its own content, categories, tags, and even administrator accounts.This means that you need to independently publish and manage articles, products, and other content in each language site.This may mean that you need to enter and translate the content repeatedly, but it brings **flexibility and maintainability.

Provide a language switcher in the template.

To make it convenient for users to switch between different language versions, you need to add a language switcher in the template. AnQiCMS provides{% languages websites %}tags to get the list of all configured multilingual websites.

You can add the following code snippet to the header or footer of the template to switch languages:

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

This code will iterate through all the configured language sites and generate links for each site with language name, icon, or Emoji.Users click on these links to jump to the corresponding language site.

In addition, to better internationalize SEO, it is strongly recommended that you specify the corresponding language version of the current page in each page.<head>Area additionhreflangTag, indicating the other language version corresponding to the current page. This can be achieved in the following way:

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

hreflangThe tag tells search engines that your website has multiple language versions and specifies the URL of each version, which is crucial for avoiding duplicate content issues and guiding users to the correct language version page.

Summary

AnQiCMS distinguishes between system-built text and user-generated content, providing a flexible and efficient multilingual solution. It utilizeslocalesTable of contents and{% tr %}The tag can easily handle the translation of static text in templates, and combined with the powerful "Multi-site Management" feature, it can build clear and independent language versions of your core content website. Accompanied by the language switcher in the template andhreflangLabel, your AnQiCMS website will be able to seamlessly serve global users, helping your business go international.

Frequently Asked Questions (FAQ)

Can I provide multiple language versions for an article on the same AnQiCMS site?

The core design concept of AnQiCMS is to use multi-site management for multilingual content. This means that, in most cases, you would create an independent site for each language (for exampleen.yourdomain.comandfr.yourdomain.comThen publish articles in that language at each site.Although it is possible to hardcode multiple language texts in the same article content field and display them through frontend logic, this is not recommended as it makes content management complex and不利于 SEO.The multi-site mode provides a clearer, more maintainable solution.

How to ensure the SEO effect of a multilingual website?

Firstly, providing a separate URL for each language (such as through subdomains or subdirectories) is fundamental. Secondly, be sure to have each page<head>area.hreflangLabel, clearly inform the search engine of the other language versions and corresponding URLs.Ensure that each language version of the content is high quality and unique, avoiding simple machine translation.At the same time, conduct keyword research and localization content optimization for different target language markets, and configure independent TDK (title, description, keywords) and pseudo-static rules in each language version.

3. Can I translate a few fixed words on my website without setting up a full multilingual site?

Absolutely. If you only need to translate a few fixed words in the template, and the user's core content (articles, etc.) is still in a single language, then you just need to use{% tr "key" %}Translate labels andlocalesThe language package mechanism is sufficient. You can only create language package files containing these fixed word translations (for exampleen-us/default.yml), and use them in the template.