How to ensure that AnQiCMS multilingual content switches and displays correctly on the front end?

Today, making a website support multilingual switching and display has become an important link for many enterprises to expand into the international market.AnQiCMS with its flexible architecture, provides us with an efficient way to achieve this goal.This article will delve into how to configure and manage multilingual content in AnQiCMS, ensuring that it can be correctly switched and displayed on the front-end website, thereby providing a high-quality browsing experience for users of different languages.

AnQiCMS Overview of Multilingual Capabilities

AnQiCMS cleverly integrates multilingual content management into its core features.The key to implementing multilingual is the close integration of "multi-site management" and "language packs" as well as "template tags."}This means that you can treat each language version of the website as an independent site to manage, where each site can have its own independent database content, templates, and language configuration, thereby achieving a high degree of customization and isolation.

Back-end configuration: lay a foundation for multilingual support

To ensure that the multilingual content of AnQiCMS is correctly switched and displayed on the front end, a series of basic configurations need to be made in the back end first.

1. Set default language package.In the 'Global Function Settings' of AnQiCMS backend, you can find the 'Default Language Pack' option.This built-in Chinese, English and other languages for you to choose from.After selecting a language pack, this will affect the display of the system backend interface and some built-in, non-user-generated text on the frontend.For example, some system prompts, button texts, and other elements will be displayed in the selected language.

   However, please note that this settingwill not translate automaticallyContent such as articles, products, and single pages published on your website. These core contents created by users need to be independently created and maintained for each language.

2. Create different language versions through multi-site managementThe powerful "Multi-site Management" feature of AnQiCMS is the core of the multilingual strategy.You can create a separate site for each target language.For example, if your target audience includes English and Spanish speakers, you can create a name foren.yourdomain.comEnglish site, and a site namedes.yourdomain.comSpanish site.

   When adding a new site in the "Multi-site Management" interface in the background, you need to configure the following information for each language site:

   • Site name: It is convenient to distinguish between different language versions, such as "English site", "Spanish site".
   • Site root directoryEach site should have an independent root directory to store cache, uploaded files, and other data to avoid conflicts. Typically, it starts with/app/followed by a name converted from the domain, such as/app/en_yourdomain_com.
   • website address: This is the access domain name for this language version, for examplehttp://en.yourdomain.com. Please make sure that the domain name has been correctly resolved to your server
   • Administrator account password: Set independent backend management permissions for each site
   • Database nameEach language site has an independent database to store its unique content. It is also recommended to name it using the domain name conversion, such asen_yourdomain_com.
   • Select the template to use: You can choose or customize a dedicated template for each language version to adapt to the layout and design needs of different languages.

   In this way, each language site will have an independent backend, content, and template, providing a solid foundation for the refined operation of different language markets.

Implement front-end template: Ensure language switching matches content

After configuring the site in different languages in the background, how to achieve the correct language switch and content display on the website front-end is the key.This is mainly completed through the template tags provided by AnQiCMS.

1. Build a front-end language switcherTo allow users to freely choose the language version of the website, we need to provide a language switch menu on the website front end. AnQiCMS'slanguagesLabels can help us easily achieve this. This label will return an array containing information about all configured language sites.

   In the template, you can use it like thislanguagesLabel to build a language switcher:

   {%- languages websites %}
   {%- if websites %}
   <div class="language-switcher">
       <span>切换语言：</span>
       {%- for item in websites %}
       <a href="{{item.Link}}" title="{{item.LanguageName}}">
           {%- 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 iterate over all the language sites that have been set up and generate a link for each site.item.LinkIt will point to the root directory of the corresponding language site, ensuring that the user can click and correctly jump to the homepage of the language version.

2. To implement the localization of text in the templateFor fixed text on the website interface, such as navigation menu items, footer information, form prompts, etc., you can use AnQiCMS'str(translate) The tag is for localization. This avoids copying the entire template for each language, making template maintenance more efficient.

   To enable this feature, you need to create a folder namedlocalesThe folder. Inside the folder, create a subfolder for each language (for exampleen-us/zh-cnetc.), and place adefault.ymlfile.

   For example, yourlocales/zh-cn/default.ymlfile content may be:

   yourLocation: "您的位置"
   contactUs: "联系我们"
   

   Andlocales/en-us/default.ymlThe file content might be: “`yaml yourLocation: “Your Location” contactUs: “Contact Us”