How to implement multi-language content switching and display in AnQiCMS?

Different from simply piling up multiple languages on the same page, AnQiCMS adopts a more flexible and powerful multi-site management mode to implement multi-language support.This means that you can create an independent website for each target language, which shares the core system of AnQiCMS, but the content, settings, and even domain names can be independently configured to better meet the personalized needs of users in different languages.

Below, we will explore how to easily handle the switching and display of multilingual content in AnQiCMS.

Step 1: Build the basic architecture of a multilingual site.

The core of implementing multilingual content switching lies in the "Multi-site Management" function of AnQiCMS.You can treat different language versions as different sites, each independently operated, but managed uniformly through AnQiCMS.

1. Create an independent language site in the background:
   • First, log in to your AnQiCMS main site backend.
   • Find the "Multi-site Management" feature entry and click "Add New Site".
   • Create a new site for each target language. For example, if your main site is in Chinese and you now want to add an English version, you can create a new site named 'English Site'.
   • During the creation process, you need to configure the following key information for the new site:
     • Site nameis used to distinguish different language sites.
     • Site root directorySpecify an independent directory path to store the cache and other data for the language site.
     • website address: This is the access URL of the language version site. You can choose a different domain (such asen.yourdomain.com) or a subdirectory (such asyourdomain.com/en/To implement this, it usually requires the reverse proxy configuration of a server (such as Nginx or Apache) to work with the port mapping of AnQiCMS's Go project.
     • Administrator account password: Set independent backend management credentials for the new site.
     • Database name: It is recommended to configure an independent database for each language site to ensure complete isolation of content and data, avoiding confusion.
     • Default language packageThis is an important step, select the corresponding language package for the new site (for example, 'English site' selects 'English').This will affect the display of built-in text in the AnQiCMS system, such as the back-end interface, certain system prompts, etc.Please note that this will not automatically translate the actual content of your website, articles, products, etc.

After completing these configurations, you will have a new, independent language site. Repeat this step to create more language versions of the site.

Step 2: Publish and manage multilingual content

After each language site is created, you can manage the corresponding language content in the respective backend just like any other website.

1. Publish content independently:
   • Log in to the backend of the site you created for a specific language (for example, the backend of the English site).
   • Publish all the articles, products, single pages, and other content you want to display in that language under the site.
   • Ensure that all text, image descriptions, SEO titles, keywords, and descriptions are written in this language to provide a high-quality localized experience.
2. Maintain consistency and synchronization of the content.:
   • Although the content is independently managed, you may want different language versions of the content to be consistent in terms of theme and structure.For example, a Chinese article about 'Company Profile' should also have an English version.
   • AnQiCMS does not have built-in automatic translation or content association features, therefore, consistency of the content needs to be ensured by you through manual maintenance or internal workflows.

Step 3: Optimize language switching and display on the front-end

To allow users to easily switch between different language versions and improve the search engine's recognition of multilingual content, you need to adapt the website template.

1. Integrated language switch function:tag-/anqiapi-other/10537.htmlIntroduced in the document{% languages websites %}The tag is the key to language switching. This tag can retrieve all the multi-language site information you have configured in AnQiCMS.

   You can add a piece of code to dynamically generate a language switch link in a prominent position on the website's header or footer:

   {%- languages websites %}
   {%- if websites %}
   <div class="language-switcher">
       <span>切换语言：</span>
       {%- for item in websites %}
       <a href="{{item.Link}}">
           {%- if item.LanguageIcon %}
           <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
           {%- else %}
           {{item.LanguageEmoji}}
           {% endif %}
           {{item.LanguageName}}
       </a>
       {%- endfor %}
   </div>
   {%- endif %}
   {%- endLanguages %}
   

   This code will iterate through all configured language sites and generate a link for each site, the link text can be the name of the language, and next to it, you can display the corresponding national flag icon or Emoji expression to enhance the visual effect.

2. Translate the fixed text in the template: In addition to the content you publish on the website template, there are many navigation menus, buttons, copyright information, and other fixed texts. In order for them to change according to the current language settings of the site, AnQiCMS provides translation tags{% tr "关键词" %}.

   • Create language file: Under your template directory, create a folder namedlocales. Then in thelocalesfolder, create a subfolder for each language (for examplezh-cnwhich represents Simplified Chinese, en-usRepresents American English) and create one in each subfolderdefault.ymlfile. For example,locales/zh-cn/default.yml:

     
     yourLocation: "您的位置"
     home: "首页"
     contactUs: "联系我们"
     

     locales/en-us/default.yml:

     
     yourLocation: "Your Location"
     home: "Home"
     contactUs: "Contact Us"
     

   • Use translation tags in the template:

     
     <nav>
         <a href="/">{% tr "home" %}</a>
         <a href="/contact">{% tr "contactUs" %}</a>
     </nav>
     <p>{% tr "yourLocation" %}：XXX</p>
     

     when the user visits the Chinese site,{% tr "home" %}The page will display "Home"; when accessing the English site, it will display "Home".

3. Enhance search engine friendliness (Hreflang tag)To help search engines better understand the multilingual of your website