AnQiCMS provides a flexible and efficient solution for building multilingual websites, allowing your content to easily reach global users.In multilingual sites, clearly displaying the language information of the current page to visitors, and providing convenient language switch options, is crucial for improving user experience and the professionalism of the website.
Today, let's discuss how to naturally display the current site's language name, language code, and even vivid Emoji expressions or icons on the front page of your AnQiCMS website, making your multilingual website more attractive.
Understanding AnQiCMS multilingual support
The design core of AnQiCMS is one of its powerful multilingual support capabilities.It not only allows you to create and manage content in different languages, but also provides rich tags at the template level to help you dynamically retrieve and display language-related information.These features enable your website to provide customized browsing experiences for users of different languages, and also help search engines better understand and index the multilingual content of your website.
UtilizelanguagesLanguage information acquisition for tags
In AnQiCMS template system, to retrieve and display information of multi-language sites, we mainly rely on a powerful template tag ——languagesThis tag can retrieve the list of all configured multilingual sites and present it as an array object (for example, you can define it aswebsitesThe form of "）" returns. By looping through this array, you can access the details of each language site.
languagesThe usage of tags is very intuitive, it does not require any additional parameters, and it is directly wrapped in{% languages ... %}and{% endLanguages %}between, where you can place the content you want to loop displayed:
{%- languages websites %}
{# 在这里循环遍历每个语言站点信息 #}
{%- endLanguages %}
Inwebsitesevery element of the arrayitemThe English translation of 'auto' is 'English'. The core fields that we display on the front-end page for language information are as follows:
LanguageName: This is a language name that is easy to read, such as "Simplified Chinese" or "English".Language: International standard language code, such as “zh-CN” for simplified Chinese, “en-US” for American English, which is especially important for SEO tags.hreflangTags are particularly important.LanguageEmoji: System-defined, associated with a specific language's Emoji expressions, such as🇨🇳representing the Chinese language.LanguageIcon: This is a custom language icon link, you can upload exclusive icon images for each language to provide a more distinctive visual presentation.Link: 切换到该语言站点的完整URL地址，方便用户点击跳转。Name：站点的通用名称，通常与LanguageName一起使用或根据需求选择。
Application scenarios and code examples
Understood the available fields, let's take a look at how to apply them in real-world scenarios.
1. Create an intuitive language switcher
An clear language switcher is an indispensable part of a multilingual website. By combiningLanguageName/LanguageEmojiorLanguageIconandLink, we can easily build a user-friendly language selection menu.
The following is an example of code to create a language switcher, which will display the custom icon first, if no icon is available, it will display Emoji, and finally the language name:
{%- 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}}" class="language-icon" />
{%- else %} {# 如果没有图标，则显示Emoji #}
<span class="language-emoji">{{item.LanguageEmoji}}</span>
{% endif %}
<span class="language-name">{{item.LanguageName}}</span>
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
This code will traverse all configured language sites and generate a link for each site.The link text will intelligently display custom icons, Emoji, or the language name in plain text based on your configuration, and you can click to jump to the corresponding language site.
2. Optimize Search Engine: Addhreflangtags
For multilingual website SEO, using correctlyhreflangThe label is crucial. It helps search engines understand the language version of your website content, thus providing the most relevant language version page for users when they search.hreflangThe label is usually placed on the page.<head>In the block.
Utilizelanguagestags obtainedLanguage(language code) andLink(site link), we can easily generate these SEO-friendly labels:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code will generate one for each language version of your website.link rel="alternate"tag for each language site,hrefwith the attribute pointing to the URL of the language site,hreflangThe attribute specifies the corresponding language code. This helps search engines accurately identify the multilingual structure of your website.
Language setting management
It is worth mentioning that in the "Global Function SettingsThis setting is mainly used to adjust the display language of the built-in text in the system (such as the language of the back-end interface or certain system messages), but it will not automatically translate the articles, products, or categories on your website.The actual content of your website needs to be created or managed separately for each language version.AnQiCMS powerful content model and multi-site management function, which is designed to facilitate your content management.
Summary
AnQiCMS through providing intuitive and feature-rich template tags, greatly simplifies the work of displaying multilingual website front-end language information. Whether it is to build a user-friendly language switcher, or to implement critical functions for your website,hreflangSEO strategy,languagesThe label can provide all the information you need.Master these skills, and it will help you better utilize the powerful functions of AnQiCMS, enhancing the user experience and global visibility of your multilingual website.
Common Questions (FAQ)
1. What languages can AnQiCMS be set to in the backend?Currently, AnQiCMS has built-in language packs in Simplified Chinese and English. You can select the default language pack in the 'Global Function Settings' on the backend, which mainly affects the display of built-in text. If you need to support more other languages, you need to do it yourself in