AutoCMS is an efficient and customizable content management system that excels in multilingual support, enabling 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 the AnQi CMS, implementing multilingual support is not just a simple text replacement, but a systematic workflow. This is particularly evident in several key aspects:
FirstlyThe background built-in language package settings.In the "Global Function Settings" of the system, you can select the default language package of 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.
ThenThe translation mechanism of the front-end template。Safe CMS throughtr（translate）标签结合语言文件来实现模板中静态文本的翻译。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.localesIn the folder, create a corresponding language file for each target language (such aszh-CN/en-US)default.yml），and define the key-value pairs in the file"yourLocation": "您的位置")。Then, call it in the template using such a way{% tr "yourLocation" %}and the system will automatically display the corresponding translation based on the current user's language selection.
The most important thing isThe local management of content.For dynamic content updates, such as articles, product descriptions, and single-page information, AnQi CMS provides flexible content models and powerful document management functions.This allows us to create independent entries for different language versions, or use custom fields to store translations in different languages.Thus, when the user switches the language, 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 through which users interact with the multilingual feature. In Anqi CMS, we can utilizelanguagesLabel easily build a fully functional switch.
languagesThe label 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 website, 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 through all configured language sites and generate a link for each language. You can select the language icon to display as needed.item.LanguageIcon）、Emoji（item.LanguageEmoji）or directly display the language name (item.LanguageName）。By adding custom CSS styles, you can further beautify this switcher, making it harmonious with the overall design style of the website.
In addition, to better optimize the search engine's recognition and indexing of multilingual content, we strongly recommend that you add these important SEO elements to your website:<head>area tag.hreflangLabel.This helps search engines understand that your website has multiple language versions, avoids misjudgments of duplicate content, and guides users to the page that best suits their language preferences.languagesTags, you can easily 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 inside yourbase.htmlTemplate file's<head>tag to enable thehreflangsettings.
multi-language content display
When the user switches to the target language through the language selector on the front end, the website needs to ensure that all presented content matches the language version. This includes two main aspects:
Template static text translation: For hard-coded text in website templates,
trLabel is the core of dynamic translation.例如，如果你的网站有一个“联系我们”的页面，其标题在中文语言文件里是“联系我们”，在英文语言文件里是“Contact Us”。{% tr "contactUsTitle" %}the text will automatically display the corresponding translation when the user switches to a different language.The localization of dynamic content presentationFor articles, product introductions, news, and other dynamic content published by the backend, the 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 selecting English, it will load English article content.This usually needs to be planned in content editing to ensure that there is high-quality translated content for each target language.
By following these steps, combined with the powerful multilingual features of the Anqi CMS, you will be able to build a responsive and content-rich multilingual website, effectively reaching a wider audience.
Common Questions (FAQ)
问：切换语言后，我的文章内容、产品详情等动态内容会自动翻译吗？答：The Anqi CMS will 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.
问：如何在安企CMS后台添加或管理新的语言版本？答：You can set the system built-in language by selecting "Default Language Package" in the "Global Function Settings" of the AnQi CMS backend. To achieve the text translation of the front-end template, you need to create an independent language folder for each target language in the "Template Design" (for example,
locales/en-US），and define the translation file within it.default.yml）。For multi-site mode, you can also configure and manage different language versions of websites through the multi-site management feature.问：Language switcher frontend style customization how?答：The style of the language switcher is completely dependent on your frontend 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, making it consistent with the overall design style of your website.languagesTags provideLanguageIcon（Icon path）andLanguageEmojiEmojis and other fields, making it convenient for you to display richer visual effects on the front end.