How to perform addition of numbers and strings in AnQiCMS template and display the result?

When building dynamic content in Anqi CMS templates, it is often necessary to perform simple calculations and concatenations of numbers or strings.Whether it is to display the cumulative user points or to display the product codes with specific prefixes in combination, Anqi CMS provides a flexible and convenient way to meet these needs.This article will deeply explore how to perform addition operations in the AnQiCMS template and provide detailed examples and practical suggestions.

Understanding the calculation capabilities of AnQiCMS template

The Anqi CMS template system is based on syntax similar to the Django template engine, which means it can not only display variable data intuitively but also supports some basic logical judgments and arithmetic operations.This design philosophy makes the dynamic content handling of the website more efficient and intuitive, reducing the over-reliance on backend logic, allowing front-end developers to have more freedom in controlling the presentation of content.

There are mainly two ways to perform addition operations in AnQiCMS templates: one is to use specializedaddfilters, and the other is to use directly+Operator. Both methods have their own characteristics, but they can achieve the same effect in many scenarios.

Core function:addThe filter performs addition operations.

addThe filter is a direct tool in Anqi CMS template used for performing addition operations. Its design takes into account multiple data types, making the addition handling of numbers and strings more flexible.

How to use: {{ 变量 | add: 值 }}

This filter can intelligently handle different types of data:

• Add numbers:If变量and值They are all numeric types (including integers and floating-point numbers),addThe filter will perform standard arithmetic addition. For example:

  
  {# 假设 price 为 10，quantity 为 2 #}
  <p>总金额：{{ price | add:quantity }}</p>
  {# 输出: 总金额：12 #}
  
  {# 假设 decimal_price 为 10.5，tax_rate 为 0.05 #}
  <p>含税价：{{ decimal_price | add:(decimal_price * tax_rate) }}</p>
  {# 输出: 含税价：11.025 (或者根据后续浮点数处理，如 floatformat) #}
  

• String addition of strings:If变量and值are all of string type,addThe filter will perform string concatenation. For example:

  
  {# 假设 greeting 为 "Hello, "，name 为 "World" #}
  <p>{{ greeting | add:name }}</p>
  {# 输出: Hello, World #}
  

• Addition of a number and a string (mixed types): addThe filter performs especially intelligently in this aspect. When a number is added to a string, it usually converts the number to a string and then performs concatenation. For example:

  
  {# 假设 product_id 为 123 #}
  <p>产品编号：{{ "PRO-" | add:product_id }}</p>
  {# 输出: 产品编号：PRO-123 #}
  
  {# 假设 score 为 95 #}
  <p>您的得分为：{{ score | add:"分" }}</p>
  {# 输出: 您的得分为：95分 #}
  

  It is worth noting that ifaddThe filter encounters an unhandled type when trying to convert or perform operations (such asnilornothing), it tends to ignore this part to avoid breaking the template rendering.

More general arithmetic operation tags

exceptaddThe filter, the Anqi CMS template also supports using it directly in expressions+operators for addition operations, and other basic arithmetic operations, such as subtraction (-), multiplication (*), division (/), and modulo (%）。These operators can be used directly in template expressions, providing a calculation method closer to a programming language.

How to use: {{ 表达式 + 另一个表达式 }}

• Add numbers:This is a common means of performing pure numerical calculations. For example:

  
  {# 假设 num1 为 10，num2 为 5 #}
  <p>结果：{{ num1 + num2 }}</p>
  {# 输出: 结果：15 #}
  

• string concatenation:In the Pongo2 template engine used in Anqi CMS,+The operator can also be used for string concatenation. For example:

  
  {# 假设 prefix 为 "订单号："，order_number 为 "2023001" #}
  <p>{{ prefix + order_number }}</p>
  {# 输出: 订单号：2023001 #}
  

When dealing with pure numbers or pure strings for addition/concatenation,addFilters and+Operators usually yield the same result. The choice depends on personal preference and specific scenario requirements, for example, if you want to handle potential null values more robustly,addThe filter may provide more predictable behavior.

Example of practical scenarios

• Calculate the total price of the shopping cart:On the product detail page or shopping cart page, you may need to add the product price to the shipping cost.

  {# 假设 product.price 为 99.99，shipping_cost 为 10.00 #}
  <p>商品价格：{{ product.price }}</p>
  <p>运费：{{ shipping_cost }}</p>
  <p>总计：{{ (product.price + shipping_cost) | floatformat:2 }}</p>
  {# 使用 floatformat 过滤器保留两位小数，输出: 总计：109.99 #}
  

• Display page number information:In the pagination navigation, it may be necessary to display information such as

  {# 假设 current_index 为 0 (表示第一页的索引) #}
  <p>当前第 {{ current_index | add:1 }} 页</p>
  {# 输出: 当前第 1 页 #}
  

• Dynamically generate file names or paths:Concatenate strings to build a complete image URL or download link. “`twig {# Assuming base_url is “http://example.com/uploads/"image_name"For "my_image.jpg" #{# Output: <img src= “http://example.com/uploads/my_image.