In the flexible and powerful AnQiCMS content management system, the dynamic display of page content cannot be separated from the support of template syntax.Master the core functions of conditional display and loop display, which can help us present data more efficiently and accurately on the website front-end.AnQiCMS uses a template syntax similar to Django, making the creation of content templates both familiar and easy to get started with.
Template Syntax Basics: 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 }}Will output the name of the website. - Logical tag
{% 标签 %}English: Used to control the logic flow of the page, such as conditional judgments, loop iterations, etc. Such tags usually require a corresponding end tag, such as{% if 条件 %}...{% endif %}.
In addition, there areFilter|English translation: Used to format or process variables, so that data can be presented in a more beautiful and demanding manner.
Conditional display: Determine the content to keep or discard based on specific conditions.
条件显示是模板设计中不可或缺的一部分,它允许我们根据数据的不同状态,灵活地展示或隐藏页面上的特定内容块。AnQiCMS 模板中的 autoifThe tag provides strong support for this.
Useif/elif/elsePerform conditional judgment
ifThe basic usage of the tag is similar to most programming languages, and it 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 there is a thumbnail in the article:
{% 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), a 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 %}
Except for direct comparison of values,iftags also support usingand/or/notlogical operators to combine conditions, as well asinoperators to determine whether an element is in the 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 %}
Through these flexible condition judgments, we can provide customized page experiences for different users and different content states.
Loop display: Batch presentation of dynamic data
When we need to display a list of data, such as an article list, product list, or navigation menu, the repetitive display becomes particularly important. In the AnQiCMS template,forLabels are the tools to achieve this function.
UseforLabel traversal of a dataset
forLabels are used to iterate over arrays, lists, or any iterable objects. Each iteration, it assigns the current element of the iteration to a temporary variable, which we can use within the loop body.
For example, display 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 provided by AnQiCMS as a 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, each loop willarchivesassign one of the article objects toitem.- Inside the loop, we can use
{{ item.Link }}to access the article link,{{ item.Title }}to access the article title,{{ item.CreatedTime }}Access creation time. {% empty %}YesforA supplement to the label, whenarchivesThe list is empty,emptyThe content within the block is displayed, which is very useful for friendly user prompts.{% endfor %}Indicates the end of the loop.
forThe auxiliary variable in the loop and advanced usage
InforInside the loop, AnQiCMS provides some special auxiliary variables to make our loop control more precise:
forloop.Counter: the iteration count of the current loop (starting from 1).forloop.Revcounter:Current remaining iteration count of the loop.
Using these variables, we can implement some 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 to the first element of the list.first-itemClass, as well as how to build multi-level category navigation through nestingcategoryListTags andforLoop to construct multi-level category navigation.
forTags also supportreversedandsortedKeywords used to reverse iteration order or sort lists (if list elements are sortable). This is very useful when a different display order is needed.
Combine actual: The application of common content tags in AnQiCMS
AnQiCMS provides a wealth of built-in content tags, and the data structures they return are mostly directly applicable toifandforTags are used together.
- Document list (
archiveList): Used to get the list of articles or products.moduleIdSpecify the model,categoryIdSpecify a category,limitControl the quantity