How to use the `languages` label in AnQiCMS template to display multi-language options?

In today's global digital world, multilingual support for websites has become crucial for expanding markets and serving diverse user groups.The AnQiCMS (AnQiCMS) is well-versed in this field, deeply integrating multilingual functionality into its core architecture, and committed to providing lightweight and efficient content management services to support its global layout.languagesLabel to display multi-language options, it is a must for building internationalized websites.

Overview of AnQiCMS multi-language feature

In-depth explorationlanguages标签之前，我们先简要了解AnQiCMS的English实现方式。AnQiCMS的English支持并非简单地对所有内容进行自动翻译，而是提供了一套灵活的机制：

  1. System language package:This mainly affects the management interface of AnQiCMS background, the built-in prompt information of the system, and some frontend preset text.You can select the "Default Language Pack" under the "Global Feature Settings" in the background, for example, Chinese or English, to switch the display language of these built-in parts.
  2. Content in multiple languages：For actual content on the website, such as articles, products, single pages, etc., AnQiCMS usually recommends using the "Multi-site Management" feature to implement this. This means you can create a separate site for each language (such asen.yourdomain.comUsed for English,fr.yourdomain.comUsed for French），and maintain their respective language versions at each site. This ensures the content's independence and facilitates SEO optimization.
  3. Template text translation:For the fixed static text in the template that needs to change according to the language environment (such as navigation menu items, copyright statements, button text, etc.), AnQiCMS providestr（translate）Label is translated using language files.

And our main character today islanguagesTags, just as an important bridge, it enables the front-end template to dynamically list and connect to these configured multi-language site options, thereby building a user-friendly language switching function.

languages标签：多语言切换的门户

languagesThe tag is a key tool in AnQiCMS template used to get the list of all configured multi-language sites.Its design philosophy is simplicity and efficiency, allowing developers to easily present language switching options on the website front-end.

这个标签的独特之处在于它不需要任何参数.You just need to declare and use it in the template, AnQiCMS will automatically and intelligently discover and present all the multi-language site information configured in the background management.for循环遍历这些对象，以构建语言选择器。

When you use{% languages websites %}...{% endlanguages %}这样的语法时，websitesThe variable will become an array, with eachitemrepresenting a language site and including the following available fields:

  • LanguageName: 站点的语言名称，如“简体中文”、“English” 。
  • Language: 语言的ISO代码，如“zh-cn”、“en-us”，这对于 hreflangThe label settings are particularly important.
  • LanguageEmoji: Emoji icon corresponding to the language, providing an intuitive visual identification.
  • LanguageIcon: Icon URL corresponding to the language, if configured on the backend.
  • Name: English 站点的通用名称。
  • Link: English 该语言站点的完整URL地址，用户点击后将跳转到对应的语言版本。
  • Remark: English site remark information (usually not used for front-end display).
  • Nofollow: Indicates whether the link should be addedrel="nofollow"Attribute (usually not used for front-end display).

Practical training: Skillfully using in templateslanguagestags

UnderstoodlanguagesAfter looking at the working principle and available fields of the label, let's see how to apply it in the actual template to achieve website multilingual switching function and SEO optimization.

Example one: Build an intuitive language switcher

On the website's navigation bar, footer, or sidebar, a prominent language switcher can greatly enhance user experience.Users can simply tap to access the version of their familiar language.

{# 假设这是您模板文件中的某个位置，例如 header.html 或 footer.html #}
{%- languages websites %}
{# 只有当存在多个语言站点时才显示切换器，确保页面简洁 #}
{%- if websites and websites|length > 1 %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" title="切换到 {{item.LanguageName}}">
        {%- if item.LanguageIcon %} {# 优先显示图标，如果存在 #}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} 国旗" class="language-icon" />
        {%- else %} {# 否则显示Emoji表情 #}
        <span class="language-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

In the above code, we first use{%- languages websites %}Get information about all language sites with tags. To avoid displaying unnecessary switchers when there is only one language, we added{%- if websites and websites|length > 1 %}The judgment. Subsequently, byforlooping through eachitem(i.e., each language site), utilizingitem.Linkto generate jump links, and combiningitem.LanguageIconoritem.LanguageEmojianditem.LanguageNameto build intuitive switching options.{%-and-%}The use of auto is to remove extra blank lines before and after the label, keeping the output HTML neat.

Example two: Optimize SEO:hreflangAutomatic generation of tag

For websites targeting international users, proper configuration is necessary.hreflangTags are crucial for Search Engine Optimization (SEO).It can inform search engines that a page has multiple language versions or regional versions, thus avoiding duplicate content issues and ensuring that users can access the page best suited to their language or region.languagesLabels can elegantly help us automatically generate these links.

You need to set up in the website's<head>area (usually locatedbash.htmlorheader.htmlIn the public template files) add the following code:

{# 这是在您的 <head> 标签内 #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}

This code will iterate through all configured language sites and generate one for each site:<link rel="alternate" hreflang="xx-xx" href="yyy.com">标签。其中 Englishitem.LinkIt provides the URL of the current language version,item.Languagethen provides the corresponding language or region code (for exampleenmeans English,en-us