In website content operation, we often encounter scenarios where we need to flexibly display data and dynamically adjust the layout.Listing information simply can sometimes be difficult to meet complex design needs. At this point, if we can freely define and use some temporary variables in the template, it will greatly enhance our efficiency and the expressiveness of the template.AnQiCMS provides a flexible mechanism for defining and managing temporary variables with its powerful backend developed in Go language and the template engine syntax similar to Django, making it possible to create intricate and complex content layouts.

Define temporary variables:{% with %}With{% set %}

The template engine of Anqi CMS provides two main tags to help us define and use temporary variables:{% with %}and{% set %}They each have their focus, understanding their differences can help us better plan the template structure.

{% with %}Tag: Elegant choice for local scope

{% with %}Tags are mainly used to define one or more temporary variables within a specific code block. These variables are only accessible within their{% with %}and{% endwith %}Valid between, once out of this range, they are no longer available. This feature of local scope makes{% with %}It is an ideal choice when creating independent, reusable components in templates or preparing data for a specific display area.

Imagine that you are defining some metadata for the page header or preparing some temporary data for a component.{% with %}It can be put to good use. It can not only define simple strings or numbers, but also pass more complex objects.

For example, if you want to pass some customized title and description to an included file (like an article card component):

{% with cardTitle="最新公告", cardDescription="查看我们最近发布的重要通知！" %}
    <div class="info-card">
        <h3>{{ cardTitle }}</h3>
        <p>{{ cardDescription }}</p>
    </div>
{% endwith %}
{# 在这里，cardTitle 和 cardDescription 变量已经失效 #}

More commonly, {% with %}With{% include %}Tag combination usage, to pass specific data to the included template without polluting the global context, greatly improving the reusability of template components:

{# partial/article_summary.html #}
<div class="article-summary">
    <h4><a href="{{ summary_article.Link }}">{{ summary_article.Title }}</a></h4>
    <p>发布日期：{{ summary_date }}</p>
    <p>{{ summary_article.Description|truncatechars:120 }}</p>
</div>

{# 在主模板中调用 #}
{% archiveList latestArticles with type="list" limit="3" %}
    {% for article in latestArticles %}
        {% include "partial/article_summary.html" with summary_article=article summary_date=stampToDate(article.CreatedTime, "2006-01-02") %}
    {% endfor %}
{% endarchiveList %}

In this example,summary_articleandsummary_dateare allincludein statementswithTemporary variables defined, which are onlypartial/article_summary.htmlvalid within this local template.

{% set %}Tag: Flexible assignment and dynamic calculation

In contrast,{% set %}tags allow us to assign values or perform calculations within the current template file or block (such as{% block %}Defined and reassign variables within. Its scope is wider, from the definition to the end of the template or the end of the block.blockEnd.{% set %}Especially powerful when it comes to performing calculations, data transformations, or accumulating results in loops.

Suppose we need to calculate the total price of a list or perform multi-step processing on a string before displaying it:

{% set greeting = "欢迎光临安企CMS" %}
<p>{{ greeting }}</p>

{% set currentYear = "2024" %}
{% set nextYear = currentYear|add:1 %} {# 使用 add 过滤器进行数字相加 #}
<p>今年是 {{ currentYear }}，明年是 {{ nextYear }}。</p>

{# 在循环中进行累加计算 #}
{% set totalOrders = 0 %}
{% archiveList recentOrders with type="list" limit="5" %}
    {% for order in recentOrders %}
        {% set totalOrders = totalOrders|add:1 %} {# 每次循环 totalOrders 增加1 #}
        <p>订单号：{{ order.Id }}</p>
    {% endfor %}
{% endarchiveList %}
<p>您最近有 {{ totalOrders }} 笔订单。</p>

{% set %}flexibility makes it the preferred choice for handling dynamic data logic within templates.

Practical Application: Building Complex Content Layouts

Mastered{% with %}and{% set %}By understanding the usage, we can achieve more complex and exquisite layouts in the Aiqi CMS.

1. Dynamic Content Display and Conditional Judgment

In content layout, we often need to display or hide specific content blocks based on certain conditions. By{% set %}pre-processing the data, and then combining{% if %}Tags for judgment can make the page more intelligent.

For example, judge whether to display the "Latest" tag based on the publication time of the article:

{% archiveDetail currentArticle with name="Id" %} {# 获取当前文章对象 #}
{% set publishTimestamp = currentArticle.CreatedTime %}
{% set twentyFourHoursAgo = now()|add:(-24*60*60) %} {# 假设 now() 返回当前时间戳，并减去24小时的秒数 #}

{% if publishTimestamp > twentyFourHoursAgo %}
    <span class="badge new-indicator">最新发布！</span>
{% endif %}

Here we define atwentyFourHoursAgoA variable used to assist in judgment.

2. Data processing and formatting to enhance user experience

Sometimes, the raw data obtained from the background may not be suitable for direct display and needs to be formatted, truncated, or combined.{% set %}These tasks can be completed by coordinating with the rich Filters of AnQi CMS.

For example, extract the article description, format the publication date, and combine them into a more user-friendly display text:

`twig {% archiveDetail article with name=“Id” %} {# Get the current article object #} {% set