A safe CMS is committed to providing enterprises with efficient and flexible content management solutions, one of its core highlights is its powerful multilingual support capabilities.In today's globalized world, a website that can easily handle multilingual content undoubtedly provides strong support for enterprises to expand into international markets and reach a wider audience.languagesLabel, build a natural and smooth multilingual switching menu on your website to open a new chapter in global content marketing.
Embrace globalization: Anqi CMS multilingual ecosystem
In Anqi CMS, multilingual support is not just about translating website interface text, but also means providing a complete and independent site content experience for users of different languages.This means you can provide customized content for users of different languages, even for SEO optimization according to different regions.languagesThe tag is one of the key tools to achieve this goal, it can help you easily display and switch to different language sites on the page.
Core Tool:languagesTag parsing
languagesThe tag is a special tool in Anqi CMS template engine used to obtain the list of all multilingual sites you have configured.Its design is very simple and intuitive, no additional parameters are required when using it.{% languages websites %}It will silently collect all the language site information configured in the background for you, and these information will be named aswebsitesThe array object, for you to traverse and display in subsequent template code.
ThiswebsitesEach element in the array represents a language site and contains all the useful information needed to build a multilingual switch menu, such as:
LanguageNameThis site's language name, for example 'Chinese', 'English'.Language: The ISO code of a language, such as “zh-CN”, “en-US”, is crucial for settinghreflangattributes for SEO optimization.LanguageEmoji: Language corresponding Emoji icon, such as🇨🇳, providing users with intuitive visual recognition.LanguageIcon: The icon URL corresponding to the language, if a dedicated icon is configured on the backend, it can be used to display richer visual effects.Name: The name of the site.Link: Switch to the full URL link of the language site.Nofollow: A boolean value indicating whether the link should be addedrel="nofollow"property, which is usually used for SEO control.
Build a practical multilingual switch menu
NowlanguagesWith the data provided by the label, building a multilingual switch menu on the page becomes effortless. You just need to apply one in the template.forLoop, iteratewebsitesArray, then generate the corresponding switch links according to each language site's information.
For example, you can add a concise language switch area in the header or footer of the website. Below is a common implementation example that displays language names and prioritizes configured language icons, and if an icon is not configured, it uses an Emoji as a backup:
{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}" class="language-item {% if system.Language == item.Language %}active{% endif %}">
{%- if item.LanguageIcon %}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} 图标" />
{%- else %}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
In this code, we first go through{% languages websites %}To get the list of all language sites. Next, aforLoop throughwebsitesArray. For each language siteitem, we generate a<a>tag, itshrefAttribute is directly bound toitem.Link. To enhance the visual effect, we judgeitem.LanguageIconwhether it exists, display the icon first, otherwise displayitem.LanguageEmoji. At the same time, in order to make the user clearly know which language version is currently in use, we comparesystem.Language(The language code of the current website, which can be obtained by{% system with name='Language' %}retrieving) withitem.LanguageAdded a link for the current language,activewith a class name to highlight it with CSS.
More than just switching: Hreflang and SEO optimization
The success of a multilingual website does not only lie in providing a switch option, but also in ensuring that the search engine can correctly understand and index your multilingual content.hreflangThe attribute is the key SEO signal to achieve this goal.It tells search engines that your page has other language or regional versions, which helps avoid duplicate content issues and ensures that users can see content that matches their language and region when searching.
Of Security CMSlanguagesTags can also help you easily generate these.hreflangLabel. Just place the following code snippet in your website template's<head>area:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code will generate a label for each language site<link rel="alternate">wherehrefthe link points to the language site,hreflangSet to the corresponding language code. This will greatly enhance the SEO performance of your multilingual website.
Improve the multilingual experience: content translation and backend configuration
It should be emphasized that,languagesTags are mainly used to build language switch menus and generatehreflangproperties, which will not automatically translate the content of your website articles. To provide a true multilingual content experience, you will also need:
- Backend content management:The AnQi CMS supports multi-site management, you can set up an independent site for each language (or manage different language content in other ways).In these independent sites, articles, products, single-page contents, and other corresponding languages are published and managed separately.
languagesTag generation:item.LinkIt is pointing to the URLs of these configured multilingual sites. - Template static text translation:For static text in templates (such as navigation menu items, button text, footer statements, etc.), Anqi CMS provides
{% tr "key" %}tags for translation. You need to create them in the template directorylocalesFolder, and create a corresponding one for each language.ymlTranslate the file, for examplezh-CN/default.ymlanden-US/default.ymlTo define key-value pairs to store the translation text of different languages.
With these detailed configurations and flexible tag usage, Anqi CMS can help you build a powerful, user-friendly multilingual website, making your company more competitive on the international stage.
Frequently Asked Questions (FAQ)
1. Do I need to create a separate site for each language in the Anqi CMS backend to use it?languagesTag?
Yes,languagesThe tag returns the list of language sites you have configured in the "Multi-site Management" backend of Anqi CMS.Each language site will usually correspond to an independent domain, subdomain, or subdirectory.The tag will automatically retrieve the link information for these configured sites.If you do not create a multilingual site, this tag will not return any meaningful data.
2.languagesWill the tag automatically translate my article or product content?
No.languagesThe main function of the tag is to obtain the switch links and related metadata of multilingual sites, it does not have the function of content translation. The specific content of your website, such as articles and product descriptions, needs to be manually translated and published on the corresponding language site background, or by using{% tr "key" %}Label the static text for localization in the template.
3. Should I still use the label if my website currently has only one language?languagesAm I supposed to use the label?
Even if your website currently only supports one language, it is a good habit to reservelanguagesthe position of tags.