How to debug the Banner data structure and content obtained from the `bannerList` tag in the template?

As an experienced website operations expert, I know that understanding and correctly using various tags is the key to ensuring that the website functions and content are displayed correctly. Today, we will focus onbannerListThis commonly used tag, delve into how to effectively debug the Banner data structure and content obtained in the template.

Deep understandingbannerListThe core function of the tag

First, let us make it clearbannerListThe role of the tag. It is mainly used in AnQiCMS to fetch the website's Banner images and relevant information from the background.These banners are usually used in website sliders, promotional images, or important notification areas. ThroughbannerListYou can easily display the Banner content preset in the background on the website front end.

bannerListWhen used, tags are usually paired with a variable name to receive data, for example{% bannerList banners %}. Here,bannersThis is an array object, representing a set of Banner data. You can usefora loop to traverse this array and process each Banner individually.

This tag supports some parameters to refine your data acquisition requirements:

• siteIdThis parameter is particularly important in the multi-site management scenario. If you are managing multiple sites and want to call the Banner data of other sites from the current site, you can specifysiteIdTo implement. In most cases, if you are only operating within a single site, you do not need to explicitly set this parameter, the system will default to fetching the current site's Banner.
• typeThis is the key parameter used to distinguish different Banner groups.In AnQiCMS backend, you can create multiple Banner groups, such as 'Homepage Carousel', 'Sidebar Ads', etc. Bytype="分组名"You can specify to retrieve the Banner data under a specific group. Make sure totypethe value of the parameter matches the Banner group name set in the background.

Reveal the Banner data structure:itemThe mystery of

When you use{% for item in banners %}TraversalbannersWhen an array, eachitemVariable represents an independent Banner object. Understand thisitemWhat fields are the basis of debugging. According to the design of AnQiCMS, each Banneritemusually includes the following core fields:

• IdEach Banner's unique identifier.
• LogoThe URL address of the Banner image. This is the key to displaying the Banner image.
• LinkClick the Banner to go to the target link address.
• DescriptionA brief description of the Banner content, which may also be used as the auxiliary text of the Banner.
• Alt: The image'saltAttribute text used as alternative text when images cannot be loaded, which is crucial for SEO and accessibility.
• Title: Banner's title, which can be used for more detailed display or hover tips.

Understanding these fields, you can use them in the template by{{ item.Logo }}/{{ item.Link }}and other ways to reference them.

A powerful debugging tool:dumpFiltering and conditional judgment

During template debugging, we often encounter situations where the banner does not display, displays errors, or the data does not meet expectations. At this time, AnQiCMS providesdumpFilter and flexible conditional judgment tags (if/empty) becomes your indispensable debugging assistant.

1.dumpFilter: The 'X-ray' of data structures

dumpThe filter is a direct 'X-ray' of the variable content and structure. When you suspectbannerListNo data was retrieved or the structure of the retrieved data does not match the expected one, it can help you see the real appearance of the variables at a glance.

Usage method You can output it directly in the template.{{ 变量名|dump }}View the complete information of the variable.

For example, if you want to check the entirebannerslist is empty or its containing data structure:

{% bannerList banners with type="首页轮播" %}
    <pre>{{ banners|dump }}</pre> {# 临时添加，用于调试 #}
    {% for item in banners %}
        {# ... 正常渲染Banner的代码 ... #}
    {% endfor %}
{% endbannerList %}

By the above code, the formatted text displayed on the page includesbannersThe type of the variable (usually an array), each one of which containsitem(Banner object) detailed field names and corresponding values.

If you want to check a single Banner within the loop(item)specific data:

{% bannerList banners %}
    {% for item in banners %}
        <pre>{{ item|dump }}</pre> {# 临时添加，用于调试 #}
        <a href="{{ item.Link }}" target="_blank">
            <img src="{{ item.Logo }}" alt="{{ item.Alt }}" />
            <h5>{{ item.Title }}</h5>
        </a>
    {% endfor %}
{% endbannerList %}

At this time, each Banner will display itsitemdetailed information of the object, you can check this informationLogowhether the path is correct,Linkwhether it is valid,TitleandAltwhether there is a value, etc.

dumpThe debugging secret of the filter:

• Confirm the data type:dumpIt will displaybannersIs it indeed an array.
• Check if the field exists: ViewitemDoes it containId/Logo/LinkThe field you expect.
• Verify the field value: CheckLogoIs it a valid image URL,LinkIs the website accessible. If the value is empty or incorrect, you need to check the background Banner configuration.
• Comparison parameter impact: Try to modifytypeParameters, and observedumpThe output changes to confirm that the parameters are working as expected.

After completing the debugging, please make sure to remove these.<pre>{{ ...|dump }}</pre>Remove the code from the production environment to avoid leaking unnecessary information or affecting the page aesthetics.

2. Condition judgment: Preventing data missing 'safety net'

Utilize in debugging and template writing,ifandemptyTags can effectively handle scenarios where data does not exist, avoiding errors on the page.

• Check if the entire Banner list is empty:

  {% bannerList banners with type="首页轮播" %}
      {% if banners %} {# 检查banners数组是否存在且不为空 #}
          {% for item in banners %}
              <a href="{{item.Link}}" target="_blank">
                  <img src="{{item.Logo}}" alt="{{item.Alt}}" />
                  <h5>{{item.Title}}</h5>
              </a>
          {% endfor %}
      {% else %}
          <p>暂无Banner图片，请在后台添加。</p>
      {% endif %}
  {% endbannerList %}
  

  Or use it more conciselyforrepeatedlyemptyThe clause:

  {% bannerList banners with type="首页轮播" %}
      {% for item in banners %}
          <a href="{{item.Link}}" target="_blank">
              <img src="{{item.Logo}}" alt="{{item.Alt}}" />
              <h5>{{item.Title}}</h5>
          </a>
      {% empty %} {# 当banners为空时执行此段代码 #}
          <p>暂无Banner图片，请在后台添加。</p>
      {% endfor %}
  {% endbannerList %}
  

• Check if the single Banner field exists: In traversing eachitemTo avoid rendering an empty srcorhrefThe attribute causes the page to display an error, you can judge the key fields.

  {% for