Skills for developing Anqi CMS templates: flexibly using conditional judgment (if/else) to control content display
In website content operation, we often need to display or hide specific content blocks based on different conditions, or differentiate the display for different data states. The powerful template engine of AnQiCMS (AnQiCMS) provides us with flexible condition judgment capabilities, through the clever use ofif/elseThe statement allows you to easily achieve fine-grained control over content, making your website more dynamic and user-friendly.
The template syntax of Anqi CMS draws inspiration from the Django template engine, where logical tags are usually enclosed by{% %}and variable output is done using double curly braces{{ }}Understanding this basic rule is the premise of mastering conditional judgment.
Understandingif/elseThe basic syntax of conditional judgment
The core of conditional judgment is{% if 条件 %}Label. It allows you to check if a condition is true and display different content based on the result.
1. Basic.ifStatement.When you only want to display content when a certain condition is met and do not display any specific content when it is not met, you can use the simplestifStructure:
{% if archive.HasImage %}
<img src="{{ archive.Logo }}" alt="{{ archive.Title }}">
{% endif %}
In this example, if the current article (archive) has an image (HasImage is true), it will display the article's logo image.
2.if-elsestructureIf you want to display different content when the condition is met and not met,if-elsethe structure is your ideal choice:
{% if user.IsLoggedIn %}
<p>欢迎回来,{{ user.Name }}!</p>
{% else %}
<p>请<a href="/login">登录</a>或<a href="/register">注册</a>。</p>
{% endif %}
Here we judge whether the user is logged in, and display different welcome messages or guides according to the login status.
3.if-elif-elseMulti-condition judgmentWhen you need to handle multiple mutually exclusive conditions, you can useelif(else if) to extend the judgment logic:
{% if archive.Flag == "h" %}
<span class="flag-headline">头条</span>
{% elif archive.Flag == "c" %}
<span class="flag-recommend">推荐</span>
{% else %}
<span class="flag-normal">普通文章</span>
{% endif %}
This example is based on the recommended attributes of the article(Flag) to display different tags, such as 'Top News', 'Recommended', or 'Normal Article'.
In conditional statements, you can use common comparison operators such as==(equal to),!=(Not equal),>(greater than),<(Less than),>=(Greater than or equal),<=(less than or equal to). At the same time,and/or/notthese logical operators can also help you build more complex judgment logic. For example:{% if item.IsCurrent and item.HasChildren %}.
Apply flexible conditional judgment in practical scenarios
1. Control the display of list content and 'default' stateWhen displaying a list of articles or products, if the list is empty, you may not want the page to display a blank space, but to give the user a friendly prompt. Anqi CMS'sforLoop tags are built-inemptyKeywords can elegantly handle this situation:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% empty %}
<p>抱歉,当前分类或搜索条件下暂无内容。</p>
{% endfor %}
{% endarchiveList %}
WhenarchivesThe list will be automatically displayed when it is empty<p>抱歉,当前分类或搜索条件下暂无内容。</p>This text avoids the empty page.
2. Dynamically activate the navigation menu stateWhen building a navigation menu, we often need to highlight the current page the user is on. Using the navigation list label (navList) returned byIsCurrentproperty, it can be easily achieved:
{% navList navs %}
<ul>
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
</ul>
{% endnavList %}
Whenitem.IsCurrentwhen it is true,<li>Tags will be addedactiveClass, so as to control highlighting through CSS.
3. Prompt for comment review statusWhen displaying user comments, in order to comply with content standards or for manual review, some comments may be in a pending review status. At this time, we can useitem.Statusproperties for judgment:
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
{% for item in comments %}
<div>
{% if item.Status != 1 %} {# 假设Status=1表示审核通过 #}
<span>审核中:{{ item.UserName|truncatechars:6 }}</span>
{% else %}
<span>{{ item.UserName }}</span>
{% endif %}
<p>{{ item.Content }}</p>
</div>
{% endfor %}
{% endcommentList %}
Thus, users can clearly see which comments are still under review.
4. Customize field display according to the content model.AnQi CMS supports flexible content model custom fields. You can control the display based on whether these custom fields exist or on their values:
{# 假设有一个自定义字段叫 'special_note' #}
{% archiveDetail specialNote with name="special_note" %}
{% if specialNote %}
<div class="alert alert-info">特别提示:{{ specialNote }}</div>
{% endif %}
Here check if the article has the "special_note" field, and if it does, display the prompt in a special style.
Enhance judgment ability with the filter.
The AnQi CMS template filters (Filters) can process variables, and then use the processed results for conditional judgments, which greatly enhances the flexibility of the template. Filters are used|symbols.
|lengthFilter: Check the length of a string or listIf you need to determine whether the length of a text exceeds a certain threshold or whether a list contains elements:{% if archive.Description|length > 50 %} <p>{{ archive.Description|truncatechars:50 }}...</p> <a href="{{ archive.Link }}">阅读更多</a> {% else %} <p>{{ archive.Description }}</p> {% endif %}Here we judge the length of the article introduction, if it exceeds 50 characters, it will be truncated and display the 'Read More' link.
|containFilter: Determine if a string contains a specific substring.When you need to check if a string variable contains a specific keyword,|containFilters are very useful:{% set contactInfo = contact.Cellphone %} {# 获取联系电话 #} {% if contactInfo|contain:"888" %} <p>这是一个VIP客服电话:{{ contactInfo }}</p> {% else %} <p>联系电话:{{ contactInfo }}</p> {% endif %}This example simply checks if the contact phone number contains '888' and uses it to determine whether to display as VIP customer service.
|dumpFilter: Auxiliary debuggingDuring development, if the condition judgment does not work as expected,|dumpThe filter is a very useful debugging tool that can print out the structure, type, and value of variables: “`twig {{ archive|dump }} {% if debug_mode %} {# Assume there is a debug_mode variable #}<pre>{{ archive