How to dynamically generate a multilingual site navigation switcher in AnQiCMS template?

As an experienced website operations expert, I am well aware that building a multilingual website that can reach global users is an important strategy for enterprises to expand their international market and enhance their brand influence.While AnQiCMS, with its efficient, flexible architecture and powerful multi-site, multi-language support capabilities, is undoubtedly the preferred tool to achieve this goal.Today, let's delve into how to cleverly dynamically generate a practical and user-friendly multilingual site navigation switcher in the AnQiCMS template.

Overview of the multilingual mechanism in AnQiCMS

In AnQiCMS, building a multilingual site is not just simple text translation. It provides a more powerful and flexible 'multi-site management' capability, which means you can configure an independent site for each language (such as, en.yourdomain.comFor English sites,fr.yourdomain.comUsed for the French site), each site has its own URL structure, content, and even specific template configurations.This design not only ensures the clarity of content management, but also provides great convenience for SEO localization strategies.

In the "Global Function Settings" in the background, although there is an option for the "Default Language Pack", it mainly affects the language display of the background interface and some built-in prompts.For our front-end multi-language site, AnQiCMS provides a set of dedicated template tags that can dynamically retrieve and display all the language site information you have configured, which is the core of building the language switcher.

Step 1: Plan and configure multilingual sites

Before starting the template design, you need to plan and set up the multilingual site in the AnQiCMS backend. Typically, this involves the following aspects:

1. Multi-site creation and binding:Utilize the "Multi-site Management" feature of AnQiCMS to create an independent site for each target language. Each site will be associated with a unique domain name or subdomain (such asen.yourdomain.com,fr.yourdomain.com）。In the process of creation, you can specify the default language for each site (for example, the default language for English stations is set to English).This ensures that the content of each language version is stored and managed independently.
2. Content localization:Under each language site, you need to create or translate content for the target language, including articles, products, single pages, and so on.AnQiCMS is a powerful content model with flexible content editing features, which can well support the fine management of content in different languages.
3. Translation file preparation (for static text):For static text in the UI interface of the website that does not belong to dynamic content (such as navigation names, button text, footer copyright information, etc.), AnQiCMS supports throughlocalesTranslate the YAML files in the directory. You need to create a folder in the template directorylocalesfor each language (for exampleen-us/zh-cn) createdefault.ymlFile, stores the corresponding key-value translation. For example,zh-cn/default.ymlmay contain"yourLocation": "您的位置"whileen-us/default.ymlIn Chinese it is"yourLocation": "Your Location". In the template, you can call the translated text through{% tr "yourLocation" %}such tags.

The second step: build the language switcher in the template

Now, we come to the most critical part - how to dynamically generate a multi-language navigation switcher in AnQiCMS. AnQiCMS provideslanguagesThe label that can help us get all the multi-language site information configured, thereby generating a switch link.

Suppose you want to place a language switcher in the header of the website, so that users can click to jump to the corresponding language site. You can place it in the template'sbash.html(This usually includes a file containing the public header of the website) or add the following code to the header area of a specific page:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>{% tr "switchLanguage" %}:</span> {# 假设 "switchLanguage" 在您的翻译文件中 #}
    <ul>
        {%- for item in websites %}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{item.Link}}">
                {%- if item.LanguageIcon %}
                <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" class="language-icon" />
                {%- else %}
                {{item.LanguageEmoji}} {# 如果没有设置图标，显示emoji，例如 🇺🇸 🇨🇳 #}
                {% endif %}
                {{item.LanguageName}} {# 显示语言名称，例如 English, 中文 #}
            </a>
        </li>
        {%- endfor %}
    </ul>
</div>
{%- endif %}
{%- endlanguages %}

This code first uses{% languages websites %}The tag retrieves the list of all configured language sites and assigns it towebsitesVariable. Next, it will traversewebsitesarrayitemRepresenting a language site.

Inside the loop:

• item.LinkThis is the complete URL generated by AnQiCMS for each language site, clicking it will directly jump to the homepage of the corresponding language site.
• item.LanguageIcon: If your backend is configured with language icons, they will be displayed here.
• item.LanguageEmoji: A convenient alternative, displaying the flag Emoji of the corresponding language.
• item.LanguageNameDisplay the full name of the language, such as "English", "Chinese".
• {% if item.IsCurrent %}class="active"{% endif %}This is a very practical conditional judgment.item.IsCurrentIt will judge whether the site being visited is this language site, and if it is, it will add it foractiveA class, which is convenient for you to highlight through CSS, allowing users to clearly know the current language environment.
• {% tr "switchLanguage" %}Here, we usedtrTranslate label, ensure that the static text of the switch itself is also localized correctly.

Step 3: Optimize SEO: Add Hreflang tags

For multilingual websites,hreflangTags are an essential part of international SEO. They inform search engines about the language versions of your pages and their relationships, helping to avoid duplicate content issues and ensuring that search engines display the correct language version of the page to users.

You need tohreflangTags are placed in HTML's<head>block. Similarly, we can uselanguagestags to dynamically generate these links:

<head>
    {# 其他head内容，如meta标签、title等 #}

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

here,item.Languagewill output the language code of the language site (for exampleen-us/zh-cn)item.LinkOutput the URL of the corresponding language site. This way, search engines can accurately understand the structure of your multilingual content.

Practical Tips and Advanced Considerations

• Customize the style:You can beautify your language switcher with CSS. For example, add a style to.language-switcher/ul/liand.activethe class to make it consistent with the overall design style of your website.
• Highlight the current language:As shown above, by usingitem.IsCurrentattributes can easily highlight the current language.
• Linking to dynamic content:In AnQiCMS, since each language site is relatively independent, when you create content within a language site and link to other content, these links are defaults to point to the internal pages of the current language site.For example, in English articles on the English site, the 'related reading' or 'category' links will default to pointing to the relevant content within the English site.This design greatly simplifies the link issues in multilingual content management.
• Combined with navigation list tags:If your multilingual site navigation menu is also multilingual, you can combinenavListtags to configure different navigation menus on different language sites.navListTags also support.siteIdParameters can be flexibly called to navigate different sites in a template.

By following the above steps, you can dynamically use the AnQiCMS template.