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

Understanding the computational capabilities of AnQiCMS template

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

In AnQiCMS template, there are mainly two ways to perform arithmetic operations: one is to use a specialaddfilter, and the other is to use it directly+Operator. Both methods have their own characteristics, but they can achieve the same effect in many scenarios.

Core Function:addAddition operation using the filter.

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

Usage: {{ 变量 | add: 值 }}

This filter can intelligently process different types of data:

• Add numbers to 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 concatenation:If变量and值They are all of string type,addThe filter performs string concatenation operations. For example:

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

• Add numbers and strings (mixed types): addThe filter performs particularly intelligently in this aspect. When a number is added to a string, it usually converts the number to a string and then performs concatenation operations. 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 (such asnilornothing), it tends to ignore this part to avoid template rendering interruption.

More generic arithmetic operation tags

ExceptaddFilter, the safe 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 more programming language-like way of computation.

Usage: {{ 表达式 + 另一个表达式 }}

• Add numbers:This is a commonly used method for pure numerical calculations. For example:

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

• String concatenation:In the Pongo2 template engine used by 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 addition or concatenation of pure numbers or pure strings,addfilters and+Operators will usually produce the same result. The choice of which method to use depends on personal preference and the specific requirements of the scenario, for example, if you want to handle empty values more robustly, if possible,addThe filter may provide more predictable behavior.

Examples of practical scenarios

• Calculate the total price of the shopping cart:On the product details 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 page X', where X is usually the number based on the index plus 1 (starting from 0).

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

• Dynamically generate file name or path:Concatenate strings to build a complete image URL or download link. ``twig {# Assuming base_url is "http://example.com/uploads/“English”，image_name为 “my_image.jpg” English{# English:http://example.com/uploads/my_image.