Manage content in the AnQi CMS, we often encounter scenarios where we need to display different information based on specific conditions, or repeat a series of contents.At this time, by flexibly using conditional judgment and loop control, the website content can become more vivid and intelligent.
The template function of AnQi CMS provides powerful syntax support similar to Django template engine, through these tags, we can easily achieve dynamic adjustment of content without writing complex background code.
Condition judgment: Let the content 'speak according to people'
The condition judgment is the foundation for displaying dynamic content.Imagine if your website needs to display different information for different user groups or in specific situations, conditional judgment comes into play.{% if ... %}tags to build conditional logic.
A basic conditional judgment structure is like this:
{% if 条件表达式 %}
<!-- 当条件为真时显示的内容 -->
{% else %}
<!-- 当条件为假时显示的内容 -->
{% endif %}
If we need to handle multiple cases, we can use{% elif ... %}Add more judgment branches:
{% if 条件表达式1 %}
<!-- 当条件1为真时显示的内容 -->
{% elif 条件表达式2 %}
<!-- 当条件2为真时显示的内容 -->
{% else %}
<!-- 当所有条件都为假时显示的内容 -->
{% endif %}
In practical applications, such conditional judgments can bring a lot of convenience.
For example, you may want to display the image only when there is a thumbnail in a certain document:
{% if archive.Thumb %}
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
{% else %}
<img src="/static/images/default-thumb.jpg" alt="暂无图片" />
{% endif %}
For example, we can display "In stock" or "Out of stock" on the product details page according to the product's inventory situation.
{% archiveDetail productStock with name="Stock" %}
{% if productStock > 0 %}
<span style="color: green;">有货</span>
{% else %}
<span style="color: red;">缺货</span>
{% endif %}
Sometimes, we may need to load different styles or content modules based on the current page's category ID. For example, when the category ID is 10, display a special promotional banner:
{% categoryDetail currentCategoryId with name="Id" %}
{% if currentCategoryId == 10 %}
<div class="special-promo-banner">
<h2>此分类独享优惠！</h2>
<p>立即购买享受更多折扣。</p>
</div>
{% endif %}
By using flexibilityand/or/notLogical operators allow us to construct more complex conditional expressions, making the display logic more refined. For example, when the article is recommended as a headlineandThe post date is within the past week, a "Hot New Article" mark is displayed:
{% archiveDetail articleFlag with name="Flag" %}
{% archiveDetail articleCreatedTime with name="CreatedTime" %}
{% set oneWeekAgo = stampToDate(now().timestamp - 7 * 24 * 60 * 60, "2006-01-02 15:04:05") %}
{% if articleFlag == 'h' and articleCreatedTime > oneWeekAgo %}
<span class="badge hot-new">热门新文</span>
{% endif %}
Loop control: Efficiently organize and display content
In website content management, the most common requirement we have is to list a large number of articles, products, categories, or comments.It is obviously unrealistic to add manually one by one, at this point, loop control becomes crucial.{% for ... in ... %}Tags, used to iterate through various data sets.
An example of a typical loop structure is:
{% for item in 数据集合 %}
<!-- 针对每个item显示的内容 -->
{% endfor %}
If the data set may be empty, we can also add a{% empty %}Blocks, to provide friendly prompts when there is no data, avoiding blank pages:
{% for item in 数据集合 %}
<!-- 针对每个item显示的内容 -->
{% empty %}
<!-- 当数据集合为空时显示的内容 -->
{% endfor %}
For example, list the latest 10 articles:
<ul class="article-list">
{% archiveList latestArticles with type="list" limit="10" order="id desc" %}
{% for article in latestArticles %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
<span class="date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</li>
{% empty %}
<li>暂时还没有任何文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
In the loop, we can also take advantage offorloopUse a variable to get the current loop status, such as which element it is, whether it is the first or last element, etc. This is very useful for applying special styles within a list:
<div class="product-gallery">
{% archiveList products with type="list" categoryId="1" limit="5" %}
{% for product in products %}
<div class="product-item {% if forloop.Counter == 1 %}first-product{% elif forloop.Revcounter == 1 %}last-product{% endif %}">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}" />
<h3>{{ product.Title }}</h3>
{% if forloop.Counter == 1 %}
<p class="highlight">本店主推！</p>
{% endif %}
</div>
{% empty %}
<p>抱歉，该分类下暂时没有产品。</p>
{% endfor %}
{% endarchiveList %}
</div>
forloop.CounterWill start counting from 1,forloop.RevcounterWill count down from the total number of the set.
In addition,cycleLabels can alternate preset values in a loop, often used to add alternating background colors or other styles to list items:
<ul class="comment-list">
{% commentList comments with archiveId=archive.Id type="list" limit="10" %}
{% for comment in comments %}
<li class="comment-item {% cycle 'odd' 'even' %}">
<strong>{{ comment.UserName }}</strong>: {{ comment.Content }}
<span class="time">{{ stampToDate(comment.CreatedTime, "2006-01-02 15:04") }}</span>
</li>
{% empty %}
<li>暂无评论，快来发表您的看法吧！</li>
{% endfor %}
{% endcommentList %}
</ul>
Combine use: Create a more intelligent display
The combination of conditional judgment and loop control can build more functional and better user experience dynamic content display.
For example, at the bottom of the article detail page, we usually display related articles. We can first loop to get the related articles, but if there are no related articles, we will display a default recommendation list:
<div class="related-articles">
<h3>相关推荐</h3>
{% archiveList related with type="related" limit="5" %}
{% for item in related %}
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% empty %}
<!-- 如果没有相关文章，显示一些通用推荐 -->
{% archiveList defaultRecommendations with type="list" limit="5" order="views desc" %}
{% for item in defaultRecommendations %}
<a href="{{ item.Link }}">精选：{{ item.Title }}</a>
{% endfor %}
{% endarchiveList %}
{% endfor %}
{% endarchiveList %}
</div>
Another common application scenario is to adjust the display based on the user-defined content model fields. For example, if the product model has a custom fieldmaterial(Material), we can display different icons or descriptions based on its value:
`twig {% archiveDetail productMaterial with name=“material” %}
<!-- ... 其他产品信息 ... -->
{% if productMaterial == 'wood' %}
<span class="material-icon wood-icon">木质</span>
{% elif productMaterial == 'metal' %}
<span class="material-icon metal-icon">金属</span>
{% else %}
<span class="material-icon default-icon">未知材质