How to display the multi-language switch options of the current site?

How to conveniently add multilingual switch options to the website in Anqi CMS?

With the continuous deepening of globalization trends, many enterprises and content operators find that having a website that supports multiple languages is crucial for expanding markets and serving users in different regions.【en】The Anqi CMS is well-aware of this need and therefore built-in powerful multilingual support functions, allowing you to easily manage and display content in different languages.

When your website content is ready in multiple languages, the next step naturally is to provide visitors with an intuitive language switcher.This not only enhances user experience, but also ensures that your content can reach a wider audience.This article will guide you on how to elegantly implement the display of the multi-language switch option for the current site in the Anqi CMS template.

Understand the multi-language site mechanism of AnQi CMS

Before delving into the template code, let's briefly review how AnQi CMS handles multi-language.

The Anqi CMS supports multi-site management, which means you can create and manage an independent site for each language.For example, one main site is used for Chinese content, and another sub-site is used for English content. They can be managed uniformly in the background, but have independent domain names or subdomains in the front-end.

In the "Global Feature SettingsThis setting mainly affects the language display of default text in system built-in prompts, background interface, etc.However, it will not automatically translate the specific content of your website articles, products, categories, etc.This content usually requires you to manually fill in different language versions when creating or editing.

With the foundation of multi-site configuration, Anqi CMS provides a simple template tag that allows you to easily display all configured language versions on the website frontend and provides switch links.

Core: How to display multi-language switch options in front-end templates?

In the template system of Anqi CMS, to display multi-language switch options, you need to uselanguagesTemplate tags. This tag can retrieve all the multi-language site information configured under the current security CMS instance.

The basic calling method is as follows:

{%- languages websites %}
    {%- if websites %}
    <div>
        <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 %}

Let's break down this piece of code:

  1. {%- languages websites %}This is the core tag for calling multilingual sites. It retrieves all the configured language sites and assigns them as an array object towebsitesa variable.
  2. {%- if websites %}This is a conditional judgment to ensure that the toggle option is only rendered when there are multiple language sites, avoiding the display of an empty toggle on single-language websites.
  3. {%- for item in websites %}:websitesAn array containing multiple site information, we accessforto iterate over this array,itemrepresenting the information of a language site in each loop.
  4. itemavailable fields in the variable:
    • item.LanguageNameThe full name of the current language, for example, “Chinese”, “English”.
    • item.LanguageThe current language code, such as “zh-CN”, “en-US”, which is very useful for SEO.hreflangTags are very useful.
    • item.LanguageEmojiThe current language's corresponding Emoji表情，for example 🌐.
    • item.LanguageIconIf you have set a custom icon for the language in the background, the URL of the icon will be displayed here.
    • item.Name: The name of the site.
    • item.LinkThis is the most important field, it is the access link of the current language site, clicking it can directly switch to the website of the language version.
    • item.Remarkanditem.Nofollow[en]Other auxiliary information, usually not displayed directly in the language switcher.
  5. [en]Display logic:
    • {%- if item.LanguageIcon %}[en]We first judge whether there is a custom language icon. If there is, we display the icon (<img src="{{item.LanguageIcon}}" />).
    • {%- else %}If there is no custom icon, the language's Emoji expression will be displayed ({{item.LanguageEmoji}}).
    • Finally, whether there is an icon/Emoji or not, the language name will be displayed ({{item.LanguageName}}Provide clear text prompts.

Through this code, you can flexibly combine display language names, icons, or Emojis, providing your website visitors with an aesthetically pleasing and practical language switch entry.

Optimize SEO: Add hreflang tags

In addition to displaying the language switcher on the page, it is recommended to better guide search engines to understand your multilingual content by on the website<head>some additionshreflangTags. This helps to avoid duplicate content in multiple languages and ensures that the correct language version is displayed to users in the respective regions.

You can find the public header template file on the website (such asbash.htmlorheader.html), uselanguagesTag GenerationhreflangInformation:

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

This code will generate a tag for each language version<link>indicating its correspondinghref("link address"), andhreflang[Language code], helps search engines better index your multilingual site.

Actual operation: integrate the switcher into your template.

To add a multi-language switcher to your website, you can choose from several common template locations:

  • Header (Header) of the website: Typically located attemplate/default/partial/header.htmlIn similar public header files. This is the most common location, allowing users to quickly find the switch options after entering the website.
  • Website Footer (Footer): Intemplate/default/partial/footer.htmlIn the file, provide a secondary switch entry.
  • Sidebar (Sidebar): If your website has a sidebar, you can also place the switcher here.
  • Public basic template: For exampletemplate/default/bash.htmlIf all your pages inherit from a base template, placing it here ensures that all pages display the switcher.

You can beautify the above code according to the design style of your website, for example, making it into a dropdown menu, flag icon list, etc., so that it can better integrate into the overall interface. The one provided by Anqi CMS isLanguageIconandLanguageEmojiThe field provides a lot of flexibility in visual design.

Summary

Through the CMS provided by AnQilanguagesTemplate tags, you can conveniently and quickly implement the display of multi-language switching options on the website front-end.Whether it is a simple text link or a visual switcher combined with icons and Emoji, it can be easily implemented.hreflangTags, providing good search engine optimization support for your multilingual site. Make good use of these features, and your website will be able to better go international and serve global users.

Common Questions (FAQ)

1. Why didn't the front-end content automatically translate after the "default language package" was set in the backend?

2. How to configure independent domains for different language version websites? For examplewww.example.comFor Chinese,en.example.comUsed for English?

The AnQi CMS supports multi-site management functionality.You can create multiple sites in the 'Multi-site Management' section of the backend, each of which can be bound to a separate domain (or subdomain) and configured with its corresponding language, template, and content.When users visit different domain names, the corresponding language version website is loaded.languagesWhen labeling, it will automatically obtain and generate the correct link for each site (item.Link) to achieve language switching between different domain names.

3. Can I use custom flag icons or brand icons for the multi-language switch options?

Yes, you can. InlanguagesTag returnsitemthe object, it includesLanguageIconThis means that you can upload a custom icon (e.g., flag images) for each language in the background and then use it in the template.{{item.LanguageIcon}}Show these icons. If no icons are uploaded, you can choose to use{{item.LanguageEmoji}}Display Emoji emoticons, or just display{{item.LanguageName}}Text name. This flexibility allows you to freely choose the most suitable icon display form according to the design style of the website.