How is the multilingual function of AnQiCMS implemented in the front-end for content switching and display?

Today, with the increasingly close integration of globalization, providing multilingual content on websites has almost become a standard requirement to reach a wider audience.For small and medium-sized enterprises and content operation teams, how to efficiently and flexibly implement the switching and display of multilingual content is a key factor to consider when choosing a content management system.AnQiCMS is a system developed based on the Go language, providing clear and practical solutions in this regard.

Understanding the multi-language mechanism of AnQiCMS: More than just language packs

The multilingual function of AnQiCMS is not achieved by a single switch to translate the entire site content.It is more like a set of combination拳, taking into account the system interface, template static text, and localization display of core content, allowing us to flexibly configure according to actual needs.

Firstly, the system has built-indefault language package support.This is mainly for the localization of the background management interface, system prompt information, and other built-in texts.For example, we can select Chinese or English in the background settings, and AnQiCMS will accordingly switch these built-in display texts, making it convenient for administrators from different language backgrounds to operate.

However, for the static text defined by template files on the website front end, such as the 'Home' and 'Contact Us' on the navigation menu, or the 'Read More' on the article list page, AnQiCMS has introducedTranslation tag ({% tr %}). This requires us to create a speciallocalesfolder in the template directory andzh-CN/en-USsubfolders according to language codes (such as.yml), and place the language files in the format.{% tr "your_key" %}Such a label, the template will automatically load the corresponding translation text based on the current language, realizing text localization at the template level.

For the true core content, such as articles, product details, independent pages, etc., AnQiCMS adopts a more powerful and flexible strategy - combiningMulti-site managementFunction.This means that, usually, we set up an independent 'site' for each language, which carries all the content of the corresponding language.This design ensures the independence of content in various languages, SEO-friendliness, and is convenient for management and expansion.

The core of front-end content switching: multilingual site and{% languages %}Tag

The key to AnQiCMS implementing multilingual content switching on the front end lies in itsMulti-site managementability and{% languages %}Tagthe clever combination of.

Imagine, we have set up for Chinese contentwww.example.com/zh/, for English contentwww.example.com/en/(or even different domains, such aswww.example.cnandwww.example.com)。On AnQiCMS backend, we can independently manage the content, templates, settings, and even admin permissions of these two sites.When the user visits a Chinese site, they naturally see Chinese content; when they visit an English site, it is English content.

How do users switch between different language versions? This is where{% languages %}The tag has appeared. This tag is specifically used to retrieve the list of all configured multilingual sites and provides the language name, language code, and key link address for each site.

By placing in the public header of the website template (such asbase.html){% languages %}tags, we can easily build a language switcher. For example:

{%- 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 over all configured language sites and generate a link for each language. When the user clicks on a language link,item.LinkThey will be directed to the site URL corresponding to the language, thus achieving language switching at the content level.This mechanism ensures that different language versions of the content are independent and complete, rather than simple text replacement.

optimize the user experience and search engine friendliness

In addition to the intuitive language switcher, AnQiCMS also considers the user experience and search engine optimization (SEO) needs of multilingual websites.

Hreflang tagIt plays a crucial role in international SEO, informing search engines about the relationship between different language versions of pages, avoiding duplicate content issues, and ensuring that users can see the most suitable page for their language and region when searching.{% languages %}Tags can also be used in HTML's<head>area automatically generates thesehreflangTags:

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

In this way, search engines can accurately understand the structure of your multilingual website and improve international rankings.

As forLocalization of static template textas mentioned earlier{% tr %}The tag is the core. Through predefinedlocalesand folder.ymlFile, we can provide multilingual versions for texts like 'Copyright Information', 'Search Box Placeholder', etc. that do not change with the database content.This makes the overall language experience of the website more consistent and smooth.

For example, in Chinesedefault.ymldefined in Chinese"yourLocation": "您的位置"in Englishdefault.ymldefined in Chinese"yourLocation": "Your location"in the template, just call{% tr "yourLocation" %}the system will intelligently display the corresponding text in the current language.

From the perspective of content creators, this means that when you need to publish a new article, you will create a Chinese version under the Chinese site and an English version under the English site.Although this requires manual translation and publication, it gives content great flexibility, allowing for tailored content strategies for users of different languages, and even for localization adjustments for different markets, not just simple literal translation.

In general, AnQiCMS combines powerful multi-site management, intuitive{% languages %}and{% tr %}Template tags provide a flexible and efficient multilingual content switching and display solution, helping users easily handle the challenges of global content operation.


Frequently Asked Questions (FAQ)

Q1: How does AnQiCMS differentiate between different language versions of the same article? Do I need to create articles independently for each language?A1: AnQiCMS mainly uses the 'Multi-site Management' feature to distinguish between different language versions of the content.This means that you will create an independent site for each language (such as Chinese, English)In each site, you need to independently create and manage articles, products, single-page contents, and other language-related content.Although this requires manual content translation and publication, it ensures complete independence and flexibility, facilitating in-depth localization operations.

Q2: Besides using subdirectories (such as/zh///en/Can I use different domains (such aswww.example.cnandwww.example.com) to distinguish languages?A2: Absolutely.The multi-site management function of AnQiCMS is very flexible, you can configure independent domain names or subdomains for each language site, and can also manage through subdirectories.When configuring the site in the background, you just need to enter the corresponding domain name or subdirectory URL in the 'Site Address'.hreflangLabels will automatically adapt to these configurations.

Q3: "Default language pack" and{% tr %}What are the differences between tags? What scenarios are they used in?A3: 'Default language package' is mainly used for the AnQiCMS backend management interface and system built-in prompts.It is provided by the system itself, used for localizing the CMS operation experience.{% tr %}Tags are used in the front-end template files of websites to handle those statics that are hard-coded by template developers