How can Anqi CMS achieve multilingual front-end display and switching of website content?

When building a website for global users, displaying and switching content in multiple languages is an essential part.AnQiCMS (AnQiCMS) fully understands the importance of this requirement and has integrated powerful multilingual support capabilities from the very beginning of the system design, helping websites easily implement internationalized content layouts.

Basic of content multi-language management: multi-site mode

The core mechanism of Anqi CMS for displaying website content in multiple languages is one of its flexible "multi-site management" functions.For a truly multilingual website, especially in scenarios where independent operation and optimization of different language versions are required, managing each language version as an independent site is undoubtedly the clearest and most efficient way.

This means that you can create a site for the Chinese version of the website, another one for the English version, and even set up independent sites for Japanese, French, and other versions.These sites are individually independent in front-end display, each having its own domain (or subdomain), content, and SEO configuration, but they can all be centrally managed from the same secure CMS backend, greatly reducing the complexity of operations.In each independent language site, you can publish, edit, and manage all content such as articles, products, single pages, etc., according to the habits of that language.

In addition to managing content through the multi-site feature, Anqi CMS also provides the 'Default Language Pack' setting.This is mainly used for language switching in the background management interface and system-built-in prompts, making it convenient for administrators from different language backgrounds to operate the background.Please note that this will not automatically translate the articles or product content displayed on your website's frontend. Translation and management of frontend content still require the use of multi-site mode or translation tags within templates.

How to implement the display and switching of multilingual content in the front-end

When your website content is managed in a multi-site mode, the frontend multilingual display and switching become a breeze.The AnQi CMS provides intuitive template tags, allowing you to easily build user-friendly language switching features.

1. Translation of static text within the template:{% tr %}tags

On the website, in addition to dynamic article content, there are many fixed interface elements such as navigation menus, button text, copyright statements, form labels, etc. The translation of these static texts is provided by{% tr %}To implement tags and localization files.

You need to create a folder under the template directory.localesFolder, and create a subfolder for each language corresponding to it (such aszh-cn/en-usEach language folder contains one or moreymltranslation files in the format (such asdefault.yml). In thisymlfile, you can define key-value pairs, for example:

# zh-cn/default.yml
"yourLocation": "您的位置"

# en-us/default.yml
"yourLocation": "Your Location"

In the template, when you need to display the text 'Your Location', you just need to use{% tr "yourLocation" %}The CMS will automatically load and display the corresponding translation text based on the language settings of the current visited site, thus achieving seamless switching of interface elements.

2. Language Switcher for Dynamic Content:{% languages %}tags

In order for users to switch freely between different language versions of the website, Anqi CMS provides{% languages %}Tags, which can retrieve the list of all configured multilingual sites. This tag is very suitable for creating a language selector in the header or footer area of the website.

You can use it like this in the 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 %}

In this code block:

  • {% languages websites %}It will fetch all the details of multi-language sites and assign it towebsitesa variable.
  • {% for item in websites %}Loop through each language site.
  • {{item.Link}}It will output the access link of the language site.
  • {{item.LanguageName}}Display the name of the language (such as “Chinese”, “English”).
  • {{item.LanguageIcon}}or{{item.LanguageEmoji}}You can optionally display the icon or emoji corresponding to the language, making the language selector more intuitive.

By such settings, when users click on different language options, they will be redirected to the corresponding language version of the site and see all the content in that language.

Strong SEO support: Hreflang tag

SEO optimization for multilingual websites is crucial, especially to avoid content duplication issues and correctly guide search engines to display different language versions to users in the corresponding language regions.hreflangTags are the standard method to solve this problem.

Anqi CMS takes this into account, and can also be used{% languages %}to generate tagshreflangTags, place them in the HTML of the<head>area:

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

This code will generate alink rel="alternate"tag for each language site,hrefwith the attribute pointing to the URL of the language site,hreflangand the attribute indicates the language code corresponding to the URL (for example,zh-CN/en-USThis tells search engines that these pages are alternative versions of the same content, just in different languages, thus enhancing the website's visibility and accuracy in international search results.

In addition, the pseudo-static and 301 redirect management features of Anqi CMS also help to build clear, search engine-friendly URL structures for multilingual sites, further optimizing the SEO performance of the website.

In summary, the Anqi CMS provides a clear structure for multilingual content through "multi-site management", and through{% tr %}tags, achieves flexible translation of static text, and through{% languages %}Tags andhreflangSupport ensures smooth transitions and excellent international SEO performance. This makes building and maintaining an efficient, scalable multilingual website easier than ever.


Common Questions (FAQ)

  1. How to create and manage content for different languages in the background?The Anqi CMS mainly uses the "Multi-site Management" feature to handle content in different languages.You can create and manage each language version of the website as an independent site in the backend.www.example.com(Chinese site) and oneen.example.com(English site).In the backend of each site, you can independently publish, edit, and manage all articles, products, single pages, and other content in the language, ensuring that the content fully conforms to the context and needs of the target language.

  2. {% tr %}What is the difference between tags and the 'default language package' in the background? {% tr %}Labels are mainly used for translating static text in front-end templates, such as navigation bar, button text, copyright statements, etc., these contents are throughlocalesfolders..ymlFile definition and switching. The "Default language package" setting in the back-end mainly affects the language of the security CMS management interface and the built-in system.