How to display the multi-language switch link and the current language identifier in Anqi CMS?

In AnQi CMS, implementing multi-language switch links and current language identification is a very practical feature, which can help your website easily cater to global users and enhance the level of website internationalization.A clear and powerful template tag is provided by Anqi CMS, allowing you to flexibly display these elements on the website frontend.

1. Understanding the multi-language capability of Anqi CMS

The Anqi CMS has considered the needs of multilingual sites from the very beginning and provides comprehensive multilingual content management support.This means you can create and manage independent content for different languages in the background, such as articles, products, pages, etc.In the system settings, you can configure the default language package, and each independent site can also have its own language settings.This feature not only makes content operation more efficient, but also provides a solid foundation for front-end multi-language switching.

Two, Display Multilingual Switch Links in Templates

To display a multilingual switch dropdown menu or link group on your website frontend, you need to utilize the Anqi CMS provided{% languages %}Template tag. This tag retrieves all configured multi-language site information, allowing you to iterate through it in the template and generate the corresponding links.

This tag does not accept any parameters, it will directly return a collection containing information about all language sites. You can use it just like a regular list, usingforLoop through this collection and extract the relevant data for each language site.

In each language site's data item, you can obtain the following key information:

  • LanguageNameThe display name of the language (for example, "Simplified Chinese", "English").
  • LanguageThe language code (for example, "zh-CN", "en-US"), often used inhreflangLabel.
  • LanguageEmoji: Language corresponding emoji symbols (e.g., 🇨🇳, 🇬🇧), for intuitive display.
  • LanguageIcon: If the language icon is uploaded on the backend, the URL of the icon will be provided here.
  • Name: The name of the site.
  • LinkThe access link to this language site, which is the key for language switching.

With this information, you can add the code to any location on the website where you want to display the language switch function, such as the header, footer, or sidebar.

This is a simple example showing how to build a language switch menu:

{% languages websites %}
    {% if websites %}
        <ul class="language-switcher">
            {% for item in websites %}
                <li>
                    <a href="{{item.Link}}">
                        {% if item.LanguageIcon %}
                            <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;"/>
                        {% else %}
                            <span style="margin-right: 5px;">{{item.LanguageEmoji}}</span>
                        {% endif %}
                        {{item.LanguageName}}
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endlanguages %}

In this code, we first{% languages websites %}retrieve the list of all language sites. Then,{% for item in websites %}Loop through each language site. Inside the loop, we created a<a>tag, whichhrefattribute directly using{{item.Link}}to point to the corresponding language site. For aesthetics, we also judged whether it existsLanguageIconIf exists, display the icon; otherwise, displayLanguageEmojidisplay lastLanguageName.

3. Identify the current language

It is equally important to clearly identify the language version the current user is browsing in addition to providing toggle links. The Anqi CMS in{% languages %}Each language site data returned by the tag includes aIsCurrentField. When a language site is the language of the current page,IsCurrenthas a value oftrueotherwise,false.

use thisIsCurrentField, you can add special styles to the switch link for the current language, such as highlighting, bold font, or adding an 'active' class name to visually distinguish it through CSS.

We slightly modify the above language switching code to include the identifier of the current language:

{% languages websites %}
    {% if websites %}
        <ul class="language-switcher">
            {% for item in websites %}
                <li {% if item.IsCurrent %}class="active"{% endif %}> {# 如果是当前语言，添加 active 类 #}
                    <a href="{{item.Link}}">
                        {% if item.LanguageIcon %}
                            <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" style="width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;"/>
                        {% else %}
                            <span style="margin-right: 5px;">{{item.LanguageEmoji}}</span>
                        {% endif %}
                        {{item.LanguageName}}
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endlanguages %}

In your CSS file, you can define:.activethe style of the class, for example:

.language-switcher li.active a {
    color: #007bff; /* 蓝色字体 */
    font-weight: bold; /* 字体加粗 */
    border-bottom: 2px solid #007bff; /* 下划线 */
}

Moreover, for HTML documents,<html>tags are usually added,langTo declare the main language of the document, which is very important for Search Engine Optimization (SEO) and Accessibility, you can use{% system %}Translate the content of the following JSON array to English: ["{\"key\":0,\"value\":\"标签来获取当前站点的语言代码：\"}", "{\"key\":1,\"value\":\"这将确保您的HTML文档始终正确声明其语言。\"}", "{\"key\":2,\"value\":\"四、优化用户体验：Hreflang标签\"}"]

<html lang="{% system with name='Language' %}">

This ensures that your HTML document always correctly declares its language.

IV. Optimizing User Experience: Hreflang Tag

For multilingual websites, in addition to the front-end switch links,<head>some additionshreflangtags are the key to SEO.hreflangThe tag informs search engines about the language versions of a specific page and which regions or languages these versions are targeted for.This helps search engines show the most appropriate language or regional version to users.

Safe CMS also provides convenience, you can use it directly.{% languages %}Label to generate thesehreflangTags:

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

Place this code in your template<head>part, it will automatically generate a link for each language sitehreflangwhich greatly enhances the international SEO performance of the website.

Five: Practice Recommendations and Flexible Applications

  • Location Selection:The language switcher is usually placed at the top, bottom, or easily accessible sidebar of the website, ensuring that users can quickly find and switch languages.
  • Style Customization:The code provided above only offers the basic structure, you can combine it with your own website design and use CSS and JavaScript to beautify the language switcher, making it consistent with the overall style.
  • Extract as a common segment:Since the language switcher will appear repeatedly on multiple pages, it is recommended to encapsulate its code inpartiala standalone template file in the folder (for example,_language_switcher.html[en] within, then through `{% include “partial/_language”}}