How to iterate over the `languages` tag returned by the AnQiCMS template to list `websites`?

Unlock the multilingual potential of Anqi CMS: How to efficiently traverse in templateslanguagesthe tags returned bywebsitesList

As an experienced website operations expert, I am well aware of the importance of multilingual websites in global marketing.AnQiCMS (AnQiCMS) boasts its powerful multi-site and multi-language support, providing enterprises and content operators with a powerful tool for building international websites.languagesand how to cleverly traverse the returned resultswebsitesList, to add flexibility and user experience to your multilingual site.

languagesTag: the unified entry of a multilingual site

In AnQiCMS,languagesTags play a core role, allowing you to easily retrieve all multilingual site information configured in your system. Imagine if your website needs to support Chinese, English, Japanese and other languages, and you want to provide a convenient language switching option for users somewhere on the website, or insert SEO-friendlyhreflangTags, thenlanguagesThe tag is the foundation for realizing these functions.

The strength of this tag lies in its simplicity: itNo additional parameters are required. This means that whenever and wherever you calllanguagesThe tag will return a complete list covering all configured language sites. This list is wrapped in a name by AnQiCMSwebsitesin the array object, waiting for you to further process and display in the template.

Core operation: useforLoop throughwebsitesList

to unlockwebsitesThe treasure data in the list, we will naturally use the flexible AnQiCMS template engineforto iterate over the tags. By assigning thelanguagesthe tags returned bywebsiteslist to a variable (for examplewebsitesWe can visit the data of each language site one by one.

The basic traversal structure is as follows:

{%- languages websites %}
    {%- if websites %}
        {%- for item in websites %}
            {# 在这里处理每个语言站点的数据 #}
        {%- endfor %}
    {%- endif %}
{%- endLanguages %}

In the aboveforthe loop,itemThe variable represents an independent language site object in each iteration. ThisitemThe object carries rich information for each language site, including:

• LanguageName: The display name of the language, such as "Simplified Chinese" or "English".
• Language: The international standard code for language, such as "zh-CN" or "en-US", which is particularly important for SEO.hreflangThe attribute is especially important.
• LanguageEmojiEmoticons associated with languages, such as 🇨🇳 or 🇬🇧, provide convenience for visual presentation.
• LanguageIcon: A custom language icon URL, which will be very useful if you want to use an image as a language identifier instead of an Emoji.
• Name: The specific name of the site, which may beLanguageNameThe same, may also contain brand information.
• Link: The complete URL link of the language site, after clicking, you can directly jump to the corresponding language version page.
• Remark: Additional remarks information, which can be used for internal management or some special display.
• Nofollow: A boolean value indicating whether the link should be marked with...nofollowAttribute, usually used for friend links or when not passing weight.

Practical Application One: Build an Intuitive Language Switcher

Placing a language switcher in the header or footer of a website is a common practice to improve user experience. WithlanguagesLabels, this is easy to achieve. We can choose to display language names, Emoji, or custom icons according to the user's preferences.

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>切换语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="language-option">
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" class="language-flag" />
        {%- else %}
        <span class="language-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

This code will traverse all language sites and generate a clickable link for each site. It prioritizes displayingLanguageIconIf no icon is configured, it will display the next best optionLanguageEmojiand finally, withLanguageNameEnsure users can clearly identify and switch to the language they need.

Practical Application Two: Optimize SEO and ImplementhreflangTag

Proper configuration for the SEO of multilingual websites.hreflangThe label is crucial.It can effectively inform search engines about the language and regional relationships between different URLs, thus avoiding duplicate content issues and ensuring that users are guided to the most suitable pages for their language and region.languagesTags can also help us in the HTML of<head>Dynamically generate these key areas ofhreflang:

{# 将Hreflang标签放入HTML的<head>区块 #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}

Through this code, each language site will generate alinktag, hrefThe attribute points to the link of the language site,hreflangThe attribute is set to the corresponding language code. This is the format expected by search engines, which helps your multilingual content gain better visibility globally.

Some practical thoughts

By such iteration, you can not only create a language switcher with complete functions, but also accurately insert it into the HTML header of the websitehreflangLabel, this is crucial for the SEO of multilingual websites, as it can effectively inform search engines of your website's international layout, avoid duplicate content issues, and improve the ranking of different language version pages.

languagesThe concise and efficient tag reflects the thoughtful consideration of AnQiCMS in content management.It structures complex multilingual site data and exposes it to frontend developers through intuitive template tags, making the internationalization of websites simpler than ever.

Frequently Asked Questions (FAQ)

1.languagesCan the tag filter sites of a specific language?

languagesThe tag itself does not provide filtering parameters.It will return the list of multilingual sites configured in the AnQiCMS backend.{% for item in websites %}use labels inside{% if %}Conditional judgment, based onitem.LanguageFilter by properties.

2.websitesin the list ofLinkWill the properties automatically adapt to the current page's URL path?

item.LinkThe property usually returns the complete URL link of the language site.AnQiCMS usually tries to intelligently return a link to the language version corresponding to the current page, or at least the home page of the language site.The specific behavior may need to be determined based on your AnQiCMS multilingual configuration and routing rules, but in most cases, it will provide a user-friendly jump target.

3. How to display the currently selected language in the language switcher?

Althoughlanguagesthe tags returned byitemThe object does not have a directIsCurrentAn attribute is used to identify the current language, but you can pass the current language identifier (such as acurrent_language_codevariable) infora loop for comparison. For example:

`twig {%- languages websites %}

{%- for item in websites %}
    <a href="{{item.Link}}" class="language-option {% if item.Language == current_language_code %}active{% endif %}">
        {# ... 显示语言名称或图标 ... #