In the template creation of AnQi CMS, flexibly controlling the display of content is the key to improving the user experience and management efficiency of the website.Whether it is to display specific information based on different conditions or to implement more complex personalized layouts, conditional judgment is an indispensable tool.if/elseUse conditional judgment to accurately control the presentation of content.
The template engine of AnQi CMS adopts syntax similar to Django template language, which allows web development friends who are familiar with it to quickly get started. Among them,if/elseThe logical judgment tag, with its intuitive syntax, becomes the core of dynamic content display.
Understandingif/elseBasic syntax
In the Anqi CMS template,if/elseThe basic structure of conditional judgment is similar to that of common programming languages and is mainly divided into the following forms:
1. SimpleifJudgmentWhen you only need to display content when a certain condition is met, and do not display it when it is not met, you can use the simplestifstructure.
{% if 条件 %}
<!-- 满足条件时显示的内容 -->
{% endif %}
2.if-elseTwo-way conditional judgmentWhen you need to display different content in two situations,if-elsethe structure is very practical.
{% if 条件 %}
<!-- 满足条件时显示的内容 -->
{% else %}
<!-- 不满足条件时显示的内容 -->
{% endif %}
3.if-elif-elseMulti-condition judgmentWhen faced with more complex scenarios, you need to judge multiple mutually exclusive conditions,if-elif-else(Among whichelifis the abbreviation for 'else if' structure, which can help you elegantly handle.
{% if 条件1 %}
<!-- 满足条件1时显示的内容 -->
{% elif 条件2 %}
<!-- 满足条件2时显示的内容 -->
{% else %}
<!-- 所有条件都不满足时显示的内容 -->
{% endif %}
In these conditional statements, you can use various comparison operators.==equals,!=Not equal to,<Less than,>Greater than,<=Less than or equal to,>=Greater than or equal to) as well as logical operators (andand,oror,notnon-) to construct complex judgment expressions. In addition, a variable can be used directly as a condition to check if it exists or is empty, for example,{% if 变量名 %}.
Application scenarios and code examples
Now, let's see through several actual scenariosif/elseSpecific application in the Anqi CMS template.
Scene one: Control display based on the existence of content
This is one of the most common applications. For example, in a document list, we may only want to display the image when the article has a thumbnail, otherwise we skip.
{# 在文章列表循环中，item 代表当前文章对象 #}
{% for item in archives %}
<div class="article-item">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumbnail">
{% else %}
<img src="/public/static/images/default-thumb.png" alt="无图替代" class="article-thumbnail-default">
{% endif %}
<p>{{ item.Description|truncatechars:100 }}</p>
</a>
</div>
{% empty %}
<p>抱歉，目前没有可展示的文章。</p>
{% endfor %}
Here we utilize{% if item.Thumb %}to determineitem.ThumbDoes the field have a value. If the image exists, display it; otherwise, display a default placeholder. Additionally,{% empty %}YesforA very practical feature in loops, it will automatically display the content when the loop collection is empty, saving the need for extraif archivesjudgment.
Scene two: Personalized display based on specific attribute values
The Anqi CMS supports setting "recommended properties" (such as headlines, recommendations, slides, etc.) for documents.We can use these properties to control the style or display area of different articles on the page.
Suppose we want to display 'Top Stories' articles (Flag as 'h') more prominently:
{# 在文章列表循环中 #}
{% for item in archives %}
<div class="article-card {% if item.Flag == 'h' %}highlight-headline{% endif %}">
{% if item.Flag == 'h' %}
<span class="badge">头条</span>
{% elif item.Flag == 'c' %}
<span class="badge">推荐</span>
{% endif %}
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
</div>
{% endfor %}
This code achieves that by{% if item.Flag == 'h' %}and{% elif item.Flag == 'c' %}Check the recommended properties of the article to dynamically add CSS classes or display different labels.
For example, in the navigation menu, we want the link of the currently visited page to be highlighted:
{# 导航列表标签 navList #}
{% navList navs %}
<ul class="main-nav">
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 如果有子导航 #}
<ul class="sub-nav">
{% for subItem in item.NavList %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
item.IsCurrentis a boolean value, its value is set when the current navigation item matches the page visited by the usertrueWe use{% if item.IsCurrent %}to dynamically addactiveClass, to implement highlighting effect.
Scenario three: display different layouts based on model type
The AnQi CMS supports a flexible content model.If your website may display different model content (such as articles, products) on the same page and needs to provide different display layouts for them, you can judge by the model ID.
{# 假设在一个综合内容区块中循环所有文档，item 代表文档对象 #}
{% archiveList archives with type="list" limit="5" %}
{% for item in archives %}
{% if item.ModuleId == 1 %} {# 如果是文章模型 #}
<div class="content-article">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</div>
{% elif item.ModuleId == 2 %} {# 如果是产品模型 #}
<div class="content-product">
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="product-image">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p class="price">售价：￥{{ item.Price }}</p>
</div>
{% else %} {# 其他未知模型 #}
<div class="content-generic">
<a href="{{ item.Link }}">{{ item.Title }} (通用内容)</a>
</div>
{% endif %}
{% endfor %}
{% endarchiveList %}
Passitem.ModuleIdWe can assign specific display templates and styles to different content models to achieve more refined page control.
Scenario four: Display custom contact information.
On the website footer or contact us page, different contact methods may need to be conditionally displayed based on the backend configuration.For example, if the administrator enters WhatsApp, show WhatsApp; otherwise, show the regular phone.
`twig
{% contact whatsapp with name="WhatsApp" %}
{% contact phone with name="Cellphone" %}
{% if whatsapp %}
<p>WhatsApp: <a href="https://wa.me/{{ whatsapp }}" target="_blank" rel="nofollow">{{