How to implement the multi-language content switching and front-end display of AnQiCMS website?

It is undoubtedly a crucial link in the construction of a global digital content platform.AnQiCMS (AnQiCMS) is a management system designed specifically for content operators, deeply understanding this field, providing comprehensive multilingual content switching and frontend display functions, aiming to help users efficiently expand into international markets and reach a wider audience.

AnQiCMS multi-language feature overview

AnQiCMS is developed based on the Go language, with its high efficiency, customizable and easy-to-expand features, it has become an ideal choice for small and medium-sized enterprises and content operation teams.One of its core advantages is the powerful multilingual support. This means that you can easily manage different language versions of the website interface, and also achieve seamless switching and display of content, allowing your content to directly target users of different languages, effectively helping enterprises to carry out multilingual promotion and global layout.

The backend is preparing: Starting the journey of multilingual content support

To enable multilingual content switching on the website, you first need to make the corresponding configuration and content preparation in the Anqi CMS backend.

Step 1: Configure default language package

A safe CMS provides the option for the "default language package" in the "global settings".This is the foundation of system-level language, which determines the display language of the background interface and some default system prompts.You can choose the appropriate language package according to the main operating language, such as Chinese or English.This setting is the starting point of the entire multilingual system.

Step 2: Plan for multilingual content versioning

The AnQi CMS allows you to flexibly manage multilingual content according to your actual needs. Although the system does not directly provide a "language version" field within individual content items (such as articles, products, pages), you can manage multilingual content in the following two common ways:

1. Implement multilingual content management through multiple site management： A key feature of AnQi CMS is its powerful "multi-site management" function. You can create an independent sub-site for each target language (for example,www.example.comUsed for Chinese,en.example.comorwww.example.com/en/Used in English). Each sub-site has its own database or data prefix, and can be configured with its own default language package and template.In this mode, you can create and publish content corresponding to each language sub-site, achieving completely independent content management.When the user switches language, it is actually jumping to the corresponding language sub-site.

2. By content model, customize fields to distinguish content： If you do not want to create a separate site for each language, another way is to add custom fields for different languages in the "content model". For example, for the "article" model, you can addTitle_en(English title),Content_en(English content) and other fields. When publishing content, editors need to manually fill in the fields for each language version. The front-end template needs to dynamically select the display based on the current language environment.TitleorTitle_enThis method has higher requirements for template writing and needs editors to manually maintain all language content.

The key is to clearly define the storage and management logic of each language content. For general users, using multi-site management is often a clearer and easier-to-maintain choice.

Front-end implementation: Allows users to easily switch languages

After the content is ready, the next step is to build a friendly language switch feature on the website front-end, and ensure that the search engine can correctly identify your multilingual pages.

Implement a language switcher

Adding a language switcher to your website template is the key to providing a multilingual experience. Anqi CMS provides a convenientlanguagesTag used to retrieve a list of all available multilingual site lists and generate switch links.

You canbash.htmlAdd the following code segment to (or any public header template):

{%- 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 iterate through all configured languages (or multilingual sites) and generate a toggle button with a link, name, and optional icon/Emoji for each language.Clicking will take you to the corresponding language version of the page.

Translation of static text in the template

In addition to dynamic content, the website interface also contains many fixed static texts, such as navigation menu items, copyright statements, button texts, etc. Anqi CMS throughtrA tagging and language package mechanism is used to manage the translation of these static texts.

1. Create a language package fileIn your template directory, create alocalesFolder, and create a subfolder for each language under it, such aszh-cnand Simplified Chineseen-us(American English). Create adefault.ymlfile.locales/zh-cn/default.ymlExample:

   yourLocation: "您的位置"
   welcomeMessage: "欢迎来到安企CMS"
   

   locales/en-us/default.ymlExample:

   yourLocation: "Your Location"
   welcomeMessage: "Welcome to AnQiCMS"
   

2. Using the templatetrTag: Use your template, in{% tr "键名" %}Call the corresponding translation text in the form of

   <p>{% tr "welcomeMessage" %}</p>
   <p>{% tr "yourLocation" %}</p>
   

   When the user switches language, the system will automatically load the appropriatedefault.ymlfile and display the corresponding translation text.

SEO optimization: The application of Hreflang tags

For multilingual websites, in order to inform search engines about the relationship between different language versions of the pages, use it correctlyhreflangTags are crucial. This helps search engines provide the most relevant search results for users in different regions and languages, avoiding issues with duplicate content.

You can visit the website<head>Area additionhreflangLabel, it can also be usedlanguagesLabel dynamically generated:

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

This will generate one for each language version<link>The tag indicates the corresponding URL and language code, helping search engines understand your multilingual content structure.

The logic of presenting multilingual content

When the user selects a language through the language switcher, AnQiCMS will automatically load and display the content version of the selected language based on the corresponding configuration (such as jumping to the corresponding language sub-site URL or setting language parameters in the current URL). For users who usetrlabel's