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

In Anqi CMS, the dynamic display of website content is the key to improving user experience and operational efficiency.You often encounter such needs: you want a certain content block to appear only under specific conditions, or to display different information for different situations.This is the powerful conditional judgment feature of Anqi CMS--ifTags can come in handy.

The Anqi CMS template system adopts syntax similar to the Django template engine, allowing you to implement logical judgments in templates in a straightforward manner. By using it flexibly,ifLabel, you can easily control the display and hiding of page elements, making the website content appear more intelligent and personalized than ever before.

Get to knowifBasic usage of tags

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

1. Simpleifthe judgment.This is the most basic usage. It can be used when you only need to display content under a single condition, or to check if a variable exists.

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

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

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

2. if-elsethe judgment.When 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, show different hot states according to the number of page 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/Is it true (Truthiness)In AnQi CMS template, any non-empty string, non-zero number, non-empty object, or array is considered 'true'. While empty string, zero,nil(null) or boolean valuefalseIt is considered "false".

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

• Comparison of numbers with stringsYou can compare numbers (such as ID, views, price) with strings.

  • Equal/Not equal: ==(equals,)!=(Not equal)
  • Comparison of size: >(greater than,)<(less than,)>=(greater than or equal to,)<=(less than or equal to)

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

• Logical operatorWhen you need to combine multiple conditions, you can useand(Logical AND),or(Logical OR),not(Logical NOT, can also be used!)

  {% 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 %}
  

• List or set judgmentYou can useinOperator to determine if a value is in the list.

  {% 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 see how to integrate tags into daily template development in AnQi CMSifApply tags to specific scenarios.

1. The active state in the navigation menuThe website navigation is the part where users interact the most. 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.IsCurrentIt is a boolean value used to determine whether the current navigation item corresponds to the current one