When our website is designed to serve global customers, providing multilingual support has become an indispensable feature.This not only helps us expand the international market, but also significantly improves the access experience for users of different languages.AnQiCMS (AnQiCMS) is fully aware of this need, therefore, multi-language support is one of its core highlights, allowing us to easily implement the construction and language switching of multi-language websites.
How to implement language switching for multi-language websites in Anqi CMS
To implement language switching for a multilingual site, it mainly involves backend configuration and the integration of front-end templates.AnQiCMS provides a simple and efficient solution, making the technical details easy to understand and operate.
Backend multilingual site configuration: Build language base
Firstly, in the Anqi CMS backend, we can find the settings for multilingual support.Although the "default language package" in the document mainly refers to the language of the back-end management interface, this implies that the system supports a multilingual environment.For the multilingual versions of the website content itself, it is usually to create different language versions for the same article, product, or page at the time of content publication.For example, you can post a Chinese article and then create its corresponding English, French, or Japanese version and associate it.
Furthermore, AnQiCMS's "Multi-site Management" feature also provides great flexibility for multi-language sites. You can set independent subdomains for each language version (such asen.example.com/fr.example.com）or subdirectory（such asexample.com/en//example.com/fr/），and configure them as independent sites, but all managed by the same AnQiCMS instance.This pattern helps to achieve more fine-grained language content and URL structure management.
Front-end Language Switcher: Let users easily choose
Enabling users to switch between languages easily is a key aspect of a multilingual website experience. AnQiCMS provides a feature namedlanguagesThe template tag is specifically used to retrieve the list of all configured multi-language sites.Through this tag, we can build an intuitive language switcher at any location on the website (usually in the header or footer).
UselanguagesThe label is very simple, it will return an array containing information about all language sites, and we can iterate over this information to generate a switch link for each language:
{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
<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 %}
In this code,item.LinkWill automatically point to the link on the current page in the corresponding language,item.LanguageName/item.LanguageEmojianditem.LanguageIconThe language name, emoji, and icon are provided respectively, making it easy for us to design buttons that are both beautiful and easy to recognize for language switching.
Template text translation: Details determine the experience.
除了主要的内容和页面，网站模板中许多固定的文本，如导航菜单项、页脚声明、表单提示、按钮文本等，也需要根据当前语言进行显示。AnQiCMS 通过tr(translate) Tag andlocalesThe catalog has implemented this function.
You need to create one under the template catalog.localesFolder, and create corresponding language package files for each language (such asen-us/default.yml/zh-cn/default.yml）。These YAML files will store key-value pairs, where the key is the identifier you use in the template, and the value is the corresponding translation text.
For example, in a Chinese language pack (locales/zh-cn/default.yml):
"yourLocation": "您的位置"
"homePage": "首页"
"contactUs": "联系我们"
In the template, you can usetrLabel to call these translated texts:
<p>{% tr "yourLocation" %}</p>
<nav>
<a href="/">{% tr "homePage" %}</a>
<a href="/contact">{% tr "contactUs" %}</a>
</nav>
The system will automatically load when the user switches to Englishen-us/default.ymlthe corresponding translations, thus achieving seamless switching of static text in the template.
Search Engine Optimization (SEO):hreflangThe importance of tags.
For multilingual websites, it is crucial to inform search engines of the corresponding relationship between different language versions of web pages, which can avoid penalties for content duplication and ensure that search engines display the correct language pages to users in the correct regions. AnQiCMS combineslanguagesTags, help us easily generatehreflangLabel.
You just need to place the following code block in the website template's<head>in the area:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
This code will generate a tag for each language version<link rel="alternate" hreflang="xx" href="yyy">tag for each language site,item.LanguageIs a language code (such asen/zh-CN)item.LinkThis is the complete URL of the corresponding language page. This can effectively improve the performance of the website in international search engines.
Some considerations in actual operation.
When deploying a multilingual site, in addition to the above technical implementations, there are also some considerations at the operation level:
- URL structure selection：AnQiCMS's 'Static Rules' and 'Multi-site Management' provide great flexibility. You can choose a subdirectory (such as
example.com/en/）or subdomain（such asen.example.com）as multilingual URL structure.These two methods have their own advantages and disadvantages. Generally, subdirectories are more suitable for multilingual content of the same brand, while subdomains are more suitable for scenarios where differentiated content is provided for different regional markets. - Content Management ProcessEnsure that the content team can create all versions in the target languages in time when releasing new content.AnQiCMS's content model and content management functions should be able to well support this process, for example, by providing language version switching options when editing articles.
- ConsistencyNo matter how the language is switched, the brand image, design style, and core information of the website should be consistent.
AnQiCMS Through its built-in multilingual support and flexible template tags, provides us with