How can language switch links be displayed in multilingual sites?

Build a website for global users, multilingual support is an indispensable part.AnQiCMS was well thought out from the beginning, providing a powerful and flexible solution for the publication and management of multilingual content.By making some simple configuration and template adjustments, we can easily implement language switching functionality on the website, allowing users of different languages to smoothly browse the website content.

AnQiCMS Multilingual Capabilities

AnQiCMS is inherently equipped with excellent multilingual content management capabilities, mainly due to its flexible "multi-site management" and "default language package" design.It not only supports the creation of independent sites for each language version, ensuring the independence of content, URL structure, and SEO strategy, but also built-in multiple language packages, convenient for localizing the back-end interface and system prompts.This means we can manage the Chinese version, English version, French version, etc. of the website as separate sites, each with its own content, templates, and even independent domains or subdomains, while AnQiCMS coordinates in the background.

Core: Language Switch Link Display

To display the language switch link on the website front-end, AnQiCMS provides a very convenient template tag:languages. This tag helps us to get all the multilingual site information that is configured, and then through the loop of this information, dynamically generate language switch links.

Basic usage method:

We usually place the language switch function at the top (Header) or bottom (Footer) of the website, etc., public areas, so the relevant code is placed in the public part of the template file (for examplebase.htmlorpartial/header.htmlIt would be appropriate.

Here is an example of code to create a language switch link.

{%- languages websites %}
{%- if websites %}
<nav class="language-switcher">
    <ul>
        {%- for item in websites %}
        <li {% if item.IsCurrent %}class="active"{% endif %}>
            <a href="{{item.Link}}" {% if item.Nofollow %}rel="nofollow"{% endif %}>
                {%- if item.LanguageIcon %}
                <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}">
                {%- else %}
                {{item.LanguageEmoji}}
                {% endif %}
                {{item.LanguageName}}
            </a>
        </li>
        {%- endfor %}
    </ul>
</nav>
{%- endif %}
{%- endlanguages %}

In this code block:

• {% languages websites %}This tag will traverse all language sites configured in the AnQiCMS backend and assign their data towebsitesVariable.
• {% for item in websites %}We loop throughwebsitesto process the information of each language site one by one.
• item.LinkThis will output the URL of the current language site, and the user can click to jump to the corresponding language version.
• item.LanguageName: Display the name of the language site, for example, "Simplified Chinese" or "English".
• item.LanguageIconoritem.LanguageEmoji: If the background is configured with a national flag icon or Unicode emoji for the language, the icon will be displayed first, followed by the emoji, providing users with a more intuitive switching method.
• item.IsCurrentA boolean value indicating whether the current language being cycled through is the language being visited by the user, which can be used to add a link for the current languageactiveStyle.
• item.NofollowA boolean value indicating whether to add a link for the current onerel="nofollow"The attribute, which is very useful for SEO control of certain links that you do not want to pass weight.

Through this code, the website front-end can automatically generate a set of language switch links based on the backend configuration, and can flexibly display language names, national flags, or emojis.

Multilingual SEO: Hreflang Tag

To help search engines better understand the multilingual versions of a website and display them to the correct users, configurationhreflangTags are crucial.hreflangTags can tell search engines that the content under different URLs is a substitute version of the same content, just for different languages or regions.

In AnQiCMS, we can combinelanguagestags, easily in the website<head>these in the partshreflang.

Hreflang tag example:

Place the following code snippet in the website template's<head>area (usuallybase.html):

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

• item.LanguageThis field outputs the language code of the language site (e.g., 'zh-CN' or 'en'), and the search engine will judge the language and target region based on this code.

This way, each language version of the website will include links to all other language versionshreflangto ensure that search engines can accurately index and display them.

Implementation steps

To implement the above function, the following configuration is usually required:

1. Backend site configuration:

   • Create a multilingual site:In the AnQiCMS backend's 'Multi-site Management' module, create an independent site for each target language. For example, you can create a Chinese site (www.example.com）and an English site（en.example.comorwww.example.com/en/Make sure to set the site name, website address, and most importantly the 'default language package' (which can be selected under 'Global Settings' -> 'System Settings') when creating a site.
   • Configure language information:In each site's “Global Settings” -> “System Settings”, in addition to setting up the “Default Language Pack”, you can also upload a “Language Icon” (flag, etc.) for the language site or select a “Language Emoji”, this information will be transmitted throughlanguagesLabels are automatically provided to the frontend for use.

2. Frontend template integration:

   • Edit the template file:Find the current template file your website is using, for example, located in/template/你的模板目录/base.html.
   • Insert language switch code:Translate the language switch link code (first section) abovelanguagesPaste the example label) where you want to display the language switcher, for example in<header>or within tags.<footer>Tag inside.
   • Insert Hreflang code:Translate the above hreflangLabel code (second paragraph)languagesPaste the label example to<head>Inside the label, usually placed<title>After the label or all<meta>the tag afterward.

After completing these steps, clear the website cache, visit your website, and you will see the configured language switch links, and search engines will also better understand the structure of your multilingual website.

Frequently Asked Questions (FAQ)

1. Q: Is the translation of the website content automatic? Or does it need to be manually processed? A:AnQiCMS itself does not automatically translate content. You need to manually create or import the corresponding language version of the content under each language site.For example, if you have a Chinese version of the "About Us" page, then on the English site, you need to create an English version of the "About Us" page and make sure the content is in English.AnQiCMS site management provides convenience, you can independently edit content for each language version.

2. Q: Can I use flag icons to represent languages instead of text? A:Absolutely. On top of that