How to call the multi-language site switch link in AnQiCMS template?

As an experienced CMS website operation personnel in the field of information security, I know that multi-language site switching links are crucial for expanding the international market and improving user experience.Auto CMS provides us with a convenient and efficient solution with its powerful multi-site and multi-language support features.Below, I will elaborate on how to call the multi-language site switching link in AnQiCMS template.

Flexiblely build the multi-language site switch function

At the design stage, AnQi CMS fully considered the needs of enterprises and operators in global deployment, and originally supports multi-site management and the switch between multilingual content.This means you can easily manage multiple content sites for different language markets under a single secure CMS instance.To achieve seamless switching between these sites, Anqi CMS provides a simple yet powerful template tag that allows you to easily display language switching options on the website front end.

By utilizinglanguagesTemplate tags, we can obtain all the configured multi-language site information and generate switch links accordingly.This not only helps users navigate freely between different language versions, but also plays a key role in search engine optimization (SEO), ensuring that search engines can correctly identify and index all language versions of your website.

UnderstandinglanguagesTemplate tags

languagesLabels are designed by Anqi CMS specifically for the multi-language site switching feature.It can fetch all the multilingual site lists that are configured and enabled in the background.This label usage is very intuitive, it does not require any additional parameters, just declare a variable in the template to receive the returned site data collection.

When you call a tag in a template and specify a variable name (such as){% languages websites %}whenwebsitesThe variable will become an array object containing information about all multilingual sites.This means you can iterate over this array in a loop, access the specific information of each site one by one, and display it on the page.

websitesEach element in the array (we usually name it in the loop)itemcontains the following keywords, which are the basis for constructing language switch links:

  • LanguageName：Site language name, for example “Chinese”, “English”.
  • Language：Site language code, for example “zh-CN”, “en-US”, which forhreflangThe label settings are particularly important.
  • LanguageEmoji：This language is associated with the emojis, which can be used for visual language identification.
  • LanguageIcon：The icon address of the language, providing a richer visual display.
  • Name：The display name of the site.
  • Link：The complete URL link of the language site, which is the target address for users to switch languages.
  • RemarkandNofollow：Other optional attributes for link notes and whether to addnofollowproperties.

Build language switcher in template

HencelanguagesLabel provides data, we can build a language switcher at any location on the website template (usually in the header, footer, or sidebar). The core idea is to traversewebsitesArray, create an HTML element with its link and identifier for each language site.

Here is a detailed example of implementing a language switcher in an Anqi CMS template:

{%- 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-icon" />
        {%- else %}
        <span class="language-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

In the above code snippet:

  • {%- languages websites %}and{%- endlanguages %}Declared to get the list of multilingual sites and store it inwebsitesthe variable.-is used to remove the blank lines generated by the tag itself, making the output cleaner.
  • {%- if websites %}CheckwebsitesVariable is empty, ensure that the switcher is only rendered when there is an available language site, to avoid unnecessary empty elements.
  • {%- for item in websites %}Iterate through each language site.
  • href="{{item.Link}}"Set the target address of the language switch link.
  • {%- if item.LanguageIcon %}Prefer to use language icons to display.
  • {%- else %}If there are no icons, use emojis as a substitute.{{item.LanguageEmoji}}.
  • {{item.LanguageName}}Display the text name of the language, for easy user recognition.

Through such a structure, you can present a clear and easy-to-use language switch list on the page, where users can click to jump to the corresponding language site.

Optimize multilingual site SEO: Hreflang tag

In addition to providing users with a visible language switch link, it is also crucial to correctly inform search engines of your multilingual site structure. This is usually done by including on each page<head>some additionshreflangtags to achieve this.hreflangThe label informs search engines about the other languages or regional alternatives that this page has, thus avoiding duplicate content issues and ensuring that the correct language version of the page is displayed to the corresponding users.

UtilizelanguagesLabel, we can dynamically generate all necessaryhreflangand insert it into the HTML block<head>:

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

This code should be placed in your template file (for examplebase.html) of<head>Inside the tag.

  • rel="alternate"This indicates that this is a substitute version of the page.
  • href="{{item.Link}}"Points to the URL of a specific language version.
  • hreflang="{{item.Language}}"Specifies the language (and optionally the region) corresponding to the URL.

By implementinghreflangTags, you have not only improved the user experience, but also effectively optimized the search engine visibility of multilingual websites, ensuring that your content can reach a global audience.

Operation Tips

After deploying the multi-language switching feature, we still need to pay attention to some operational details: Firstly, ensure that each language siteconfig.jsonOr the basic URL configuration in the background settings is correct, which directly affectsitem.LinkThe generation.Next, it is recommended to place the language switcher in a prominent position on the website, such as the top navigation bar, footer, or sidebar, so that users can easily find it.Finally, check the links on various language sites regularly to ensure they are valid and the content is synchronized to maintain user experience and data consistency.

Safe CMS through its built-inlanguagesTags, providing powerful and flexible tools for the construction and management of multilingual sites, allowing you to focus more on high-quality content creation, thus better serving global users.

Frequently Asked Questions

1. Why did I uselanguagesLabel, but there is no language switch link displayed on the page?

This is usually because your security CMS backend has not configured or enabled any multilingual sites.Please go to the multilingual site management or language-related configuration options in the system settings, make sure you have added at least one language site other than the default language, and that these sites are enabled.languagesLabel will only pull the data of enabled sites that actually exist in the background.

2.languagesTag returnsitem.LinkIs it always pointing to the corresponding language version of the current page?

item.LinkThe default redirection is to the homepage of each multilingual site. If you want the user to stay on the corresponding language version of the current content as much as possible when switching languages (for example, if the user is on the "About Usitem.LinkEnglish value. This usually involves retrieving the current page's path information in the template and then withitem.Link(That is, the root directory of the corresponding language site) is concatenated, or the jump logic is dynamically processed on the client side through JavaScript to achieve a more intelligent language switching experience.

3.hreflangIs the label really important for the SEO of multilingual sites?

Yes,hreflangLabels are crucial for SEO in multilingual and multi-regional sites.It can clearly inform search engines of all language or regional alternatives for each page of your website, thus preventing search engines from mistakenly considering your different language content as duplicate content, and ensuring that search engines can display the corresponding pages to users of the correct language.hreflangIt can effectively enhance the visibility of your website globally and avoid internal competition between different language sites.