As an experienced website operation expert, I fully understand how important it is for a company to have a website that supports multiple languages in today's global digital world to expand its market and enhance its brand influence.AnQiCMS (AnQi CMS) is an efficient and flexible content management system that provides excellent support in this regard.It can not only help us build multiple independent sites, but also allow these sites to easily switch between different languages to meet the needs of global users.
Today, let's delve into how AnQiCMS elegantly retrieves the list of all configured multilingual sites, which is crucial for implementing website internationalization and providing a seamless user experience.
The concept of 'Multi-language site' of AnQiCMS
In AnQiCMS, the implementation of multilingual is usually based on its powerful multi-site management function.This means you can configure an independent site for each language (or a logically distinct sub-site), each with its own content, templates, and language settings.The advantage of this architecture lies in its great flexibility, which allows content management and localization strategies to be very fine-grained.
The system-level "default language package support" ensures the multilingualization of the background operation interface, while the multilingual display of the front-end page depends on the language sites you configure and the corresponding calls in the template. To implement a fully functional multilingual website, obtaining the list of these sites is essential for building the language switcher, SEO optimization (such ashreflangLabel) and the first step.
Core function:languagesLabel revelation
In the powerful template label system of AnQiCMS, there is a label specially tailored for multilingual site management, which is ——languagesThis tag helps us easily obtain the list of all configured multilingual sites and display this information on the frontend.
When we uselanguagesWhen a tag is encountered, it returns an array object containing all the configured multi-language site information. Each site information includes rich details such as the name of the site's language (LanguageName）Language code（Language) Rich language emojis (LanguageEmoji) and icons (LanguageIcon) and of course, the most important site link (Link) and the name of the site itself (Name）such data is sufficient to support us in building various complex language switching and SEO strategies.
How to use?
languagesThe usage of the tag is very intuitive, itNo additional parameters are required，You only need to open a tag block like this in the AnQiCMS template file:
{% languages websites %}
{# 循环输出每个站点信息 #}
{% for item in websites %}
{# 在这里使用 item 变量访问站点数据 #}
{{ item.LanguageName }} - {{ item.Link }}
{% endfor %}
{% endlanguages %}
Here, websitesIs the variable name you define for the site list data you get. You can name it according to your habit.itemIt isforA variable representing each individual site information in the loop.
Practical application: two typical scenarios
MasteredlanguagesAfter the label, we can apply it to the actual website operation, and the following are the two most common application scenarios.
1. Build Language Switcher (Language Switcher)
A straightforward language switcher can significantly enhance user experience, allowing visitors to choose the website language according to their preferences. By utilizinglanguagestags, we can easily achieve this.
Assuming we want to display a language switch dropdown menu at the top of the website header, so that users can click on it to jump to the corresponding language site.
{%- 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" />
{%- else %}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}
In this code block:
- We first pass through
{% languages websites %}Get the list of all multilingual sites and store it inwebsitesthe variable. {% if websites %}Ensure that the switcher is rendered only when there are multilingual sites, to avoid empty blocks on the page.{% for item in websites %}Iterate through each site's information.item.LinkProvided the URL of the current language site for easy user click-through.item.LanguageIconoritem.LanguageEmojiCan display a concrete language identifier to enhance visual effects.item.LanguageNameThen it shows the name of the language clearly.
With this code, you can elegantly display a language selector in the header, footer, or sidebar of a website, allowing users to easily switch to the language version they want.
2. Implement Hreflang Tag (SEO Optimization)
For SEO optimization of multilingual websites,hreflangLabels are indispensable.It tells the search engine which language versions your page has, thus ensuring that the correct language and regional content is displayed to users.This is crucial for avoiding duplicate content penalties and improving international SEO performance.languagesTags can be very convenient to help us dynamically generate these tags.
You need to place the following code in your website template.<head>In the area, for example, inpartial/header.html(If you follow the AnQiCMS template structure):
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
In this code block:
- We also go through
{% languages websites %}Get the list of sites. item.LinkUsed to specify the URL of the corresponding language page.item.LanguageIt provides language codes in ISO 639-1 format (for exampleenrepresenting Englishzh-CNrepresenting Simplified Chinese), this ishreflanga key attribute of the tag.
This way, each language version of your page will automatically include links to all corresponding language versionshreflangThis greatly enhances the international SEO capabilities of the website.
Deep understanding: Characteristics and precautions of tags
- No parameters required, globally retrieved:
languagesThe simplicity of the tag is that it does not accept any parameters.This means it will retrieve the list of all multilingual sites configured in the AnQiCMS system.foruse labels insideifJudgment under conditions. - Return array object:Understanding
websitesA variable is crucial for an array, therefore it must be used in conjunctionforto iterate over each site object. - with rich data fields:Each site object provides detailed information including links, names, language codes, and icons, which greatly facilitates front-end development.
BylanguagesLabel, AnQiCMS makes the management of multilingual sites and front-end display simpler and more efficient than ever.As a website operator, fully utilizing this feature will enable you to better serve global users and optimize your international content strategy.
Frequently Asked Questions (FAQ)
Q1:languagesDoes the tag support filtering, such as only getting lists of English and French websites?A1:languagesThe tag itself does not provide filtering parameters, it will retrieve the list of all configured multilingual site lists. If you need to filter, you can do so after obtaining the completewebsitesarray, in{% for %}use labels inside{% if %}conditions to judge.item.Languageoritem.LanguageNameThus, only the language sites you need will be displayed. For example:{% if item.Language == 'en' or item.Language == 'fr' %}.
Q2: What information does the list of site data obtained contain?A2: Where each site isforthrough the loopitemThe variable exposed multiple data, including but not limited to: the language name of the site (LanguageName）Language code（Language), language emoji (LanguageEmoji), language icon (`Language