In the template design of AnQi CMS,if/elseLogical judgment tags are extremely powerful tools that give vitality to the dynamic display of website content.By flexibly using this tag, we can intelligently control the display and hiding of elements on the page based on different conditions, thereby providing users with more accurate and personalized browsing experiences, and also greatly enhancing the operational efficiency of the website.
Imagine if your website needs to display different content for different scenarios, or if certain information is only visible when certain conditions are met, at this timeif/elseThe label comes in handy. It allows you to make conditional judgments directly in the front-end template, avoiding the cumbersome modification of back-end logic, making content operation and template maintenance more convenient.
Next, let's take a look togetherif/elseWhat are some very practical scenarios for logical judgment tags in controlling the display conditions of content.
Dynamic content display: delivering information accurately.
Many times, the content on a website needs to be presented according to its own attributes.if/elseTags can help us achieve this, making the content display more intelligent.
For example, when you publish an article with a thumbnail or a product with a cover image, we usually want to display these images on the list page or detail page.But what if some content does not have an uploaded image? Displaying a blank or broken image icon directly would severely affect user experience.At this point, you can add a simple judgment in the template:
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% else %}
<img src="/static/images/default-thumb.png" alt="默认图片">
{% endif %}
This code means, if the current content has a thumbnail, display it.If not, display a preset default image. This not only ensures the beauty of the page but also enhances the integrity of the content.
For example, AnQi CMS supports setting "recommended attributes" for content, such as "headline", "recommended", "slideshow", and so on.We may wish to display different articles in different areas of the homepage based on these properties.You can pass throughif/elseTo determine whether the content has a specific attribute to decide its position or style on the page:
{% if archive.Flag contains 'h' %}
<span class="badge headline">头条</span>
{% elif archive.Flag contains 'c' %}
<span class="badge recommended">推荐</span>
{% endif %}
This article, marked with the 'headline' attribute, can be specially highlighted to attract more attention.
For content that needs to differentiate between members and regular users, the Anqi CMS built-in user group management and VIP system provides the foundation.You can control the visibility based on the user's level or the reading permissions of the content.For example, determine whether an article is exclusive VIP content and display different prompts or content accordingly:
{% if archive.ReadLevel > 0 %}
<p>此内容为VIP专属，请升级会员查看完整内容。</p>
{# 或者，如果用户是VIP，直接显示内容 #}
{% if user.IsVip %}
<div>{{archive.Content|safe}}</div>
{% else %}
<p>此内容为VIP专属，请 <a href="/vip-upgrade">升级会员</a> 查看完整内容。</p>
{% endif %}
{% else %}
<div>{{archive.Content|safe}}</div>
{% endif %}
This refined control helps you achieve content monetization and the operation of a membership system.
Optimize page layout and navigation: enhance user-friendliness
A great website should not only be rich in content, but also have simple and efficient layout and navigation.if/elseTags are also indispensable when building flexible page structures.
Highlighting the current page or category being visited by the user in website navigation is a common practice to enhance user experience. Anqi CMS navigation tags will provide aIsCurrentproperty, combinedif/elseYou can easily achieve this effect:
{% navList navs %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
{% endnavList %}
Users can clearly know where they are on the website.
For websites with multi-level categories, drop-down menus or sub-navigation are only displayed when there are subcategories, making the interface cleaner. By determining the categories'HasChildrenAttribute, you can intelligently control the display of sub-navigation:
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{% if item.HasChildren %}
<ul class="sub-menu">
{# 这里可以再次循环显示子分类 #}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
On the article detail page, there are usually 'Previous' and 'Next' navigation links.If the current article is the first or last in the series, the corresponding navigation link should not appear.prevArchiveandnextArchiveLabel combinationif/elseIt ensures that links are only displayed when there is a previous or next article:
{% prevArchive prev %}
{% if prev %}
<a href="{{prev.Link}}">上一篇：{{prev.Title}}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive next %}
{% if next %}
<a href="{{next.Link}}">下一篇：{{next.Title}}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
Enhance user experience and interaction: more considerate website services
if/elseLogical judgment can play a key role in processing user-generated content (UGC), such as distinguishing the review status of comments and messages.
The AnQi CMS comment and message function supports review mechanism.In the template, we can display different information to the user based on the content status.For example, if a comment is still under review, you can give a "under review" prompt instead of displaying the content directly:
”`twig {% commentList comments with archiveId=archive.Id type=“list” %}
{% for item in comments %}
<div>
{% if item.Status != 1 %}