How to achieve multi-language content switching and display in AnQi CMS?

Under the wave of global content marketing, website support for multiple languages has become an indispensable function.AnQiCMS (AnQiCMS) fully understands this need and provides a flexible multilingual solution to help us easily display content in different languages for users.This article will discuss in detail how to implement multi-language content switching and display in Anqi CMS.

Differentiate between system language and content language

Before delving deeper, we first need to clarify the concept of two 'languages' in AnQi CMS:

  1. System backend language package:This mainly affects the display language of the Anqi CMS backend management interface, as well as some system prompt information built into the website.For example, by selecting the "Default language package" (such as Chinese, English) in the "Global feature settings", the backend interface and some system messages will switch accordingly.This will not change the language of the articles, products, or categories, etc., of the user-generated content you create.
  2. Front-end content language:This is what we usually refer to as the core of a multilingual website, which refers to the language versions of the actual content displayed to visitors on your website, such as articles, product descriptions, and category names.The AnQi CMS mainly carries different language contents through 'multi-site' or 'independent content management'.

Understood these two points, we can then start planning and implementing a multilingual website.

Core implementation methods: multi-site strategy and template layer translation

The core strategy of AnQi CMS to implement multilingual content switching is to create an independent "site" (which can be understood as an independent content management unit) for each language, and complement it with static text translation and language switching functions at the template layer.

1. Deploy and configure multilingual sites

Assuming you need to support both Chinese and English languages, you can set up an independent "site" for each language through the "Multi-site Management" feature of Anq CMS. This means that:

  • An independent domain name or subdomain:For example,www.yourdomain.comFor Chinese content,en.yourdomain.comFor English content.
  • Independent backend management:Each language site has its own backend for managing the content of that language.
  • Independent database and content:The content of Chinese sites is stored in their own database, and the content of English sites is also stored in their own database, with no impact on each other.

Overview of operation steps:

  1. Prepare the environment:Ensure that your server is installed with AnQi CMS and the runtime environment supports multi-site (such as Go project deployment under Baota panel).
  2. Add reverse proxy (if needed):If you use different domain names or subdomains for each language site, it may be necessary to configure reverse proxy on the web server (Nginx/Apache) to direct different domains to the same listening port of the Safe CMS (for example, 8001), and use the multi-site feature to differentiate.
  3. Create a new site in the AnQi CMS backend:
    • Log in to your main site backend.
    • Go to "Multi-site Management", click "Add New Site".
    • Enter detailed information for the new site, including:
      • Site Name:For example "English site"
      • Website address:Enter the corresponding English domain name, such ashttps://en.yourdomain.com
      • Database name:It is recommended to use a unique name related to the language, such asen_anqicms_com
      • Admin account password:Set up an independent backend management account for the language site.
      • Select the template to use:Can use the same or different templates for different language sites.

Repeat this process to create independent secure CMS sites for each language that needs to be supported.

2. Content creation and management

After creating each language site, the next steps become intuitive:

  • Log in to the backend of the corresponding site:For example, to manage English content, you need to log in:en.yourdomain.com/system/.
  • Create content independently:Create and publish articles, products, single pages, and categories independently in each language site.This means that the translated version of a Chinese article needs to be published as a new article on an English site.Although the workload will increase, this separation of management ensures high flexibility and independence of content.

3. Implementation of the front-end language switch button

We can take advantage of the Anqi CMS template to provide language switching functionality on the website front-end, allowing users to conveniently switch between different language versions.{% languages %}.

This tag can retrieve the list of all configured multilingual sites and provides information such as the name, code, icon, and link of each language site.

Sample code (usually placed in the header or footer of a website):

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

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

4. Translation of template static text

In addition to dynamic content, there are many fixed texts in web templates that do not change with the article, such as navigation menu items, footer copyright information, form labels, etc. For these static texts, AnQi CMS provides{% tr %}Translate labels andlocalesTo implement multilingual support in the catalog.

Operation steps:

  1. Createlocalesdirectory:Create a folder named under the root directory of the template you are currently using.locales.

  2. Create a language configuration file:InlocalesUnder the directory, create a subdirectory for each language, and create it in this subdirectorydefault.ymlfiles for each language. For example:

    • template/your_theme/locales/zh-cn/default.yml
    • template/your_theme/locales/en-us/default.yml

  3. Edit the language configuration file:Indefault.ymlIn the file, define the translation content in key-value pairs.

    zh-cn/default.ymlExample:“`yml “yourLocation”: “Your Location” “contactUs”: “Contact Us” “