Use Django template syntax: Make AnQiCMS content display more flexible conditional judgment and loop
The strength of AnQiCMS lies not only in its efficient and stable backend architecture, but also in the great flexibility it provides for front-end content display to content operators.Among them, the syntax deeply integrated with Django template engine allows us to control the presentation of website content as easily as building a building block, through simple condition judgment and loop display, creating a more intelligent and user-friendly dynamic page.
This article, let's delve into how to cleverly use the Django template engine's conditional judgment in AnQiCMS together,{% if %}and loop display in AnQiCMS.{% for %}）Function, to make the website content come alive.
Understand conditional judgment: let the content 'treat people according to their abilities'
Imagine that you want certain content to appear only under specific conditions, such as only being displayed to VIP users, or being highlighted when an article has a 'recommended' tag, or when there is a special holiday, showcasing exclusive promotional information.{% if %}The label becomes our helpful assistant, it can decide whether to render a piece of HTML code based on the conditions you set.
In AnQiCMS templates, the syntax of conditional judgment is very intuitive, usually in{% if 条件 %}Start, with{% endif %}End.
Basic usage: single condition judgment
The simplest conditional judgment is to decide based on a boolean value (True or False). For example, if we want to determine whether an article has a thumbnail, and if it does, display it:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% endif %}
Here,archive.ThumbIf there is a value (not empty), the condition is true, and the image will be displayed.
Multiple choice:{% else %}and{% elif %}
If you want to provide an alternative when the condition is not met, we can introduce{% else %}English translation: For example, when there is no thumbnail for the article, a default placeholder image is displayed:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
<img src="/static/images/default-thumb.png" alt="默认缩略图" />
{% endif %}
English translation: When the situation is more complex and multiple mutually exclusive conditions need to be judged, {% elif %}(else if's abbreviation) can be used. For example, based on the recommended attributes of the articleFlag) to display different hints:
{% if archive.Flag == "h" %}
<span class="badge badge-hot">头条</span>
{% elif archive.Flag == "c" %}
<span class="badge badge-recommend">推荐</span>
{% else %}
<!-- 其他情况，不显示标签 -->
{% endif %}
Here, we comparearchive.FlagThe value determines whether to display the label “Headlines” or “Recommendations”. It is worth noting that the condition judgment supports various comparison operators, such as==(等于), English!=(Not equal to),>(Greater than),<(Less than),>=(greater than or equal to),<=(less than or equal to), andin(including) andnotlogical operators such as (not) that allow us to construct very complex judgment logic. For example, to determine whether a certain ID is in a certain list:{% if item.Id in selectedIds %}.
Master loop display: Efficiently present a large amount of information
When we need to display a series of contents, such as the latest article list, product categories, or image gallery, writing them manually one by one is obviously not realistic or efficient. At this time,{% for %}Loop tags become our powerful assistant, it can traverse the array or list data obtained by AnQiCMS through various tags (such asarchiveList,categoryList,navList), and display them one by one.
Basic Usage: Traversing List Data
In AnQiCMS, we usually use a tag to get the data list first, then{% for %}Tag to iterate over. For example, get the latest 10 articles and display their titles and links:
{% archiveList articles with type="list" limit="10" %}
<ul>
{% for article in articles %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
</li>
{% endfor %}
</ul>
{% endarchiveList %}
Here,articlesYesarchiveListThe list of articles returned by the tag,articleIs the variable for the current article in each loop.
Handling empty list:{% empty %}
When processing list data, we often encounter situations where the list is empty. To avoid the page from showing blank or unfriendly prompts,{% empty %}a tag provides an elegant solution. When{% for %}The data in the loop is empty,{% empty %}the content will be rendered:
{% archiveList products with type="list" categoryId=currentCategory.Id limit="8" %}
<ul>
{% for product in products %}
<li>
<a href="{{ product.Link }}">{{ product.Title }}</a>
</li>
{% empty %}
<li>抱歉，该分类下暂无产品。</li>
{% endfor %}
</ul>
{% endarchiveList %}
Enhanced loop control:forloopvariables,reversedandcycle
{% for %}some special tags are provided inside the loopforloopVariables, which can help us better control loops:
forloop.Counter: The current loop number, starting from 1.forloop.Revcounter: The reverse number of the current loop, starting from the total count.forloop.First: Boolean value, if it is the first item in the loop, then True.forloop.Last: Boolean value, if it is the last item in the loop, then True.
Using these variables, we can achieve many practical effects, such as adding numbers to list items or highlighting the first article:
{% archiveList articles with type="list" limit="5" %}
<ol>
{% for article in articles %}
<li {% if forloop.First %}class="highlight-first"{% endif %}>
{{ forloop.Counter }}. <a href="{{ article.Link }}">{{ article.Title }}</a>
</li>
{% endfor %}
</ol>
{% endarchiveList %}
In addition, we can also use{% for item in list reversed %}Traverse the list in reverse order, or use{% cycle 'odd' 'even' %}Labels to alternate the odd and even row styles of list items.
Combine the use of: to build a smarter dynamic page
The true strength lies in combining conditional judgment and loops to build highly dynamic and intelligent pages.
For example, when building a multi-level navigation menu, you can first loop through the first-level categories, and then use inside each first-level category{% if item.HasChildren %}to determine if there are subcategories, and if there are, continue to loop through the subcategories:
{% navList mainNavs %}
<ul class="main-menu">
{% for item in mainNavs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 判断是否有下级导航 #}
<ul class="sub-menu">
{% for subItem in item.NavList %}
<li {% if subItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
In this example, we not only display the main navigation cyclically, but also through{% if item.NavList %}Checked for child navigation and performed nested loops. This greatly enhances the flexibility and maintainability of the navigation.
For example, display related recommendations on the article detail page and decide whether to display the picture based on whether the article has a cover image:
`twig