How to display the multi-language content switch button on the website front end?

On AnQiCMS, allowing the website's front-end to display a multi-language content switch button is crucial for expanding the global user base and enhancing user experience.AnQiCMS with its powerful multilingual support and flexible template mechanism makes it intuitive and efficient to implement this feature.

AnQiCMS Multi-language Mechanism Overview

AnQiCMS was designed with global content publishing needs in mind.Its multilingual support core lies in the 'multi-site management' feature.This means that you can create different sites in the background to represent different language versions.yourwebsite.comAnother one for the Chinese siteen.yourwebsite.comoryourwebsite.com/enAs an English site. Each site can have its own domain, content, and even default language package settings, thus achieving real multi-language content isolation and management.

In the "System Settings" under the "Global Feature SettingsHere you can set Chinese or English and other default languages, but this mainly affects the AnQiCMS backend management interface and some built-in system prompts.For the articles, products, categories, and other content displayed on your website's frontend, they are bound to specific sites and will not be automatically translated or switched due to changes in the "default language pack" here.Therefore, the key to implementing multilingual switching on the front-end is to create and manage the respective sites for different language versions.

Deploy multi-language site: Basic preparation

Before you display the language switch button on the front end, you need to set up the corresponding multilingual site in the AnQiCMS backend first. This usually involves:

  1. Plan the domain name or subdirectory:Decide which URL structure your multilingual site will use, for example:

    • Independent domain: yourwebsite.com(English),yourwebsite.de(German)
    • Subdomain: zh.yourwebsite.com(English),en.yourwebsite.com(English)
    • Subdirectory: yourwebsite.com(English),yourwebsite.com/en(English) AnQiCMS's multi-site management is very flexible and can well support these modes.

  2. Create a new site:Log in to the admin panel of your main site, and go to the "Multi-site Management" feature.Here, you can 'Add a new site', configure independent site information for each language version, including site name, website address, database name (used for independent storage of the data of the language site), and administrator account and password, etc.To ensure content isolation, each language site should use an independent database.

Through such settings, each language version has a complete, independent AnQiCMS instance, and you can target and manage content in different languages.

核心：In the template, add a language switch button

When your multilingual site is configured and running, the next step is to add the actual language switch button in the website front-end template. AnQiCMS provides a very convenient template taglanguagesGet the list of all configured multilingual sites.

This label uses a very simple method, it does not require any parameters, and will automatically traverse all the multi-language site information you have configured in the background.It will return an array containing detailed information for each language site, and you can iterate over this array to generate corresponding language switch links.

usually, you will place this code in the public part of the website, such as the header, footer, or sidebar, so that users can switch languages at any time and anywhere. These common parts are usually implemented in the AnQiCMS template.bash.htmlorpartialThe files under the directory are managed.

The following is a segment applied in the template.languagesa tag in a template:

{%- languages websites %}
{%- if websites %}
<div class="language-switcher">
    <span>选择语言：</span>
    {%- for item in websites %}
    <a href="{{item.Link}}" class="language-option">
        {%- if item.LanguageIcon %} {# 如果配置了语言图标，则显示图标 #}
        <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}">
        {%- else %} {# 否则显示Emoji或语言名称 #}
        {{item.LanguageEmoji}}
        {% endif %}
        {{item.LanguageName}}
    </a>
    {%- endfor %}
</div>
{%- endif %}
{%- endLanguages %}

This code will first check if there is a multi-language site configuration ({% if websites %})，if it exists, it will loop through each site.itemis the current language site object in the loop, you can accessitem.Linkto get the link address of the language site,item.LanguageNameGet the language name (such as “Chinese”),item.LanguageEmojiGet the Emoji expression corresponding to the language (such as🇨🇳)，as well asitem.LanguageIconGet the URL of the language icon. You can choose to display the icon, Emoji, or plain text based on your design preference.

Insert this code snippet into your template.bash.htmlFile where (usually responsible for rendering the top navigation or footer copyright information) is located, or create a separate onepartial/language_switcher.htmlfile, then use{% include "partial/language_switcher.html" %}to include it intobash.htmlauto

auto

To make the multilingual switching feature more完善 and user-friendly, some details are worth noting:

  • Hreflang tag settings:For search engine optimization (SEO),hreflangTags are an important way to tell search engines that your website has different language versions. It can help search engines display the correct language content to users of that language. In your template's<head>Section, you can make use oflanguagestags to dynamically generate thesehreflangLink:

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

    This code will generate alinktag for each language site,item.LinkIs the URL of the corresponding language site,item.LanguageIs the ISO 639-1 language code for the language (such as “zh-CN” or “en-US”).

  • Style and location:Language switch button style and position greatly affect user experience. You can use CSS to.language-switcherand.language-optionClass beautification to keep it consistent with the overall design style of the website.Common practice is to place it at the top right corner of the website, in the footer area, or integrate it as a dropdown menu into the main navigation.

  • Highlight the current language (advanced):AlthoughlanguagesThe label itself does not directly provide a judgment of the current site language.IsCurrentAttribute, but you can compare through front-end JavaScript or back-end template logic,item.Linkwith the URL of the current page or