AnQi CMS template debugging: clever use ofdumpFilter easily locate display issues

When using Auto CMS to build a website, we sometimes encounter the situation where template content is not displayed as expected.For example, you expect the article title to be displayed at a certain position, but instead, there is a blank space; or the list data is incomplete, and the content of a certain custom field is always unable to be presented correctly.These issues often confuse people, as the data is set up in the background, but the front-end does not display for some reason.

Faced with such problems, if one can "penetrate" the real content of the variables in the template, it will undoubtedly greatly improve the efficiency of solving the problem. Fortunately, Anqi CMS provides a very practical built-in tool -dumpFilter, it is like a 'perspective mirror', which can help us clearly see the type, structure, and actual value of any variable in the template.

Get to know your debugging tool:dumpFilter

dumpThe main function of the filter is to output all information of the variable in detail, including its data type, internal structure, and the current stored value, in the form of detailed text on the page.This is crucial for us to understand the data received by the template engine, and to judge whether there is a spelling error in the variable name, the data is empty, or the data type does not match, and so on.

The usage is very simple, you just need to add it after any variable you want to check|dumpas follows:

{{ 你的变量名|dump }}

Insert this line of code directly into your.htmlTemplate file, after saving and refreshing the page, you can see the detailed information of this variable in the browser.

Actual application: different scenarios underdumpUsage

To better understanddumpThe power of, let's take a look at several common application scenarios:

1. Check the value and structure of a single variable

Suppose you are on the article detail page (usually)template/default/article/detail.htmlIn the details page of [or other model]），it is expected to display the article title.{{ archive.Title }}But the page is blank. You can try this in the template:

<h1>{{ archive.Title|dump }}</h1>

After refreshing the page, ifarchive.Titleis empty,dumpit may display something similarstring(0) ""The word 'auto' has been translated to 'English'.<h1>The label style is incorrect, then you know the problem is not with the data itself, but with CSS.

Further, if you want to view the entirearchivedetailed information of the object, you can do this:

{{ archive|dump }}

This will output:archiveComplete Go language struct information of variables, for example&config.Archive{Id:1, Title:"我的第一篇文章", Description:"...", CreatedTime:1678886400, ...}. Through this output, you can clearly seearchiveThe object contains which fields, and the current value of each field. This can help you quickly find out if there are any spelling mistakes (such as writing it asTitlee), or if there is a field you are expecting (such asDescription）实际上是空的。

2. In the loop, check the list items

When you use the article list page{% archiveList archives with type="page" %}While traversing the articles in a loop, if you find that a certain list item (item) displays an abnormal, you can adjustdumpFilter applied to the loop insideitemAbove:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li>
            {{ item|dump }}
            {# 或者只检查你怀疑有问题的字段 #}
            <h5>{{ item.Title|dump }}</h5>
        </li>
    {% endfor %}
{% endarchiveList %}

So, the page will display eachitem(or a specific field) in detail. You can see if it's allitemof them have issues or just oneitemThe data does not meet expectations. The output may be similar.&config.Archive{Id:2, Title:"另一个标题", ...}It helps you confirm whether the data of each list item is correct.

3. View global or complex objects

Sometimes, you may need to view a large dataset in the page context, such as a category listcategoriesor some custom global configuration object. You can use it at any position in the template (usually at the top of the page or near the area where you want to debug)dump:

{{ categories|dump }}
{{ system|dump }} {# 检查系统配置变量 #}

This will output the entirecategoriesarray orsystemThe detailed structure and content of the object. For multi-layered nested data,dumpit will recursively display information of each layer, which is very helpful for understanding the flow of complex data.

interpretationdumpoutput information

When you see something similar&config.Archive{Id:1, Title:"...", CreatedTime:1678886400, ...}such output, this is actually the representation of a struct in Go language.

  • &config.Archive: This means you are looking at a pointer toconfigUnder packageArchivePointer of the structure.ArchiveThis is the way that AnQi CMS defines the article data model.
  • Id:1: The ID field value of this object is 1.
  • Title:"我的第一篇文章": The value of the title field is "My First Article".
  • CreatedTime:1678886400: Indicates that the creation time is a timestamp (Unix timestamp). If you expect a formatted date, you know that you need to usestampToDateFilter it with this..

With this information, you can:.

  • Confirm if the variable exists:.IfdumpThe output is:.nilOr empty, meaning this variable is either undefined or a null value.
  • Check variable type:Understand whether it is a string, number, boolean, array, or structure, as this helps you choose the correct template tag or filter to handle it.
  • Verify variable content:Check if the specific value is consistent with your expectations.
  • Discover spelling error:IfdumpThe output content is completely different from what was expected, or only part of the fields are displayed, it is likely that the field name you accessed is incorrect.

Suggested debugging process

HencedumpFilter, you can follow a simple debugging process:

  1. Identify the problem area:Determine which part of the content on the page is displayed incorrectly