How to use the multilingual feature of AnQi CMS to display content in different languages?

In today's global digital environment, the diversity of website content has become the key to attracting and retaining users from different regions.AnQiCMS (AnQiCMS) is well aware of this need and provides a flexible and powerful multilingual function to help users easily display content in different languages, thereby effectively expanding market influence.

This article will deeply explore how to utilize the multi-language capabilities of Anqi CMS, from backend configuration to frontend display, realizing the internationalization of website content in an all-round way.

First, embrace multilingualism: why is it crucial for your website?

Imagine, your business is flourishing, customers are all over the world.If your website is only presented in a single language, you will miss the opportunity to connect with a large number of potential users.Multilingual support is not just about translating text, but also about conveying respect and convenience to users from different cultural backgrounds.

From a practical operational perspective, a multilingual website has significant advantages:

• Expand into the international market:Directly reach non-native users, eliminate language barriers, increase brand exposure and business opportunities.
• Improve user experience:Users tend to browse websites in their native language, thereby increasing the website's dwell time, conversion rate, and customer satisfaction.
• Optimize Search Engine Optimization (SEO):Optimizing search engines for different languages and regions can help your website rank better in local search results and bring more targeted traffic.The multi-language function provided by AnQi CMS is exactly to help you achieve these goals.

The implementation path of the multilingual function of AnQi CMS

The multilingual capability of AnQi CMS is mainly realized by combining the following two methods:

1. Multi-site management:This is the core mechanism for implementing independent operation of multilingual content. By creating an independent site for each language, you can completely separate the content, configuration, and even templates of different languages, ensuring the accuracy and localization of the content.
2. Template tags and localization translation:For general static text on the website interface (such as navigation menu items, button text, copyright statements, etc.), AnQi CMS provides a convenient template translation mechanism that allows for multi-language switching without modifying a large amount of code.

Next, we will detail the specific configuration and usage method.

Section 3: Back-end configuration: laying a solid foundation for multilingual websites

In Anqi CMS, the management of multilingual content is not just simple content translation, but is realized based on a powerful architecture of 'multiple sites'.This means that you need to create a separate site for each target language.

1. Set default language package (system level):First, you can find the "Default Language Pack" option in the "Global Settings".You can choose the language of the AnQi CMS backend interface and system built-in tips (currently built-in Chinese and English).Please note:This settingIt only affects the backend interface language and system default textThe translation will not automatically translate the articles, products, categories, and other content you publish on your website. The translation and display of website content need to be completed in conjunction with multi-site management.

2. Use multi-site management to create a language version site:This is a key step in implementing multilingual content display. For example, if you want to provide both Chinese and English versions, you can create two independent sites in the 'Multi-site Management' section of the Anqi CMS backend:

   • A site for Chinese content, for examplecn.yourdomain.com.
   • Another site for English content, for exampleen.yourdomain.com. Each site will have its own database table (if the database information is not reused), its own backend administrator account, its own template, and most importantly - its own content.This way, you can publish fully localized articles, products, pages, and categories for each language version site, ensuring the accuracy and relevance of the content.

3. Publish content for each language site:After creating language versions of the site, you need to log in to the backend of each site and publish corresponding content for that language.

   • Articles, products, single pages:Add and publish translated articles, product details, and standalone page content under each language site.
   • Categories and tags:Create category structures and tags that match the language habits for each language site.Through this content management method, users of different languages will directly see fully localized content when visiting the corresponding language sites.

Four, at the template level: implement the dynamic display of multilingual interfaces

After the content is prepared in the background, the display of the front-end template is also important.AnQi CMS provides dedicated tags to help you build a friendly multilingual switch interface and localized text display.

1. Build a dynamic language switcher:languagesTag languagesThe tag is used to get the list of all multilingual sites you have configured in AnQi CMS.By this label, you can easily create a language switch menu on the website frontend, allowing users to freely choose their preferred language version.

   {%- languages websites %}
   {%- if websites %}
   <nav class="language-switcher">
       <span>切换语言：</span>
       {%- for item in websites %}
       <a href="{{item.Link}}" {% if item.Language == currentLanguageCode %}class="active"{% endif %}>
           {%- if item.LanguageIcon %}
           <img src="{{item.LanguageIcon}}" alt="{{item.LanguageName}}"/>
           {%- else %}
           {{item.LanguageEmoji}}
           {% endif %}
           {{item.LanguageName}}
       </a>
       {%- endfor %}
   </nav>
   {%- endif %}
   {%- endLanguages %}
   

   Code analysis:

   • {%- languages websites %}Define a variable namedwebsitesthat will contain information about all multilingual sites.
   • {% for item in websites %}: Traverse each language site.
   • {{item.Link}}: Generate the access link for the current language site, click to jump to the corresponding language website.
   • item.LanguageName: Display the name of the language (such as 'Chinese', 'English').
   • item.LanguageEmojioritem.LanguageIcon: Used to display the emoji or icon corresponding to the language, enhancing the visual effect.
   • hreflang: In order to better support SEO, you can use the HTML attribute<head>add in thehreflangto guide search engines to identify the relationship between different language versions of web pages. Anqi CMS also provides convenience for this:

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

     item.LanguageProvides standard language codes (such aszh-CN/en-US), very suitable forhreflanglabel usage

2. Translates static text in the translation template:trTagIn addition to dynamic content on the website, there are also a large number of static texts (such as "Home", "About Us" in the navigation bar, "Copyright" in the footer, etc.). Anqi CMS providestrLabel (i.e., translate),配合language package files to conveniently translate these static texts.

   Usage steps:

   • Create language package file:Create a file named under your current template directory,locales. Then in thelocalesCreate a subfolder for each language inside the folder, named after the standard code of that language (for examplezh-CN/en-US). Create a folder for each language.default.ymlFile. For example, your directory structure may be as follows:

     
     /template/your_template_name/locales/
     ├── en-US/
     │   └── default.yml
     └── zh-CN/
         └── default.yml
     

   • Edit language package content:Indefault.ymlIn the file, define your translation text in key-value pairs.zh-CN/default.yml:

     
     yourLocation: "您的位置"
     homePage: "首页"
     aboutUs: "关于我们"
     

     en-US/default.yml:

     
     yourLocation: "Your Location"
     homePage: "Home"
     aboutUs: "About Us"
     

   • Using the templatetrTags:“`twig