How to use the `languages` tag in AnQiCMS templates to display language options?

In today's globalized digital world, multilingual support for websites has become crucial for expanding markets and serving a diverse range of user groups.AnQiCMS (AnQiCMS) is well-versed in this field, deeply integrating multilingual functionality into its core architecture, committed to providing lightweight and efficient content management services to support its global layout.For website operators and template developers, understanding how to efficiently utilize AnQiCMS templateslanguagesTag to display multilingual options, it is a must course for building an internationalized website.

AnQiCMS multilingual feature overview

Before delving deeperlanguagesBefore the label, let's briefly understand the multilingual implementation of AnQiCMS. The multilingual support of AnQiCMS is not a simple automatic translation of all content, but provides a flexible mechanism:

  1. System language package:This mainly affects the management interface of AnQiCMS, the system-built prompts, and some front-end preset texts.You can select the 'Default Language Pack' in the 'Global Feature Settings' to switch the display language of these built-in parts, such as Chinese or English.
  2. Content in multiple languages:For actual content on the website, such as articles, products, and single-page applications, AnQiCMS usually recommends using the "Multi-site Management" feature to implement this. This means you can create an independent site for each language (such asen.yourdomain.comUsed for English,fr.yourdomain.comUsed in French), and maintain the content of each site in its own language version. This ensures the independence of the content 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 with language file.

And today's main character is——languagesLabel, it is indeed a significant bridge, enabling the front-end template to dynamically list and connect to these configured multilingual site options, thereby building a user-friendly language switching function.

languagesLabel: Portal for language switching

languagesThe tag is a key tool in the AnQiCMS template used to obtain the list of all configured multilingual site lists.Its design philosophy is simple and efficient, allowing developers to easily present language switching options on the website front-end.

What makes this label unique is thatNo parameters are required. Simply declare and use it, AnQiCMS will automatically and intelligently find and display all multilingual site information configured in the background management.It returns an array containing multiple site objects, you can accessforLoop through these objects to build a language selector.

When you use{% languages websites %}...{% endlanguages %}this syntax,websitesThe variable will become an array, with eachitemrepresenting a language site, and including the following available fields:

  • LanguageName: Site language name, such as 'Simplified Chinese', 'English'.
  • Language: Language ISO code, such as 'zh-cn', 'en-us', which is forhreflangThe label settings are particularly important.
  • LanguageEmoji: Corresponding language Emoji icon, providing an intuitive visual identifier.
  • LanguageIcon: Corresponding language icon URL, if configured on the backend.
  • Name: General name of the site.
  • Link: The complete URL address of the language site, clicking it will jump to the corresponding language version.
  • Remark: Remarks information of the site (usually not used for front-end display).
  • Nofollow: Indicates whether the link should be addedrel="nofollow"Property (usually not used for frontend display).

Practical exercise: Use it cleverly in the templatelanguagesTag

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

Example 1: Build an intuitive language switcher

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

{# 假设这是您模板文件中的某个位置，例如 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 %}Label to get information about all language sites. To avoid displaying unnecessary switches when only one language is present, we added{%- if websites and websites|length > 1 %}the judgment. Subsequently, throughforLoop through eachitem(i.e., each language site), utilizingitem.Linkto generate jump links, and combineitem.LanguageIconoritem.LanguageEmojias well asitem.LanguageNameto build intuitive switching options.{%-and-%}The use is to remove the extra blank lines before and after the tag, to keep the output HTML neat.

Example two: Optimize SEO:hreflangAutomatic generation of tags

For websites targeting international users, proper configuration is requiredhreflangTags are crucial for search engine optimization (SEO).It can inform search engines that a page has multiple language or regional versions, thus avoiding duplicate content issues and ensuring that users can access the most suitable page for their language or region.languagesTags can elegantly help us automatically generate these links.

You need to specify in the<head>area (usually located inbash.htmlorheader.htmlAdd the following code to the public template file:

{# 这是在您的 <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">tags. Among themitem.LinkIt provides the URL for the current language version, whileitem.LanguageIt provides the corresponding language or region code (for exampleenmeans English,en-us