AnQiCMS (AnQiCMS) is an efficient and flexible content management system that fully considers the multilingual needs of enterprises in global operations.With its built-in features, we can easily configure multilingual support and provide visitors with intuitive language switching options on the website front end.This not only helps us better reach users of different languages, but also lays a solid foundation for search engine optimization (SEO).
Next, we will discuss step by step how to implement this feature in AnQiCMS.
1. Basic configuration of the background: Building a multilingual environment
Before switching to the front-end language, we need to make some key language environment settings in the AnQiCMS backend.This includes configuring the system default language package, as well as understanding the core strategies of its multilingual content management.
1. Configure the default system language package
The Anqi CMS provides the function to set the default system language pack, which is mainly used for the website backend interface and some built-in prompt information displayed on the frontend.
- Operation path:Log in to the AnQiCMS backend and navigate to
后台设置-u003e全局功能设置. - Settings item:Find in the page
默认语言包Option. - Select language:Generally, here are built-in multiple languages such as Chinese, English, and more. Choose an appropriate default language based on the main audience of the website.
Important reminder:Please note that this setting only affects the built-in interface text and some prompts.It does not automatically translate the specific content we publish, such as articles, products, categories, etc.For these business contents, we need to adopt the corresponding localization strategy.
2. Multi-site management and content localization strategy
The multilingual support of AnQi CMS is more evident in its powerful multi-site management capabilities.This means that for users of different languages, we usually create independent sites or adopt specific content organization methods to carry the content of the corresponding language.
- Create independent language sites:If our multilingual content varies greatly, or if we want to provide services under different domain names (or subdomains), we can make use of AnQiCMS's 'Multi-site Management' feature.Create a separate site for each target language and publish corresponding content on each site.
www.yourdomain.comFor Chinese content,en.yourdomain.comFor English content. - Content localization:For articles, products, and other core content, we need to create and manage separate language versions for each.Although AnQiCMS does not currently perform automatic content translation, this management approach ensures that each language's content is carefully localized and optimized to fit local culture and user habits.For example, a page such as "About Us" needs to be manually created in Chinese and English and published separately.
Two, the implementation of the front-end language switching function
After configuring the basic language environment and content strategy in the background, the next step is to provide a user-friendly language switching function on the website front end.
1. Use{% languages %}Tag-based language switcher builder
AnQiCMS provides a named{% languages %}The template tag is used to retrieve a list of all configured multilingual sites. We can use this tag to create a language switcher at any location on the website (such as the navigation bar, footer).
- Label function:
{% languages websites %}Returns an array object containing information about all multilingual siteswebsites. - Available fields:
websitesEach in the arrayitemContainsLanguageName(Site Language Name),Language(Language Code),LanguageEmoji(Language Emoji),LanguageIcon(Language Icon),Name(Site Name) andLink(Link address) and other information.
Here is a simple language switcher code example:
{%- 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 %}
Place this code in your template file (for example, in the common header)partial/header.htmlor footerpartial/footer.html), you can render language switch options on the front-end. When the user clicks, they will be directed to the corresponding language version of the site page.
2. IntegrationhreflangTag optimization for SEO
To help search engines better understand your multilingual content and present it to the correct users, integratehreflangtags are crucial.hreflangThe tag informs search engines that a page is a substitute version of a page in another language.
You can use it in the<head>block{% languages %}The tag is generated automatically.hreflangTags:
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
This code will generate a label for each language sitelink rel="alternate"Label, pointing to the URL of its corresponding language version and indicating the language code (such asen/zh-CN). This is very important for the SEO performance of multilingual websites
3. Internationalization of template text:{% tr %}Tag
In addition to dynamically generated content, there are many fixed texts in the website template, such as "Contact us", "Your location", etc. AnQiCMS through{% tr %}Tags andlocalesTable of contents, provides the ability to internationalize these template texts.
1.{% tr %}Tag for implementing template text translation.
{% tr %}Tag used to reference predefined translated text in the template.
- Usage:
{% tr "翻译键名" %}For example,{% tr "yourLocation" %}.
2. ConfigurelocalesTranslate file
In order to{% tr %}Tags take effect, we need to create alocalesfolder under the template directory and organize the translation files according to the language code.
- Directory structure example:
./template/您的模板名称/locales/ ├── en-us/ │ └── default.yml └── zh-cn/ └── default.yml - Translate file content (with
zh-cn/default.ymlas an example):"yourLocation": "您的位置" "contactUs": "联系我们" - Translate file content (with
en-us/default.ymlas an example):"yourLocation": "Your Location" "contactUs": "Contact Us"
When a user visits the website, the system will load the corresponding translation file based on the language of their browser or the "default language package" you set up in the backend, thus displaying the corresponding template text.
Summary
By following these steps, we have not only laid a multilingual foundation for the website on the AnQiCMS backend, but also implemented an intuitive language switching function on the front end and utilizedhreflangThe tag enhances SEO effects. At the same time,{% tr %}Labels also ensure the internationalization of static text in the template.The combination of these functions makes AnQiCMS a powerful tool that helps us expand our global market.In practice, reasonable planning of multilingual site structure and content localization strategy will be the key to success.
Frequently Asked Questions (FAQ)
Q1: What is the difference between the system default language package setting and the translation of my article content? A1:The default language package mainly affects the AnQiCMS backend management interface and website