How to dynamically display data using Django-style tags and variables in AnQiCMS templates?

AnQiCMS provides a flexible and powerful template system, which adopts a syntax style similar to the Django template engine, making experienced developers able to quickly get started, and it is also very intuitive, even users unfamiliar with template language can dynamically present website content through simple learning.This system, with its concise labels and variable usage, makes the interaction between data and the front-end page efficient and easy to manage.

Make full use of the AnQiCMS template to dynamically display data, we need to understand its core syntax structure: variables, tags, and filters.

Understanding variables: the direct way to output data

In the AnQiCMS template, variables are the main way to directly output backend data to the frontend page. They are usually written using double curly braces{{ 变量名 }}Define. When the page is requested, AnQiCMS will parse these variables and replace them with the corresponding actual data.For example, if you want to display the title of an article, you can use it directly{{ archive.Title }}.

It is noteworthy that variable names usually follow the camel case naming convention, that is, the first letter of each word is capitalized, for examplearchive.Idrepresents the article ID,archive.CreatedTimeRepresents the creation time of the article. This naming convention makes the meaning of variables clear.

Using tags: to achieve logical control and data acquisition

Tags are the core of the AnQiCMS template system that implements logic control and executes specific functions. They are represented by single curly braces and the percent sign{% 标签名 %}The form appears, and most tags need a corresponding closing tag, such as{% if ... %}{% endif %}or{% for ... %}{% endfor %}.

1. Data acquisition tagAnQiCMS has built-in multiple data retrieval tags, allowing you to easily extract the required information from the database.

   • archiveDetailandarchiveListUsed to get the details of a single article or a list of articles. For example,{% archiveDetail with name="Title" %}It can get the title of the current page article, while{% archiveList archives with type="page" limit="10" %}It can get a paginated list of articles and assign it toarchivesVariables. These tags usually acceptid(ID),categoryId(Category ID),moduleId(Model ID),order(Sorting method) and other parameters to help you accurately filter the required data.
   • categoryDetailandcategoryList: Used to get category details or category lists. You can usemoduleIdandparentIdparameters to build complex category navigation structures.
   • systemandcontact: These tags are used to get the global settings of the website (such as the website nameSiteName, Record numberSiteIcp）and contact information (such as phone numberCellphone, emailEmail)
   • There arepageDetail/pageListUsed for single page content,tagDetail/tagList/tagDataListUsed for tag-related data, as well aslinkListUsed for friend links, etc., all work with similar parameters and methods.

2. Control flow tagThese tags enable the template to have the logic capability of a programming language.

   • ifConditional judgment:{% if condition %} {% elif another_condition %} {% else %} {% endif %}The structure allows you to display different content based on different conditions. For example,{% if archive.Thumb %} <img src="{{ archive.Thumb }}" /> {% else %} <img src="/default-thumb.png" /> {% endif %}You can choose to display different images based on whether the article has a thumbnail.
   • forLoop through:{% for item in collection %} {% empty %} {% endfor %}Used to iterate over lists or arrays. When the collection is empty,{% empty %}the content in the block will be executed. Inside the loop,itemThe variable represents the current element in the loop, you can also useforloop.Counterto get the current loop index.

3. Functional tags

   • stampToDateThis is a very practical feature that can format Unix timestamps into readable date and time strings. For example,{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}Display the article creation time in the format of "Year-Month-Day Hour:Minute".
   • paginationis used to generate pagination navigation, usually witharchiveListused together to allow users to browse a large list of content.
   • breadcrumb：Automatically generate breadcrumb navigation, enhancing the website's user experience and SEO friendliness.
   • withandset:{% with key="value" %} {% endwith %}and{% set new_var = "value" %}Used to define temporary variables in templates, facilitating complex logic or data transmission.

Master the filter: a powerful tool for data beautification and transformation

Filters are a powerful tool for processing and formatting variable output in the AnQiCMS template system. They use the vertical bar symbol|After applying to the variable, such as{{ 变量 | 过滤器名:参数 }}.

• safe:When you need to output a variable containing HTML content (such as the article bodyarchive.Content）To prevent HTML tags from being escaped as plain text, you must use|safea filter. For example:{{ archive.Content|safe }}.
• truncatechars/truncatewords：It is used to truncate a string to a specified length and automatically add an ellipsis.truncatecharsBy character count,truncatewordsTruncated by word count, with corresponding_htmlVersion used to safely handle HTML content.
• add/replace/split/join: Perform string concatenation, replacement, splitting into arrays, or concatenating arrays into strings, etc. For example,{{ "Hello AnQiCMS"|replace:"AnQi,Go" }}.
• upper/lower/capfirst/title: Convert the case of English strings.
• thumb: For image path variables,|thumbThe filter can quickly obtain its thumbnail version.
• render: After you enable the Markdown editor in the background, the content will be stored in Markdown format by default. Use|renderThe filter can be converted into HTML format and displayed on the front end.

Actual operation example: dynamically build the page.

Assuming we are building a homepage to display the latest list of articles, and we want each article to include a title, abstract, publication date, and thumbnail.

”`twig {# Get the website name for page title #}

        <div class="article-body">
            {# 检查是否有缩略图，如果有则显示 #}
            {% if article.Thumb %}
                <a href="{{ article.Link }}" class="article-thumb">
                    <img src="{{ article.Thumb }}"