How to implement multi-language switching and display for website content?

When building a website for global users, providing multilingual support is crucial.AnQiCMS (AnQiCMS) is well aware of this need, and has built-in powerful multi-language switching and display functions to help website operators easily achieve content internationalization.This article will discuss in detail how to configure and implement the multi-language feature of the Anqi CMS, so that your website can better serve users of different languages.

Overview of multi-language support in Anqi CMS

The design concept of Anqi CMS is one of supporting the switching and display of multi-language content, which makes it an ideal tool for expanding into the international market.Through the multi-language feature provided by the system, you can directly target global users with your website content, enhance user experience, and gain significant advantages for SEO optimization and content promotion.The "Default Language Package" setting is provided in the background of "Auto" CMS, which is mainly used for language display of the system interface.While presenting the front-end content of the website, it is necessary to combine template tags and content management strategies to achieve it together.

Preparation for multi-language content

To implement the multilingual display of the website, the core lies in creating the corresponding content for each language.The CMS will not automatically translate your articles or product descriptions, so you need to manually input or import the corresponding content for each target language.

1. Creating multi-language content:
   • Articles and productsIn the "Content Management" module, you can create independent articles (documents) and products for each language.For example, you can have a Chinese article titled "About Us", and also create an English article titled "About Us".
   • Categories and tagsSimilarly, categories and tags on the website also need to be created separately for each language.您可以设置“中文文章”分类和“English Articles”分类，并为它们各自下的内容进行归类。
   • single pagePages such as "Contact Us", "Privacy Policy", etc., also need to create different language versions.

This content management method ensures that content in each language is accurately expressed, avoiding ambiguity or unnaturalness that may be caused by machine translation.

Front-end implementation of multi-language switching and display.

The next step after the content is ready is to implement the multi-language display and switch function on the website front-end. This is mainly achieved through the template tags of the CMS and a specific file structure.

1. Translate the fixed text in the translation template

Website templates often contain some fixed text that does not belong to the article or product database, such as navigation menu items, footer copyright information, 'Your Location' and other prompt text. This text can be translated using the 'translation tags' of Aiqi CMS.}]{% tr %}) To implement multilingual.

• Configure the translation file.: Create a file named in your template directory.localesThe folder. Within this folder, create a subfolder for each target language, for exampleen-us(English),zh-cn(Chinese),ja(Japanese) etc. In each language folder, create adefault.ymlfile.

  For example,locales/zh-cn/default.ymlcan include:

  "yourLocation": "您的位置"
  "home": "首页"
  "aboutUs": "关于我们"
  

  whilelocales/en-us/default.ymlThen it includes:

  "yourLocation": "Your Location"
  "home": "Home"
  "aboutUs": "About Us"
  

• Use translation tags: Any fixed text that needs to be switched between multiple languages in the template file can be used{% tr "键名" %}in the form.

  <nav>
      <a href="/">{% tr "home" %}</a>
      <a href="/about-us">{% tr "aboutUs" %}</a>
      <!-- 其他导航项 -->
  </nav>
  

  When the user switches to a different language, the system will load the correspondingdefault.ymlfile and display the corresponding translated text.

2. Implement the language switcher

The website needs a prominent language switcher that allows users to easily select their preferred language. The Anqi CMS provides{% languages %}Label to get the list of all configured multilingual sites and then build the switcher.

• Use{% languages %}tags You can in:base.htmlAdd the following code to the page header or other locations to display a simple language switch menu:

  
  {%- 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 over all configured languages and generate a linked option for each language.item.LinkThe URL of the current page in the corresponding language will be automatically directed, provided that your website structure and content have established correct associations between different languages.

3. Search Engine Optimization (SEO) Consideration: Hreflang

For multilingual websites,hreflangTags inform search engines that your website has multiple language versions and specify the geographic regions or languages they are aimed at.This helps to avoid duplicate content issues and ensures that search engines display the most relevant language version to users.

• In<head>Added inhreflangtags: Using{% languages %}Label, you can create these in the website's<head>Some parts are dynamically generatedhreflangTags:

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

  Among them,item.Linkis the complete URL of the current page under a specific language,item.LanguageIt is the ISO 639-1 format code of the language (for examplezh-cn/en-us).

Operations and**Practice

• Consistency of content management：Ensure that the content for each language is kept up to date and consistent. Translation quality is crucial, and professional localization services can help you provide high-quality multilingual content.
• URL structure：Plan a clear multilingual URL structure (for example:yourdomain.com/en//en.yourdomain.comoryourdomain.com?lang=en)。The pseudo-static rules of the Anqi CMS (help-plugin-rewrite.md) can help you build friendly URLs.
• Testing and user experience：Ensure all language versions are fully tested before release to ensure correct content display, smooth switching, and normal functionality.Focus on the cultural habits of users of different languages, optimizing the localization experience.
• Multi-site management：If your multilingual strategy is to use completely independent domains to distinguish languages, for example,example.com(English) and `