So Outside Technology Security CMS
AnQiCMS
Online Demonstration

Can the `add` filter be used to generate dynamic HTML attributes, such as the value of `data-` attributes?

Calendar 👁️ 62

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

Related articles

How to use the `add` filter to dynamically add additional descriptions to the field in the AnQiCMS backend user group management (`userGroupDetail`)?

In the AnQiCMS management background, the user group management (`userGroupDetail`) module is the basis for us to divide permissions, set levels for different user groups, and even configure VIP services.Generally, each user group has its core attributes, such as name, level, price, etc., which are directly displayed on the back-end interface for convenient daily management.However, sometimes we hope that these fields are not just cold data, but can also have some additional, more descriptive information. For example

2025-11-07

How to pass the `add` filter as a parameter to the `macro` macro function and perform internal text processing?

In AnQi CMS daily content operation, we pursue efficient and flexible management and display of website content.The template system is the core of achieving this goal, among which the `macro` macro function and the `add` filter are two very practical tools.Understand how they work together, especially how to use the `add` filter for internal text processing in macro functions, which can greatly enhance the reusability and dynamism of our templates.The AnQi CMS template system uses syntax similar to Django, which allows us familiar with Web development to quickly get started.

2025-11-07

When it comes to concatenating a large number of strings, which filter, `add` or `join`, performs better?

In AnQi CMS template development, we often need to combine different text fragments into a complete string to meet the display requirements of the page.AnQi CMS provides various template filters to complete this task, among which the `add` and `join` filters are two commonly used string concatenation tools.However, when faced with the need to concatenate a large number of strings, choosing the right tool becomes particularly important, as this directly affects the speed of page rendering and user experience.###

2025-11-07

How does the `add` filter assist in building dynamic `<img>` tag `alt` or `title` attribute text to optimize SEO?

In Anqi CMS, every detail of the website is related to the final operating effect, especially in search engine optimization (SEO).We all know that high-quality images can attract users, but if these images are not 'understood' by search engines, their value will be greatly reduced.At this time, the `alt` and `title` attributes of the `<img>` tag are particularly important.They can not only improve the accessibility of the website but are also a key window for search engines to convey the content and context of the image.However, manually writing a unique

2025-11-07

How to dynamically generate JavaScript code snippets in AnQiCMS templates and use the `add` filter to concatenate variables?

In website operations, we often need to make the page more intelligent and interactive.AnQiCMS as an efficient and flexible content management system not only provides powerful content organization and display capabilities, but also allows us to ingeniously integrate dynamic logic in templates, such as by generating JavaScript code snippets to achieve more complex functions.AnQiCMS's template engine syntax is similar to Django, which provides great convenience for us to dynamically process data.It is developed based on the Go language, runs fast

2025-11-07

How does the `add` filter handle the addition/pasting operation with boolean values `true` and `false` as well as numbers or strings?

In Anqi CMS template development, we often need to process and display data.Among them, the `add` filter is a very practical tool that allows us to add numbers and concatenate strings.However, when the boolean values `true` and `false` are involved in these operations, their behavior may puzzle some users who are new to the subject.Today, let's take a deep dive into how the `add` filter handles addition or concatenation operations with boolean values, numbers, or strings.

2025-11-07

How to use the `add` filter to dynamically add a uniform prefix or suffix to the single page titles in the `pageList`?

In Anqi CMS, content management is not limited to the backend's add, delete, modify, and query, but also manifests in the flexibility and diversity of front-end display.In the face of common single-page websites (such as "About Us", "Contact Us", etc.), sometimes we hope that they can be unified with specific identifiers when displayed in lists or navigation, such as If you modify the background title one by one, it is not only inefficient but also lacks uniformity and maintainability.At this time, utilizing the powerful template engine function of AnqiCMS, with the clever filter

2025-11-07

How to combine other filters with the `add` filter to ensure safe concatenation and prevent XSS attacks when processing user input?

In AnQi CMS, managing website content involves entering a variety of information regularly.Whether it is the main text of the article, user comments, or form submissions, this user-generated content injects vitality into the website while also bringing potential security risks, the most common and severe of which is XSS (Cross-site Scripting attack).This article will discuss how the `add` filter works in processing user input content, how it协同acts with other security filters to build a strong defense line, effectively preventing XSS attacks.

2025-11-07