How to set and display multi-language switch links in AnQiCMS?

Today, with the increasing popularity of globalization, multilingual support on websites has become a key to expanding the international market and serving diverse user groups.AnQiCMS fully considers this need, 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.

I. Understanding the multi-language 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, multi-language versions with different content, the most common and recommended approach is to set up a separate site for each language.One of the core strengths of AnQiCMS is the support for "multi-site management", which allows you to easily create and maintain multiple language sites under a single system.Each site can have its own domain (or subdomain/subdirectory), independent language packages, and corresponding language content.

When we need to provide a "Multi-language Switch Link" on the website frontend, these links actually guide users to access your different language versions of the site.

English, background configuration: lay the foundation for a multilingual website

To implement multilingual switching, it is first necessary to make the corresponding settings in the background. This mainly involves two aspects: the setting of system language packages, and the creation of multilingual sites.

  1. Set default language package (for backend interface and system prompts)Log in to the AnQiCMS admin panel, find "Admin SettingsHere, you will see the 'Default Language Pack' option.You can choose "ChineseThis setting mainly affects the language of the AnQiCMS backend management interface and the system-generated prompts in the website.It will not automatically translate the dynamic content you post, such as articles, products, etc.

  2. Create multilingual site (for front-end content)This is the key step to implement front-end multi-language 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, then click 'Add New Site'.
    • Create a page on the new site, you can fill in information such as "Site Name" (e.g., AnQiCMS English Site), "Root Directory", "Website Address" (e.g.,en.yourdomain.comorwww.yourdomain.com/en/）等信息。
    • It is important that you can select 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).

Through this method, you have created a logically independent "space" for each language, which can be accessed via independent domains or paths and carries content in each respective language.

English

Once the multilingual site structure is set up on the backend, the next step is to add a multilingual switch link to the website's frontend template. AnQiCMS provides a very convenient template taglanguagesTo achieve this point.

  1. UselanguagesLabel to get the language site list

    languagesLabel can get all the multi-language sites that have been configured. You can get this information in the public part of the website, such as the page 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 %}
    • websitesIs an array object that contains detailed information for each language site.
    • item.Link：This is the most important attribute, it generates the full URL pointing to the language site.
    • item.LanguageName：The display name of the language (such as “Chinese”, “English”).
    • item.LanguageEmoji：Language corresponding to the Emoji symbol (such as 🇨🇳, 🇬🇧), which can enhance the visual effect.
    • item.LanguageIconIf the backend has configured an icon for the language, the icon URL will be output here.

    This code will loop through all the configured language sites and generate a link for each site, so that users can click and jump to the corresponding language version website.

  2. Configure Hreflang Tag for SEO Optimization

    In order to better guide the search engine to understand the different language versions of your website and display them to the correct users, it is recommended that you put in the website<head>some additionshreflangLabel. This is crucial for improving international SEO.

    You can place the following code in your template file (usually)bash.htmlorheader.html) of<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 as)zh-cn/en），help search engines distinguish between pages of different languages.

Four, Content Translation: Beyond the interface level of multilingualism.

AlthoughlanguagesTags provide links for switching between sites, but the actual content translation still needs to be managed manually.

  1. Static strings in the translation templateFor fixed text in templates, such as navigation menu items, copyright statements, 'Contact Us' buttons, etc., you can use AnQiCMS'strTranslate label by combining language package files.

    • Create under the template directorylocalesFolder, and create a subfolder for each language corresponding to it (such aszh-cn/en-us).
    • Place in these subfoldersdefault.yml（or any custom .yml file you define），and define key-value pairs, for example“yourLocation”: “您的位置”.
    • In the template, use{% tr "yourLocation" %}it will display the corresponding translation according to the current site's language settings.

  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 indication: Use national flags as icons in the language switcher (via)LanguageIconor EmojiLanguageEmoji）and language name combined, allowing users to select more intuitively.
  • Default language setting：Ensure that new users or users who cannot identify the language can access the default language version of your website.
  • User Experience：Place the language switcher in a prominent position on the website, such as the top right corner of the page header or the footer, for easy user access.

Through the above steps, you can set and display multi-language switch links on the AnQiCMS website, effectively expand the international influence of the website, and provide a more friendly access experience for global users.

Common Questions (FAQ)

Q1: Why is the article content on the website frontend still in Chinese even though I have set the "default language package" in the background?**A1