How to dynamically generate a multi-language navigation switcher in AnQiCMS templates?

As an experienced website operations expert, I know that building a multilingual website that can reach global users is an important strategy for a company to expand into international markets and enhance 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 AnQiCMS templates.

AnQiCMS Multi-language Mechanism Overview

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 (for example,en.yourdomain.comused for the English site,fr.yourdomain.comUsed for French site), each site has an independent 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 background “Global Function Settings”, although there is an option for “Default Language Pack”, it mainly affects the language display of the background interface and some built-in prompt information.For our multilingual front-end site, AnQiCMS provides a set of special template tags that can dynamically retrieve and display all the language site information you have configured. This is the core of building a language switcher.

第一步：Plan and Configure Multi-language 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. Multiple site creation and binding:Using the "Multi-site Management" feature of AnQiCMS, create an independent site for each target language. Each site will be associated with a unique domain name or subdomain (for exampleen.yourdomain.com,fr.yourdomain.com）。In the creation process, you can specify the default language for each site (for example, the default language for English sites is set to English).This ensures that the content of each language version is stored and managed independently.
  2. Content localization:In each language site, you need to create or translate the corresponding content for the target language, including articles, products, single pages, etc.AnQiCMS powerful content model and flexible content editing features can well support the fine management of content in different languages.
  3. Translation file preparation (for static text):For static text in the website UI interface that does not belong to dynamic content (such as navigation names, button text, footer copyright information, etc.), AnQiCMS supportslocalesDirectory YAML file translation. You need to create in the template directory.localesfolders, and create for each language (such as)en-us/zh-cn)default.ymlFile, stores the corresponding key-value translation. For example,zh-cn/default.ymlmay contain"yourLocation": "您的位置"whileen-us/default.ymlis"yourLocation": "Your Location".{% tr "yourLocation" %}You can call these translated texts with tags like this.

第二步：在模板中构建语言切换器（English）

Now, we come to the most core part — how to dynamically generate a multi-language navigation switcher in AnQiCMS templates. AnQiCMS provideslanguagesLabels, it can help us get all the configured multi-language site information and generate switch links.

Assuming you want to place a language switcher in the header section 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 is usually a file containing the public headers 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 towebsitesVariables. Then, it will iterate overwebsiteseach element in the arrayitem(representing a language site).

Inside the loop:

  • item.LinkThis is the complete URL generated by AnQiCMS for each language site, clicking on it will directly jump to the homepage of the corresponding language site.
  • item.LanguageIcon：If your backend has configured icons for language settings, icons will be displayed here.
  • item.LanguageEmoji：A convenient alternative, displaying the flag Emoji of the corresponding language.
  • item.LanguageName：显示语言的完整名称，如“English”、“中文”。
  • {% if item.IsCurrent %}class="active"{% endif %}：这是一个非常实用的条件判断。item.IsCurrentIt will judge whether the site being accessed is the language site, if it is, it will add itactiveauto, convenient for you to highlight through CSS, so that users can clearly know the current language environment.
  • {% tr "switchLanguage" %}auto, here used totrTranslate label, ensure that the static text of the switch itself can also be localized correctly.

Step 3: Optimize SEO: Add Hreflang tags

For multilingual websites,hreflangTags are an indispensable part of international SEO.It tells search engines which language versions of your page exist, and their relationships, which helps avoid duplicate content issues and ensures that search engines display the correct language version of the page to users.

You need to translatehreflangLabel placement 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.LinkThen output the URL of the corresponding language site. This way, the search engine can accurately understand the structure of your multilingual content.

Practical skills and advanced considerations

  • Style Customization:You can use CSS to beautify your language switcher. For example, you can add styles to.language-switcher/ul/liand.activethe class to maintain consistency with the overall design style of your website.
  • Current highlighted language:As shown above, utilizingitem.IsCurrentproperties can easily implement highlighting of the current language.
  • Linking to dynamic content:In AnQiCMS, since each language site is relatively independent, when you create content and link to other content within a language site, these links are set to point to the internal pages of the current language site by default.For example, in English-language articles, the 'Related Reading' or 'Categories' links will default to pointing to related 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 combinenavListLabels, configure different navigation menus for different language sites.navList[en]Tags also support this.siteId参数，可以在一个模板中灵活调用不同站点的导航。

通过以上步骤，您不仅可以在AnQiCMS模板中动态