AnQiCMS adopts a template engine syntax similar to Django in template creation, which is designed to provide content operators and developers with a powerful and easy-to-use tool, allowing them to control the display of website content more flexibly.By mastering this template syntax, you can easily display dynamic data on the front-end page of the website and control the presentation logic of the content based on specific conditions.

One、The core composition of template syntax: variables and logical structures

The template syntax of Anqi CMS is mainly composed of two parts: double curly braces used to display variables{{ }}and the single curly brace and percentage sign used for logical structure processing{% %}.

  • display variable{{ 变量 }}This is the most common usage, used to directly display data passed from the backend to the frontend on the page. For example, if you want to display the title of the website, you might use it.{{ siteName }}This format. Variable names usually follow the camelCase naming convention, that is, the first letter of each word is capitalized, for examplearchive.Title/category.Link.

  • Logical structure{% 逻辑结构 %}This tag is used to control the rendering process of the template, such as performing conditional judgments, looping through data sets, etc.Differently from variable display, logical structure tags must appear in pairs, that is, if there is a start tag, there must also be a corresponding end tag.{% if 条件 %} ... {% endif %}.

All template files are stored with.htmlsuffix, and stored in a unified manner/templateThe content is in the directory and it is recommended to use UTF-8 encoding to avoid garbled characters. The styles, JS scripts, and other static resources used in the template are then placed uniformly in/public/static/In the catalog.

Second, flexible use of variables: how to obtain and display data

In Anqi CMS, to display specific data, it is usually combined with template tags to retrieve data, and then the variable values are displayed using the double curly brace syntax.The system is built-in with rich tags, which can conveniently retrieve different types of data.

For example, you can usesystemtags to obtain the system configuration information of the website:

{# 使用 system 标签获取网站名称，并存储到变量 siteName 中 #}
{% system siteName with name="SiteName" %}
<div>网站名称：{{ siteName }}</div>

{# 或者直接输出 #}
<div>网站备案号：{% system with name="SiteIcp" %}</div>

Similarly, if you need to display the title of the article detail page, you can directly use it on the document detail pagearchiveDetailTags:

{# 获取当前文章的标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>

{# 获取指定ID文章的链接 #}
{% archiveDetail articleLink with name="Link" id="1" %}
<p>第一篇文章链接：<a href="{{ articleLink }}">点击查看</a></p>

For data like article content that may contain HTML tags, to prevent browsers from displaying it as plain text or causing security issues, we usually use|safeFilter, to ensure HTML can be parsed correctly:

{# 显示文章内容，并确保HTML标签被正确解析 #}
{% archiveDetail articleContent with name="Content" %}
<div>{{ articleContent|safe }}</div>

Timestamp data also needs special processing. Anqi CMS provides:stampToDateTags can format 10-digit timestamps into readable date and time formats:

{# 假设 item.CreatedTime 是一个时间戳，将其格式化为“年-月-日 时:分” #}
<span>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>

III. Implementation of logical structure: Control template flow

The logical structure tags make the template 'intelligent', allowing the display of the page to adjust according to data status or specific conditions.

  • Conditional judgment{% if %}/{% elif %}/{% else %}This is the most basic logic control, used to determine whether to display the content of a certain block based on conditions.

    {% if item.IsCurrent %}
    <li class="active">{{ item.Title }}</li>
{% elif item.Status == "pending" %}
    <li class="pending">{{ item.Title }}</li>
{% else %}
    <li>{{ item.Title }}</li>
{% endif %}

  • to iterate{% for %}/{% empty %}When you need to display multiple data items in a list or collection,forLoops are indispensable. They traverse each element in the collection and assign the current element to the variable you define with each iteration.

    {# 遍历一个文章列表 #}
{% archiveList archives with type="list" limit="5" %}
    {% for article in archives %}
        <li>
            <a href="{{ article.Link }}">{{ article.Title }}</a>
            <span>浏览量：{{ article.Views }}</span>
        </li>
    {% empty %}
        {# 如果 archives 列表为空，则显示此处的内容 #}
        <li>目前没有文章可供显示。</li>
    {% endfor %}
{% endarchiveList %}

    You can also useforloop.CounterTo get the current loop index (starting from 1), orforloop.RevcounterTo get the remaining number of loops, which is very useful when adding special styles or logic to list items.

  • Auxiliary label{% include %}/{% extends %}/{% macro %}These tags greatly improve the maintainability and reusability of the template:

    • {% include "路径/文件名.html" %}: Used to insert a template fragment (such as header, footer, sidebar) into the current template. You can also usewithKeywords pass additional variables to the included template, oronlyto limit the variables passed to only the specified ones.
    • {% extends "基础模板.html" %}Implement template inheritance, define a basic framework (such as the overall layout of the website), and then overwrite specific areas in the sub-template. This makes modifying the overall layout of the website very efficient.{% block %}This makes modifying the overall layout of the website very efficient.
    • {% macro 宏名称(参数) %} ... {% endmacro %}【en】 Defines reusable template functions. Macros can accept parameters and can be called like functions anywhere in the template, effectively reducing duplicate code.

  • 【en】 Defines variables{% with %}/{% set %}Temporary variable definitions in templates can help you better organize code and data.withTags are required.{% endwith %}End, the variables defined within it are only effective within its scope.setThe tag can be used throughout the entire scope of the current template.

    {% with greeting="您好", user="安企CMS用户" %}
    <p>{{ greeting }}, {{ user }}！</p>
{% endwith %}


{% set pageTitle = "我的自定义页面" %}
<title>{{ pageTitle }}</title>

Four, fine data processing: the use of filters

Filters are used to convert or process variable values, with the syntax format of{{ 变量 | 过滤器名称:参数 }}The filter can be used in a chain, where the output of one filter is used as the input for the next filter.

Some commonly used and practical filters include:

  • |safeTell the template engine that the output variable is safe HTML, no need for escaping, commonly used for article content and other rich text.
  • |truncatechars:10Truncate a string to not exceed 10 characters in length and append an ellipsis (e.g., 'This is a long sentence…').
  • |upper/|lowerConvert a string to uppercase or lowercase.
  • |add:5: Add numbers or concatenate strings.
  • |cut:" ": Remove all specified characters from a string (e.g., remove all spaces).
  • |length: Returns the length of a string, array, or map.
  • |floatformat:2: Format a floating-point number to retain a specified number of decimal places.
  • |join:", ": Join array elements into a string with a specified delimiter.
  • |split:", ": Split a string into an array using a specified delimiter.
  • |dump: Used for debugging, it prints the detailed structure and value of variables, helping you understand the true appearance of the data.

Having mastered these template syntaxes and tools, you can fully utilize the powerful functions of Anqi CMS to create something that is both beautiful and