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

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

As the trend of globalization continues to deepen, many businesses and content operators find that having a website that supports multilingual is crucial for expanding the market and serving users in different regions.AnQi CMS knows this need, therefore it built-in powerful multilingual support function, allowing you to easily manage and display content in different languages.

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

Understand the multilingual site mechanism of AnQi CMS

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

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

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

Based on the foundation of multi-site configuration, Anqi CMS provides a simple template tag that allows you to conveniently display all configured language versions on the website front end and provide switch links.

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

In the AnQi CMS template system, to display language switch options, you need to uselanguagesTemplate tag. This tag can retrieve information about all the multi-language sites configured under the current Anqi 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 code:

  1. {%- languages websites %}This is the core tag for calling the multilingual site. It retrieves all configured language sites and assigns them as an array object towebsitesVariable.
  2. {%- if websites %}This is a conditional judgment to ensure that the switch option will be rendered only when there are multiple language sites, avoiding the display of an empty switcher on single-language websites.
  3. {%- for item in websites %}:websitesis an array containing multiple site information, we traverse this array throughforloop through the arrayitemthe variable represents the information of a language site in each loop
  4. itemthe fields available 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', is very useful for SEO inhreflangtags.
    • item.LanguageEmoji: The Emoji expression corresponding to the current language, for example 🌐.
    • item.LanguageIcon: If 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.LinkThe most important field, this is the access link to the current language site, click to directly switch to the website of the language version.
    • item.Remarkanditem.NofollowOther auxiliary information, usually not displayed directly in the language switcher.
  5. Display logic:
    • {%- if item.LanguageIcon %}We first determine if there is a custom language icon. If there is, it will 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}}Please provide a clear text prompt.

By this code, you can flexibly combine the display of language names, icons, or emojis, providing your website visitors with a beautiful and practical language switch entry.

Optimize SEO: Add hreflang tag

In addition to displaying the language switcher on the page, it is recommended to guide search engines to understand your multilingual content by using the website's<head>Partially addhreflangTags. This helps avoid the repetition of multilingual content and ensures that the correct language version is displayed to users in the corresponding regions.

You can find the public header template file of the website (such asbash.htmlorheader.htmlUse it inlanguagestag 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），help search engines better index your multilingual sites.

Actual operation：integrate the switcher into your template.

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

  • Website Header (Header): Usually locatedtemplate/default/partial/header.htmlIn a similar public header file. This is the most common location, allowing users to quickly find the toggle option upon entering the website.
  • Website Footer (Footer)Intemplate/default/partial/footer.htmlIn other files, providing a secondary toggle entry.
  • Sidebar (Sidebar): If your website has a sidebar, you can also place the toggle here.
  • Public Base TemplateFor exampletemplate/default/bash.htmlIf all your pages inherit from a basic template, placing it here ensures that all pages display the switcher.

You can customize the CSS style of the above code according to your website design, for example, making it into a dropdown menu, flag icon list, and other forms so that it can better integrate into the overall interface. Anqi CMS providesLanguageIconandLanguageEmojiField, it provides great flexibility for visual design.

Summary

Provided by Anqi CMSlanguagesTemplate label, you can conveniently and quickly implement the display of multilingual 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 realized.At the same time, do not forget to addhreflangTags, provide good search engine optimization support for your multilingual site. Make good use of these features, and your website will be able to go international and serve global users better.

Frequently Asked Questions (FAQ)

1. Why did the front-end content not automatically translate even though the "default language package" was set in the background?

The 'default language package' setting of AnQi CMS (located in the background 'Global Function Settings') is mainly for localizing the built-in interface text, prompts, and other information.It does not automatically translate the specific content you create in the background, such as articles, products, categories, etc.For this content, you need to manually create and fill in the corresponding content for each language version.For example, you can post an article in Chinese on the Chinese site, and then publish the corresponding English translation on the English site.

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

AnQi CMS supports multi-site management. You can create multiple sites in the "Multi-site Management" backend, each of which can be bound to an independent domain (or subdomain) and configured with its corresponding language, template, and content.When the user accesses different domain names, the corresponding language version of the website will be loaded.Use in front-end templatelanguagesWhen a label is selected, it will automatically retrieve and generate the correct link for each site (item.Link) to enable language switching between different domain names.

3. Can I use custom flag icons or brand icons for language switching options?

Yes, you can. Inlanguagesthe tags returned byitemthe object, it includesLanguageIconfield. This means you can upload a custom icon for each language in the background (such as a flag image), and then use it in the template.{{item.LanguageIcon}}Display these icons. If no icons are uploaded, you can choose to use{{item.LanguageEmoji}}Display Emoji icons, 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.