In AnQi CMS template creation, flexibly controlling the way content is displayed is the key to improving website user experience and management efficiency.Whether it is to display specific information based on different conditions or to implement more complex personalized layouts, conditional judgment is an indispensable tool.Today, let's delve into how to use the powerfulif/elseCondition judgment to accurately control the presentation of content.
The Anqi CMS template engine uses syntax similar to Django template syntax, which allows web development friends who are familiar with it to get started quickly. Among them,if/elseLogical judgment labels become the core for implementing dynamic content display with their intuitive syntax.
Understandingif/elseBasic syntax
In the Anqi CMS template,if/elseThe basic structure of conditional judgment is similar to that of common programming languages, mainly divided into the following forms:
1. Simpleifthe judgment.When you only need to display content when a certain condition is met and not display when it is not met, you can use the simplestifthe structure.
{% if 条件 %}
<!-- 满足条件时显示的内容 -->
{% endif %}
2.if-elsetwo-way judgmentWhen you need to choose different content to be displayed in two different situations,if-elsethe structure is very practical.
{% if 条件 %}
<!-- 满足条件时显示的内容 -->
{% else %}
<!-- 不满足条件时显示的内容 -->
{% endif %}
3.if-elif-elseMulti-condition judgmentWhen facing more complex scenarios, it is necessary to judge multiple mutually exclusive conditions,if-elif-else(whereelifThe 'else if' abbreviation structure can elegantly handle it for you.
{% if 条件1 %}
<!-- 满足条件1时显示的内容 -->
{% elif 条件2 %}
<!-- 满足条件2时显示的内容 -->
{% else %}
<!-- 所有条件都不满足时显示的内容 -->
{% endif %}
In these conditional statements, you can use various comparison operators (==equal,!=Not equal to,<Less than,>Greater than,<=less than or equal to,>=greater than or equal to) and logical operators (andand,oror,notNon) to construct complex judgment expressions. In addition, you can also use a variable directly as a condition to check if it exists or is empty, for example{% if 变量名 %}.
Actual application scenarios and code examples
Now, let's look at several practical scenariosif/elseThe specific application in Anqi CMS template.
Scenario one: control the display based on the existence of the content
This is the most common application. For example, in a document list, we may only want to display the image when the article has a thumbnail, otherwise 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 judgeitem.ThumbDoes the field have a value. If the image exists, display it; otherwise, display a default placeholder. In addition,{% empty %}IsforA very practical feature in loops, which automatically displays the content when the loop collection is empty, saving extraif archivesjudgment.
Scenario two: Personalized display based on specific attribute values
The AnQi CMS supports setting "recommended attributes" for documents (such as headlines, recommendations, slides, etc).We can use these properties to control the style or display area of different articles on the page.
Suppose we want to make the "头条" article (Flag as "h") more prominent:
{# 在文章列表循环中 #}
{% 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 passes{% if item.Flag == 'h' %}and{% elif item.Flag == 'c' %}Check the recommended attributes of the article to dynamically add CSS classes or display different labels.
For example, in the navigation menu, we want the link to the current 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, when the current navigation item matches the page visited by the user, its value istrue. We use{% if item.IsCurrent %}to dynamically addactiveclass to achieve highlighting effect.
Scene three: Display different layouts based on model type
AnQi CMS supports flexible content models. If your website may mix different models (such as articles, products) on the same page and needs to provide different display layouts for them, you can judge through 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 %}
Byitem.ModuleIdWe can allocate specific display templates and styles for different content models to achieve more refined page control.
Scenario four: Display custom contact information
At the bottom of the website or on the contact us page, it may be necessary to conditionally display different contact methods based on backend configuration.For example, if the administrator fills in WhatsApp, WhatsApp will be displayed, otherwise the regular phone number will be displayed.
`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">{{