Multilingual Site Function Tutorial Part 1: Independent Multi-Site Architecture with Multilingual Support

Starting from version 3.4.8 of AnQiCMS, it supports more powerful multilingual 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).

Next, I will guide you through the multilingual 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

Step 1: Enable Multilingual Site Functionality

Log in to the AnQiCMS backend management interface.
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.

Enter the [Function Management], search for "Multilingual Site Support".
Click to enter the multilingual site support function interface.
Next, in the configuration interface, perform the following configuration:
- Enable multilingual 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, 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.

Configuration

Step 2: Create a multilingual child site

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.

Create Parent-Child Sites

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

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.

Create Parent-Child Sites

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

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.

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

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' %}">.

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, the multi-language switch menu appeared in the upper right corner: Ignore some tags

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

Until now, the multi-language feature has been configured. Welcome to use and test it extensively. If any problems are found, please feedback in time, and we will solve them as soon as possible.

Multilingual Site Function Tutorial 1: Independent Multi-Site Architecture with Multilingual Support