How to implement language switching functionality for multilingual sites in Anqi CMS?

When our website aims to serve global customers, providing multilingual support becomes an indispensable function.This not only helps us expand the international market, but also significantly improves the access experience for users of different languages.AnQiCMS (AnQiCMS) understands this need and therefore makes multilingual support one of its core highlights, allowing us to easily build and switch between multilingual websites.

How to implement language switching for multilingual sites in Anqi CMS

To implement language switching for multilingual websites, it mainly involves backend configuration and integration of frontend templates.AnQiCMS provides a simple and efficient solution, making technical details easy to understand and operate.

Backend multilingual site configuration: Build language foundation

First, in the AnqCMS backend, we can find the multi-language related settings.Although the "default language pack" in the document mainly refers to the language of the backend management interface, it implies that the system supports a multilingual environment.For the multilingual versions of the content itself on the website, it is usually to create different language versions of the same article, product, or page at the time of content publication.For example, you can publish a Chinese article and then create its corresponding English, French, or Japanese version and associate it.

Further, the "Multi-site Management" feature of AnQiCMS also provides great flexibility for multilingual sites. You can set up independent subdomains for each language version (such asen.example.com/fr.example.com) or subdirectory (such asexample.com/en//example.com/fr/They are configured as independent sites, but all managed by the same AnQiCMS instance.This pattern helps to implement more fine-grained language content and URL structure management.

Front-end language switcher: Let users choose easily

Let users switch between languages easily, which is the key to a multilingual website experience. AnQiCMS provides a namedlanguagesThe template tag is specifically used to retrieve the list of all configured multilingual sites.By this tag, we can build an intuitive language switcher at any location on the website (usually in the header or footer).

UselanguagesThe label is very simple, it returns an array containing information about all language sites, and we can iterate through this information to generate a switch link for each language:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <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,item.LinkThe link will automatically direct to the link under the corresponding language on the current page, anditem.LanguageName/item.LanguageEmojianditem.LanguageIconLanguage names, emoticons and icons are provided separately, making it convenient to design beautiful and easily recognizable language switch buttons.

Template text translation: Details determine the experience.

In addition to the main content and pages, many fixed texts in the website template, such as navigation menu items, footer statements, form prompts, and button texts, also need to be displayed according to the current language. AnQiCMS throughtr(translate) tag andlocalesThe directory has implemented this function.

You need to create one under the template directory.localesFolder, and create a corresponding language package file for each language (for exampleen-us/default.yml/zh-cn/default.ymlThese YAML files will store key-value pairs, where the key is the identifier you use in the template, and the value is the corresponding translation text.

For example, in a Chinese language package (locales/zh-cn/default.yml):

"yourLocation": "您的位置"
"homePage": "首页"
"contactUs": "联系我们"

In the template, you can usetrtags to call these translated texts:

<p>{% tr "yourLocation" %}</p>
<nav>
    <a href="/">{% tr "homePage" %}</a>
    <a href="/contact">{% tr "contactUs" %}</a>
</nav>

The system will automatically load when the user switches to Englishen-us/default.ymlThe corresponding translation is used to achieve seamless switching of static text in the template.

Search Engine Optimization (SEO):hreflangThe importance of tags

For a multilingual website, it is crucial to inform search engines of the corresponding relationship between different language version pages, as this can avoid the penalty for duplicate content and ensure that search engines display the correct language pages to users in the correct regions. AnQiCMS integrateslanguagesTags can help us easily generatehreflang.

You just need to place the following code block in the website template's<head>area:

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

This code will generate a tag for each language version<link rel="alternate" hreflang="xx" href="yyy">whereitem.Languageis a language code (such asen/zh-CN)item.LinkThis is the complete URL of the corresponding language page. This can effectively improve the performance of the website in international search engines.

Some considerations in actual operation.

When deploying a multilingual site, in addition to the above technical implementations, there are also some operational considerations:

• URL structure selection: AnQiCMS's 'Static Rules' and 'Multi-site Management' provide great flexibility. You can choose subdirectories such asexample.com/en/) or subdomain (such asen.example.comAs a multilingual URL structure. Both methods have their pros and cons, usually subdirectories are more suitable for the same brand's multilingual content, while subdomains are more suitable for providing differentiated content for different regional markets.
• Content Management ProcessMake sure the content team can create all target language versions in time when publishing new content.AnQiCMS' content model and content management features should well support this process, for example, providing language version switching options when editing articles.
• Consistency: Regardless of language switching, the brand image, design style, and core information of the website should remain consistent.

AnQiCMS with its built-in multilingual support and flexible template tags, provides us