How to debug template in AnQiCMS and view the structure and value of variables (using dump filter)?

When developing website templates, we often encounter such confusion: what data does a variable in the template contain?What is its structure? What is the type? And what is the specific value?If these questions cannot be answered quickly, the debugging process will become particularly cumbersome and time-consuming.Fortunately, AnQiCMS has provided us with a powerful and convenient debugging tool——dumpA filter that can help us easily reveal the true face of variables.

AnQiCMS is developed in Go language and uses a template engine syntax similar to Django, which makes template writing flexible and efficient.It is crucial to understand the data structure passed to the template during development.dumpThe filter is exactly for this, it can print the structure type and current value of any variable, making it clear at a glance.

dumpFilter: Your template debugging helper

Imagine you are writing a product list page, and you want to display the title, image, and description of each product. You may know that the variable name isitem, but you are not sureitemWhen you don't know what fields are inside, guessing one by one or looking up the documentation is very inefficient. At this point,dumpa filter can come into play.

Its usage is very simple, just add it after the variable you need to view in the template|dumpand it is done:

{{ your_variable|dump }}

When you add this code to your.htmlAt any position in the template file, such as inside a loop, or in the main content area of the detail page, after saving and refreshing the page, you will see the detailed structured output of the variable on the web page.This output is usually presented in the form of a Go language struct, clearly showing all the field names, data types, and current values of the variables.

For example, when developing an article list, we might use it like thisarchiveListtags to traverse the articles:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        {# 在这里插入dump过滤器，查看单个文章对象 item 的结构和值 #}
        {{ item|dump }}
        
        <p>{{ item.Title }}</p>
        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
        <p>{{ item.Description }}</p>
    {% endfor %}
{% endarchiveList %}

When you visit this page, you will see an output similar to this (the specific content will vary according to your data):

&models.Archive{Id:1, Title:"AnQiCMS模板制作指南", SeoTitle:"", Link:"/article/1.html", Keywords:"AnQiCMS,模板", Description:"这是一篇关于AnQiCMS模板制作的详细指南...", Content:"<p>...</p>", ModuleId:1, CategoryId:2, UserId:1, ParentId:0, Price:0, Stock:0, ReadLevel:0, OriginUrl:"", Views:123, Flag:"c", Images:[]string{"https://en.anqicms.com/uploads/thumb/1.webp"}, Logo:"https://en.anqicms.com/uploads/thumb/1.webp", Thumb:"https://en.anqicms.com/uploads/thumb/1.webp", CommentCount:5, Status:1, CreatedTime:1678886400, UpdatedTime:1678886400, DeletedAt:(*time.Time)(nil)}

We can clearly see from this output:itemIs amodels.ArchiveA type of structure that includesId/Title/Link/Thumb/Descriptionand many fields with their specific values. With this information, you can accurately use them in the template{{ item.Title }}/{{ item.Thumb }}to render the corresponding data.

Similarly, on the article detail page, if you want to understandarchiveTo view the complete content of this global variable, simply place:

{{ archive|dump }}

This will print all the details of the current article, including custom fields, etc., to help you better organize the page layout.

Debugging custom fields and complex objects

AnQiCMS provides flexible content model custom field functionality. If you have added custom fields such as "author bio" or "product parameters" for the article model in the background, but forgot how to call them in the template, dumpThe filter can also provide help.

You might use it on the document details page.archiveParamsUse tags to get custom parameters. Use them within its loop.dump:

{% archiveParams params %}
    {% for item in params %}
        {{ item|dump }}
        <div>
            <span>{{ item.Name }}：</span>
            <span>{{ item.Value }}</span>
        </div>
    {% endfor %}
{% endarchiveParams %}

You might see something like this: 

&models.ArchiveParam{Name:"产品特性", FieldName:"product_feature", Value:"轻量级，高性能", Type:"text"}

This clearly tells you, eachitemContainsName(field display name) andValue(Field value), allowing you to correctly display custom content.

UsedumpTip for the filter

  • Use with caution, remove promptly: dumpThe filter is very useful in the development and debugging stage, but it will print a large amount of debugging information to the page, which may expose sensitive data and increase the rendering overhead.Therefore, it must be removed from the template file before the website goes live or is deployed to the production environment.
  • Cooperate with the browser developer tools: dumpThe information of the Go struct output is sometimes too long, it is not convenient to read directly on the web.You can combine the browser's developer tools (F12) to view the outputs in the "Elements" or "Console", or copy them to a text editor to use its highlighting feature for辅助 reading.

MasterdumpThe filter will greatly enhance your debugging efficiency in AnQiCMS template development, allowing you to focus more on content presentation and user experience optimization.

Frequently Asked Questions (FAQ)

1.dumpThe filter outputs too much information, making it difficult to see the specific variable structure and values. Is there a way to simplify the output?

Answer:dumpThe filter will output the complete structure and value of the variable, and if the variable contains a large amount of data, it can indeed be messy. In this case, you can consider only processing a sub-attribute or a specific field of the variable.dumpFor example{{ item.Title|dump }}To only view the type of the title. Additionally, you can try combining other filters such asstringformat:"%#v"To output the source code snippet in Go language, which can sometimes be clearer, or usesliceFilter a portion of the array/substring to view, for example{{ archives|slice:":3"|dump }}Only view the first three elements.

2. Why did I usedumpthe filter in the template, and the page shows no change?

Answer: This is usually due to the cache mechanism of AnQiCMS.When you modify the template file, AnQiCMS may still be using the old cache file to render the page.You need to log in to the AnQiCMS backend, find the 'Update Cache' feature (usually at the bottom of the sidebar or under the 'System Settings' related menu), and click to clear the system cache.Also, it is recommended to clear the browser cache (press Ctrl+F5 to force refresh the page) to ensure that the latest template file is loaded.

3. Used incorrectly in production environmentdumpWhat risks does the filter have?

Answer: Used incorrectly in production environmentdumpThe filter has the following risks:

  1. Information leakage: dumpThis will output all the internal structure and values of the variables, which may include database IDs, API keys, user sensitive information, etc., and once malicious users obtain them, it may cause serious security issues.
  2. Performance impact: dumpThe filter needs to serialize the variable and output it to the page, which will increase the CPU and memory overhead of the server, and significantly increase the size of the page file, thereby reducing the website loading speed, affecting user experience and SEO performance.
  3. Page is confused:A large amount of debugging information is displayed directly on the page, destroying the page layout and design, and providing a poor experience for visitors. Therefore, it should not be used in any non-development or debugging environment.dumpThe filters are strongly not recommended, be sure to thoroughly check and remove all debug code before deployment.