How to display multi-language switch links 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 that can help your website easily face global users and enhance the internationalization level of your website.AnQi CMS provides intuitive and powerful template tags, allowing you to flexibly display these elements on the website front end.

1. Understand the multi-language capabilities of Anqi CMS

The AnQi CMS was designed from the beginning to consider the needs of multilingual sites 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, and so on.In the system settings, you can configure the default language pack, 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.

Second, show the multilingual switch link in the template

To display a multilingual switch dropdown menu or link group on the front end of your website, you need to use the services provided by Anqí CMS.{% languages %}Template tag. This tag retrieves all the multilingual site information configured, for you to iterate through 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 like a normal 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:

  • LanguageNameLanguage display name (e.g., 'Simplified Chinese', 'English').
  • LanguageLanguage code (e.g., 'zh-CN', 'en-US'), often used forhreflang.
  • LanguageEmoji: Language corresponding emoji (e.g. 🇨🇳, 🇬🇧), convenient for direct display.
  • LanguageIconIf the language icon is uploaded on the backend, the URL of the icon will be provided here.
  • Name: The name of the site.
  • Link: The access link of the language site, which is the key to language switching.

With this information, you can add the code to display the language switch function in any location you want on the website's header, footer, sidebar, or any other place.

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 go through{% languages websites %}Get the list of all language sites. Then, use{% for item in websites %}Loop through each language site. Inside the loop, we created a<a>tag, itshrefProperties are used directly{{item.Link}}to point to the site corresponding to the language. For aesthetics, we also checked whether it exists.LanguageIconIf an icon exists, display it, otherwise displayLanguageEmojiDisplay lastLanguageName.

Three, indicate the current language

In addition to providing a switch link, it is also important to clearly identify the language version the current user is browsing. Anqi CMS is in{% languages %}Each language site data returned by the tag contains oneIsCurrentField. When a language site is the language of the current page,IsCurrentThe value istrueOtherwisefalse.

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

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

{% 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; /* 下划线 */
}

Additionally, for the HTML document's<html>Label, usually addedlangThe attribute is used to declare the primary language of the document, which is very important for search engine optimization (SEO) and accessibility (Accessibility). You can use{% system %}Tag to retrieve the language code of the current site:

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

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

4. Optimizing User Experience: Hreflang Tag

For multilingual websites, in addition to the front-end switch links, you can also<head>Partially addhreflangTags are the key to SEO.hreflangThe tag tells the search engine which language versions are available for a specific page, as well as which region or language these versions are targeted at.This helps search engines display the most suitable language or regional version to users.

AnQi CMS also provides convenience for this, you can use it directly.{% languages %}to generate these tagshreflangTags:

{% 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 one for each language sitehreflangLink, greatly enhancing the international SEO performance of the website

V, Practical Suggestions and Flexible Application

  • Location selection:Language switchers are usually placed at the top, bottom, or easily accessible sidebar of a website to ensure users can quickly find and switch languages.
  • Customize the style:The code provides a basic structure, you can combine it with your website design, and use CSS and JavaScript to beautify the language switcher, making it consistent with the overall style.
  • Extracted as a common segment:Considering that the language switcher will appear repeatedly on multiple pages, it is recommended to encapsulate its code inpartialan independent template file in the folder (for example_language_switcher.html）中，然后通过 `{% include “partial/_language