In today's global digital environment, making a website support multiple language displays is no longer an option, but a necessary strategy for many enterprises and content operators to expand their international market and improve user experience.At the very beginning of its design, AnQiCMS (AnQiCMS) fully considered this point and built-in powerful multi-language support features, which help us easily switch the display of website content between different languages.
How can we specifically operate to enable multi-language content switching capabilities for our CMS website?This mainly involves three aspects: system language package, front-end content display, and search engine optimization.
Configure the system language package and backend interface
Firstly, if you wish the administrative interface of the website backend or some system prompts to display different languages, Safe CMS provides a direct and convenient setting.
You only need to log in to the backend of Anqi CMS, go to the 'Global Function Settings' under the 'Backend Settings' menu.Here, you will find an option called "Default Language Pack".English CMS currently comes with Chinese and English language packs for you to choose from.Choose the language you want after, the system backend interface and some fixed prompts will be switched to display accordingly.
However, it is a very important point that needs our attention: the settings of this 'default language package' mainly affect the built-in text of the system, such as the names of background menus, some system prompts, etc.It does not automatically translate the custom published content on your website, such as articles, product descriptions, single pages, etc.This content, created and released by ourselves, requires a different approach.
Implement front-end multi-language content switching display
To achieve the switching of content in different languages, Anqi CMS provides a very practical template tag:{% languages websites %}.This tag can dynamically retrieve all the multi-language site information you have configured, including the name of each language, the corresponding link, and cute language icons (Emoji or custom Icon).
Content management strategy:In the AnQi CMS, to ensure that users of different languages can see the corresponding content, the most common and recommended approach is to set up a separate site or subdomain for each language. For example, your main site iswww.example.com（English），you can seten.example.comorwww.example.com/en/English as English site.This means that you need to publish and manage content independently for each language version.When you create a new article or product, you need to create corresponding entries for each language version and ensure that their links are independent.
Implementation of the front-end language switcher:In the template files of the website, for example, where you usually place the language switch button in the header or footer, you can use{% languages websites %}Labels to generate the language switch list.
A simple language switch code snippet would look like this:
{%- languages websites %}
{%- if websites %}
<div>
<span>切换语言：</span>
{%- for item in websites %}
<a href="{{item.Link}}">
{%- if item.LanguageIcon %}
<img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}" />
{%- else %}
{{item.LanguageEmoji}}
{% endif %}
{{item.LanguageName}}
</a>
{%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}
This code will traverse all configured language sites and generate a link for each language.Click these links, the user will be directed to the corresponding version in another language on the current page.For example, if the user is browsing the "About Us
Translation of fixed text in the template:Translation of the content itself, as well as some fixed text in the website template, such as navigation menu items, page prompts, etc., can also be localized through the translation tags of Anqi CMS. This requires you to create alocalesCatalog, and create corresponding subdirectories for each language within it (such asen-us/zh-cn), and then createdefault.ymlfiles to define the translation key-value pairs.
For example,zh-cn/default.ymlcan contain:
"yourLocation": "您的位置"
whileen-us/default.ymlcorresponds to:
"yourLocation": "Your Location"
In the template, you can use{% tr "yourLocation" %}tags to display these translated fixed texts, the system will automatically select the correct translation based on the current site language setting.
Search Engine Optimization (SEO) Practices: Hreflang Tag
When building a multilingual website, a crucial point that should not be overlooked is Search Engine Optimization (SEO). In order for search engines to correctly identify your multilingual content and display the appropriate language versions to the intended audience, it is necessary to usehreflangtags.
hreflangLabels can tell search engines that your website provides different language or regional versions of the same content.This helps avoid duplicate content issues and ensures that users see the pages most matched to their language and region when searching.
auto{% languages websites %}autohreflangauto<head>区域内，Security CMS will automatically generate the correct onehreflangTags:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code will generate a ` for each language version