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. Its built-in multilingual support feature allows you to flexibly configure and display content in different language versions of the website.No matter if you are hoping to provide translations for static text in templates, or to create independent language versions for articles, products, and other core content, Anqi CMS offers intuitive and powerful tools.

Next, we will explore how to configure and display multilingual content in the Anqi CMS.

Part 1: Understanding the Multilingual Capabilities of Anqi CMS

In the AnQi CMS, implementing a multilingual website mainly involves two aspects:

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

The "multi-site management" feature of AnQi CMS also provides another flexible architecture choice for building multilingual websites. You can set up a separate site 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 packages and content management.

Second part: Translating multilingual text in the configuration template

In order for your website interface to switch languages according to user selection, you need to create a language package for the static text in the template. The Anqi CMS provides a concise{% tr %}Label to handle such translations.

1. Establish the language package file structure

First, you need to create a folder namedlocalesThe folder. In this folder, create a subfolder for each target language, and the folder names should follow the language code specifications (for example, Simplified Chinese useszh-cn, English usingen-us）。In each language subfolder, you create one or moreymlformatted as language files, for exampledefault.yml.

For example, your directory structure may 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 translated text of the identifier.

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

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

whileen-us/default.ymlThe content corresponds to:

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

3. In the template usage{% tr %}tags

After completing the language package settings, you can use it in the template file{% tr %}Label to call these translated 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>

Through this method, when users visit the Chinese version of the website, they will see 'Your location: Home'; while visiting the English version of the website, it will display 'Your Location: Home'.

Additionally, in the "Global Function Settings{% tr %}Label or content created manually.

Part three: Managing content entities in different languages.

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 that for an article about "Introduction to Anqi CMS", you need to create a Chinese version and then a English version.

  • Articles and products:Under "Content Management", you can go to "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, detailed content, etc. in that language.For example, you can create two top-level categories, 'Chinese articles' and 'English articles', and then publish articles in the corresponding languages under the respective categories.
  • Single page:In the "Page Resources" under "Page ManagementFor example, create a page named "About Us (Chinese)" and a page named "About Us (English)

Through this content separation management approach, you can ensure that information is accurately conveyed for each language and is convenient for independent SEO optimization for users of different languages.

Fourth part: Implement the multi-language site switching function

To enable users to easily switch between different language versions, you need to add a language switcher on the website front-end. Safe CMS provides{% languages %}Label to get all configured multilingual site information.

1. Get the list of languages

Use{% languages %}Label, you can iterate over 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 above code:

  • websitesVariable 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, it will display the URL of the icon.

2. English search engine recognition: addhreflangtags

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

Use{% languages %}Tag combinationhreflangIt 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），搜索引擎会根据这些信息，在不同语言的搜索结果中显示对应的页面。

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. Accompanied by flexible language switchers and key SEO optimization (such ashreflangLabel), you can not only improve user experience but also effectively expand the international market. Easy configuration, efficient operation, allowing your content to reach users around the world.

Common Questions (FAQ)

1. Why is the content of the front-end website still in Chinese when I set the "default language package" to English in the "Global Function Settings" on the background?“Default language package” settings mainly affect the display language of the Anqi CMS backend management interface, as well as some built-in prompt information in the front-end system (if the template calls it).