How to ensure accurate switching and display of multilingual content on different user interfaces?

Today, with the increasing globalization, the ability of website content to be presented accurately in multiple languages to users in different regions has become a key factor for many enterprises to expand their markets and improve user experience.AnQiCMS (AnQiCMS) was designed with the need for multilingual promotion in mind, making it a core feature to help us efficiently manage and display multilingual content.How can we ensure that this multilingual content is accurately switched and displayed on different user interfaces?

This requires us to carefully plan and operate at multiple levels from content preparation, system configuration to front-end display.

Understand the multilingual basis of AnQi CMS.

AnQi CMS provides powerful multi-site management capabilities, which is the most commonly used and efficient basis for building multilingual websites. We can create an independent sub-site for each target language or use domain binding under the multi-site feature (such asen.yourdomain.comFor English sites,zh.yourdomain.comUsed for Chinese sites), it achieves complete isolation of content and interface, without interference. In this mode, each site can independently configure language packages, content models, and templates, maximizing flexibility.

Even within a single site, AnQi CMS supports the switching and display of multilingual content, but this usually requires a more refined content management strategy, such as through custom fields or specific content models to distinguish different language content.

In the background global settings, there is an option for the "default language package".It is important to note that this setting mainly affects the built-in text of the system (such as background interface prompts, certain default system information), rather than the specific content you publish, such as articles, products, or categories.This core content still needs to be manually created with the corresponding translation version.

Content-level preparation and management

To switch between multilingual content accurately, there must be the corresponding 'content' for each language. AnQi CMS provides flexible content models and page management functions to make this process clear.

1. Translation of main content creation

For the core content of the website, such as articles, product details, and single pages (such as "About Us", "Contact Information"), you need to create corresponding entries for each target language.This means that if your website has a Chinese version and an English version, then an article like "Company Profile" needs to be created in Chinese on the Chinese site or in a specific way on the same site, and then the corresponding English version needs to be created.

• Articles and products:Under the 'Content Management' module, you can use 'Document Management' and 'Content Model' to publish articles and products.When you create content for an English site, you need to write the title, introduction, and body in English.If a multi-site mode is used, the content of different languages is completely independently managed.
• Single page:The "Page Resources" section has a "Page Management" feature similar to articles, where you can create independent single pages for different languages, such as "About Us" in English and "About Us" in Chinese.
• Categories and Tags:Similarly, document classification and document tags also need multilingual planning.For example, the English site has categories such as “News”, “Products”, etc., while the Chinese site corresponds to “news”, “products”.

2. Static text and localization of interface elements

In addition to dynamic content, the website's menu, footer copyright information, button text, form prompts, and other static interface elements also need to be localized. The Anqi CMS template system supports using{% tr "键名" %}To implement the translation tag.

The specific operation is to create under the template directory.localesDirectory, and create corresponding language package files for each language (such aszh-cn/default.ymlanden-us/default.yml)。TheseymlThe file stored key-value pairs, the key names correspond to the template in{% tr "键名" %}And the value is the translation text of the language. This way, when the user switches languages, the system will load the corresponding language package based on the current language, thus displaying the correct static text.

3. SEO optimization and link structure

The SEO optimization of multilingual websites is crucial. Anqi CMS provides comprehensive SEO tools, and we need to ensure that each language version has an independent optimization strategy:

• TDK (Title, Description, Keywords):Use{% tdk %}Set exclusive titles, keywords, and descriptions for each language version of the page tag.This helps search engines understand the content of pages in different languages and improve their ranking in search results.
• Static URL:By setting the 'Static Rules' in the 'Feature Management', clear and friendly URL structures for pages in different languages are generated. For example, English content can be used/en/about-us.html, and Chinese content is used/zh/guanyu-women.htmlThis not only benefits SEO, but also makes it convenient for users to identify the language of the current page.
• Hreflang tag:This is an important way to inform search engines that your website has other language or regional versions. Anqi CMS's{% languages websites %}Tags can be used to generate language switchers on the front-end, and can also be used in the page<head>Partially generates correcthreflangTag indicating the other language version corresponding to the current page, to avoid duplicate content issues.

Language switch in the user interface

The language switch in the user interface is a key step to accurately display multilingual content.

1. Design and implementation of the language switcher

We usually place the language switcher in prominent positions such as the header or footer of the website. Anqi CMS provides{% languages websites %}tags to get the list of all configured multilingual websites.

We can iterate over this list to generate a link for each language, so that users can click to switch to the corresponding language website. For example:

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

Hereitem.LinkIt will automatically redirect to the URL of the current page on the corresponding language site, ensuring that the user stays on a functionally similar page after switching.item.LanguageIconoritem.LanguageEmojiIt provides a direct language identifier.

2. Load content dynamically based on the current language

When the user selects to switch language, AnQi CMS will identify the current language environment based on the requested URL (if using a multi-site/domain mode) or internal logic (if using a single-site multi-language mode). In the template, we can use{% system with name='Language' %}The tag retrieves the language code of the current site and then performs some conditional judgments or content loading based on the language.

Ensure the key link for accurate switching and display.

1. Planning of template files.

If a multi-site management mode is adopted, each language site can have its own independent template directory and template files.This can ensure the localization of the interface and content to the maximum extent, avoiding confusion.template/en_defaultThe template for the English station is stored in the directory,template/zh_defaultThe template for the Chinese station is stored.

2. Content correlation and maintenance

Under a multilingual system, an English article and its Chinese translation are logically the same content.Although AnQi CMS is stored independently on the backend, it may be necessary to establish this logical association when displaying on the front end or for internal management.For example, when creating content, you can consider adding a custom field "Language ID corresponding", pointing to the ID of this content in other language versions, which is convenient for subsequent content management and navigation.

3. Comprehensive testing

Before launching a multilingual website, it is necessary to thoroughly test all language versions. This includes:

• Language switcher:Test whether each language switch link can correctly jump to the corresponding language page and maintain the consistency of the page content.
• Content integrity:Check if all articles, products, and page content have been translated and displayed accurately without any omissions or garbled characters.
• Layout interface:Ensure that changes in the length of text in different languages do not disrupt the page layout.
• Forms and interactive elements:Check the message board, search function, comment section, etc. to ensure they work normally in all language versions and display the correct localized text.
• SEO performance:Use Google Search Console and other tools to checkhreflangEnsure the implementation of tags is correct, so that search engines can accurately index versions in different languages.

By following these detailed steps and the powerful features provided by Anqi CMS, we can effectively ensure that multilingual content switches and displays accurately across different user interfaces, providing a consistent and high-quality access experience to users worldwide.

Frequently Asked Questions (FAQ)

Q1: Why is the article content still in Chinese on the website, even though I have changed the default language package to English in the "Global Function Settings" in the background?

A1: 安企