How to display the built-in system language package switching function of AnQiCMS on the front page?

AutoCMS provides a flexible mechanism that allows your website to better serve users of different languages globally.When you want to implement the language switch function on the front-end page, the tags and background configuration built into AnQiCMS can well meet this need.

Understand the AnQiCMS language package mechanism

Firstly, we need to clarify the concept of 'language package' in AnQiCMS. The built-in system language package of AnQiCMS is mainly responsible for switching the back-end interface of the website and the front-end pages.System built-in prompts, tags, etc.language. For example, date formats, system messages, or preset text in certain templates that are unrelated to the content of the article.

It should be noted that this feature isnot automatically translatedThe specific content edited and created by users, such as articles published on your website, product descriptions, category names, etc.This content's multilingual support needs to be implemented through other methods (such as creating different language versions during content editing or using template translation tags).v2.1.1Version has added support for default language packages, which lays a foundation for the international operation of the website.

Enable and configure the default language in the background

To display the language switch feature on the front end, you first need to make some basic settings in the AnQiCMS background.

  1. Enter Global Function Settings:Log in to your AnQiCMS admin panel, find the "Admin Settings
  2. Set the default language package:In the global function settings page, you will see an option named "Default Language Pack".AnQiCMS currently includes Chinese and English language packs.You can choose the default language used on your website.This setting will affect the default system built-in language loaded by the website.

Although this setting itself does not directly display the language switch button on the front end, it ensures the basic environment of the website when handling different languages.

Display language switch function on the front-end page

AnQiCMS提供了一个专门的模板标签{% languages %}To get all the configured multilingual site information, you can use this tag to build the front-end language switcher.

Use{% languages %}Tag to get the language list

You can add the following code snippet at any position in the website template (usually in the header, footer, or sidebar) 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 iteratewebsitesEach language site information in the variable, and generate a link for each language.

Code analysis:

  • {% languages websites %}This is the core tag, which loads all available language site information intowebsitesthe variable.
  • {%- if websites %}English: Judge whether the language site exists, if it exists, continue rendering.{%-and-%}Used to remove the blank lines generated by tags, to keep the HTML output neat.
  • {%- for item in websites %}Loop through:websitesArray,itemThe variable represents a language site in each loop.
  • {{item.Link}}This is the access link for the language site. Clicking it will redirect the user to the corresponding language version of the page.
  • {{item.LanguageIcon}}：If your language configuration has an icon (such as a flag icon), it will be displayed here.
  • {{item.LanguageEmoji}}：If there is no icon, you can choose to display the Emoji表情 corresponding to the language.
  • {{item.LanguageName}}：Displays the name of the language (such as “Chinese”, “English”).

You can flexibly beautify these elements according to your website design, for example, placing them in a dropdown menu, a popup window, or a simple horizontal list.

Add Hreflang tag for SEO optimization

For multilingual websites, it is strongly recommended to better let search engines understand the content of different language versions of the page and to display the correct version for different language users in search results.<head>some additionshreflangLabel. This helps to avoid duplicate content issues and improve user experience.

You can use the website template'sbase.htmlfile (usually the common template inherited by all pages) of<head>Add the following code inside the tag:

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

Code analysis:

  • <link rel="alternate" ...>：This ishreflangThe standard format of the label.
  • href="{{item.Link}}": Points to another language version of the current page's URL.
  • hreflang="{{item.Language}}": Specifies the language code corresponding to the URL (for example,zh-CNRepresents Simplified Chinese,enrepresents English).

The template content at a deeper level supports multilingual processing

The system language pack and switcher mentioned earlier are mainly for displaying system-level and site-level languages. If you want the website template to haveCustom text contentIt can also display multiple languages, AnQiCMS also provides{% tr %}Tags andlocalesdirectory mechanism.

  1. Create a language file:Create a file named in your template directory,localesfolder. Then,localesIn the folder, create a subfolder for each supported language (for exampleen-us/zh-cn), and create one in each subfolderdefault.ymlfile.
    • For example,locales/zh-cn/default.ymlthat can containyourLocation: "您的位置".
    • locales/en-us/default.ymlwhich includesyourLocation: "Your Location".
  2. Use{% tr %}Tags:In the template, you can use{% tr "yourLocation" %}Such a way to call the translated text. The system will automatically load the corresponding text based on the currently selected languagedefault.ymlTranslation in the middle.

This way, you can finely control all hard-coded text multilingual versions in the template, combined with the front-end language switcher, to provide users with a comprehensive localization experience.

Through the above steps, your AnQiCMS website will be able to provide an intuitive language switching function and offer a browsing experience that is more in line with the habits of users in different languages, while also taking into account the needs of search engine optimization.

Common Questions (FAQ)

  1. Q: Will the language package switch feature automatically translate the content of my website articles?

  2. Q: If I want to support languages other than Chinese and English, such as French or German, does AnQiCMS support it?A: AnQiCMS内置的系统语言包目前主要提供中文和英文选项。但您可以通过创建自定义的locales语言文件（例如)locales/fr/default.yml用于法语），并结合{% tr %}Translate the label to translate the custom text in your template. For system core interfaces and labels, more in-depth secondary development may be required to expand language support.

  3. Q:hreflangWhat specific help does the tag provide for a website's SEO?A:hreflangThe tag tells the search engine that a specific page is an alternative version of another page's content, for different languages or regions. This helps:

    • Avoid being penalized for duplicate content:Even if the content is similar, but the language or region is different, the search engine will correctly identify it and avoid treating it as duplicate content.
    • Improve localized search rankings:Ensure that users can find the content version that best suits their language and region when searching.
    • Improved user experience:The search engine can directly guide users to their preferred language version, reducing the bounce rate.