How to implement the switching display of multilingual website content?

In today's global digital environment, making a website support multiple language display is no longer an option, but a necessity for many businesses and content operators to expand into international markets and enhance user experience.AnQiCMS (AnQiCMS) took this into consideration from the beginning of its design, built-in powerful multilingual support features, helping us easily switch the display of website content between different languages.

How can we specifically operate to enable multilingual content switching capabilities for our Anqi CMS website?This can mainly be approached from three aspects: system language packages, front-end content display, and search engine optimization.

Configure the system language package and backend interface

Firstly, if you wish the management interface of the website backend or some system自带 prompts to display different languages, Anqi CMS provides a direct and convenient setting.

You just need to log in to the Anqi CMS backend, go to the "Global Function Settings" under the "Backend Settings" menu.Here, you will find an option named "Default Language Pack".Our AnQi CMS currently comes with Chinese and English language packages for your selection.After selecting the language you want, the system backend interface and some fixed prompts will switch to display accordingly.

However, a very important point needs our attention: the settings of this "default language package" mainly affect the built-in text of the system, such as the names of background menus, some system prompts, and so on.It will not automatically translate custom content published on your website, such as articles, product descriptions, single pages, etc.This content is created and published by ourselves and requires another method of processing.

Implement front-end multi-language content switching display

For truly user-oriented multilingual content on the website, such as your articles, product descriptions, single-page websites, etc., Anqi CMS provides a flexible mechanism to switch display.The core idea is to prepare a set of corresponding content for each language and guide users to access the corresponding language version through the front-end language switcher.

To achieve the switching of different language content, Anqi CMS provides a very practical template tag:{% languages websites %}. This tag can dynamically retrieve all the multilingual site information you have configured, including the names of each language, corresponding links, and cute language icons (Emoji or custom Icon).

Content management strategy:In AnQi CMS, to allow users of different languages to see the corresponding content, the most common and recommended practice is to set up an independent site or subdomain for each language. For example, your main site iswww.example.com(Chinese), you can seten.example.comorwww.example.com/en/(English) is the English site. This means you need to publish and manage content independently for each language version.When you create a new article or product, you need to create corresponding entries for each language version and ensure that the links are independent.

Implementation of the front-end language switcher:In the template files of the website, such as where you usually place the language switch button in the header or footer, you can use{% languages websites %}Labels to generate a language switch list.

A simple language switch code snippet would look like this:

{%- 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 the configured language sites and generate a link for each language.Click these links, and the user will be directed to a different language version of the current page.For example, if the user is browsing the "About Us" page of a Chinese site, after clicking the English switch button, it will jump to the "About Us" page of the English site.

Translation of fixed text in theIn addition to the translation of the content itself, some fixed text in the website template, such as navigation menu items, page prompts, etc., can also be multilingualized through the translation tags of AnQi CMS. This requires you to create one in the template directorylocalesCreate a directory and create corresponding subdirectories for each language (such asen-us/zh-cn), then createdefault.ymlfiles to define the translation key-value pairs.

For example,zh-cn/default.ymlcan have:

"yourLocation": "您的位置"

Anden-us/default.ymlcorresponds to:

"yourLocation": "Your Location"

In the template, you can use{% tr "yourLocation" %}tags to display these translated static texts, the system will automatically select the correct translation based on the current site language setting.

Search Engine Optimization (SEO) Practices: Hreflang Tag

When building a multilingual website, a key point that cannot be ignored is Search Engine Optimization (SEO). In order for search engines to correctly identify your multilingual content and display different language versions to the appropriate audience, it is recommended to usehreflangtags are crucial.

hreflangThe tag can tell search engines that your website provides different language or regional versions of the same content.This helps to avoid duplicate content issues and ensures that users see the most relevant pages in their language and region.

SecureCMS also passes through{% languages websites %}Tags provide convenienthreflangOutput function. You just need to place the following code snippet in your website template's<head>Within the area, AnqiCMS will automatically generate the correct onehreflangTags:

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

This code will generate a `<link rel="alternate" hreflang="xx"` for each language version