How to configure and display multilingual website content in AnQi CMS?

AnQiCMS (AnQiCMS) is dedicated to helping users easily meet the needs of global content promotion, with built-in multilingual support features that allow you to flexibly configure and display content in different language versions of the website.No matter if you want to provide translations for static text in templates or create independent language versions for articles, products, and other core content, Anqi CMS offers intuitive and powerful tools.

Next, we will explore how to implement multilingual website content configuration and display in Anqi CMS.

Part one: Understanding the multilingual capabilities of Anqi CMS.

To implement a multilingual website in AnQi CMS, it mainly involves two levels:

1. Translation of template text:For fixed text, navigation names, button text, etc., on the website interface, translation is done through the language package mechanism to ensure that interface elements display the target language when the user switches languages.
2. Content entity multilingual management:For articles, products, single-page applications, and other dynamic content, you need to create independent content entities for each language and display them on the front end by switching language links.

The "Multi-site Management" feature of AnQiCMS also provides another flexible architecture option for building multilingual websites, where you can set up a site independently for each language. Although it is more independent in management, this article will mainly focus on how to implement multilingualism under the same AnQiCMS instance through language packs and content management.

The second part: Translating multilingual text in the configuration template

In order for your website interface to switch languages according to the user's selection, you need to create language packages for the static text in the template. Anqicms provides a simple{% tr %}Labels to handle such translations.

1. Establish the language package file structure

First, you need to create a folder named under your template directory.localesThe folder. In this folder, create a subfolder for each target language, and the folder naming follows the language code specification (for example, Simplified Chinese useszh-cn, English usesen-us)。In each language subfolder, you create one or moreymllanguage files in thedefault.yml.

For example, your directory structure might look like this:

./template/您的模板名称/locales
├── en-us
│   └── default.yml
└── zh-cn
    └── default.yml

2. Write the language package content

Indefault.ymlIn the file, you will define key-value pairs, where the key is the identifier you use in the template, and the value is the translation text of the identifier.

For example,zh-cn/default.ymlThe content may be:

"yourLocation": "您的位置"
"homePage": "首页"
"contactUs": "联系我们"

Anden-us/default.ymlThe content corresponds to:

"yourLocation": "Your Location"
"homePage": "Home"
"contactUs": "Contact Us"

3. Use in the template{% tr %}Tag

After completing the language package settings, you can use it in the template file.{% tr %}The label calls these translation texts. When the user switches the website language, AnQi CMS will automatically load the corresponding languagedefault.ymlfile and display the correct translation.

For example, if you want to display "Your location" at the top of the website, you can write it like this:

<div>
    <span>{% tr "yourLocation" %}：</span>
    <a href="/">{% tr "homePage" %}</a>
</div>

This way, when users visit the Chinese version of the website, they will see

Moreover, in the AnQi CMS backend's 'Global Function Settings', you can set the 'Default Language Pack', which is mainly used to control the display language of the backend management interface, as well as the language of the built-in prompts on the website front end, but it will not affect you through{% tr %}Tag or manually created content.

Part three: Manage content entities in different language versions.

For the core content of the website, such as articles, products, and single pages, you need to create independent content entities for each language.This means, you need to create a Chinese version and an English version of an article about "Anqi CMS introduction".

• Articles and products:Under "Content Management", you can enter "Document Management" or "Product Management" to publish your content.Every time you publish a new article or product, make sure the category you choose corresponds to the language of the content, and enter the title, summary, and detailed content in that language.For example, you can create two top-level categories, 'Chinese articles' and 'English articles', and then publish articles in the corresponding language to the respective categories.
• Single page:In the "Page Resources" under "Page Management", you can create different language versions for single pages such as "About Us", "Contact Us", and so on.For example, create a page named "About Us (Chinese)" and a page named "About Us (English)"}

By using this content separation management approach, you can ensure that each language's content accurately conveys information and is convenient for independent SEO optimization for users of different languages.

Part four: Implement multi-language site switching feature

To allow users to easily switch between different language versions, you need to add a language switcher to the website front end. Anqi CMS provides{% languages %}Tag to get information about all configured multilingual sites.

1. Get the language list

Use{% languages %}Tag, you can iterate through all available language sites:

{%- 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 %}

In the code above:

• websitesThe variable is an array that contains detailed information for each language site.
• item.LinkIs the URL of the language site.
• item.LanguageNameIs the display name of the language (such as “Chinese”, “English”).
• item.LanguageEmojiProvided a language Emoji icon (such as 🇨🇳, 🇬🇧).
• item.LanguageIconIf you upload a language icon, the URL of the icon will be displayed.

2. Optimize search engine recognition: AddhreflangTag

To help search engines (such as Google) better understand that your website has multiple language versions and display them to users of the corresponding languages, you should include in the HTML's<head>Add in the blockhreflangLabel. This is crucial for international SEO.

Use{% languages %}Label combinationhreflang, it can be implemented like this:

{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}

Hereitem.LanguageIt will output the corresponding language code (such aszh-cn,en-us），search engines will display corresponding pages in search results of different languages according to this information.

Summary

The multilingual function of AnQi CMS, through template text translation and content entity separation management, provides a solid foundation for building a globalized website. It is complemented by a flexible language switcher and key SEO optimization (such ashreflangLabel), you can not only improve the user experience but also effectively expand the international market. Easy configuration, efficient operation, allowing your content to reach users all over the world.

Frequently Asked Questions (FAQ)

1. Why am I setting the 'default language pack' to English in the background 'global function settings', but the front-end website content is still in Chinese?The “Default Language Pack” setting mainly affects the display language of the AnQi CMS backend management interface, as well as some built-in prompts of the front-end system (if the template is called).