As an experienced website operations expert, I am well aware of the importance of multilingual support when building a global website. AnQiCMS (AnQi CMS) provides powerful and flexible functions in multilingual content management, among whichlanguagesThe label is the key to achieving this goal. Today, let's delve into it in detail.languagesthe tags returned bywebsitesVariable, what type is it, and how can we cleverly use it to build our multilingual site.
RevelationlanguagesTag: Bridge of multilingual sites
In AnQiCMS template development,languagesThe tag plays a crucial role in obtaining the list of all configured multilingual sites. Its usage is very concise and clear, usually defined as follows:{% languages websites %}As clearly indicated in the document, this tagdoes not accept any parametersThis means that no matter where you call it, it will reliably return all the multilingual site information you have set in the AnQiCMS backend, unbiased and comprehensive.
This design philosophy embodies the unity and convenience of AnQiCMS in multi-language functions.You do not need to pass complex parameters for different scenarios, just with one call, you can get an overview of the global multilingual configuration of the website.
websitesThe true form of a variable: an array object rich in structure
Then,languagesthe tag returns thewebsitesWhat is the specific type of this variable? The answer is:websitesIs aarray objectThis means it is not a simple string or number, but a collection of multiple elements, each representing an independent multilingual site configuration.
due towebsitesis an array, we need to use it in the templateforto iterate through it, so that we can access the details of each site one by one. Each item being iterated throughitemEach element carries the complete context information of a multilingual site, with a series of practical fields:
LanguageName(site language name)This is displayed to the user, usually the local name of the language, such as 'Chinese', 'English', etc., for the convenience of users to understand intuitively.Language(Language code)A standardized language identifier, such as 'zh-cn', 'en-us'. It is used in constructing URLs, settinghreflangIt is crucial when communicating with search engines.LanguageEmoji(Language Emoji): To enhance user experience, AnQiCMS allows the configuration of an Emoji expression for each language, such as China is 🇨🇳, and the UK is 🇬🇧.This plays a vital role in the language switcher.LanguageIcon(Language Icon)If you prefer traditional flag icons or custom icons, you can configure the icon URL path here. WhenLanguageIconWhen present, the icon is usually displayed first, otherwise an Emoji is shown.Name(Site Name): This is the name of the language site, which can beLanguageNameThe same can also be a more specific site brand name, such as 'AnQi CMS Chinese Site'.Link(Link address)This is the complete URL pointing to the multilingual site. When the user clicks the language switch button, the link will guide them to the corresponding language version.Remark(Note)A optional remark field, which can be used for internal management or to provide additional hints.Nofollow(Whether nofollow)A boolean value (or 0/1) indicating whether the link should includerel="nofollow"Property. This is used in SEO strategy to control the transmission of link weight, especially for some non-core or links that do not want to pass weight.
Practical Application: Build Multilingual Switching and SEO Optimization
UnderstoodwebsitesAfter the structure of variables, we can show our skills in actual development.
1. Create a user-friendly multilingual switcher
A clear and intuitive language switch menu is an indispensable part of a multilingual website. Utilizewebsitesvariables, you can easily achieve this:
{%- languages websites %}
{%- if websites %} {# 仅当存在多语言站点时才显示切换器 #}
<div class="language-switcher">
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}" class="language-item">
{%- if item.LanguageIcon %} {# 优先显示自定义图标 #}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
{%- else %} {# 否则显示Emoji表情 #}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
This code first checks if there is a multilingual site, if there is, then it loops through each site's information and generates a toggle item for each site with a link, icon or Emoji and the language name.
2. Implement SEO-friendly Hreflang tags
For the SEO of multilingual websites,hreflangThe tag is to inform search engines that your page has other language or regional versions.Using it correctly can avoid duplicate content issues and ensure that search engines display content in the correct language to the target user.
You can place the following code snippet in the website template's<head>Area:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
here,hreflangThe value of the attribute is used directlyitem.Languagefield, andhrefThe attribute points toitem.Link, perfectly achieving SEO standards. If your website also contains content for specific regions such aszh-hkRepresents the traditional Chinese language version for Hong Kong, this structure also supports it well.
Summary
AnQiCMS'languagesThe tag and the returned value.websitesAn array object, providing a clear, efficient, and powerful multilingual solution for website operators and developers. By understandingwebsitesis an array containing multiple site configurations as well as the objects contained in each siteLanguageName/Language/LinkThe keyword field allows us to easily build a user-friendly, SEO-optimized, and easy-to-maintain multilingual website.In today's global internet environment, mastering these functions will undoubtedly win more audiences for your website and expand a broader market.
Frequently Asked Questions (FAQ)
Q1:languagesCan the tag filter or specify the return of certain language sites?A1: Not allowed. As the document emphasizes,languagesThe tag does not accept any parameters, it always returns the list of all multilingual sites configured in the AnQiCMS backend. If you need to display only some languages on the front end, you need to get the completewebsitesAfter the array, in the template'sforthrough the loopifscreening conditions. For example, you can checkitem.Languagewhether it meets your display conditions.
Q2:LanguageEmojiandLanguageIconWhat are the differences, how should I choose to use it?A2:LanguageEmojiEmojis are displayed directly in the text without the need for additional image requests, usually load faster, but may not display consistently in some older browsers or operating systems.LanguageIconIs an image URL, it can be customized to be a national flag icon or any picture you like, making the display more uniform and more distinctive of the brand, but it will increase the cost of image loading. You can choose to use it according to the design style of the website, performance requirements, and compatibility with the target user's device, usually the template will try to display it first.LanguageIconIf empty, fallback toLanguageEmoji.
Q3:websitesIn variables,NofollowWhat is the purpose of the field?A3:NofollowThe field is used to control whether to add in the generated linkrel="nofollow"Property.rel="nofollow"It is an HTML attribute that informs search engines not to pass link page authority to the target page and also not to consider the target page as an endorsement of the current page.This is commonly used in SEO to handle user-generated content (such as links in comments) or external links that you do not want to pass SEO weight.In multi-language switch links, it is usually not setnofollowThese links are intended to help search engines discover other language versions of the website and pass related signals.But in some special cases, operators may have their own SEO strategy considerations and choose to enable it.