How to display different content blocks based on conditions in the AnQi CMS template?

In AnQi CMS template design, displaying or hiding content blocks based on different conditions is a key ability to achieve dynamic website effects and improve user experience.By using the built-in template syntax and rich tag features, we can easily build flexible and versatile pages that respond to different situations.

The Anqi CMS template engine uses a tagging method similar to Django syntax, which makes conditional judgments and loop controls very intuitive and easy to learn.It allows us to directly access various data in the template and make logical judgments to determine what content should be presented to the visitor.

1. Core Mechanism: Conditional Judgment Tags (if/elif/else)

The core of implementing conditional judgment in the AnQi CMS template isifLabel. Its basic syntax is similar to that of other common template engines, through{% if 条件 %}/{% elif 其他条件 %}and{% else %}to build logical branches, and with{% endif %}end.

Basic syntax structure:

{% if 条件 %}
    <!-- 当条件为真时显示的内容 -->
{% endif %}

{% if 条件1 %}
    <!-- 当条件1为真时显示的内容 -->
{% elif 条件2 %}
    <!-- 当条件1为假，条件2为真时显示的内容 -->
{% else %}
    <!-- 当所有条件都为假时显示的内容 -->
{% endif %}

In this case, “condition” can be in many forms:

• Comparison operation:For example, determine if a number is equal to, not equal to, greater than, less than, or between a certain range.
  • archive.Id == 10(Is the document ID equal to 10)
  • item.Views > 1000(Is the article view count greater than 1000?)
  • item.Price < 50(Is the product price less than 50?)
• Boolean value judgment:Check if the variable itself istrueorfalse.
  • item.HasChildren(Does the category have subcategories, if true, then execute)
  • system.SiteCloseStatus(Is the website closed?)
• Logical combination:Useand(And),or(Or),notNot to combine multiple conditions.
  • item.IsCurrent and item.HasChildrenBoth the current item and the subcategory.
  • not item.ThumbNo thumbnail.
• Null or non-null judgment:Check if a variable has content.
  • {% if item.Title %}(Title must not be empty if displayed)

II. Data Source: How to obtain variables for judgment?

We first need to obtain the data available for judgment in order to make a conditional judgment.AnQi CMS provides a rich set of tags to obtain various information about the website and use this information as variables directly in the template.

1. System Global Settings(systemtags)By{% system with name="字段名称" %}Can obtain the global configuration of the website, such as the name of the website, Logo, filing number, and even custom system parameters.

   • Example: {% system with name="SiteCloseStatus" %}Can retrieve the site's shutdown status (usually a boolean value or a string) to determine whether to display the shutdown notice.

2. Categories, documents, single page details (categoryDetail,archiveDetail,pageDetailtags)On category list pages, document detail pages, single pages, and other specific pages, the system will automatically load the main information of the current page into the context, which can be accessed directly througharchive.Title/category.DescriptionAccess in this way. If you need to get details of other specified IDs or get detailed field information, you can usecategoryDetail/archiveDetail/pageDetail.

   • Example:You can directly use it on the article detail page{{archive.Title}}Get the title. If you want to determine whether the current article has a thumbnail, you can use{% if archive.Thumb %}.

3. list data (archiveList,categoryList,navListtags combinedforloop)When we usearchiveList/categoryList/navListwhile traversing the list with these tags, in{% for item in items %}inside the loop,itemThe variable contains all the data of the current loop item. This data is the most commonly used source for conditional judgment.

   • Example:when classifying a list by loop,item.HasChildrenCan determine if the category has subcategories;item.IsCurrentCan determine if it is the currently active category, thereby adding different styles.

4. Custom fieldThe Anqi CMS supports adding custom fields for content models, categories, etc. The data of these custom fields can also be directly used for conditional judgments in templates.

   • Example:If you add a custom field namedVIPAccessto the article model, you can use it on the article detail page to determine if it is only accessible to VIP users.{% if archive.VIPAccess == 'true' %}.

III. Practical Scenarios and Examples

Combine condition judgment tags and data sources, we can achieve various flexible content display.

1. Display different content based on the website status.Assuming your website needs to be temporarily closed for maintenance, you can judge in the templateSiteCloseStatusvariable to display maintenance tips instead of normal content.

{% system siteStatus with name="SiteCloseStatus" %}
{% if siteStatus == "true" %} {# 假设后台设置为字符串"true"或"false" #}
    <div class="maintenance-message">
        <h1>网站维护中</h1>
        <p>抱歉，网站正在进行系统升级，请稍后访问。给您带来的不便敬请谅解！</p>
        {% system closeTips with name="SiteCloseTips" %}
        {% if closeTips %}<p>{{ closeTips }}</p>{% endif %}
    </div>
{% else %}
    <!-- 正常网站内容 -->
    {% include "partial/header.html" %}
    <main>
        <!-- 页面主体内容 -->
    </main>
    {% include "partial/footer.html" %}
{% endif %}

2. Highlight the current active item in the navigation menu and display the submenuWhen building a navigation menu, it is often necessary to highlight the corresponding navigation item based on the current page visited by the user, and to determine whether there is a submenu to dynamically expand.

<nav>
    <ul class="main-menu">
        {% navList navs %}
        {% for item in navs %}
            <li class="menu-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.NavList %} {# 判断是否有下级导航 #}
                    <ul class="sub-menu">
                        {% for subItem in item.NavList %}
                            <li class="sub-menu-item {% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
        {% endnavList %}
    </ul>
</nav>

3. Special handling of the first, last, or image items in the list loopIn the article list or product list, it may be necessary to add special to the first article, the last article, or the article with a thumbnail