How to implement multilingual switching and display of website content?

It is crucial to provide multilingual support when building a website for global users.AnQiCMS (AnQiCMS) fully understands this need, built-in powerful multi-language switching and display functions, helping website operators easily achieve content internationalization.This article will discuss in detail how to configure and implement the multilingual feature of AnQi CMS, so that your website can better serve users of different languages.

Overview of Anqi CMS multilingual support

The design concept of AnqiCMS is one of supporting the switching and display of multilingual content, which makes it an ideal tool for expanding into the international market.By using the multilingual feature provided by the system, you can directly target global users with your website content, enhance user experience, and bring significant advantages to SEO optimization and content promotion.AnQiCMS provides a "default language package" setting in the background, which is mainly used for displaying the language of the system interface.To present the front-end content of the website, it is necessary to combine template tags and content management strategies to achieve this together.

Preparation for multilingual content

To implement multilingual display on a website, the core is to create corresponding content for each language.Anqicms does not automatically translate your articles or product descriptions, so you need to manually enter or import corresponding content for each target language.

1. Creating multilingual content:
   • Articles and productsUnder 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 tags: Similarly, the categories and tags of the website also need to be created separately for each language.You can set the "Chinese Articles" category and the "English Articles" category, and classify the content under them separately.
   • single pagePages like 'Contact us', 'Privacy Policy', etc., also need to create versions in different languages.

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

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

After the content is ready, the next step is to implement the multi-language display and switching function on the website front-end. This is mainly completed through the template tags of Anqicms and the specific file structure.

1. Translate the fixed text in the template

The website template often contains 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 indicative text. These texts can be translated through the 'translation tags' of AnQi CMS ({% tr %}To implement multilingual support.

• Configure the translation file: Create a file named in your template directory.localesThe folder. Inside the folder, create a subfolder for each target language, such asen-us(English),zh-cn(Chinese),ja(Japanese) and others. Create adefault.ymlfile.

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

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

  Andlocales/en-us/default.ymlIt includes:

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

• Use translation tags: In the template file, any fixed text that needs to be switched between multiple languages can be{% tr "键名" %}called in the form. For example:

  <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 choose their preferred language. Anqi CMS provides{% languages %}Label to get the list of all configured multilingual sites, and then build a switcher.

• Use{% languages %}Tag: You can bebase.htmlOr add the following code at the top of the page or other positions 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 through all the configured languages and generate an option with a link for each language.item.LinkIt will automatically redirect to the URL of the current page in the corresponding language, provided that your website structure and content have established correct associations between different languages.

3. Search Engine Optimization (SEO) Consideration: Hreflang

For multilingual websites,hreflangThe tag informs search engines that your website has multiple language versions and indicates the geographical regions or languages they are intended for.This helps to avoid duplicate content issues and ensures that the search engine displays the most relevant language version to the user.

• In<head>addhreflangTagUtilizing{% languages %}Tags, you can find them in the website's<head>Partially 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, anditem.LanguageIt is the ISO 639-1 format code of the language (for examplezh-cn/en-us)

Operations and **Practice

• Consistency of content managementEnsure that the content of 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). Anqi CMS's pseudo-static rules (help-plugin-rewrite.md) can help you build friendly URLs.
• Test and user experience: Make sure to thoroughly test all language versions before release to ensure correct content display, smooth switching, and normal functionality.Focus on the cultural habits of users of different languages to optimize localization experience.
• Multi-site managementIf your multilingual strategy is to use completely independent domains to distinguish between languages, for exampleexample.com(English) and `