How to configure AnQiCMS to achieve seamless switching and display of multilingual content?

Today, with the deepening of globalization, website support for multiple languages is no longer an optional feature, but a key factor for enterprises to expand into international markets and serve diverse user groups.It is crucial to have the ability to seamlessly switch and display multilingual content, whether it is to attract overseas customers or enhance the international influence of the brand.

AnQiCMS fully understands this need, providing an efficient and practical solution for seamless switching and display of multilingual content through its powerful multi-site management features and flexible template mechanism.Here, we will discuss how to configure AnQiCMS, allowing your website to easily handle multilingual content.

Core concept: Treat 'site' as a 'language site'

The core idea of AnQiCMS implementing multi-language content is to treat each language version as an independent "site" for management.This means that your English site, Chinese site, Japanese site, and so on, will exist as independent website instances in the AnQiCMS backend, but they are all managed by the same AnQiCMS system.This design greatly ensures the clarity and flexibility of content management.

Step 1: Plan the structure of your multilingual website

Before getting started with the configuration, clear planning is the foundation of success. You need to consider the following aspects:

  1. Determine the target language:Clarify which languages your website needs to support, as this will determine how many 'language sites' you need to create.
  2. Domain strategy:
    • Subdomain:For exampleen.yourwebsite.com(English site),fr.yourwebsite.com(French site). This is a common practice in internationalization.
    • Subdirectory:For exampleyourwebsite.com/en/(English site),yourwebsite.com/fr/(French site). This requires you to configure reverse proxy rules on your server (such as Nginx or Apache), forwarding requests from different subdirectories to the corresponding "site" in AnQiCMS.
    • Independent domain:For exampleyourwebsite.com(Chinese site),yourwebsite.co.uk(English site). Choose the way that best suits your specific needs and SEO strategy.

Step two: Configure multilingual sites in the AnQiCMS backend

Once the planning is clear, you can start creating these language sites in the AnQiCMS backend.

First, please log in to your AnQiCMS main site backend.In the left navigation bar, find and click the "Multi-site Management" feature.This is the entry point for managing all your website instances.

Click the 'Add new site' button, and you will see a form to configure a new site.

  • Site Name:Name your new language site, for example 'English site', 'French site', so that it can be distinguished.
  • Site root directory:This is a very critical setting. Every language site needs oneindependentThe root directory, AnQiCMS will store the site's cache, logs, and other data in this directory.To avoid conflicts, make sure to set a unique directory name for each site.Generally, it is recommended to/app/start and combine with the domain name or language code, for example/app/en_yourwebsite_com.
  • Website address:Enter the complete access URL of the new language site, for examplehttp://en.yourwebsite.comorhttp://yourwebsite.com/en.
  • Administrator account/password:Set an independent administrator account and password for this new language site.
  • Database name:Similarly, to ensure data isolation and security, it is recommended to use separate databases for each language siteindependent. You can fill in a new database name according to your actual situation, such asen_anqicms_com. If you install AnQiCMS in a Docker environment and have full database management permissions, you can also choose to 'reuse the default database account information'. AnQiCMS will automatically use the main site's database configuration and create a new database.
  • Select the template to use:You can choose different templates for each language site, or you can use the same template and then adapt different languages within the template through logical judgment.

After completing the form, click the "Confirm" button, a new language site will be successfully created.For each language you want to support, repeat the above steps to create a corresponding language site.

Description of the system default language package:In the "Background Settings" under the "Global Function Settings", there is an option for the "Default Language Pack".This setting is mainly used to change the language of the AnQiCMS backend interface and system prompts, such as the display language of the backend menu, error prompts, and so on. Itwon'tAutomatically translate the articles, categories, and other content on your website front-end. Multilingualization of the website front-end content requires creating independent language sites and publishing corresponding language content on each site as described above.

Step three: prepare content for each language site

After each language site is created, you can fill it with content just like managing an independent website.

  • Log in to the backend of the corresponding language site:By clicking the "Access Backend" button in the "Multi-site Management" list, or by directly entering the backend address of the corresponding site (for examplehttp://en.yourwebsite.com/system/), log in to the backend of the language site.
  • Create language-specific content:In the backend of the language site, you can independently create and manage categories, articles, products, single pages, and ensure that the content is written in the target language of the site.For example, publish English articles on the English station's backend and Chinese articles on the Chinese station's backend.
  • Upload language-specific resources:Images, videos, and other resources can also be uploaded and managed independently according to the needs of the language site.

The fourth step: Implement language switching function on the website front-end

After the content is ready, the next step is to provide a user-friendly language switcher on the website front end and optimize the search engine visibility. This is mainly achieved by modifying the template files.

AnQiCMS providedlanguagesTag, can easily obtain information about all multilingual sites. You usually add this code to the public header of the website (for exampletemplate/您的模板目录/partial/header.htmlortemplate/您的模板目录/bash.html) Add this code here.

1. Show language switcher:

BylanguagesLabel, you can iterate through all configured language sites and generate switch links for them.

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>{{ tr "切换语言" }}：</span> {# 使用翻译标签显示 "切换语言" #}
    {%- for item in websites %}
    <a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}>
        {%- if item.LanguageIcon %}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} 站点图标" class="language-icon" />
        {%- else %}
        <span class="language-emoji">{{item.LanguageEmoji}}</span>
        {% endif %}
        <span class="language-name">{{item.LanguageName}}</span>
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endlanguages %}

In this code block:

  • websitesThe variable contains information about all configured multilingual sites.
  • item.LinkThis is a link to the corresponding language site.
  • item.LanguageIconanditem.LanguageEmojiCan be used to display language icons or emojis to enhance user experience.
  • item.LanguageNameDisplays the name of the language.
  • {{ tr "切换语言" }}Is a translation tag used to display different language text in templates, its content will be automatically translated according to the current site language package. To enable this feature, you need to create in the template directorylocalesDirectory, and create one for each languageymlfile (for examplezh-cn/default.ymlanden-us/default.yml), define the corresponding translation text.

2. ImplementhreflangTag, optimize SEO:

To help search engines understand your multilingual content and correctly index it, on each language site,<head>Area additionhreflangTags are crucial. This tells the search engine which pages are alternative language versions of the same content.

Similarly, in the template file,<head>add the following code in part,

{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endlanguages %}
  • item.LinkPoint to the URL of the corresponding language version.
  • item.LanguageIs the language code for the site (for examplezh-CNrepresenting Simplified Chinese,en-USRepresents American English.

Fifth step: Test and optimize

After configuration, be sure to carry out a comprehensive test:

  1. Visit each language site:Ensure they can be accessed normally and display the content corresponding to the language.
  2. **Test Language