How to set up and display the multi-language switch link in AnQiCMS?

Today, with the increasing trend of globalization, website multilingual support has become crucial for expanding international markets and serving diverse user groups.AnQiCMS fully considered this requirement, providing flexible multi-language settings and switching functions, allowing the website to easily provide localized content experiences for users of different languages.This article will introduce in detail how to set and display the multi-language switch link in AnQiCMS, and discuss the relevant practical strategies.

1. Understand the multilingual mechanism of AnQiCMS

In AnQiCMS, the multilingual feature is usually closely integrated with multi-site management.This means that if your website needs to provide completely independent, content-wise different multilingual versions, the most common and recommended approach is to set up a separate site for each language.One of AnQiCMS's core strengths is that it supports "multi-site management", allowing you to easily create and maintain multiple language sites within a single system.Each site can have its own domain (or subdomain/subdirectory), independent language packs, and corresponding language content.

When you need to provide 'language switch links' on the website front-end, these links actually guide users to access your different language versions of the site.

Second, backend configuration: lay the foundation for a multilingual website

To implement language switching, you first need to make the corresponding settings in the background. This mainly involves two aspects: the setting of the system language package, and the creation of multilingual sites.

1. Set default language package (for backend interface and system prompts)Log in to the AnQiCMS backend, find "Backend Settings" in the left navigation bar, and click "Global Settings".Here, you will see the "Default Language Pack" option. You can choose "Chinese", "English", or any other supported language.This setting mainly affects the language of the AnQiCMS backend management interface and the system-generated prompts on the website.It does not automatically translate the articles, products, and other dynamic content you post.

2. Create multilingual site (for frontend content)This is the key step to implement front-end multilingual content display and switching.If you need an independent English website to display English content, you need to create a new site in the "Multi-site Management" section of the AnQiCMS backend.

   • Find "Multi-site Management" in the left menu of the background, and then click "Add New Site".
   • Create a page on the new site, you can fill in items such as "Site Name" (such as: AnQiCMS English Site), "Root Directory of Site", "Website Address" (such as:en.yourdomain.comorwww.yourdomain.com/en/）等信息。
   • It is important that you can choose a different "default language package" for this new site and configure its independent database (or reuse the main site's database but use a different table prefix to achieve data isolation).
   • After completing the site creation, you will have an independent English version of the site where you can publish exclusive English articles, products, and more.For other language versions, create them in this manner.

In this way, you create a logically independent space for each language, which can be accessed through independent domains or paths and carries the content of each language.

Chapter 3: Front-end Display: How to Display Multi-language Switch Links

Once the multilingual site structure is set up on the back end, the next step is to add multilingual switch links to the front-end templates. AnQiCMS provides a very convenient template tag.languagesTo implement this.

1. UselanguagesTag to get the language site list

   languagesTag can get all the multi-language site information configured. You can do this in the public part of the website, such as the header (header.html) or the footer (footer.html），use this tag to generate a language switcher.

   {%- languages websites %}
   {%- if websites %}
   <div class="language-switcher">
       <span>切换语言：</span>
       {%- for item in websites %}
       <a href="{{item.Link}}" class="lang-item">
           {%- if item.LanguageIcon %} {# 如果后台配置了语言图标，则显示图标 #}
           <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}} Flag" class="lang-flag" />
           {%- else %} {# 否则显示 Emoji 或语言名称 #}
           {{item.LanguageEmoji}} {# 显示语言的 Emoji 符号，如 🇨🇳 #}
           {% endif %}
           {{item.LanguageName}} {# 显示语言名称，如 中文 #}
       </a>
       {%- endfor %}
   </div>
   {%- endif %}
   {%- endlanguages %}
   

   • websitesIt is an array object that contains details of each language site.
   • item.LinkThis is the most important attribute, which will generate the complete URL pointing to the language site.
   • item.LanguageNameThe display name of the language (such as 'Chinese', 'English').
   • item.LanguageEmoji: Language corresponding emoji symbols (such as 🇨🇳, 🇬🇧), which can enhance the visual effect.
   • item.LanguageIconIf the background is configured with a language icon, the icon URL will be output here.

   This code will iterate through all the configured language sites and generate a link for each site, which the user can click to jump to the corresponding language version website.

2. Configure Hreflang tag for SEO optimization

   In order to better guide search engines to understand the different language versions of your website and display them to the correct users, it is recommended that you add the site's<head>Partially addhreflangTag. This is crucial for improving international SEO.

   You can place the following code in your template file (usually)bash.htmlorheader.html）的<head>Area:

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

   • hreflang="{{item.Language}}"It will output the correct language code (such aszh-cn/enHelp search engines distinguish different language pages.

Chapter 4: Content translation: Beyond the interface level of multilingualism.

AlthoughlanguagesThe label provides links between sites, but the actual content translation still needs to be managed manually.

1. The static strings in the translation template.For fixed text in templates, such as navigation menu items, copyright statements, "Contact Us" buttons, etc., you can use AnQiCMS'strThe translation label combines with the language package file to implement.

   • Create under the template directorylocalesfolder, and create a corresponding subfolder for each language (such aszh-cn/en-us)
   • Place in these subfoldersdefault.yml(Or another custom .yml file), and define key-value pairs, for example“yourLocation”: “您的位置”.
   • In the template, use{% tr "yourLocation" %}It can display the corresponding translation according to the current site language setting.

2. Translate dynamic content (articles, products, etc.)For articles, products, and other dynamic content, you need to create and publish content independently for each language site.For example, publish Chinese articles under your Chinese site and then publish the corresponding English articles under the English site.AnQiCMS's multi-site management feature makes this content isolation and management very efficient.

V, some practical suggestions

• Intuitive visual cues: Use national flags in the language switcher (viaLanguageIconor EmojiLanguageEmojiThe combination of language names with symbols can make users choose more intuitively.
• Default language settingsMake sure new users or users who cannot identify the language can access the default language version of your website.
• User ExperiencePlace the language switcher in a prominent location on the website, such as the top right corner of the header or the footer, making it easy for users to find.

By following these steps, you can set up and display multilingual switch links on the AnQiCMS website, effectively expand the international influence of the website, and provide a more friendly access experience for global users.

Frequently Asked Questions (FAQ)

Q1: Why did I set the "default language package" in the background, but the content of the articles on the website front-end is still in Chinese?**A1