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 page semantics.AnQiCMS is a content management system that focuses on flexibility, and its powerful template engine naturally provides the possibility to meet this requirement.So, AnQiCMS template inaddCan the filter handle dynamic generationdata-of attribute values?

addFilter: The flexible concatenation master

AnQiCMS's template engine is built-in with a variety of filters, includingaddThe filter is a very practical tool. Many beginners may think it is mainly used for arithmetic addition. However, according to the AnQiCMS documentation,addThe filter actually has a wider 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 thataddThe filter shows great flexibility in handling string concatenation, which means it is completely possible to become our dynamic generationdata-The powerful assistant of property values.

data-The dynamic generation needs of the property.

data-properties, such asdata-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 a website, these values 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>

Heredata-article-idanddata-category-slugThe value cannot be fixed and unchangeable, it must be dynamically filled according to the article data returned by the AnQiCMS backend.

addthe filter meetsdata-The clever combination of properties

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

When you need 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