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

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

Differentiate system language and content language

Before delving into the details, we first need to clarify the concept of two 'languages' in the security CMS:

  1. System backend language package:This mainly affects the display language of the security CMS background management interface, as well as some built-in system prompts on the website.For example, by selecting the "Default Language PackThis will not change the language of the articles, products, or categories you create, etc., which are user-generated content.
  2. Front-end content language:This is the core of what we usually call a 'multilingual website', which refers to the language version of the actual content displayed to visitors on your website, such as articles, product descriptions, category names, etc.The Auto CMS mainly carries different language content through "multi-site" or "independent content management.

Understood these two points, we can then proceed to plan and implement a multilingual website.

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

The core strategy of Anqi CMS for multi-language content switching is to create an independent 'site' (which can be understood as an independent content management unit) for each language, and supplement it with static text translation and language switching features at the template layer.

1. Deploying and Configuring Multilingual Sites

If you need to support both Chinese and English languages, you can set up an independent "site" for each language by using the "Multi-site Management" feature of Anqi CMS. This means:

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

Overview of the operation steps:

  1. Prepare the environment:Ensure that your server is installed with Aqara CMS and the running environment supports multi-site (such as Go project deployment under Baota panel).
  2. Add reverse proxy (if necessary):If you use a different domain or subdomain for each language site, you may need to configure reverse proxy in web servers (Nginx/Apache), pointing different domains to the same listening port of Anqi CMS (e.g., 8001), and use the multi-site feature for differentiation.
  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”.
    • Fill in the details 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
      • Administrator account password:Set up an independent backend management account for the language site.
      • Select the template you want to use:Can be used for sites in different languages with the same or different templates.

Repeat this process to create independent security CMS sites for each language that needs support.

2. Content creation and management

Create each language site and the subsequent work becomes intuitive:

  • Log in to the backend of the corresponding site:For example, to manage English content, you need to log inen.yourdomain.com/system/.
  • Create content independently:Create and publish articles, products, single pages, and categories independently for each language site.This means that a translation 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 the content.

3. Implementation of the front-end language switching button

To provide language switching functionality on the website frontend, allowing users to easily switch between different language versions, we can make use of the Anqi CMS template.{% languages %}Label.

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.

Example 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 the 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 the website template 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 tags andlocalesThe catalog to implement multilingual support.

Operation Steps:

  1. CreatelocalesDirectory:Create a directory 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 createdefault.ymlfiles here. 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, translation content is defined in the form of key-value pairs.

    zh-cn/default.ymlExample:“`yml “yourLocation”: “English location” “contactUs”: “Contact us” “