How to display the language switch option and hreflang tag in AnQiCMS?

Building multilingual websites in AnQiCMS and providing convenient language switching options as well as correct hreflang tags is a key step to expanding the international market and enhancing user experience.AnQiCMS with its flexible architecture, provides a clear path to achieve this goal, allowing your website content to accurately reach global users while ensuring search engine friendliness.

Overview of the implementation principle of multi-language in AnQiCMS

AnQiCMS is designed to integrate multi-language support with multi-site management functionality.This means that each different language version is usually treated as an independent site for management within the system.The benefits of this design lie in the fact that the backend management, content publishing, URL structure, and template styles of different language sites can be highly independent and customizable, thus avoiding the complexity that may be brought by multi-language on a single site.

For example, your Chinese site (www.example.com) and English site (en.example.comThis will have their own independent content library, and can publish completely different articles, products, or pages.AnQiCMS's “Default Language Pack” setting mainly affects the language of the background management interface or the built-in prompt information of the system, while the core content displayed on the website's front page, such as article titles, body, and category names, needs to be created and maintained separately for each language site.

It is based on such an architecture that AnQiCMS provides powerful tag functions, which help us easily implement language switching and hreflang tag integration on the front-end.

Step 1: Configure Multilingual Sites

Firstly, you need to set up multiple independent language sites in the AnQiCMS backend.

  1. Install the Main Site:If you have not installed AnQiCMS yet, please complete the installation of the main site first.
  2. Create a new language site:Log in to your AnQiCMS main site backend. In the left menu, find the "Multi-site Management
    • In the pop-up interface, you need to fill in the corresponding information for each language site. For example, to create an English site:
      • Site Name:For example, 'English site'.
      • Site root directory:This is an independent directory path, used to store cache, configuration files and other data for the site, for example./app/en_example_comEnsure that this directory name is unique.
      • Website address:Set the domain name or subdomain that the language site will use, for example.https://en.example.comorhttps://www.example.com/en.
      • Administrator account password:Set a separate administrator account and password for the new site.
      • Database name:Create a separate database for the site, for example.en_example_com_dbIf you are using AnQiCMS in a Docker environment and reusing the default database account information, you usually do not need to fill in the database account password.
      • Select the template you want to use:You can select a separate template for each language site, or reuse an existing template and make language-related modifications.

After completing the site addition, you still need to configure the corresponding reverse proxy at the server level (such as Nginx or Apache), routing the users' requests correctly to the Docker container port of AnQiCMS (default is 8001), and ensuring that your domain name resolution is correct.This operation is similar to the description in the AnQiCMS installation and deployment document about multi-site configuration, ensuring that each language site can access independently.

Step 2: Add language switch options in the template

When your multilingual site is configured and can be independently accessed, the next step is to provide a prominent language switch option on the website front end, so that users can choose the language according to their preferences. AnQiCMS provides an option namedlanguagesThe powerful tag, which can obtain information about all configured language sites.

Typically, we suggest placing this code in the global template file, for exampletemplate/{您的模板名称}/bash.htmlorheader.htmlauto, this ensures that it is visible on all pages.

You can use it in the following way.languagesUse the label to display the language switch option:

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

In this code block:

  • {% languages websites %}It will traverse all the multilingual sites configured in the AnQiCMS backend and store their data inwebsitesthe variable.
  • item.LinkIt will provide the complete URL of the language site.
  • item.LanguageNameDisplay the name of the language (for example, "Chinese
  • item.LanguageEmojiProvide language corresponding Emoji icons, if your template supports displaying Emoji, this is a concise choice.
  • item.LanguageIconIf you have configured the language icon in the background, the URL of the icon will be displayed here. You can choose to display Emoji or icon according to your actual needs.
  • {% if item.Link == currentUrl %}class="active"{% endif %}this line (currentUrl需要作为全局变量传入模板，或者通过其他方式获取当前页面的URL）可以用于高亮显示当前用户正在访问的语言。

Third step: Implement hreflang tags

In addition to providing users with visible language switching options, proper configurationhreflangtags are crucial for the SEO of multilingual websites.hreflangThe tag informs search engines about the other language versions of a specific page, which helps avoid duplicate content issues and ensures that users see the correct language and regional content in search results.

hreflangThe label needs to be placed on each page<head>You can continue to use itlanguagestags to dynamically generate these links:

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

In this code block:

  • item.LinkThe URL for each language site is also provided.
  • item.Languagethen provides the ISO 639-1 language code for the language site (for examplezh-cn/en-us）。These codes are automatically generated by AnQiCMS when creating a language site, or you can set them in the background configuration.

Add this code to your template.<head>Part (for exampletemplate/{您的模板名称}/bash.htmlorhead.html），即可确保每个页面都包含正确的 Englishhreflang信息。 English

集成与**实践 English

  • Template file location: languages标签的代码，无论是语言切换选项还是 EnglishhreflangLabels, should be placed in the global header template file of the website (such asbash.html/header.html) to ensure they can be correctly loaded and rendered on all pages.
  • Content synchronization:Since each language version is an independent site, you need to maintain the content separately for each site.When publishing new articles or products, remember to release and translate them on all related language sites.
  • Uniform URL structure:Plan a clear and consistent URL structure (for example, using subdirectories/en/or subdomainsen.example.com) helps users and search engines understand your multilingual content layout.
  • Standardize tags:AlthoughhreflangSolved the multilingual content issue, but still recommends using on each page<link rel="canonical" href="..."/>The tag points to the main URL of this language version to avoid unnecessary crawler confusion. AnQiCMS providestdkLabel to get the specification link.

By following the above steps, you can effectively display multilingual in AnQiCMS