Multi-language Site Function Tutorial Part Two: Single Site Translation Plugin Architecture for Multi-language

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 2: Single Station Translation Plugin Architecture (suitable for medium and small-sized / agile iteration)

Operation steps

First Step: Enable Multilingual Site Functionality

Login to AnQiCMS Backstage 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 [Feature Management], search for "Multilingual Site Support".
Click to enter the multilingual site support feature interface.

Step 2: Configure multilingual site functionality

Then, in the configuration interface, proceed with the configuration:
- Enable multi-language site support -> Yes
- Site storage and processing method -> Only the main site
- Multi-site display mode -> Independent domain|Independent directory
- Primary site language -> Chinese

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

In the multilingual site list, click the [Add Site] button to add a multilingual site.Note: The site domain must be filled only when choosing the form of independent domain name. When choosing the form of independent directory with no change in URL, the site domain does not need to be filled.

Add a site The effect after adding is as follows: Multilingual

Step 3: Mark the content that needs to be translated

Edit the template file, mainlybase.htmlIn the head section, add the harflang and languages switch tags.
Example code: Head part of harflang:
```
{%- languages websites %}
{%- for item in websites %}
<link rel="alternate" href="{{item.Link}}" hreflang="{{item.Language}}">
{%- endfor %}
{%- endLanguages %}
```
Language switch in header part:

Note: Make sure to use the code for language switching,<div class="languages">....</div>Label, it must be a div, and it must also have class="languages", otherwise the link replacement will fail.

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

Add some explicit tags that do not need to be translated into multilingualignore-translate="true"properties.

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: Ignore some tags

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

Note, when switching language for the first time, due to the lack of cache, a translation API request is needed, so the page needs a few seconds to open, which is a normal phenomenon.After the first opening, the subsequent opening speed will be faster, and subsequent openings only need to read page content from the cache.

Note, after switching to English, we can see that some parts are still not translated, which are set as follows)ignore-translate="true"properties and<div class="languages">....</div>Part of the label content.

Ignore some tags

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.