How to quickly view the original data output by the `archiveFilters` tag during template debugging?

As an experienced website operations expert, I know that quickly and effectively debugging template tags during the development and maintenance of AnQiCMS (AnQiCMS) templates is the key to improving efficiency. Especially when we need to handle things likearchiveFiltersWhen returning tags for complex data structures, it is particularly important to quickly perceive the original data inside.This is not just to verify whether the label output is correct, but also to quickly locate and solve problems when encountering them.

archiveFiltersThe tag is a very powerful feature in AnQi CMS, which allows us to build dynamic filtering conditions based on various parameters of the document (for example, filtering by 'house type' or 'house size' on a real estate website). It is usually associated witharchiveListTags can be combined to provide flexible content filtering options on document lists or category pages.

However,archiveFiltersThe output of the tag is not a simple string or number, it returns a complex data collection of nested arrays (or called slices) and objects (or called structures). Specifically, it will return afiltersA variable, this variable itself is an array of objects containing multiple filter groups. Each filter group also containsName(parameter name),FieldName(parameter field name) and aItemsarray. AndItemsIn the array, each element is an object that containsLabel(Filter value),Link(Filter value link) andIsCurrent(Selected) object.

Because of this multi-layered complexity, when we try to use it directly in the template{{ filters }}When printing its content, it often only gets a brief, unreadable representation, making it difficult to obtain the actual original data structure and values.At this point, we need some special debugging techniques to 'penetrate' its internal.

Core debugging技巧：Quick CheckarchiveFiltersLabel original data

There are several effective methods that can help us quickly view in the AnQi CMS template debuggingarchiveFiltersLabel outputs the original data. These methods take advantage of the underlying Go language template engine of AnQi CMS, allowing direct exposure of the data structure.

Method one: utilizedumpFilter

dumpThe filter is a very practical debugging tool provided by the Anqi CMS template engine.Its function is to "print the structure type and value of the variable", which is what we need to view the original data of complex variables.

When you need to debug in the templatearchiveFiltersjust add it after the output variable of the tag|dumpfor example:

{# 假设你在 archiveFilters 标签中定义了变量名为 filters #}
<pre>
  {{ filters|dump }}
</pre>

Hint:I am used to putting this debug code in<pre>Tag inside.preThe tag retains the text format, which is very helpful for viewing complex structured data output, and can avoid the default HTML rendering of the browser affecting its layout.

Temporarily add this code to your template file (for examplecategory/list.htmlorindex.htmldepending on where you usedarchiveFiltersthe tag) and then refresh the page. You will see it on the pagefiltersA complete Go language struct representation of a variable, including the names, types, and current values of each field. This is like directly printing the data structure from the Go code, which can clearly displayarchiveFiltersWhat data was output, and what is the specific format of this data.

Method two: usestringformatFilter pairing%#v

exceptdumpFilter,stringformatFilter pairing%#vFormatting parameters can also achieve a similar effect.stringformatThe filter can convert variables to strings according to the specified Go language formatting rules, while%#vIt is used to output the source code snippet representation of Go structures.

The usage is as follows:

{# 同样，将这段代码临时添加到模板中 #}
<pre>
  {{ filters|stringformat:"%#v" }}
</pre>

The effect of this code is similar to|dumpThe filter is very similar, it will also outputfiltersThe Go struct representation of a variable. You can choose to use any of them according to your personal preference. They can all help you obtain it quicklyarchiveFiltersLabel the original output data to better understand the data structure and correctly reference and process these data in the template.

Deeply understand data structure: Iterative output

Althoughdumporstringformat:"%#v"Can provide an overview of the original data, but sometimes we may need more humanized, more readable output, or want to verify the value of specific fields. At this time, it is necessary to combineforloop andifDetermine layer-by-layer iterative outputarchiveFiltersThis method is not as good as doing it directly.dumpSo "quick and original", but it can help us understand the data flow more deeply and display the data in the format we expect.

Below is an iteration output in the template.archiveFiltersDetailed data example:

{# 首先，定义 archiveFilters 标签，这里假设moduleId为1，allText为“全部” #}
{% archiveFilters filters with moduleId="1" allText="全部" %}
  <h3>`archiveFilters` 原始数据（迭代输出）:</h3>
  {% for item in filters %}
    <div style="border: 1px solid #ccc; margin-bottom: 10px; padding: 10px;">
      <p><strong>参数名称 (Name):</strong> {{ item.Name }}</p>
      <p><strong>参数字段名 (FieldName):</strong> {{ item.FieldName }}</p>
      <p><strong>可选值 (Items):</strong></p>
      <ul>
        {% for val in item.Items %}
          <li style="margin-left: 20px;">
            <a href="{{ val.Link }}" {% if val.IsCurrent %}class="active-filter"{% endif %}>
              {{ val.Label }}
            </a>
            {% if val.IsCurrent %} (当前选中){% endif %}
            (链接: {{ val.Link }})
          </li>
        {% endfor %}
      </ul>
    </div>
  {% empty %}
    <p>没有找到任何筛选参数。</p>
  {% endfor %}
{% endarchiveFilters %}

Through this iteration output example, we can not only see the names and field names of each filter group, but also clearly see the labels, corresponding links, and whether they are currently selected.This approach is very helpful for understanding the actual application logic of data in front-end templates.

Points to note in debugging practice

Whether using in template debugging process,dumpFilters or iterative output, the following points need to be noted:

1. The principle of temporality:Debug code should only be used during development and testing phases. Once the issue is resolved, it must be removed from the production environment template.Exposing internal data structures may pose security risks, and unprocessed debugging information may also affect user experience and page loading speed.
2. View the page source:Browsers typically parse and render HTML. Fordumporstringformat:"%#v"The original data, if you see the format is messy or incomplete in your browser, please try to view the page source code (usually throughCtrl+UOr right-click the menu and select "View Page Source"), where it will display the original HTML response uninterpreted by the browser, including your debugging output.
3. safeFilter:AlthoughdumpandstringformatIt usually outputs plain text, but in some cases, if the variable itself contains HTML special characters, and you want them to be displayed in their original form rather than being escaped by the browser (for example<displayed as<It may be necessary to add debugging output for|safea filter. For example:{{ filters|dump|safe }}.

Summary

Mastering these template debugging techniques can greatly improve your efficiency in Anqi CMS development.archiveFiltersTags are an important tool for handling complex filtering logic, and an accurate understanding of their internal data is the foundation for building user-friendly website interfaces. Bydumporstringformat:"%#v"Quickly view the original data, combine iterative output to deeply understand the data structure, and you will be able to confidently master the template development of Anqi CMS.

Frequently Asked Questions (FAQ)

1. Why do I use it directly in the template?{{ filters }}Cannot seearchiveFiltersDetailed data of the tag?

{{ filters }}This syntax is used in the template to output simple variables (such as strings, numbers). ButarchiveFiltersThe tag returns a complex nested data structure, containing multiple levels of arrays and objects.When output directly, the template engine usually only converts it into a brief string representation and does not display each field and value in detail.|dumpor|stringformat:"%#v"This kind of filter.

Do these debugging codes affect website performance or SEO?

Will do. Debugging code usually prints a large amount of internal data, which increases the size of the page's HTML file, thus making it light