AnQiCMS provides a flexible and efficient solution for building multilingual websites, allowing your content to easily reach global users.In multilingual sites, it is crucial to clearly display the language information of the current page to visitors, as well as to provide convenient language switching options, which are important for improving user experience and the professionalism of the website.
Today, let's discuss how to naturally display the 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.
Understand AnQiCMS multilingual support
One of the core design principles of AnQiCMS is its powerful multilingual support capability.It not only allows you to create and manage content in different language versions, but also provides rich tags at the template level to help dynamically obtain and display language-related information.These features allow your website to provide a customized browsing experience for users of different languages, while also helping search engines better understand and index the multilingual content on your website.
UtilizelanguagesTag to get language information
In the AnQiCMS template system, to obtain and display information of multi-language sites, we mainly rely on a powerful template tag -languages. This tag can retrieve all the multilingual site lists that have been configured and present them as an array object (for example, you can define it aswebsitesThe form returns in the form of a language site. By iterating through this array, you can access the details of each language site.
languagesThe usage of the tag is very intuitive, it does not require any additional parameters, and is wrapped directly in{% languages ... %}and{% endLanguages %}between, where you can place the content you want to cycle through:
{%- languages websites %}
{# 在这里循环遍历每个语言站点信息 #}
{%- endLanguages %}
Inwebsiteseach element of the arrayitemIt includes the following key fields, which are the core of language information displayed on the front-end page:
LanguageNameThis is a language name that is easy to read, for example, 'Simplified Chinese' or 'English'.Language: International standard language codes, such as 'zh-CN' for Simplified Chinese, 'en-US' for American English, which is particularly important for SEO in tags.hreflangTags are especially important.LanguageEmoji: System preset, Emoji expressions associated with specific languages, such as🇨🇳Representing Chinese language.LanguageIcon: This is a custom language icon link, you can upload exclusive icon images for each language to provide a more brand-specific visual presentation.Link: Switch to the full URL address of the language site, convenient for users to click and jump.Name: The general name of the site, usually withLanguageNameused together or choose according to needs.
Actual application scenarios and code examples
After understanding the available fields, let's see how to apply them in real-world scenarios.
1. Create an intuitive language switcher
A clear language switcher is an essential part of a multilingual website. By combiningLanguageName/LanguageEmojiorLanguageIconas well asLink，we can easily build a user-friendly language selection menu.
The following is an example of code to create a language switcher, it will display the custom icon first, if there is no icon, it will display the 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 iterate over all configured language sites and generate a link for each site.The link text will display custom icons, Emoji, or plain text language names according to your configuration, and clicking on it will jump to the corresponding language site.
2. Optimize the search engine: AddhreflangTag
Use correctly for SEO of multilingual websiteshreflangLabels are crucial. They help search engines understand the language version of your website content, so that they can provide the most relevant language version page when users search.hreflangLabels are usually placed on the page<head>Block in.
UtilizelanguagesTagging for obtainingLanguageand language codesLink(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 a language version for each of your website's versionslink rel="alternate"wherehrefThe attribute points 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 settings backend management
It is worth mentioning that in the background of AnQiCMS, there is an option for the "default language package" in the "Global Function Settings".This setting is mainly used to adjust the display language of built-in text in the system (such as the background interface or some system message languages), 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 translated separately for each language version.AnQiCMS's powerful content model and multi-site management features are designed to facilitate such content management.
Summary
AnQiCMS provides intuitive and feature-rich template tags, greatly simplifying the display of multilingual website front-end language information. Whether it is to build a user-friendly language switcher or implement key functions for your website,hreflangSEO strategy,languagesTags can provide all the information you need. Mastering these skills will help you better utilize the powerful functions of AnQiCMS and enhance the user experience and global visibility of your multilingual website.
Frequently Asked Questions (FAQ)
1. What languages can AnQiCMS be set to in the background?Currently, AnQiCMS is built-in with both Simplified Chinese and English language packages, you can select the default language package in the background "Global Function Settings", which mainly affects the display of built-in text. If you need to support more other languages, you need to do it yourself in