Can the `bannerList` tag be combined with the `if` logical judgment tag to achieve conditional display of the Banner?

Advanced Development of Anqi CMS Templates:bannerListWithifDeep Integration of Logic Judgment Tags

As an experienced website operations expert, I am well aware that the banner image on the homepage or specific pages is a crucial window for attracting users and conveying brand information.How to flexibly control the display of these Banners in a content management system, making them not only beautiful but also intelligently present according to different conditions, is the key to improving user experience and operational efficiency.bannerListTags andifCombination of Logic Judgment Tags, see how to realize the conditional display of banners.

The Anqi CMS provides powerful support for content management with its simple and efficient architecture and flexible template mechanism.Its template system follows a syntax similar to Django's template engine, which is very easy to get started with for those familiar with web development.{{变量}}Citations, while logical control, such as conditional judgment and loops, are implemented through single curly braces and the percent sign{% 标签 %}to achieve.

bannerListTags: the foundation of dynamic banners

In the Anqi CMS,bannerListTags are a powerful tool specifically designed for retrieving website Banner lists. It can fetch banners from the background configuration of the Banner management module based on specified conditions (such as categories.typeExtract a series of Banner data.

bannerListThe basic usage of the tag is as follows:

{% bannerList banners with type="default" %}
    {# 循环遍历banners，item为每个Banner的数据对象 #}
    {% for item in banners %}
        <a href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" />
            <h5>{{item.Title}}</h5>
        </a>
    {% endfor %}
{% endbannerList %}

Here,bannersis the custom variable name we use, it will receivebannerListthe returned Banner array. EachitemObjects all include Banner's ID, image address(Logo)) link(Link) description(Description) image Alt attribute(Alt) and other key information. ThroughtypeParameters, we can easily pull different group banners, such as "Home Carousel

ifLogic judgment tag: Flexibly control the display key

ifTags are the basis for conditional judgments in the Anqi CMS template system, allowing us to decide whether to render a specific content block based on the truth or falsity of an expression. Its syntax structure is very intuitive, supportingif/elif(else if) andelseMultiple forms, capable of meeting complex logical judgment requirements.

{% if 条件 %}
    {# 条件为真时显示的内容 #}
{% elif 其他条件 %}
    {# 其他条件为真时显示的内容 #}
{% else %}
    {# 所有条件都不满足时显示的内容 #}
{% endif %}

The power of this tag lies in its ability to judge any available variable or expression, including boolean values, numerical sizes, whether a string is empty, and whether an array contains elements, etc.

Skillfully combined: Realize various scenarios of conditionally displaying Banners

Now, let's revealbannerListTags andifHow logical judgment tags are perfectly integrated, bringing endless possibilities to Banner display:

1. Check if there is a Banner to display: Avoid empty content areaThe most common scenario is that we want to display the Banner area only when the Banner is configured on the backend. IfbannerListno data is returned, we can then go throughif banners(Check if the array is empty) to avoid rendering an empty, unattractive Banner container.

   {% bannerList banners %}
   {% if banners %}
       {# 只有当存在Banner时才渲染轮播区域 #}
       <div class="banner-carousel">
           {% for item in banners %}
               {# ... Banner内容 ... #}
           {% endfor %}
       </div>
   {% else %}
       {# 没有Banner时的提示或替代内容 #}
       <p>网站正在更新中，敬请期待更多精彩内容！</p>
   {% endif %}
   {% endbannerList %}
   

2. Add special styles to the first Banner: highlight displayIn the carousel, the first Banner usually hasactiveclass names or special styles to display by default. Inforthe loop, Anqi CMS providesforloop.CounterVariable (starting from 1), we can easily judge whether the current element is the first element in the loop.

   {% bannerList banners %}
   {% for item in banners %}
       <div class="banner-item {% if forloop.Counter == 1 %}active{% endif %}">
           <img src="{{item.Logo}}" alt="{{item.Alt}}">
       </div>
   {% endfor %}
   {% endbannerList %}
   

3. Judgment based on the properties of the Banner itself: flexible control of detailsSometimes, not all Banners are configured with links or descriptions. We can utilizeiftags, and render the corresponding HTML elements only when these properties exist.

   {% bannerList banners %}
   {% for item in banners %}
       <div>
           {% if item.Link %} {# 只有当Banner有链接时才渲染a标签 #}
           <a href="{{item.Link}}" target="_blank">
           {% endif %}
               <img src="{{item.Logo}}" alt="{{item.Alt|default:'网站横幅'}}">
               {% if item.Description %} {# 只有当Banner有描述时才显示 #}
               <p class="banner-description">{{item.Description}}</p>
               {% endif %}
           {% if item.Link %}
           </a>
           {% endif %}
       </div>
   {% endfor %}
   {% endbannerList %}
   

By the above example, we can seebannerListandifThe combination of tags can greatly enhance the flexibility and intelligence of template development.It makes the display of Banners no longer just a pile of images, but can intelligently adjust based on actual business logic and content integrity.

Example code: a direct demonstration of combining use

Let's integrate these scenarios into a more complete code block to showbannerListandifDeep collaboration of tags:

【en】Define a Banner group, for example, 'homepage_carousel' {% bannerList homepageBanners with type='homepage_carousel' %}

{# 首先判断该分组是否有任何Banner #}
{% if homepageBanners %}
    <