How to implement seamless switching and display of multilingual content in AnQiCMS?

In today's global digital world, multilingual support for websites has become an indispensable part, which not only helps you reach a wider user base and enhance the user experience, but also effectively optimizes search engine rankings.AnQiCMS (AnQiCMS) understands this need and provides you with flexible and powerful multilingual content management and display functions, allowing your website to easily move towards internationalization.

This article will delve into how to seamlessly switch and display multilingual content in Anqi CMS, helping you easily create an internationalized website.

How does Anqi CMS support multilingual content?

AnQi CMS took into account the need for multilingual websites from the outset, it usesMulti-site managementFunction as the core foundation for implementing multilingual content.In simple terms, you can set up a separate site for each language, each with its own domain or subdomain, as well as independent backend management and content publishing processes.This pattern can not only ensure the clear separation of content in different languages, but is also more conducive to the crawling and indexing by search engines.

In addition, AnQi CMS is flexibleContent modelThe feature also provides the possibility of handling language differences.Under certain circumstances, you can add language-specific fields to the content model to store multiple languages in a single content entry.

Core configuration: Building a multilingual environment

Implement multilingual functionality, first you need to properly configure the Anqi CMS backend.

1. Set the default language package for the website

On the Anqi CMS backend management interface, you can set the default language package of the website under "Backend Settings" -> "Global Settings".The language selected here mainly affects the language of the background operation interface and the display of some built-in system texts.For example, if you select English, the menu, buttons, and other background items will be displayed in English.At the same time, this is also the language identifier for the default content of your website.

2. Plan the multilingual site structure

The most recommended and commonly used method is to use the Anqie CMS.Multi-site managementThis means that you will create a separate site for each target language.

• Independent site modeAssuming you need a Chinese website and an English website.You can add a new site and configure it as an English site in the "Multi-site Management" backend of AnQi CMS.www.yourdomain.comCorresponding to Chinese,en.yourdomain.comcorresponding English), or distinguish through the path (such aswww.yourdomain.com/en/)。This approach allows content, templates, and even SEO strategies to be completely independent, making it the ideal choice for a truly multilingual website.When creating a new site, you can set up an administrator account, database information, and choose the template to use for each site individually, ensuring independence at the content and data levels.
• (Optional) single site content field patternIf your multilingual needs are relatively simple, such as displaying some product names or article titles in multiple languages while the main content differs little, you can consider adding language-specific fields within a single site by customizing the content model. For example, you can add language-specific fields to the "article" content model.Title_EN(English title),Description_DEFields such as (German description). This method reduces the number of site maintenance, but requires higher template logic, and the SEO effect may not be as good as an independent site.

Content Management: Translation and Organization

Regardless of which multilingual structure you choose, content organization and translation are at the core.

1. Create language-specific content for different sites

In standalone site mode, content management becomes intuitive and clear.Log in to your Chinese site backend, publish Chinese articles; log in to the English site backend, publish the corresponding English translation version.The AnQi CMS powerful 'Add Document' and 'Document Classification' features allow you to easily manage text, images, videos, and other content in each language as you would manage ordinary content.Ensure that each language version of the content is carefully translated and localized to fit the culture and habits of the target audience.

2. Use the content model to extend the language field (for single-site content field mode)

If you have adopted the single site content field mode, you need to add a new field in the "Content Management" under the "Content Model" for your "Article Model" or "Product Model".For example, add an 'English title' field of type 'single line text'; add an 'English content' field of type 'multi-line text'.This way, when publishing or editing content, it is possible to fill in content in different languages on the same content editing page.

Front-end display: achieve seamless switching

After the backend configuration and content preparation is ready, the next step is how to elegantly display and switch between multilingual content on the website front-end.

1. Implement a language switcher

A prominent language switcher is an indispensable part of a multilingual website. AnQi CMS provideslanguagesLabel, easily obtain all configured multilingual site information to build your language switch menu.

Here is an example code snippet to create a language switcher, you can place it at the top or bottom of your website:

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

This code will traverse all language sites, generate a link for each site, and display the language icon or Emoji, as well as the language name.Click to jump to the corresponding language site.

2. Translation of static text in the template

On a website, in addition to dynamic content, there is a large amount of static text, such as navigation menu items, copyright information, contact information, etc. For this text, Anqi CMS'strTags provide a convenient translation mechanism.

You need to create a folder under the template directory.localesCreate a folder for each language inside it..ymlfile (for examplezh-cn/default.yml,en-us/default.yml)

zh-cn/default.ymlExample:

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

en-us/default.ymlExample:

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

Then in the template, you can call it like this:

<div>{% tr "yourLocation" %}：安企CMS</div>
<nav>
    <a href="/contact">{% tr "contactUs" %}</a>
</nav>

When the website language is switched,trthe tag will automatically load the corresponding translation for the current language.

3. SEO Optimization: Hreflang Tag

To help search engines understand your multilingual content and correctly display it to users of different languages,hreflangTags are crucial. They can tell search engines which page is the alternative version for a specific language or region. Anqicms'slanguagesTags can also conveniently generate thesehreflangLink, it is recommended that you place it on your website.<head>Area:

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

This helps to avoid penalties for duplicate content and ensures that your website achieves better visibility in international search results.

Display according to the current language