How to implement dynamic content translation with the `{% tr %}` tag in AnQiCMS template?

Magic in AnQiCMS template:{% tr %}How do tags enable dynamic content translation on your website?

In today's global digital marketing environment, a corporate website that can flexibly meet multilingual needs undoubtedly has a competitive advantage in the international market.AnQiCMS, as an enterprise-level content management system developed based on the Go programming language, is well-versed in this field and provides powerful and concise multilingual support for users.{% tr %}It is the core magic for dynamic content translation on websites.

As an experienced website operations expert, I am well aware of the importance of converting technical information into practical strategies. Today, let's delve into it deeply.{% tr %}How the tag works in AnQiCMS templates and how it helps your website easily implement dynamic content translation to enhance user experience and global influence.

Why do we need dynamic content translation?

You might ask, doesn't AnQiCMS already support multi-language site management? Why do we still need it?{% tr %}What about the tags

AnQiCMS indeed provides excellent multilingual management capabilities, allowing you to create independent content for different languages (such as articles, products, categories), and manage them uniformly.This mainly targets the "content layer" of a website, for example, a Chinese blog article needs an English translation version.

However, the 'interface layer' of the website——that is, those fixed navigation menus, button texts, copyright information, form prompts, and so on——also needs to be synchronized translated when switching between languages.If each time we manually modify these fixed strings for different language templates, it will be a repetitive and error-prone task.{% tr %}The value of the label is here: it allows us to abstract these interface texts into 'translation keys', AnQiCMS will automatically extract the correct translation text from the corresponding language package based on the language setting of the current visited site.This significantly improves operational efficiency and ensures consistency in the translation of the website interface, providing a seamless browsing experience for your global users.{% tr %}The charm of tags.

Revelation{% tr %}Label: Intuitive and Efficient Translation Assistant

{% tr %}The design concept of the tag is extremely intuitive: it is a placeholder used to "mark" text fragments that need to be translated in the template. When AnQiCMS parses the template, it will look for these{% tr %}Label, and according to the current language environment of the website, retrieve the corresponding translated text from the pre-configured language package.

The basic usage method is:{% tr "你的翻译键名" %}. The translation key name here is a string that will be used as an index to look up the corresponding translation in the language package file.

How does AnQiCMS know which language text to display?This is due to the powerful multilingual support architecture of AnQiCMS.In the background "Global Function Settings", you can set the website "Default Language Pack", which determines the display language of built-in text.{% tr %}Label, AnQiCMS will intelligently load the corresponding language configuration file based on the actual language environment of the current site (for example, through language identifiers in the URL or the user's choice in the language switcher), thereby realizing dynamic translation.This means that you only need to configure the translation key-value pairs for different languages once, and the template can automatically display the correct text in different language environments without writing complex conditional judgment logic.

Guide to Dynamic Translation: Step-by-Step Instructions

Make full use of{% tr %}Tags implement dynamic content translation, we need to make some simple configurations:

1. Prepare the template file structure

   First, in the root directory of your AnQiCMS template (usually/template/你的模板目录/Create a folder namedlocales. This folder is the "base" for storing all language configuration files.

2. Create a language folder

   InlocalesIn the folder, create a subfolder for each language you want to support. The names of these subfolders should follow the standard language codes, such as:

   • zh-CNFor Simplified Chinese
   • en-usFor American English
   • jaFor Japanese
   • nlFor Dutch

   A typical structure might look like this:

   /template
   └── default/
       ├── config.json
       ├── index.html
       ├── locales/
       │   ├── en-us/
       │   │   └── default.yml
       │   ├── zh-CN/
       │   │   └── default.yml
       │   └── ja/
       │       └── default.yml
       └── ...
   

3. Write a language configuration file (YAML)

   Create a folder for each language and add a.ymlYAML formatted file, for exampledefault.yml. This file will contain all your translation keys and the corresponding translation text for each language.

   Start withzh-CN/default.ymlFor example:

   "yourLocation": "您的位置"
   "homePage": "首页"
   "contactUs": "联系我们"
   "searchPlaceholder": "请输入搜索关键词..."
   

   the correspondingen-us/default.ymlIt might look like this:

   "yourLocation": "Your Location"
   "homePage": "Home"
   "contactUs": "Contact Us"
   "searchPlaceholder": "Please enter search keywords..."
   

   Please note, the translation key (such as"yourLocation") must be consistent in all language YAML files, only the values (translated text) are different.

4. Using the template{% tr %}Tag

   Now, you can replace the fixed text that needs to be translated in any template file (for exampleheader.html/index.htmletc.){% tr "键名" %}in the form of.

   For example, you might use it like this in your navigation bar template:

   <nav>
       <a href="/">{% tr "homePage" %}</a>
       <a href="/contact.html">{% tr "contactUs" %}</a>
       <input type="text" placeholder="{% tr "searchPlaceholder" %}" />
   </nav>
   <p>当前位置：{% tr "yourLocation" %}</p>
   

   When the user accesses the Chinese page, AnQiCMS will automatically loadzh-CN/default.yml, the page will display "Home", "Contact Us", "Please enter search keywords..." and "Current position: Your location". When the user switches to the English page, the system will loaden-us/default.yml, the page will automatically switch to 'Home', 'Contact Us', 'Please enter search keywords...' and 'Current Location: Your Location'.

**Practice and Advanced Tips

• Clear and consistent key names:The translation key name should be descriptive and consistent across all language files. Avoid using ambiguous key names and try to use camelCase or underscore-separated naming methods (such as"homePage"or"home_page")
• Organize YAML files properly:Although the example used:default.ymlHowever, if your website is very large and contains multiple functional modules, you can consider creating different YAML files for different modules, for examplenavigation.yml/forms.yml/footer.ymletc., to improve maintainability.
• Combine language switcher: {% tr %}Tags are tools for translating text, while{% languages %}Tags (see the AnQiCMS documentation in thetag-/anqiapi-other/10537.html) are the tools for building language switches. You can use{% languages websites %}Get links and information for all multilingual websites to facilitate users in switching between different languages. “`twig {%- languages websites %} {%- if websites %}