How to dynamically display different content blocks based on conditions (using if tags)?

In the AnQi CMS, dynamic display of website content is the key to improving user experience and operational efficiency.You may often encounter such a need: you want a certain content block to appear only under specific conditions, or to display different information for different situations.ifTags come in handy.

The template system of Anqi CMS adopts a syntax similar to Django template engine, allowing you to implement logic judgments in templates in a直观 way. By flexibly utilizingifLabels, you can easily control the display and hide of page elements, making the website content present unprecedented intelligence and personalization.

KnowifBasic usage of the tag

ifThe core idea of the tag is: If a certain condition is true (True), execute the code block it wraps. Anqi CMS provides several commonifLabel structure, to meet your different judgment needs:

1. SimpleifJudgmentThis is the basic usage. When you only need to display content under a single condition, or check if a variable exists, you can use it.

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

   For example, if you only want to display the image when there is a thumbnail in the article:

   {% if archive.Thumb %}
       <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
   {% endif %}
   

2. if-elseJudgmentWhen you need to choose between two contents based on conditions:if-elsethe structure is very practical.

   {% if 条件 %}
       <!-- 当条件为真时显示 -->
   {% else %}
       <!-- 当条件为假时显示 -->
   {% endif %}
   

   For example, if the article has a description, display the description, otherwise display a default prompt:

   {% if archive.Description %}
       <p>{{ archive.Description }}</p>
   {% else %}
       <p>暂无内容简介。</p>
   {% endif %}
   

3. if-elif-elseMultiple judgmentsWhen you need to handle multiple mutually exclusive conditions,if-elif-elsethe structure can make your logic clearer.elifIs the abbreviation of 'else if'.

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

   For example, display different hot states according to the number of views of the article:

   {% if archive.Views > 1000 %}
       <span>🔥 超级热门！</span>
   {% elif archive.Views > 100 %}
       <span>👍 比较热门</span>
   {% else %}
       <span>✨ 持续更新中</span>
   {% endif %}
   

   No matter which form is used, it must end with{% endif %}End the entire conditional judgment block.

Common conditional expressions.

InifIn the tag, you can combine various expressions to build complex judgment logic.

• Does the variable exist/whether it is true (Truthiness)In the AnQi CMS template, any non-empty string, non-zero number, non-empty object, or array is considered as 'true'. An empty string, zero,nil(empty value) or boolean valuefalseIt is regarded as "false".

  {% if system.SiteLogo %}
      <img src="{{ system.SiteLogo }}" alt="{{ system.SiteName }}" />
  {% else %}
      <p>网站Logo缺失</p>
  {% endif %}
  

• Comparison with a stringYou can compare numbers (such as ID, views, price) and strings.

  • Equal/Not equal: ==(等于), English!=(Not equal)
  • Size comparison: >(Greater than),<(Less than),>=(greater than or equal to),<=(小于等于)

  {% if archive.CategoryId == 5 %}
      <!-- 这是ID为5的分类下的文章 -->
  {% endif %}
  
  
  {% if contact.Cellphone != "" %}
      <a href="tel:{{ contact.Cellphone }}">{{ contact.Cellphone }}</a>
  {% endif %}
  

• Logical operators当您需要组合多个条件时，可以使用and(Logical AND),or(Logical OR),not（逻辑非，也可以用!).

  {% if archive.Thumb and archive.CreatedTime %}
      <p>文章带图且有发布时间</p>
  {% endif %}
  
  
  {% if archive.ModuleId == 1 or archive.ModuleId == 2 %}
      <p>这篇文章属于文章或产品模型</p>
  {% endif %}
  
  
  {% if not archive.Description %}
      <p>文章没有简介</p>
  {% endif %}
  

• 列表或集合判断You can usein运算符来判断某个值是否在列表中。

  {% set allowed_ids = "1,3,5"|split:"," %} {# 假设这是一个ID列表 #}
  {% if archive.Id in allowed_ids %}
      <p>这是被允许展示的文章</p>
  {% endif %}
  

Combine the actual application scenarios of AnQi CMS tags

Now, let's take a look at how to apply tags in the daily template development of AnQi CMSifto specific scenarios.

1. Navigation menu active stateThe website navigation is the part that users interact with most frequently. Adding a highlight style to the navigation item corresponding to the current page is a common practice to enhance user experience.

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

   Here,item.IsCurrentIs a boolean value used to determine whether the current navigation item corresponds to the current one