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

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

Flexible construction of multilingual site switching function

The AnQi CMS was designed with the needs of enterprises and operators in mind for global deployment, natively supporting multi-site management and switching of multilingual content.This means you can easily manage multiple content sites for different language markets under one safe 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 usinglanguagesTemplate tag, we can obtain information about all configured multilingual sites and generate switch links accordingly.This not only helps users navigate freely between different language versions, but also plays a crucial role in search engine optimization (SEO), ensuring that search engines can correctly identify and index the various language versions of your website.

UnderstandinglanguagesTemplate Tag

languagesThe tag is designed by Anqi CMS specifically for the multi-language site switching feature.It can retrieve the list of all multilingual sites configured and enabled in the background.This tag 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 in the template{% languages websites %}then,websitesThe variable will become an array object containing information about all multilingual sites.This means you can traverse the array in a loop, access the specific information of each site one by one, and display it on the page.

websitesEach element (which we usually name in loops)itemcontains the following keywords that are the basis for building language switch links:

  • LanguageNameLanguage name of the site, for example, "Chinese", "English".
  • LanguageLanguage code of the site, for example, "zh-CN", "en-US", which is forhreflangThe label settings are particularly important.
  • LanguageEmoji: The emoticons associated with the language, 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
  • LinkThe complete URL link of the language site, which is the target address when the user switches languages.
  • RemarkandNofollowOther optional attributes for link notes and whether to add.nofollowProperty.

Build a language switcher in the template

NowlanguagesThe data provided by the label allows us to build a language switcher at any location in the website template (usually in the header, footer, or sidebar). The core idea is to traversewebsitesArrays, create an HTML element with its link and identifier for each language site.

Here is a detailed example of implementing a language switcher in a 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 retrieve the list of multilingual sites and store them inwebsitesthe variable.-Symbol used to remove the blank lines generated by the tag itself, making the output cleaner.
  • {%- if websites %}CheckwebsitesThe variable is not empty, ensure that the switcher is rendered only when there are available language sites, 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 display the language icon.
  • {%- else %}If there is no icon, then use emojis as a second choice.{{item.LanguageEmoji}}.
  • {{item.LanguageName}}Display the text name of the language, convenient for users to recognize.

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 the SEO of multilingual websites: 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's<head>Partially addhreflangthe tag.hreflangThe tag tells the search engine about alternative versions of the page in other languages or regions, 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 necessaryhreflanglinks and insert them into the HTML's<head>block:

{%- 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）的<head>Inside the tag.

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

By implementinghreflangLabel, you 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 multilingual switching feature, we still need to pay attention to some operational details: Firstly, make sure each language siteconfig.jsonor the basic URL configuration in the background settings is correct, which directly affectsitem.LinkThe generation. Secondly, 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, regularly check that the links on all language sites are valid and that the content is synchronized to ensure a good user experience and data consistency.

AnQi CMS through its built-inlanguagesTags, provide 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 use the tag in the templatelanguagesLabel, but no language switch link is displayed on the page?

This is usually because your CMS backend has not configured or enabled any multilingual sites.Please go to the multi-site management or language-related configuration items 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.languagesThe label will only pull the enabled site data actually existing in the background.

2.languagesthe tags returned byitem.LinkIs it always pointing to the corresponding language version of the current page?

item.LinkThis points to the homepage of each multilingual site. If you want to stay on the corresponding language version of the current content page when the user switches language (for example, if the user is on the "About Us" page of the Chinese site and switches language to the "About Us" page of the English site), you may need to dynamically construct the route of the current pageitem.LinkThe value. This usually involves obtaining the path information of the current page in the template and then withitem.Link(i.e., the root directory of the corresponding language site) concatenation, or dynamically handling jump logic on the client side with JavaScript to achieve a more intelligent language switching experience.

3.hreflangAre tags really important for the SEO of multilingual sites?

Yes,hreflangTags are crucial for SEO of multilingual and multi-regional sites.It clearly tells search engines all language or regional alternative versions of each page on your website, thus preventing search engines from mistaking your different language content as duplicate content and ensuring that search engines can display the corresponding pages to users of the correct language.Correct usagehreflangIt can effectively improve the visibility of your website globally, avoiding internal competition between sites of different languages.