How to control the conditional display and loop display of AnQiCMS page content with Django template syntax?
In the flexible and powerful AnQiCMS content management system, the dynamic display of page content cannot do without the support of template syntax.Mastering conditional display and looping presentation, these two core functions can help us present data more efficiently and accurately on the website front-end.AnQiCMS uses a template syntax similar to Django, which makes the creation of content templates both familiar and easy to use.
Basic Template Syntax: The Foundation for Building Dynamic Pages
In AnQiCMS templates, we mainly use two tags to handle dynamic content:
- Variable output
{{ 变量 }}Used to display data directly on the page, for example{{ siteName }}It will output the website name. - Logical label
{% 标签 %}Used to control the logic flow of the page, such as conditional judgments, loop iterations, etc. These tags usually require a corresponding end tag, such as{% if 条件 %}...{% endif %}.
Additionally, there areFilter|Used to format or process variables, making data more beautiful and meet the needs.
Conditional display: Decide the content to keep or discard based on specific conditions.
Conditional display is an indispensable part of template design, allowing us to flexibly display or hide specific content blocks on the page based on different data states. It is in the AnQiCMS template.ifThe label provides strong support for this.
Useif/elif/elseMake a conditional judgment.
ifThe basic usage of tags is similar to most programming languages, which can be used to determine if a variable exists or meets a specific value or range.
For example, we may want to display the image only when the article has a thumbnail:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
<img src="/static/images/default-thumb.jpg" alt="默认图片" />
{% endif %}
here,archive.ThumbIf there is a value (not empty), the thumbnail of the article will be displayed; otherwise, a preset default image will be displayed.
In more complex scenarios, we can combineelif(else if abbreviation) andelseto handle multiple conditions:
{% if archive.Views > 1000 %}
<p>这是一篇非常受欢迎的文章！</p>
{% elif archive.Views > 500 %}
<p>这篇文章有不错的阅读量。</p>
{% else %}
<p>欢迎阅读这篇文章。</p>
{% endif %}
In addition to directly comparing values,iflabels also support usingand/or/notlogical operators to combine conditions, as well asinoperators to determine whether an element is in a list:
{% if archive.Flag and archive.CreatedTime > currentTime %}
<p>这篇文章被标记且是定时发布的。</p>
{% endif %}
{% if category.Id == 1 or category.Id == 5 %}
<p>这是一个特殊分类。</p>
{% endif %}
{% if not user.IsLoggedIn %}
<p>请先登录。</p>
{% endif %}
By these flexible condition judgments, we can provide customized page experiences for different users and different content states.
Loop display: Batch display dynamic data.
When we need to display a set of data, such as an article list, product list, or navigation menu, the repeated display becomes particularly important. In the AnQiCMS template,forTags are the tools to achieve this function.
UseforTags traverse the data set.
forThe tag is used to traverse arrays, lists, or any iterable objects. Each iteration, it assigns the current iterated element to a temporary variable for use within the loop body.
For example, show a list of articles:
{% archiveList archives with type="list" categoryId="1" limit="10" %}
<ul>
{% for item in archives %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</li>
{% empty %}
<li>抱歉，目前没有找到相关文章。</li>
{% endfor %}
</ul>
{% endarchiveList %}
In this example:
{% archiveList archives with type="list" categoryId="1" limit="10" %}Is an AnQiCMS provided content tag, it retrieves the most recent 10 articles from the category with ID 1 and stores the results inarchivesthe variable.{% for item in archives %}Start the loop, assign each loop toarchivesone article objectitem.- In the loop body, we can
{{ item.Link }}access the article link,{{ item.Title }}access the article title,{{ item.CreatedTime }}Access creation time. {% empty %}IsforA supplement to the tag whenarchivesWhen the list is empty,emptyThe content within the block will be displayed, which is very useful for friendly user prompts.{% endfor %}Signifies the end of the loop.
forLoops have auxiliary variables and advanced usage
InforInside the loop, AnQiCMS provides some special auxiliary variables to make our loop control more precise:
forloop.CounterThe current iteration number (starting from 1).forloop.RevcounterThe remaining iteration number of the loop.
Using these variables, we can implement specific styles or logic:
{% categoryList categories with moduleId="1" parentId="0" %}
<nav>
{% for item in categories %}
<a href="{{ item.Link }}" {% if forloop.Counter == 1 %}class="first-item"{% endif %}>
{{ item.Title }} ({{ forloop.Revcounter }} more)
</a>
{% if item.HasChildren %}
{# 嵌套循环显示子分类 #}
<ul>
{% categoryList subCategories with parentId=item.Id %}
{% for subItem in subCategories %}
<li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
{% endfor %}
</nav>
{% endcategoryList %}
This demonstrates how to add a class to the first element of a listfirst-itemand how to build multi-level category navigation through nestingcategoryListTags andforusing loops.
forTags also supportreversedandsortedA keyword used to reverse the iteration order or sort a list (if the list elements are sortable), which is very useful when a different display order is needed.
Apply to actual: Using AnQiCMS common content tags
AnQiCMS provides a wealth of built-in content tags, and the data structures they return are mostly directly applicable toifandforUse tags together.
- Document list (
archiveList): Used to get a list of articles or products. BymoduleIdspecifying the model,categoryIdspecifying the category,limitControl quantity