How to implement the multi-language content switching and front-end display of AnQiCMS website?

It is undoubtedly a crucial aspect to support multiple languages when building a global digital content platform.AnQiCMS is a management system designed specifically for content operators, deeply understanding this field, and providing a complete multi-language content switching and front-end display function, aiming to help users efficiently expand the international market and reach a wider audience.

Overview of AnQiCMS multi-language function

AnQiCMS is developed in Go language, with its high efficiency, customizable, and easy to extend features, it becomes an ideal choice for small and medium-sized enterprises and content operation teams.One of its core strengths is robust multilingual support.This means you can not only easily manage the interface of different language versions of the website, but also achieve seamless switching and display of content, allowing your content to directly target users of different languages, effectively helping the enterprise to carry out multilingual promotion and global layout.

Backstage preparation: Starting the journey of multi-language content support

To enable multi-language content switching on the website, you first need to make the corresponding configurations and content preparations in the Anqi CMS backend.

Step 1: Configure the default language pack

The '安企CMS' provides the option 'Default Language Package' in the 'Global Settings'.This is the basic language level of the system, which determines the display language of the background interface and part of the default system prompts.You can choose a suitable language package according to the main operating language, such as Chinese or English.This setting is the starting point of the entire multilingual system.

Step 2: Plan the multilingual version of the content

The Anqi CMS allows you to flexibly manage multi-language content according to your actual needs. Although the system does not provide a 'language version' field directly within individual content items (such as articles, products, pages), you can implement multi-language content management in the following two common ways:

  1. Utilize multi-site management to implement multilingual content: One of the highlights of AnQi CMS is its powerful "Multi-Site Management" feature. You can create an independent sub-site for each target language (for example,www.example.comFor Chinese,en.example.comorwww.example.com/en/Used for English).Each child site has its own database or data prefix, and can be configured with its own default language package and template.In this mode, you can create and publish corresponding language content in each language sub-site, achieving completely independent content management.When the user switches language, it is actually jumping to the corresponding language sub-site.

  2. Customize content fields through content modelsIf you do not want to create a separate site for each language, another way is to add custom fields for different languages in the "Content Model". For example, for the "Article" model, you can addTitle_en(English Title),Content_enEnglish content and fields. When publishing content, editors need to manually fill in the fields for each language version. The front-end template needs to dynamically select the display based on the current language environment.TitleorTitle_enThis approach requires a high level of proficiency in template writing and requires the editor to manually maintain all language content.

No matter which way you choose, the key is to clearly define the storage and management logic of each language's content. For general users, using multi-site management is often a clearer, more maintainable option.

Front-end implementation: Make it easy for users to switch languages

After the content is ready, the next step is to build a user-friendly language switching feature on the website frontend, and ensure that the search engine can correctly identify your multilingual pages.

Implement the language switcher

Adding a language switcher in your website template is crucial for providing a multilingual experience. Anqi CMS provides a convenientlanguagesTags used to retrieve the list of all available multilingual sites and generate switch links.

You can inbash.htmlAdd the following code block to the (or any public header template):

{%- 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 %}

This code will traverse all configured languages (or multilingual sites), generating a toggle button with a link, name, and optional icon/Emoji for each language.After the user clicks, they will be redirected to the corresponding language version of the page.

Translation of static text in the template

In addition to dynamic content, there are many fixed static texts on the website interface, such as navigation menu items, copyright statements, button texts, etc. Anqi CMS throughtrTranslate and language package mechanism to manage the translation of these static texts.

  1. Create a language package fileIn your template directory, create a:localesFolder, and create a subfolder for each language under it, such aszh-cn(Simplified Chinese) anden-us(American English). Create a subfolder in these subfoldersdefault.ymlfile.locales/zh-cn/default.ymlExample:

    yourLocation: "您的位置"
    welcomeMessage: "欢迎来到安企CMS"
    

    locales/en-us/default.ymlExample:

    yourLocation: "Your Location"
    welcomeMessage: "Welcome to AnQiCMS"
    
  2. Used in the templatetrtags: Use your template{% tr "键名" %}The form of calling the corresponding translation text.

    <p>{% tr "welcomeMessage" %}</p>
    <p>{% tr "yourLocation" %}</p>
    

    The system will automatically load the corresponding translation based on the current language environment after the user switches language.default.ymlFile, displaying the corresponding translation text.

SEO Optimization: The Application of Hreflang Tags

For multilingual websites, in order to inform search engines about the relationship between different language versions of pages, use it correctlyhreflangTags are crucial. This helps search engines provide the most relevant search results for users in different regions and languages, avoiding issues with duplicate content.

You can use the website<head>area tag.hreflangTags, it can also be used to generatelanguagesDynamic tag generation:

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

This will generate one for each language version<link>Tags indicate the corresponding URL and language code, helping search engines understand the structure of your multilingual content.

Logic of presenting multilingual content

When the user selects a language through the language switcher, AnQiCMS will automatically load and display the content version in the selected language according to the corresponding configuration (such as redirecting to the corresponding language sub-site URL or setting a language parameter under the current URL). For users usingtrTags