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

Today, as globalization deepens, website support for multiple languages is no longer an optional feature, but a key to expanding into international markets and serving diverse user groups.It is crucial to have the ability to switch and display multilingual content seamlessly, whether for attracting overseas customers or enhancing the brand's international influence.

AnQiCMS fully understands this requirement and provides an efficient and practical solution for seamless switching and display of multilingual content through its powerful multi-site management functions and flexible template system.Here, we will explore how to configure AnQiCMS so that your website can easily manage multilingual content.

Core Concept: Treat 'site' as '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.

First Step: Plan your multilingual website structure

Before you start configuring, clear planning is the foundation of success. You need to consider the following aspects:

  1. Determine the target language:Specify the languages your website needs to support, which 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 internationalization practice.
    • Subdirectory:For exampleyourwebsite.com/en/(English site),yourwebsite.com/fr/(French site)This needs to be configured on your server (such as Nginx or Apache) to set up reverse proxy rules, forwarding requests from different subdirectories to the corresponding 'site' in AnQiCMS internally.
    • Independent domain:For exampleyourwebsite.com[Chinese site],yourwebsite.co.uk[English site]. Which one to choose depends on your specific needs and SEO strategy.

Step two: Configure multi-language 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 the backend of your AnQiCMS main site.In the left navigation bar, find and click the "Multi-site Management" feature.This is the entry point where you manage all your website instances.

Then, 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”, etc., for easy distinction.
  • Site root directory:This is a very critical setting. Every language site needs aindependentThe root directory, AnQiCMS will store the cache, logs, and other data of the site in this directory.To avoid conflicts, please make sure to set a unique directory name for each site./app/Start by combining the prefix with a domain name or language code, for example/app/en_yourwebsite_com.
  • Website address:Enter the full access URL of the new language site, for examplehttp://en.yourwebsite.comorhttp://yourwebsite.com/en.
  • Administrator account/password:Set up an independent backend management account and password for this new language site.
  • Database name:Similarly, for data isolation and security, it is recommended to useindependentThe database. You can fill in a new database name according to your actual needs, for exampleen_anqicms_com.If you install AnQiCMS in the 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 you want to use:You can choose different templates for each language site, or you can use the same template and then adapt to different languages through logical judgment within the template.

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

[en]About the default system language package description:There is an option called 'Default Language Pack' under the 'Global Function Settings' in the 'Background Settings'.This setting is mainly used to change the language of the AnQiCMS backend interface and system prompt information, such as the display language of the backend menu, error prompts, etc.will notAutomatically translate the articles, categories, and other content on your website's frontend.Multilingualization of the website front-end content needs to be achieved by creating independent language sites and publishing corresponding language content on each site.

[en]Step 3: 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:Log in to the backend of the 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 example,http://en.yourwebsite.com/system/), and then logging into the backend of the language site.
  • Create content specific to a language:In the backend of this language site, you can independently create and manage categories, articles, products, single pages, and ensure that all this content is written in the target language of the site.For example, publish English articles on the English site's backend and Chinese articles on the Chinese site's backend.
  • Upload language-specific resources:Images, videos, and other resources can also be uploaded and managed independently based on the needs of language sites.

Step Four: Implement language switching function on the website frontend

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

AnQiCMS provideslanguagesTags, which can conveniently obtain information from all multilingual sites. You usually add this code in the public header of the website (such astemplate/您的模板目录/partial/header.htmlortemplate/您的模板目录/bash.html).

1. Show language switcher:

PasslanguagesTags, you can iterate over 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 all the information about the configured multilingual sites.
  • item.LinkThis is a link to the corresponding language site.
  • item.LanguageIconanditem.LanguageEmojiIt can be used to display language icons or emoticons, enhancing user experience.
  • item.LanguageNameIt shows the name of the language.
  • {{ tr "切换语言" }}An translation tag used to display different languages in templates, its content will be automatically translated according to the language package set by the current site. To enable this feature, you need to create under the template directorylocalesIndex, and create one for each language.ymlfiles (for example)zh-cn/default.ymlanden-us/default.yml), define the corresponding translated text.

2. ImplementationhreflangOptimize SEO with tags:

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

Similarly in the template file,<head>add the following code in the 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 language site (e.g.zh-CNRepresents Simplified Chinese,en-USRepresents American English).

Step 5: Test and optimize

Make sure to perform a comprehensive test after the configuration is complete:

  1. Visit each language site:Ensure they are all accessible and display the corresponding language content.
  2. **Test Language