安企CMS, as a Go language system that has been deeply rooted in the field of enterprise-level content management, its powerful multilingual support is undoubtedly one of the core advantages that help enterprises expand into the global market.How can we intelligently judge whether the current site is configured with a multilingual version when building websites for global users, and elegantly display the language switch button, which is a common problem encountered by content operation experts in template design.tag-languagesLabel, uncover the mystery of language switching.
Overview of AutoCMS multilingual capabilities
It is crucial to understand this, as it directly affects our grasp of the multi-language switching logic.The “Global Function Settings” in the system backend, although there is an option for “Default Language Pack”, it is more for the system's built-in prompts and backend interface language.tag-languages标签，则是用来获取你在安企CMS后台“多站点管理”中实际配置的、面向前端访客的“多语言站点”列表。
tag-languagesDeep analysis of tags
tag-languagesThe label is a template tag designed by Anqi CMS specifically for handling multilingual site list.Its main function is to help you get all the multi-language site information configured in the front-end template.This information set includes the language name, language code, site link, and other key data of the site, providing a solid foundation for building a fully functional language switcher.
Core logic: Determine if the site has multilingual versions
Determine if the current site has multilingual versions and display a toggle button,tag-languagesLabels provide a very intuitive and elegant way. It requires no parameters, just a simple call{% languages websites %}, the system will return an array object containing information about all multilingual siteswebsites.
Here lies the key point, if your security CMS backendhas not configured any multilingual sitesso thatwebsitesThis array will be empty. Using the conditional judgment capability of the template engine, we can easily implement the logic of dynamic display of language switch buttons. That is to say, only whenwebsitesThe language switch button will only appear on the page when the array is not empty.
For example, the following code clearly demonstrates how to make a judgment:
{%- languages websites %}
{%- if websites %}
<div>
<span>切换语言：</span>
{# 遍历并显示每个语言站点 #}
{%- for item in websites %}
<a href="{{item.Link}}">
{%- if item.LanguageIcon %}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
{%- else %}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
In this code,{%- if websites %}This line is the core to judge whether there is a multi-language site configured. IfwebsitesThis variable contains at least one language site's data, then the condition is true, the switch button'sdivThe container and the language links inside it will be rendered; otherwise,websitesif it is empty, the entire multi-language switch part will not be displayed, ensuring the simplicity and relevance of the interface.
Label parameters and available fields
tag-languagesThe label itself is very concise,accepts no parameters. It always tries to get the list of all configured multilingual sites under the current security CMS instance.
When you go through{% languages websites %}to successfully obtainwebsitesAfter the array, you can iterate over eachitemrepresenting a language site), eachitemprovides rich field information for you to use, including:
LanguageName: 站点语言的英文名称，例如“Chinese”、“English”。}]Language: Language international standard code, for example “zh-cn”、“en-us”, this is for SEO'shreflangTags are particularly important.LanguageEmoji: An Emoji expression related to language, such as 🇨🇳, 🇬🇧, which can be used for a more lively interface display.LanguageIcon: Language corresponding icon URL, you can upload custom flags or language icons.Name: Display name of the site.Link: The complete URL of the language site, clicking on which will jump to the corresponding language version.Remark: Site remark information.Nofollow: Whether the link is addednofollowAttribute (usually used for SEO).
The practice of building a multilingual switch button.
Based on the above fields, we can easily build a beautiful and practical multilingual switch button.For example, you can place this code in the header or footer of a website, or even in a floating sidebar.item.LanguageIconoritem.LanguageEmojiYou can provide users with intuitive visual cues.
If you want the style to be more unified, you can preset a set of CSS rules fordivandaLabel beautification, such as setting font size, color, hover effect, etc., to integrate the language switch button into the overall design style.
SEO optimization considerations for multilingual websites
For multilingual sites, simply implementing content switching is not enough; SEO strategies also need to be considered. The multi-language support of Anqi CMS andtag-languagesLabels provide convenience in this aspect, especially throughhreflangthe application of labels.
hreflangTags tell search engines that your site has content in different languages or regions.This helps search engines provide the most relevant pages for users in different regions or languages, avoid duplicate content issues, and improve user experience.tag-languagesTag returnsitem.Linkanditem.Languagefields, which are exactly for buildinghreflangthe key data needed for labels:
{# 将 Hreflang 标签放入 HTML 的 <head> 区块 #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code should be placed in the website template's<head>Within the area. It will generate a language site for each.link rel="alternate"Tags clearly indicate the other language versions of the current page, their corresponding URLs, and language codes, greatly enhancing the international SEO performance of the website.
Summary
Anqi CMS'stag-languagesLabels, with their concise and powerful functions, provide a solid foundation for the construction and management of multilingual sites.Through simple conditional judgments, we can not only intelligently display or hide the language switch button, but also flexibly use the site information it provides, combining SEO** practices, to bring a seamless and optimized browsing experience to global users.This is the embodiment of AnQi CMS as an enterprise-level content management system, committed to providing an efficient, customizable, and easy-to-expand solution.
Common Questions (FAQ)
1.tag-languagesWhy is the label returning an empty list?
Iftag-languagesNo content is output by the label in the template, orwebsitesThe variable is empty, which is usually because you have not configured any multilingual sites in the "Multi-site Management" feature of the Anqi CMS backend.Please ensure that you have created and enabled at least one language site other than the default site.This tag will only return the list of multilingual sites that are actually configured and enabled in the background.
2. The "default language package" setting in the Security CMS backgroundtag-languagesWhat is the difference between tags?
“Default language package” settings (located in the background “Global Function Settings”) mainly control the language used in the CMS background management interface and the built-in system prompts.For example, if you set it to "English", the backend menu and prompts will become English.tag-languagesLabels are used to retrieve the front-end, visitor-facing labels that are configured in “Multi-site Management”Content-based multilingual siteThe list. In short, the former affects the system UI, and the latter affects the content of the website and the visitor's ability to switch language versions.
How to add styles to the multilingual switch button to make it look more beautiful?
tag-languagesThe tag itself is only responsible for outputting HTML structure and data, not including any style. You can use CSS to beautify the generated language switch button. For example, in the above code example,divWrapped text and options for “Change language”<a>You can add a class to thedivoralabel by using “class）or directly through a selector, write CSS rules to control their layout, font, color, background, hover effects, etc., to keep them consistent with the overall design style of your website.