AnQiCMS is an enterprise-level content management system developed based on the Go language, providing strong support for content operators with its efficient and flexible features.In daily content operation and template creation, we often encounter the need to process and dynamically display data, such as adding numbers to list items, calculating totals, and so on.Among them, the template filter is an important tool for achieving such needs.Today, let's discuss the AnQiCMS template in detailaddFilter, see if it can help us implement a simple dynamic display counter.

addFilter: the magician of numbers and strings

In AnQiCMS template syntax, we operate data through a template engine syntax similar to Django, which includes a rich set of filters.addThe filter is one of them, and its core function is as its name suggests: to perform the 'addition' operation.But this 'addition' is not limited to mathematical addition of numbers, it can also skillfully handle the concatenation of strings.

Specifically, when you useaddWhen using filters:

  • If the operand is a number, it will perform standard mathematical addition.
  • If the operand is a string, it will concatenate the two.
  • It's even smarter that it can handle mixed types (such as numbers and strings),addThe filter will also try to make reasonable conversions. If a number can be converted to a string and concatenated, it will do so;If the string can be converted to a number and added, it will also try.If the conversion fails, incompatible parts will be ignored to ensure the stability of template rendering.

For example, you can use it like this in a template:{{ 5|add:2 }}It will output7.{{ "安企"|add:"CMS" }}It will output安企CMS.{{ 5|add:"CMS" }}It will output5CMS.

This flexibility allowsaddFilters are very practical in many scenarios.

addHow can the filter help the simple counter display dynamically?

Return to our core issue:addCan the filter implement a simple counter dynamic display? The answer is affirmative, but when understanding the meaning of 'dynamic', we need to clarify the rendering mechanism of the AnQiCMS template.

AnQiCMS's template is rendered on the server.This means that when the user visits the page, the system generates the complete HTML content based on backend data and template logic, then sends it to the browser.Therefore, what is meant by "dynamic" here refers to the ability to perform real-time calculations and display based on the current context (such as loop iteration, variable values) when generating HTML in the template, rather than referring to client-side dynamic effects that change in real-time in the user's browser after the page is loaded.

Here are severaladdThe filter can help implement a simple counter dynamic display scenario:

1. Adjusting and displaying list numbers

When traversing a list of articles or products, we often need to display a serial number for each item. AnQiCMS'sforLoop tags are built-inforloop.CounterThis variable represents the current iteration count of the loop, starting from 1. If you need to start counting from a different starting number, or just want to add an offset to the existing sequence, addThe filter can be used.

Suppose you have an article list and you want the numbering to start from 101:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <li>
            {# 显示从101开始的序号 #}
            <span>序号：{{ forloop.Counter|add:100 }}</span>
            <a href="{{item.Link}}">{{item.Title}}</a>
        </li>
    {% empty %}
        <li>没有文章内容</li>
    {% endfor %}
{% endarchiveList %}

In this example,forloop.CounterIt will increase from 1 by means of|add:100We can make the display sequence start from 101, 102, 103 ..., and achieve simple dynamic increment display.

2. Adjust and accumulate the existing numbers for display.

Sometimes, we may need to perform some simple calculations based on existing data (such as the number of views of an article, the price of a product), and dynamically display the adjusted results. Although this is not strictly a 'counter', it does demonstrateaddThe filter's ability to perform dynamic numerical processing in the template.

For example, you may wish to display a "estimated reading time" on the article detail page, which is equal to the actual page views plus a fixed value:

{% archiveDetail archive with name="Views" %}
    <p>实际浏览量：{{ archive.Views }}</p>
    {# 显示预估阅读量，在实际浏览量的基础上增加100 #}
    <p>预估阅读量：{{ archive.Views|add:100 }}</p>
{% endarchiveDetail %}

Or do you want to display the base price of each product plus a fixed shipping fee in the list:

{% archiveList products with type="list" moduleId=2 limit="5" %}
    {% for item in products %}
        <li>
            <h3>{{item.Title}}</h3>
            {# 假设 item.Price 是产品的价格，固定运费是10 #}
            <p>总价（含运费）：{{ item.Price|add:10 }} 元</p>
        </li>
    {% endfor %}
{% endarchiveList %}

These examples illustrate:addThe filter can calculate based on the current variable value and dynamically display the calculated result during template rendering, which is very convenient in many scenarios that require simple numerical adjustments.

Summary

addThe filter is a small but widely used tool in the AnQiCMS template.It can flexibly handle numeric addition and string concatenation, thus realizing various simple dynamic display effects during template rendering.Whether it is adjusting the starting value of the list number or performing simple calculations and summations on existing numbers,addFilters can provide concise and efficient solutions. However, we need to remember that its 'dynamic' occurs during server-side template rendering, not real-time interaction on the client side.

Frequently Asked Questions (FAQ)

Q1:addCan the filter implement a dynamic counter like the real-time update of article views? A1:No.addThe filter is executed on the server side when rendering templates, it operates on the available data at that time and generates static HTML. To achieve dynamic effects like real-time updates of article views in the user's browser, it is usually necessary to combine backend logic (update the database with each request) and frontend JavaScript code (loading the page through AJAX and other methods)