The Anqi CMS is an efficient and customizable content management system that excels in multilingual support, allowing operators to easily build multilingual websites for global users.By cleverly utilizing its built-in features, we can build a flexible language switcher on the website front-end, accurately presenting different language versions of content based on user preferences, thereby effectively enhancing user experience and broadening market coverage.
Understanding the core of multilingual support
In Anqi CMS, implementing multilingual support is not just about simple text replacement, but a systematic workflow. This is mainly reflected in several key aspects:
FirstlyThe built-in language package settings of the backgroundIn the system's 'Global Function Settings', you can select the default language package for the website.Although this mainly affects the background management interface and some built-in system prompts, it lays the foundation for the entire multilingual mechanism.
Next isThe translation mechanism of the front-end templateThrough AnQi CMStr(translate) The tag combines the language file to implement the translation of static text in the template.This means that for fixed text on the website, such as navigation menu items, footer copyright information, button text, etc., we do not need to create a template file for each language.You only need to be in the root directory of the templatelocalesIn the folder, create a corresponding language file for each target language (such aszh-CN/en-US) for each language (such asdefault.yml），and define the key-value pairs in the file（"yourLocation": "您的位置"）。Then，in the template through{% tr "yourLocation" %}the system will automatically display the corresponding translation according to the language selected by the current user。
Most importantlyContent localization management. For dynamic content updates such as articles, product descriptions, and single-page information, AnQi CMS provides flexible content models and powerful document management features.This allows us to create independent entries for content in different language versions, or use custom fields to store translations in different languages.This way, when the user switches languages, the website can accurately call and display the corresponding language version of the content, ensuring the completeness and accuracy of the information.
Build the front-end language switcher
The front-end language switcher is the first window for users to interact with multi-language functions. In Anqi CMS, we can uselanguagesLabel easily builds a feature-rich switch.
languagesThe tag can retrieve all the multilingual site information you have configured in the background. You can embed the following code snippet in any location on the site, such as the navigation bar or footer, to generate a basic language switcher:
{%- 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 %}
<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 language. You can choose to display language icons (item.LanguageIcon) and Emoji (item.LanguageEmoji）or directly display the language name（item.LanguageName）。By adding custom CSS styles, you can further beautify this switch and make it harmonious with the overall design style of the website.
In addition, to better optimize search engines for multi-language content recognition and indexing, we strongly recommend on the website's<head>Area additionhreflangTags. This helps search engines understand that your website has multiple language versions, avoids false judgments of duplicate content, and guides users to the page most suitable for their language preferences.Similarly, utilizinglanguagestags, you can conveniently generate these important SEO elements:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
Place this code in yourbase.htmltemplate file<head>tag to enablehreflangSet.
multi-language content display
After the user selects the target language through the language switcher on the front end, the website needs to ensure that all displayed content matches the language version. This includes two main aspects:
Translation of static template text：Regarding the hard-coded text in website templates,
trThe label is the core of dynamic translation. For example, if your website has a "Contact Us" page, its title in the Chinese language file is "联系我们", in the English language file it is "Contact Us".If the template is used{% tr "contactUsTitle" %}it will automatically display the corresponding translation when the user switches to a different language.Dynamic content localization presentationFor articles, product introductions, news, and other dynamic content published by the backend, AnQi CMS provides sufficient flexibility.You can create multiple language versions for each document, product, or single page.For example, a blog post can have a Chinese version and an English version.When the user selects Chinese, the website will load Chinese article content;When English is selected, the English article content will be loaded. This usually requires planning during content editing to ensure that each target language has corresponding high-quality translated content.
By following these steps, combining the powerful multilingual features of Anqicms, you will be able to build a responsive and content-rich multilingual website, effectively reaching a wider audience.
Frequently Asked Questions (FAQ)
Ask: Will my article content, product details, and other dynamic content be automatically translated after language switching?Answer: Anqi CMS does not automatically translate your dynamic content such as articles, product descriptions, etc.You need to manually create or enter the corresponding translation content for each language.The content model and document management features provided by Anqi CMS allow you to manage and publish content for different language versions, ensuring that users can view localized detailed information after switching languages.
Ask: How can I add or manage new language versions in the Anqi CMS backend?Answer: You can select the "default language package" in the Anq CMS background "global function settings" to set the built-in language of the system. To achieve the translation of text in the front-end template, you need to create an independent language folder for each target language in the "template design" (for example 请将此文件上传到对应的库目中的目录，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库创建过程，即可执行详细课程，这个课程会实现一个简单的数据库\u5
locales/en-US) and define the translation file in itdefault.yml). For multi-site mode, you can also configure and manage different language versions of the site through the multi-site management featureAsk: How can the style of the language switcher be customized on the front-end?The style of the language switcher depends entirely on your front-end HTML and CSS code. Through
languagesAfter obtaining the language list, you can freely write HTML structures in the template, such as using dropdown menus, button groups, or flag icons, etc.Then, use CSS to beautify it so that it matches the overall design style of your website.languagesTags providedLanguageIcon(icon path) andLanguageEmojiFields such as (Emoji characters) make it convenient for you to display more rich visual effects on the front end.