How to implement the function of displaying and switching content in multiple languages?

Let your website go global: Multilingual content strategy and implementation of Anqi CMS

In today's globalized digital age, many businesses and content creators hope that their websites can reach a wider audience.This means providing multiple language content display and switching functions to meet the reading habits of users from different countries and regions.AnQiCMS (AnQiCMS) is an efficient content management system that fully considers this requirement, providing a flexible solution to help you easily implement multi-language functionality on your website.

In Anqi CMS, implementing multilingual display and switching of content is not just a simple option ticked in the background, but rather a strategic layout that combines the three core pillars of system-level language packages, template layer translation, and multi-site management.Understanding how these three work together is the key to building a multilingual website efficiently.

Firstly, we need to clarify a concept: Anqi CMS distinguishes between "system interface language" and "user content language" when handling multilingualism.The system interface language mainly refers to the back-end operation interface, certain built-in prompts, etc.The user content language refers to the articles, product descriptions, single pages, and so on that you actually publish on the website.Implement multilingual, detailed deployment is required at these two levels.

Plan multi-site: the cornerstone of multilingual content

Creating a separate site for each target language is the core strategy recommended by Anqi CMS. This means that if you want your website to support both Chinese and English, you will have a Chinese main site (such aswww.yourdomain.comAnd an English sub-site (for example)en.yourdomain.comorwww.yourdomain.com/en/). These sites, although they share the powerful core functions of the security CMS, are independent in content management.

The advantage of this mode is:

• Content independent management:Each language content can be independently published, edited, and optimized to avoid confusion between different language contents.
• SEO friendly:A standalone site structure or subdirectory is beneficial for search engines to distinguish between different language versions and tohreflangindex tags accurately.
• Flexible configuration:Each language site can have an independent domain, static rules, template style, and even SEO settings to better adapt to the local market.

In the Anqi CMS backend, you can create and configure these independent language sites through the 'Multi-site Management' feature, including specifying different website addresses for each site, an independent database (if needed), and the template used.

Backend configuration: Set default language package (interface)

AnQi CMS provides built-in language package support, currently including Chinese and English, etc.You can find the 'Default Language Pack' option in the 'Global Function Settings' on the backend.Here you can select the corresponding language, which will affect the built-in prompts of the website and the display language of some system messages.

It should be noted that this setting mainly targets system-level text and will not automatically translate the articles, products, or categories you publish into the language of your choice.User-generated content multilingual management will be implemented through multi-site methods.

Template level: Translate static text

Web templates often contain some fixed text, such as the "Home", "About Us", "Contact Us" on the navigation bar, as well as copyright information in the footer, and sidebar titles, etc. These static texts are translated through AnQi CMS.{% tr %}Tags andlocalesDirectory structure to manage.

First, create a folder named under your template directory.localesThe folder. Inside this folder, create a subfolder for each language, named after the language code, for examplezh-cnand Simplified Chineseen-usAmerican English). Create one in each language folder.default.ymlfile.

For example,locales/zh-cn/default.ymlMay include:

"yourLocation": "您的位置"
"homePage": "首页"
"aboutUs": "关于我们"

Andlocales/en-us/default.ymlIt may correspond to:

"yourLocation": "Your Location"
"homePage": "Home"
"aboutUs": "About Us"

You can use these texts where you need to use them in the template.{% tr "键名" %}Tag to call. For example:

<a href="/">{% tr "homePage" %}</a>
<p>{% tr "yourLocation" %}</p>

When the user visits a site in a different language, the system will automatically load the correspondingdefault.ymlfile and display the translated text.

Content level: publishing and managing multilingual content

As previously mentioned, the content published by users in Anqi CMS (articles, products, single pages, etc.) is bound to specific sites. This means that if you have a Chinese site and an English site:

• Post and manage all Chinese articles, products, and pages on the Chinese site.
• Post and manage all English articles, products, and pages on the English site.

In this mode, the content of different languages is completely independent. You can write different copy for each language market, and carry out independent SEO optimization.For example, Chinese articles may focus more on Baidu SEO, while English articles may focus more on Google SEO.

Front-end display and switching: language selector and SEO optimization

To make it easy for users to switch between different language versions and to optimize search engines' understanding of multilingual content, AnQi CMS provides{% languages %}Label. This label can help you build a language switcher and automatically generatehreflang.

Build a language switcher:You can use it in prominent positions on the website header or footer,{% languages %}Label to traverse all configured language sites and generate switch links:

{%- languages websites %}
{%- if websites %}
<div>
    <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 %}
</div>
{%- endif %}
{%- endLanguages %}

This code will generate a list of all language site links, and you can freely design its style according to your needs, such as displaying language names, flag icons, or Emoji expressions.

Hreflang tag SEO optimization:To inform search engines that your website has multiple language versions and they are interconnected, you need to add in the HTML's<head>Area additionhreflang.{% languages %}Tags can also automatically complete this task for you:

{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}

This way, search engines can accurately identify the different language versions of your website, and guide users to the most suitable language page for them, thereby improving the SEO performance in the international market.

By following these steps, Anqi CMS provides you with a comprehensive and flexible multilingual solution. Whether you are a small and medium-sized enterprise, a self-media operator, or a user who needs to manage multiple sites, you can efficiently achieve multilingual display and switching of content, helping your website go global.

Frequently Asked Questions (FAQ)

1. Why does AnQi CMS recommend creating a separate site for each language to manage content?Establishing independent sites (or subdomains/subdirectories) for each language is a universally accepted practice in the industry and one of the core design concepts of AnQi CMS.The benefits are multifaceted: it allows you to create content independently for different language versions, SEO optimization, and marketing strategies, avoiding content confusion, and improving website maintenance efficiency.For example, you can provide fully localized content and user experience for German-speaking users without worrying about content interference with English users.

2. How to translate static text such as "About Us", "Contact Information", etc. in templates, in addition to user-generated content like articles, products, etc.For fixed static text in the template, you can use{% tr %}the (translate) tag to combinelocalesmanage YAML files under the directory. Just inlocalesCreate a folder for the corresponding language in the directory anddefault.ymldefine key-value pairs in the file, then use the template to go through{% tr "键名" %}Reference it. So that when the user switches the language site, these static texts can also be translated and displayed accordingly.

3. In the "Global Function Settings", the "Default Language Package" and{% tr %}What are the differences between tags? How do they work together?The default language package mainly controls the interface language and built-in prompt information of the Anqi CMS system itself, such as the text in the background management interface.It sets the default system interaction language, which does not have a direct impact on the content of the articles you publish. And{% tr %}Tags are used to translate the static text that you manually write in the website front-end template (such as