How to debug template display issues in AnQi CMS, such as using the `dump` filter to print variables?

Smart debugging of Anqi CMS templates: how to usedumpThe filter easily locates display issues

When using AnQi CMS to build a website, we sometimes encounter situations where template content is not displayed as expected.For example, you expect the article title to be displayed at a certain position, but instead, it is blank;Or the list data is incomplete, the content of some custom field is always unable to be presented correctly.These questions are often confusing because the data is set in the background, but it is not known why the front-end does not display.

If you can "see through" the real content of the variables in the template, it will undoubtedly greatly improve the efficiency of solving such problems. Fortunately, AnQi CMS provides a very practical built-in tool -dumpA filter that acts like a 'perspective mirror', helping us clearly see the type, structure, and actual value of any variables in the template.

Get to know your debugging tool:dumpFilter

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

Its usage is very simple, you just need to add it after any variable you want to check|dumpLike this:

{{ 你的变量名|dump }}

Insert this line of code directly into your.htmlIn the template file, after saving and refreshing the page, you will be able to see the detailed information of this variable in the browser.

Actual application: in different scenarios.dumpUsage

In order to understand betterdumpThe power, 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 (usuallytemplate/default/article/detail.htmlIn the details page of another 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) ""such characters indicate that it is an empty string. If it shows the correct title text, but your<h1>The label style is wrong, then you know the problem is not in the data itself, but in CSS.

To go further, if you want to view the entirearchiveobject's detailed information, you can do this:

{{ archive|dump }}

This will outputarchiveThe complete Go language struct information of a variable, for example&config.Archive{Id:1, Title:"我的第一篇文章", Description:"...", CreatedTime:1678886400, ...}. Through this output, you can clearly seearchiveAn object includes 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 the field you are expecting (such asDescriptionIt is actually empty.

2. Check list items in the loop.

When you use on the article list page{% archiveList archives with type="page" %}While traversing the article, if you find a list item(item) is displaying an error, you can apply thedumpfilter to the loop inside.itemUp:

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

This page will display each one by oneitem(or its specific field) in detail. You can see if allitemhave problems, or only someitemdata does not meet expectations. The output may be similar&config.Archive{Id:2, Title:"另一个标题", ...}Help you confirm that each list item's data 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 directly in any position of 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 an object. For multi-layered nested data,dumpinformation of each layer is recursively displayed, which is very helpful for understanding the complex data flow.

Interpretdumpoutput information

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

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

With this information, you can:

• Confirm if the variable exists:IfdumpThe output is:nilOr blank, indicating that the 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 process it.
• Verify variable content:Check if the specific value is consistent with what you expected.
• Spelling error found: IfdumpThe output does not match the expected, or only part of the fields is displayed, it is likely that the field name you accessed is incorrect.

Debugging process suggestion

NowdumpFilter, you can follow a simple debugging process:

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