As an experienced website operations expert, I am well aware of the importance of multilingual support in building a global website. AnQiCMS (AnQi CMS) provides powerful and flexible functions in multilingual content management, among whichlanguagesThe tag is the key tool to achieve this goal. Today, let's delve into it in depth.languagesTag returnswebsitesVariable, what type is it, and how should we skillfully use it to build our multilingual site.
UnveilinglanguagesTag: Bridge of Multilingual Sites
In the template development of AnQiCMS,languagesTags play a crucial role in obtaining the list of all configured multi-language sites. Its usage is very concise and clear, usually defined as follows:{% languages websites %}As clearly indicated in the document, this tagaccepts no parametersThis means that no matter where you call it, it will faithfully return all the multi-language site information you set in the AnQiCMS backend, unbiased, covering everything.
This design philosophy reflects the uniformity and convenience of AnQiCMS's multilingual functionality.You do not need to pass complex parameters for different scenarios. Just one call, and you can obtain a global multi-language configuration overview of the website.
websitesThe actual variable: a richly structured array object
So,languagesThe one returned by the labelwebsitesWhat 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 containing multiple elements, each representing an independent multilingual site configuration.
Due towebsitesis an array, we need to use it in the templateforto iterate through it and access the details of each site one by one. Each item being iterateditem(which is each element in the array) carries a complete context information of a multilingual site, and has the following 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)This is 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)In order to enhance user experience, AnQiCMS allows for the configuration of an Emoji expression for each language, such as China is 🇨🇳, and the UK is 🇬🇧.This plays a crucial 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 the Emoji is displayed.Name(Site Name)This is the name of the language site, which can be the same asLanguageNameThe same, it can also be a more specific site brand name, such as “AnQi CMS Chinese Site”.Link(Link address)This is the complete URL for the multilingual site. When the user clicks the language switch button, the link will guide them to the corresponding language version.Remark(Note)An optional remark field that can be used for internal management or to provide additional hints.Nofollow(Nofollow)An integer (or 0/1), indicating whether the link should includerel="nofollow"This is used in SEO strategies to control the transmission of link weight, especially for some non-core or links that are not intended to pass weight.
Practice Application: Building Multilingual Switching and SEO Optimization
UnderstoodwebsitesAfter the structure of variables is established, we can fully demonstrate 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 for the existence of multi-language sites, and if they exist, it loops through each site's information to generate a switch option for each site with a link, icon or Emoji, and language name.
2. Implement SEO-friendly Hreflang tags
For the SEO of multilingual websites,hreflangTags tell search engines that your page exists in other languages or regional versions.It can be used correctly to avoid duplicate content issues and ensure that search engines display the correct language content to the target users.
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 directly.item.Languagefield, whilehrefthe attribute points toitem.Link, perfectly achieving SEO standards. If your website still contains content for specific regions (such aszh-hkThis is the language version of traditional Chinese for Hong Kong, and this structure also supports it very well.
Summary
AnQiCMSlanguagesThe label and the returned valueswebsitesAn array object that provides a clear, efficient, and powerful multilingual solution for website operators and developers. Through understandingwebsitesis an array containing multiple site configurations, as well as the objects contained within each siteLanguageName/Language/LinkWe can easily build a user-friendly, SEO-optimized, and easy-to-maintain multilingual website with the appropriate keywords.In today's globalized internet environment, mastering these functions will undoubtedly win more audiences for your website and expand a broader market.
Common Questions (FAQ)
Q1:languagesCan tags filter or specify certain language sites to be returned?A1: Not allowed. As emphasized in the document,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 a portion of the languages on the frontend, you will need to get the completewebsitesAfter the array, in the template'sforin the loop byiffilter by conditions. For example, you can checkitem.Languagewhether it meets your display conditions.
Q2:LanguageEmojiandLanguageIconWhat is the difference, and how should I choose to use it?A2:LanguageEmojiIs an emoji that is displayed directly in the text, without the need for additional image requests, typically loads faster, but may not display consistently in some older browsers or operating systems.LanguageIconIs an image URL, which can be customized to be a national flag icon or any image you like, providing a more unified and branded appearance, but it will increase the cost of image loading. You can choose to use it based on the design style of the website, performance requirements, and compatibility with the target user's devices, and templates usually try to display it first.LanguageIconIf empty, it falls back toLanguageEmoji.
Q3:websitesin the variableNofollowWhat is the role of the field?A3:NofollowField is used to control whether to add in the generated linkrel="nofollow"properties.rel="nofollow"is an HTML attribute used to inform search engines not to pass link page weight to the target page and also not to view 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.nofollow[en] Because these links are intended to help search engines discover other language versions of the website and pass associated signals.But in certain special cases, operators may have their own SEO strategy considerations and choose to enable it.