How to implement multilingual front-end display and switching of website content in AnQiCMS?

When building a website for global users, the display and switching of multilingual content are an essential aspect.AnQiCMS (AnQiCMS) understands the importance of this requirement and therefore integrated powerful multilingual support capabilities into the system design from the beginning, helping websites easily achieve internationalized content layout.

The foundation of multi-language content management: multi-site mode

One of the core mechanisms for Anqi CMS to implement multi-language display of website content is its flexible 'multi-site management' function.For a truly multilingual website, especially in scenarios where it is necessary to independently operate and optimize the content of different language versions, 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 for the English version, and even establish independent sites for Japanese, French, and other versions.These sites are independent in front-end display, each having its own domain (or subdomain), content, and SEO configuration, but they can all be managed统一 in the same Anqi CMS backend, greatly reducing the complexity of operation.In each independent language site, you can publish, edit, and manage all content such as articles, products, single pages, and so on according to the habits of that language.

In addition to managing content through the multi-site feature, AnQi CMS also provides the 'default language package' setting.This is mainly used for language switching in the background management interface and system-built-in prompts, convenient for administrators of 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 front end. Translation and management of front-end content still require the use of multi-site modes or translation tags within templates.

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

When your website content is managed through a multi-site model, the front-end multilingual display and switching become effortless.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 %}Tag

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 done through AnQi CMS.{% tr %}Implement with tags and localization files.

You need to create a folder under the template directory.localesfolder, and create a corresponding subfolder for each language (such aszh-cn/en-usEach language folder contains one or moreymlformatted translation files (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", just use{% tr "yourLocation" %}. AnQi CMS will automatically load and display the corresponding translated text based on the language settings of the current visited site, thereby achieving seamless switching of interface elements.

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

AnQi CMS provides the ability for users to switch between different language versions of the website freely,{% languages %}The tag can retrieve a list of all configured multilingual sites. This tag is very suitable for creating a language selector in the header or footer area of a 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 retrieve all the details of the multilingual sites and assign them to:websitesVariable.
  • {% 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}}Optionally display the icon or emoji corresponding to the language to make the language selector more intuitive.

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

Strong SEO support: Hreflang tag

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

AnQi CMS takes this into account and can also do it by{% languages %}generate tags.hreflangTags, place them in the HTML of the website.<head>Area:

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

This code will generate a label for each language sitelink rel="alternate"wherehrefThe attribute points to the URL of the language site,hreflangThe attribute indicates the language code corresponding to the URL (for example,zh-CN/en-USThis tells search engines that these pages are alternate versions of the same content, just in different languages, thus enhancing the visibility and accuracy of the website 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, Anqi CMS provides a clear structure for multilingual content through "multi-site management", and through{% tr %}tags, it achieves flexible translation of static text, and through{% languages %}Tags andhreflangSupport, ensures smooth switching of front-end display and good international SEO performance. This makes building and maintaining a highly efficient, scalable multilingual website simpler than ever.


Frequently Asked Questions (FAQ)

  1. How to create and manage content for different languages in the background?The AnQi CMS mainly handles content in different languages through the "multi-site management" feature.You can create and manage each language version of the website as an independent site in the background.For example, you can have awww.example.comAnd a (Chinese site) and oneen.example.com(English site). On the backend of each site, you can independently publish, edit, and manage all articles, products, single pages, and other content under this 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 bars, button texts, copyright statements, etc., which are translated throughlocalesfolders..ymlFile definition and switching. The "default language package" setting on the back-end mainly affects the language of the Anqi CMS management interface and the built-in system