In today's globalized digital world, website multilingual support has become a key to reaching a wider audience and expanding market boundaries.AnQiCMS (AnQiCMS) fully understands this need, therefore it has made multilingual support one of its core features, aiming to help users efficiently build and manage multilingual websites.This article will focus on how to implement the switch link display of multi-language sites in AnQiCMS, and provide you with a comprehensive guide with necessary SEO practices.
Overview of the multilingual capabilities of AnQiCMS
AnQi CMS provides a flexible multilingual solution, which is not just simple text translation but also goes deep into the structure and content management of the website. Understanding its multilingual mechanism helps us better set up link switching:
System language package and content language:AnQiCMS includes a variety of system language packages (such as Chinese, English), which mainly affect the background management interface and built-in prompt information of the website.However, the language of the actual website content (such as articles, product descriptions, category names, etc.) needs to be independently published and managed in the corresponding multilingual sites.This means, the Chinese site releases Chinese content, and the English site releases English content.
Basic multi-site management:AnQiCMS with its powerful 'Multi-site Management' feature allows you to create and manage multiple independent website instances. Each instance can be configured for different language versions, for example, you can have a
example.comThe main site as a Chinese site, and then create oneen.example.comorexample.com/enThe child site as an English site. This architecture provides a solid foundation for independent management and display of multilingual content.
The key to implementing language switch links
The core of implementing language switch links for multilingual sites lies in utilizing the provided by AnQiCMSlanguagesLabel. This label can dynamically retrieve all the multilingual site information you configure in the background and display it on the front-end page for users to select and switch.
languagesThe label does not require any additional parameters, it will automatically retrieve and return a list of all multi-language sites that have been set.These sites are usually configured in the "Multi-site Management" or "Global Settings" in the background, each site is bound to a specific language identifier and access link.
UselanguagesLabel builds switch links
WhenlanguagesWhen the tag is called, it returns an array containing information about various language sites. You can useforLoop through this array to generate a clickable toggle link for each language site. Each language site is represented as anitemobject that contains the following useful fields:
item.LanguageNameThe display name of the language, such as "Chinese", "English".item.LanguageThe language code, such as "zh-CN", "en-US", which is used for settinghreflangThe attribute is very critical.item.LanguageEmoji: The Emoji expression corresponding to the language, such as 🌐, 🇺🇸, can be used for visualization display.item.LanguageIconIf the language icon is uploaded on the backend, the URL of the icon will be provided here.item.NameThe name of the site.item.LinkThe complete URL of the language site, this is the target address where the user is redirected after clicking.item.NofollowWhether the link should be added.rel="nofollow"Property.
Here is an example code snippet for displaying a language switch link in the header or footer area of a website:
{# 假设您已在后台配置了多个语言站点 #}
{%- languages websites %}
{%- if websites %} {# 确保存在至少一个语言站点配置 #}
<div class="language-switcher">
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}" title="切换到 {{item.LanguageName}}">
{%- if item.LanguageIcon %} {# 如果有语言图标，优先显示图标 #}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} 语言图标" class="language-icon" />
{%- elseif item.LanguageEmoji %} {# 否则显示Emoji #}
<span class="language-emoji">{{item.LanguageEmoji}}</span>
{%- endif %}
<span class="language-name">{{item.LanguageName}}</span>
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}
In this code, we first use{%- languages websites %}To get a list of all configured language sites and assign it towebsitesthe variable. Then, by{%- for item in websites %}Loop through each language site and dynamically generate<a>Tags. Each link'shrefProperties are used directlyitem.LinkMake sure that clicking will correctly jump to the corresponding language site. At the same time, according to your preference, you can choose to display language icons, Emojis, or language names, or their combinations.
Strengthening SEO: The Application of Hreflang Tags
In addition to the user-visible switch links, a very important aspect of search engine optimization (SEO) for multilingual sites is the correct use ofhreflang.hreflangThe tag can tell search engines that your website has multiple language versions or regional versions, thus helping search engines provide users with the most appropriate language or regional content.
hreflangLabels are usually placed in the HTML document's<head>area. Combinedlanguageslabel, you can easily generate corresponding links for each language versionhreflang:
{# 将这段代码放置在您的模板文件（如base.html或header.html）的<head>标签内 #}
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
{# 还需要一个默认的x-default，指向一个没有特定目标区域用户的通用版本，通常是主语言版本 #}
<link rel="alternate" href="{% system with name='BaseUrl' %}" hreflang="x-default">
This code will generate a label for each language site<link rel="alternate" hreflang="xx" href="URL">label. Among them,hreflangProperties useditem.Language(language code),hrefThe property points to the language site ofitem.Link. The last onex-defaultThe tag is recommended to add, it points to a generic version for users without a specific target region, usually the link to your main language site.
By following these steps, you not only provide users with an intuitive language switching method, but also provide search engines with clear multilingual site structure information, thereby enhancing the global visibility and user experience of your website.
Frequently Asked Questions (FAQ)
Q1: How does AnQiCMS distinguish between the language of the background interface and the language of the website content?A: AnQiCMS in the "Background Settings" section has an option called "Default Language Pack", which is mainly used to switch the interface language of the management background and some built-in hints on the website. Itwon'tAffect the language of the actual content you post on websites, such as articles and product descriptions.The language of the website content is managed according to each independent language site you create.For example, the content published on your English site is in English, and the content published on your Chinese site is in Chinese. They are independent content management systems.
Q2: Can I enable multi-language switching under the same domain (e.g., example.com/en, example.com/zh)?A: Yes, AnQiCMS supports this configuration method. You can create multiple sites through the "Multi-site Management" feature in the backend, and set their "site addresses" to different subdirectories under the same domain (such asexample.com/enandexample.com/zhThen, combine the server's pseudo-static rules (such as Nginx or Apache configuration) to correctly route access. That way,languagesTag generation:item.LinkThese subdirectory structures will be automatically reflected, enabling multilingual switching under the same domain.
Q3: If a language site does not have a translation version of a page, how will the switch link be displayed?A:languagesThe tag lists all multilingual site links that you have configured and enabled in the background, it is a site-level switch.It does not automatically judge whether a specific page (such as a specific article) has a corresponding translated version.