How to determine whether a site has multilingual versions and display a language switch button using the `tag-languages` multilingual site tag?
AnQi CMS, as a Go language system 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 we build websites for global users, and elegantly display the language switch button, which is a common problem that content operation experts may encounter in template design.Today, let us delve into the AnQi CMS together.tag-languagesLabel, uncover the mystery of language switching.
Anqi CMS language capability overview
In AnQi CMS's powerful feature matrix, multilingual support is one of its highlights.This is not only reflected in the system's built-in language packages that can switch the backend operation interface language, but more importantly, it provides a multi-site management solution at the content level, allowing you to provide completely independent and customized content experiences for users of different languages.This is different from simply translating the interface elements of a website, AnQi CMS is committed to achieving true multilingual 'site' management, allowing each language version to have its own domain name, content, and even SEO strategies.
Understanding this is crucial as it directly affects our grasp of the multi-language switching logic.In the system backend's 'Global Function Settings', although there is an option for 'Default Language Pack', it is more for the system's built-in prompts and backend interface language.And we discuss todaytag-languagesThe tag is used to retrieve the list of multi-language sites configured in the "Multi-site Management" section of the AnQi CMS backend, which is displayed to front-end visitors.
tag-languagesIn-depth analysis of tags
tag-languagesThe tag 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 includes the language name, language code, site link, and other key data of the site, which provides 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 the switch button,tag-languagesTags provide a very intuitive and elegant way. It does not require any parameters, just a simple call{% languages websites %}The system will return an array object containing information about all multilingual siteswebsites.
The key point is that if your Anqi CMS backendhas not configured any multilingual sitesthenwebsitesThis array will be empty. By using the conditional judgment ability of the template engine, we can easily realize the logic of dynamically displaying the language switch button. That is to say, only whenwebsitesThe language switch button will appear on the page when the array is not empty.
For example, the following code clearly shows 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 block,{%- if websites %}This line is the core of determining whether a multi-language site is configured. IfwebsitesThis variable contains data from at least one language site, then the condition is true, the switch button'sdivThe language links inside the container will be rendered; otherwise, ifwebsitesis empty, then the entire multilingual switch part will not be displayed, ensuring the simplicity of the interface and the relevance of the function.
Tag parameters and available fields
tag-languagesThe tag itself is very concise,does not accept any parameters. It always tries to get the list of all configured multi-language sites under the current Anq CMS instance.
And when you go through{% languages websites %}Successfully obtainedwebsitesAfter the array, you can iterate over each oneitemrepresenting a language site, eachitemprovides rich field information for you to use, including:
LanguageName: Site language name in Chinese, for example 'Chinese', 'English'.Language: Language's international standard code, for example 'zh-cn', 'en-us', which is for SEO'shreflangTags are especially important.LanguageEmoji: An emoji representing a language, such as 🇨🇳, 🇬🇧, which can be used to make the interface more lively.LanguageIcon: The icon URL for the language, you can upload a custom flag or language icon.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 added.nofollowAttribute (usually used for SEO).
Practice building multilingual toggle buttons
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, even in a floating sidebar.Through combiningitem.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 for thedivandaLabel beautification, such as setting font size, color, hover effects, etc., so that the language switch button blends in with the overall design style.
SEO optimization considerations for multilingual websites
For a multilingual website, simply implementing content switching is not enough; it also needs to consider the SEO strategy. Anqi CMS supports multilingualism andtag-languagesTags provide convenience in this regard, especially throughhreflangthe use of tags.
hreflangThe tag tells search engines that your website has content in different languages or regions.This helps search engines provide the most relevant pages for users in different regions or languages, avoiding duplicate content issues and improving user experience.tag-languagesthe tags returned byitem.Linkanditem.Languagefield, which is to constructhreflangthe key data required for tags:
{# 将 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 one for each language site.link rel="alternate"The label clearly indicates the other language versions of the current page and their corresponding URLs and language codes, greatly enhancing the international SEO performance of the website.
Summary
Of Security CMStag-languagesThe label, with its concise and powerful features, provides a solid foundation for the construction and management of multilingual sites.By simple conditional judgments, we can not only intelligently display or hide the language switch button, but also flexibly use the site information provided, combine with SEO practices, and bring 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.
Frequently Asked Questions (FAQ)
1.tag-languagesWhy does the tag return an empty list?
Iftag-languagesOr why is the tag not outputting any content in the template?websitesThe variable is empty, which is usually because you have not configured any multilingual sites in the "Multi-site Management" feature of the Anqin CMS backend.Make sure 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 Anqi CMS backend andtag-languagesWhat are the differences between tags?
“Default language package” settings (located in the background “Global Function Settings”) mainly control the language used by the Anqi CMS background management interface and the system built-in prompts.For example, if you set it to 'English', the backend menu and prompts will become English. Andtag-languagesThe tag is used to get the front-end oriented, configured in the "Multi-site management".Content-level multilingual siteList. In short, the former affects the system UI, and the latter affects the content of the website and the language versions that visitors can switch between.
How to add style to a multilingual toggle button to make it look more beautiful?
tag-languagesThe tag itself is only responsible for outputting HTML structure and data, not any styles. You can use CSS to beautify the generated language switch button. For example, in the above code example, divWrapped text and various<a>tags. You can add class names todivoratags (')class) or directly through the selector, write CSS rules to control their layout, font, color, background, hover effects, etc., to keep them consistent with your website's overall design style.