How can I debug the data structure and content obtained from the `bannerList` tag in a 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 display correctly during the template development and debugging process in AnQiCMS. 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's be clearbannerListThe role of the label.In AnQiCMS, it is mainly used to retrieve website banner images and related information from the background.These banners are usually used for website carousels, promotional images, or important notification areas.bannerListYou can easily display the Banner content set in the background on the website front-end.

bannerListWhen using tags, they are usually paired with a variable name to receive data, for example{% bannerList banners %}Here,bannersIt is an array object, representing a set of Banner data. You can use a loop to iterate over this array and handle each Banner individually.forLoop through the array to iterate over this array, handling each Banner individually.

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

  • siteIdThis parameter is especially important in multi-site management scenarios. If you are managing multiple sites and want to call the Banner data of other sites from the current site, you can do so by specifyingsiteIdTo implement. Normally, if you only operate within a single site, there is no need to explicitly set this parameter; the system will default to retrieving the current site's Banner.
  • typeThis is a key parameter used to distinguish different Banner groupings.In AnQiCMS backend, you can create multiple Banner groups, such as "Home Carouseltype="分组名"You can specify to get Banner data under a specific group. Please make sure thattypethe value of the parameter is exactly consistent with the Banner group name set on the back end.

Reveal Banner data structure:itemof the mysteries

When you use{% for item in banners %}Traversalbannerswhen an array,itemeach variable represents an independent Banner object. Understanding thisitemContains which fields are the basis for debugging. According to AnQiCMS design, each Banneritemusually includes the following core fields:

  • Id：Each Banner's unique identifier.
  • Logo：The URL address of the Banner image. This is the key to displaying the Banner image.
  • Link：Clicking the Banner will take you to the target link address.
  • Description：A brief description of the Banner content, which may also be used as the auxiliary text of the Banner sometimes.
  • AltImage'saltAttribute text, used as alternative text when images cannot be loaded, which is crucial for SEO and accessibility.
  • TitleEnglish Banner title, which can be used for more detailed display or hover tips.

After understanding these fields, you can refer to them in the template by{{ item.Logo }}/{{ item.Link }}and so on.

Powerful debugging tool:dumpFilter and condition judgment

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

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

dumpThe 'X-ray' that directly checks the content and structure of the variable. When you suspectbannerListWhen the data is not obtained or the structure of the obtained data does not match the expected one, it can help you clearly see the real appearance of the variable at a glance.

Usage You can directly output in the template.{{ 变量名|dump }}Come and view the complete information of the variable.

For example, if you want to check the wholebannerswhether the list is empty or the data structure it contains:

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

Through the above code, the page will display a formatted text, which includesbannersthe type of the variable (usually an array), and each one that it containsitemThe detailed field names and corresponding values of the (Banner object).

If you want to check a single Banner (in 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 %}

Here, each Banner below will display itsitemdetailed information about the object, you can refer to this information to checkLogowhether the path is correct,Linkwhether it is valid,TitleandAltwhether there is a value, etc.

dumpFilter Debugging Secrets:

  • Confirm Data Type:dumpwill be displayedbannersIs it indeed an array?
  • Check if the field exists: ViewitemWhether it containsId/Logo/LinkThe fields you expect.
  • Verify the field value: CheckLogoWhether it is a valid image URL,LinkIs the URL accessible. If the value is empty or incorrect, you need to check the Banner configuration on the backend.
  • Impact of comparison parameters: Try to modifytypeparameters and observedumpThe output changes, to confirm whether the parameters are effective as expected.

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

2. Condition judgment: A 'safety net' to prevent data loss

In debugging and writing templates, make use ofifandemptyTags 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 conciselyforLoopingempty子句：

    {% 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 individual Banner field existsAt the time of traversing eachitemTo avoid rendering an emptysrcorhrefAttribute causes the page to display an error. You can make judgments on the key fields. “`twig {% bannerList banners %}

    {% for