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

On AnQiCMS, it is crucial to display a multilingual content switch button on the website front-end to expand the global user base and improve user experience.AnQiCMS with its powerful multilingual support and flexible template mechanism makes it intuitive and efficient to implement this feature.

Overview of the multilingual mechanism in AnQiCMS

AnQiCMS was designed from the outset to consider the global content publishing needs.Its multilingual support is centered around the "multi-site management" feature.This means, you can create different sites to represent different language versions.For example, you can have ayourwebsite.comAnother as a Chinese siteen.yourwebsite.comoryourwebsite.com/enAs an English site. Each site can have its own domain, content, and even default language package settings, thereby achieving true multi-language content isolation and management.

In the background, under the "System Settings", you will find the "Default Language Pack" option.Although it can be set to Chinese or English and other default languages, 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 front end, they are bound to specific sites and will not be automatically translated or switched due to changes made here to the 'default language package'.Therefore, to implement the front-end multi-language switching, the key is to create and manage each site's content for different language versions properly.

Deploy multilingual site: Basic preparation

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

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

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

2. Create a new site:Log in to your main site backend 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 to store the data of the independent language site), and administrator account password, etc.To ensure content isolation, each language site should use an independent database.

By such settings, each language version has a complete, independently operated AnQiCMS instance, and you can target the publication and management of content in different languages.

Core: Add a language switch button in the template

After your multilingual site is configured and running, the next step is to add actual language switch buttons to the front-end template. AnQiCMS provides a very convenient template tag.languagesGet the list of all configured multilingual sites.

This tag uses a very concise method, it does not require any parameters, and it will automatically traverse all the multi-language site information you have configured in your 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 would 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. These public parts in the AnQiCMS template are usually throughbash.htmlorpartialManage the files under the directory.

Below is a segment applied in the template.languagesLabel example:

{%- 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 first checks if there is a multi-language site configuration ({% if websites %}If it exists, it will loop through each site.itemIt is the current language site object in the loop, you can access it throughitem.Linkto get the link address of the language site,item.LanguageNameGet the language name (such as "Chinese"),item.LanguageEmojiGet the Emoji表情 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 according to your design preference.

Insert this code snippet into your template.bash.htmlIn the file (usually responsible for rendering the top navigation or bottom copyright information of the page), or create a separatepartial/language_switcher.htmlfile, then use{% include "partial/language_switcher.html" %}to include it inbash.htmlChinese. In this way, your website front-end will appear a switch area containing all language options.

Optimization and details: improving user experience

In order to make the multilingual switching function more perfect and user-friendly, some details are worth paying attention to:

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

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

  This code will generate a label for each language sitelinkwhereitem.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 Position:The style and position of the language switch button greatly affect the user experience. You can use CSS to.language-switcherand.language-optionClass beautification to keep consistent with the overall design style of the website.The 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 tag itself does not directly provide a way to determine the language of the current site.IsCurrentattribute, but you can compare it using frontend JavaScript or backend template logic,item.Linkor with the URL of the current page or