[en] Multilingual Site Function Tutorial One: Independent Multisite Architecture Multilingual Mode

Starting from version 3.4.8 of AnQiCMS, it supports more powerful multi-language site features.

The multi-language feature of AnQiCMS supports two implementation methods: one is the use of a standalone multisite architecture (suitable for large/highly customized needs), and the other is a single-site translation plugin architecture (suitable for small/medium-sized/Agile iteration).

Below, I will guide you through the multi-language feature of AnQiCMS:

Method 1: Independent multi-site architecture (suitable for large-scale or highly customized needs)

This method has higher flexibility, but it also requires higher standards for site operators, necessitating more configuration and coding work, as well as handling the synchronization and translation of articles.

Operation steps

First Step: Enable Multilingual Site Functionality

1. Login to AnQiCMS Backstage Management Interface.
2. Log in to the Anqi CMS official website account. > Note: If you have not logged in to the Anqi CMS official website account, you will not be able to use the HTML page translation feature.

1. Enter [Feature Management], search for "Multilingual Site Support".

2. Click to enter the multilingual site support feature interface.

3. Then, in the configuration interface, proceed with the configuration:

   • Enable multi-language site support -> Yes
   • Site storage and processing method -> Independent storage for each language site
   • Multi-site display mode -> Independent domain|Independent directory
   • Primary site language -> Chinese
   • Automatic translation -> Yes

Click the [Submit] button to save the configuration, and then you can proceed to the next step.

Note: If the automatic translation feature is enabled, the default will use the Anqi official translation interface.You can also configure a custom translation interface.Search for [Translation Configuration] in the features, and select an appropriate translation interface configuration in the translation configuration.

Step 2: Create a multilingual child site

1. In the list of multilingual sites, click the [Add Site] button to add a multilingual site. When adding for the first time, the sub-site does not exist, so the site needs to be added first. As shown in the figure:

Note: During the process of adding a site, pay attention to the following issues: the site directory, just name it according to the corresponding language.Database reuse issue, if your main site is not installed using the database root account and password, you cannot select the option [Reuse default database account information] here. Instead, you need to select [New account] to fill in the correct database account information.

1. After creation, go back to the multilingual site addition interface, select the site, select the newly created site, and choose the corresponding language, as shown in the figure:

Third step: Content synchronization processing

1. When the first few multilingual child sites are created, the child sites have not synchronized the content, and manual synchronization needs to be triggered.In the multilingual site list, you can see the Sync button, click the [Sync Content] button to manually sync the content (full sync or incremental sync), the first time being a full sync.During the synchronization process, if automatic translation is selected above, it will translate while synchronizing, so the synchronization process may take longer if there is a lot of content.

1. After synchronization is complete, there may still be some content that has not been successfully translated. Therefore, you need to switch to the corresponding language site, check the content, and manually translate it:

Step 4: Template Translation and Multilingual Switching

1. Template supports multilingual tags, usage:{% tr 变量名称 %}.Using translation tags, it enables the template to support multi-language features. The method to enable multi-language features in the template is as follows: Create a directory named 'locales' under the template directory, then create a folder with the name of the current language code, such as zh-CN, zh-TW, en, etc.Create a yml file in the folder, for example, default.yml.

   ./locales
   ├── en
   │   └── default.yml
   ├── ja
   │   └── default.yml
   ├── nl
   │   └── default.yml
   └── zh-CN
     └── default.yml
   

   Chineselocales/zh-CN/default.ymlFile content as follows:

   "yourLocation": "您的位置"
   

   Englishlocales/en/default.ymlFile content as follows:

   "yourLocation": "Your Location"
   

   Call the method: {% tr “yourLocation” %}, after template parsing, it will display the content in different languages accordingly, such as displaying in Chinese.您的位置, displayed in English asYour location.

2. In the template, add multi-language switch code:

     {%- languages languages %}
   <div class="languages">
     {%- for item in languages %}
     <a href="{{item.Link}}" class="{% if item.IsCurrent %}active{% endif %}" data-pjax="false">
        <div class="language-item">
              {%- if item.LanguageIcon %}
              <img class="language-icon" src="{{item.LanguageIcon}}" />
              {%- else %}
              <span class="language-icon">{{item.LanguageEmoji}}</span>
              {% endif %}
              <span>{{item.LanguageName}}</span>
        </div>
     </a>
     {% endfor %}
   </div>
   {%- endLanguages %}
   

Step 4: SEO configuration

1. Add to HTML header<html lang="en">Tags, of course, different languages use different lang, such as Chinese, which useslang="zh-CN"If it is a multilingual template, to set lang by calling the method, it is written like this:<html lang="{% system with name='Language' %}">.
2. usehreflangAssociate different language versions of pages. In the head section, harflang:.

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

Front-end effects

After the above configuration and template modification, the front-end can see the effect, as shown in the figure, a multi-language switch menu appeared in the upper right corner:

We try to switch to English, and we can see that the page has been automatically translated:)

The multi-language feature is now configured. Welcome to use and test it frequently. If you find any problems, please feedback promptly, and we will solve them as soon as possible.