In modern web development, dynamically generating HTML attributes, especiallydata-Properties have become a common requirement.These properties not only provide additional data support for front-end JavaScript, but also enhance the expressiveness of elements without affecting the semantic meaning of the page.AnQiCMS as a content management system that focuses on flexibility, its powerful template engine naturally also provides the possibility to meet this need.addcan filters handle the task of dynamically generatingdata-attribute values?

addFilter: The Versatile Concatenation Expert

AnQiCMS's template engine is built-in with various filters, among whichaddA filter is a very practical tool. Many new users might think it is mainly used for addition operations on numbers. However, according to the AnQiCMS documentation,addThe filter actually has a broader range of uses: it can not only add numbers together, but also cleverly concatenate different types of data (such as numbers and strings).

For example, the document provides the following examples:

  • {{ 5|add:2 }}The result is7This is intuitive, being addition between numbers.
  • {{ 5|add:"CMS" }}The result is5CMSHere the number5is converted to a string, and"CMS"is concatenated with.
  • {{ "安企"|add:"CMS" }}The result is安企CMSThis is a pure string concatenation.

From these examples, it can be seen that,addThe filter shows great flexibility in handling string concatenation, which means it is very likely to become our dynamic generatordata-The powerful assistant of attribute values.

data-Dynamic generation needs of the attribute.

data-attributes, for exampledata-id="123"ordata-status="active"Allow developers to store custom data on HTML elements, providing great convenience for front-end JavaScript logic.In the operation of actual websites, the values of these properties often need to be dynamically generated based on backend content or user interaction.

For example, on an article list page, each article entry needs a unique identifier so that when the user clicks on it, the front-end JavaScript can accurately retrieve and process the data of the article. At this time, we might expect the HTML structure to be as follows: 

<div class="article-item" data-article-id="123" data-category-slug="news">
    <!-- 文章标题、简介等内容 -->
</div>

Here are thedata-article-idanddata-category-slugThe value must not be fixed and unchangeable, they must be dynamically filled according to the article data returned by the AnQiCMS backend.

addFilter is related todata-The clever combination of properties

CombineaddThe string concatenation ability of the filterdata-The dynamic assignment of properties, we can clearly conclude:addThe filter can be used to dynamically generate attributes of HTML elements, includingdata-the value of the attribute.

When it is necessary to concatenate a variable, a fixed string, or another variable into a completedata-attribute valueaddthe filter can play its role.

Let's look at a specific AnQiCMS template code example, assuming we are looping through the article list, `item