How to display the AnQiCMS built-in system language package switch feature on the front page?

AnQi CMS provides a flexible mechanism that allows your website to better serve users of different languages around the world.When you want to implement language switching on the front page, AnQiCMS built-in tags and backend configuration can well meet this need.

Understand the AnQiCMS language package mechanism

Firstly, we need to clarify the concept of the language package in AnQiCMS. The built-in system language package of AnQiCMS is mainly responsible for switching the website backend interface as well as the front-end page ofBuilt-in prompt information, tags, etc.language. For example, date format, system messages, or certain pre-set text in templates that is unrelated to the content of the article.

It should be noted that this feature does nottranslate automaticallyThe specific content edited and created by users, such as articles, product descriptions, and category names published on your website.This content's multilingual support needs to be implemented through other means (such as creating different language versions during content editing or using template translation tags).AnQiCMS isv2.1.1The version has added support for the default language package, 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 the global function settings:Log in to your AnQiCMS backend, find the "Backend Settings" menu in the left navigation bar, and then click "Global Function Settings".
  2. Set the default language package:In the global feature settings page, you will see an option named "Default language package".AnQiCMS currently has built-in Chinese and English language packs.You can choose the default language for your website. This setting will affect the system built-in language loaded by default.

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

Display the language switch function on the front-end page.

AnQiCMS provides a dedicated template tag{% languages %}To get all the multilingual site information that has been configured, 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 to any location 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 traversewebsitesEach language site information in the variable, and generate a link for each language.

Code analysis:

  • {% languages websites %}This is the core tag, it will load all available language site information towebsitesthe variable.
  • {%- if websites %}Check if there is a language site, and if it exists, continue rendering.{%-and-%}Used to remove blank lines generated by tags, keeping the HTML output tidy.
  • {%- for item in websites %}: Loop through.websitesarray,itemThe variable represents a language site in each loop.
  • {{item.Link}}This is the access link to the language site. Clicking it will redirect the user to the corresponding language version page.
  • {{item.LanguageIcon}}If your language configuration has an icon (such as a national 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}}: Display the name of the language (such as "Chinese", "English").

You can flexibly style these elements according to your website design, such as placing them in a dropdown menu, pop-up window, or a simple horizontal list.

Add Hreflang tag for SEO optimization

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

You can use it in thebase.htmlThe file (usually the common template inherited by all pages) of<head>Enter the 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 URL.
  • hreflang="{{item.Language}}": Specifies the language code corresponding to the URL (for examplezh-CNrepresenting Simplified Chinese,enrepresents English).

Deep-level template content multilingual processing

The system language package and switcher mentioned earlier, mainly for displaying language at the system and site levels. If you want to customize the text content in the website templateCustom text contentCan also achieve multilingual display, AnQiCMS also provides{% tr %}Tags andlocalesdirectory mechanism.

  1. Create a language file:Under your template directory, create a folder namedlocales. Then in thelocalesIn the folder, create a subfolder for each supported language (for exampleen-us/zh-cnCreate a subfolder in eachdefault.ymlfile.
    • For example,locales/zh-cn/default.ymlCan includeyourLocation: "您的位置".
    • locales/en-us/default.ymlthen containsyourLocation: "Your Location".
  2. Use{% tr %}Tags:In the template, you can use{% tr "yourLocation" %}In this way to call the translated text. The system will automatically load the correspondingdefault.ymltranslations.

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

By following these steps, your AnQiCMS website will be able to provide a user-friendly language switching feature, offering a browsing experience that is more in line with the habits of different language users, while also taking into account the needs of search engine optimization.

Frequently Asked Questions (FAQ)

  1. Q: Will the language package switch feature automatically translate the content of my website articles?A: Will not. The built-in system language package switching function of AnQiCMS is mainly aimed at the background interface of the website and the system built-in prompts, navigation tags, etc. on the front-end page.The specific content published on your website, such as articles and product descriptions, requires you to manually create content in different languages or integrate third-party translation tools.

  2. Q: If I want to support languages other than Chinese and English, such as French or German, does AnQiCMS support it?A: The AnQiCMS built-in system language package currently mainly provides Chinese and English options. But you can create customlocaleslanguage files (such aslocales/fr/default.ymlfor French), and combine{% tr %}Translate the custom text in your template. For the system's core interface and labels, deeper secondary development may be required to expand language support.

  3. Q:hreflangWhat specific help do tags provide for website SEO?A:hreflangTags inform search engines that a specific page is an alternative version of another page's content, tailored for different languages or regions. This helps:

    • Avoid the penalty 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 most suitable for their language and region when searching.
    • Improve user experience:The search engine can directly guide users to their preferred language version, reducing the bounce rate.