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

In today's global digital environment, the diversity of website content has become crucial for attracting and retaining users from different regions.AnQiCMS (AnQiCMS) fully understands this need, providing flexible and powerful multilingual functions to help users easily display content in different languages, thereby effectively expanding market influence.

This article will delve into how to use the multilingual capabilities of the Anqi CMS, from backend configuration to frontend display, to fully realize the internationalization of website content.

One、Embrace Multilingual: Why Is It Crucial for Your Website?

Imagine that your business is thriving, and your customers are spread all over the world.If your website can only be 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 the perspective of actual operation, a multilingual website has significant advantages:

• Expand International Market:Directly reach non-native users, eliminate language barriers, increase brand exposure and business opportunities.
• Enhance 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 (SEO):Optimizing for search engines in different languages and regions can help your website rank better in local search results and bring in more targeted traffic.The multi-language feature provided by Anqi CMS is designed to help you achieve these goals.

The implementation path of the multilingual function in Anqi CMS

The multilingual capability of Anqi CMS is mainly achieved through the following two methods:

1. Multi-site management:This is the core mechanism for independent operation of multilingual content.By creating a separate site for each language, you can completely separate the content, configuration, and even templates for different languages, ensuring accuracy and localization.
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, allowing for multi-language switching without modifying a large amount of code.

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

III. Backend Configuration: Lay a solid foundation for a multilingual website

In the AnQi CMS, the management of multilingual content is not just simple translation of content, but is implemented based on a powerful "multi-site" architecture.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 'Global Settings'.Here you can select the language for the Anqi CMS backend interface and the system内置 hints (currently built-in Chinese, English).Please note:This settingOnly affects the backend interface language and default system text, it 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 with multi-site management.

2. Utilize 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:

   • An 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 choice is not to reuse database information), independent backend administrator accounts, independent templates, and most importantly—its own content. Through this method, you can publish fully localized articles, products, pages, and categories for each language version site, ensuring the accuracy and proximity of the content.

3. Publish content for each language site:Create a language version site, and then you need to log in to the admin panel of each site and publish the 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 conform to the habits of each language.Through this content management method, users of different languages will see fully localized content when they visit the corresponding language site.

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

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

1. Build a dynamic language switcher:languagestags languagesLabel is used to retrieve all the multi-language site lists you configure in AnQi CMS.Through this tag, 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 namedwebsiteswhich will contain information about all multilingual sites.
   • {% for item in websites %}：Loop through 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 (e.g., “Chinese”, “English”）。
   • item.LanguageEmojioritem.LanguageIcon：Used to display the emoji or icon corresponding to the language, enhancing the visual effect。
   • hreflang：To better support SEO, you can use the HTML attribute to guide search engines to recognize the relationship between different language versions of the page. Anqi CMS also provides convenience for this:<head>add tags to ithreflangattribute to guide search engines to recognize the relationship between different language versions of the page. 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.LanguageProvided standard language codes (such aszh-CN/en-US), very suitablehreflangUse the label.

2. Translate the static text in the translation template:trtagsThe website interface has a large amount of static text in addition to dynamic content (such as "HometrLabel (i.e., translate), working with the language package file, to achieve the convenient translation of these static texts.

   Usage steps:

   • Create language package file:)Create a file named under your current template directory.localesfolder. Then,localesCreate a subfolder for each language inside the folder, named after the standard code of that language (for examplezh-CN/en-US). Create a folder within each language subfolder,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 the language package content:Indefault.ymlDefine your translation text in the file in the form of key-value pairs.zh-CN/default.yml:

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

     en-US/default.yml:

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

   • Used in the templatetrTags:“`twig