How to elegantly prevent whitespace issues in AnQiCMS template development?

In the era of refined website operation, every detail may affect user experience and search engine performance.For users and developers of AnQiCMS (a CMS that emphasizes efficiency, security, and customization), the quality of the HTML code output by the template is crucial.AutoCMS, this enterprise-level content management system based on Go language has won the favor of many users with its powerful functions and flexible template engine.However, even in such an efficient system, if details are not paid attention to, extraneous whitespace may quietly appear during the template rendering process, which may affect the performance and neatness of the website code.Today, let's delve into how to cleverly prevent and solve these whitespace issues in the development stage of AnQiCMS templates.

Why should we pay attention to whitespace in the template?

AnQiCMS template syntax and the generation mechanism of whitespace

The AnQiCMS template engine adopts syntax similar to Django, it uses double curly braces{{变量}}to output variable content, in order to{% 逻辑 %}Control the template logic, such as conditional judgments (if)、loop (for), template references (include) and more. This syntax is concise and powerful, easy to get started with. However, when dealing with{% if %}Conditional judgment or{% for %}When iterating over loop or logic tags, the template engine defaults to introducing additional blank lines during tag rendering, even though these tags themselves do not produce visible content. For example, a simpleforLoop, even when the content inside the loop is compact,{% for ... %}and{% endfor %}These two lines of tags may leave blank lines in the output HTML.When these logic labels are nested layer by layer, or used extensively on a page, the blank character issue will become prominent.

Core solution: skillfully using the tag whitespace control character-

It's fortunate that AnQiCMS template engine provides a direct and efficient solution——whitespace control character-. Through the opening and closing tags of the template logic label{%and-%}The inside or outside of the hyphen is added.-We can accurately control whether the template engine retains the surrounding whitespace when rendering these tags.

To be specific,{%-It will indicate that the template engine should remove this tag.on the leftauto of the spaces-%}will remove the tagOn the right sideauto of the spaces.

Let us understand its practicality through several common scenarios:

1. Space cleaning in conditional judgments:

We have a fragment that renders content based on conditions:

{# 未使用控制符 #}
<div class="header-info">
    {% if user.IsLoggedIn %}
    <span>欢迎，{{ user.Name }}！</span>
    {% endif %}
</div>
{# 最终输出可能包含多余的换行符，例如在 `<span>` 之前和 `</div>` 之前 #}

In the above example, ifuser.IsLoggedInresponse forfalseso that{% if ... %}and{% endif %}The content between will not be rendered, but the blank lines occupied by these two tags may still be retained. By using the whitespace control character, we can make the output more compact:

{# 使用控制符 #}
<div class="header-info">{%- if user.IsLoggedIn -%}
    <span>欢迎，{{ user.Name }}！</span>{%- endif -%}
</div>
{# 这样，无论条件是否满足，输出的HTML都将更加紧凑，避免了因标签本身产生的空行。#}

2. Optimization of whitespace in loop structures:

Whitespace produced by loop tags is especially common in list rendering. Imagine rendering a navigation menu:

{# 未使用控制符 #}
<ul>
{% for item in navItems %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{# 循环的开始和结束标签，以及每次循环迭代之间，都可能引入空行 #}

By introducing whitespace delimiters, we can ensure that there are no unnecessary blank lines between list items:

{# 使用控制符 #}
<ul>{%- for item in navItems -%}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>{%- endfor -%}
</ul>
{# 这样输出的HTML会非常紧凑，所有的 `<li>` 标签会紧密排列 #}

It is worth noting that in some cases, you may also need to control the whitespace of the variable output itself, for example{{- item.Title -}}It will remove the whitespace at both ends of the variable value. But in most display text content, such detailed control usually affects readability, so in actual development, we more often use-Used to control the blank lines generated by logic labels.

Advanced技巧：For handling whitespace of content variables.

With label whitespace control characters for template.structureThe optimization itself differs, AnQiCMS also provides a series of powerful filters for processingVariable ContentThese filters are particularly useful when there are irregular spaces in the text content you retrieve from the database.

  • |trimFilter:It can remove all leading and trailing whitespace from a string (including spaces, newline characters, tab characters, etc.). For example, if a title is retrieved from a database with extra spaces," 产品名称 "Use{{ item.Title|trim }}Then we can get."产品名称".
  • |trimLeftand|trimRightFilter:If you only need to remove whitespace from the left or right of a string, these filters will come in handy. For example{{ item.Description|trimLeft }}.

These filters help us clean up text content retrieved from the database, which may contain leading or trailing spaces, ensuring they are presented in the cleanest form on the page. For example, a summary field that may contain extra line breaks, after|trimProcessed, it can avoid rendering unnecessary blank lines in HTML.

Development practice suggestions

To kill the blank character problem in the cradle, it is recommended to develop good habits at the stage of AnQiCMS template development:

  1. Develop the habit of using control characters:When writing any{% if %}/{% for %}/{% include %}When considering tags such as [auto], subconsciously consider whether it is necessary to add{%-and-%}Control whitespace. Especially in areas with dense loops and conditional judgments, using it in advance can save a lot of time in later troubleshooting and modifications.
  2. Balance readability and optimization:Although the maximum compression of HTML can be achieved by removing excessive whitespace, overuse-Symbols may make template code hard to read.At the development stage, it is appropriate to retain some whitespace that helps clarify the code structure, and then make fine adjustments when performance optimization is needed.The key is to find a balance point.
  3. Local optimization first:Prioritize whitespace optimization for template fragments that will be rendered repeatedly in large quantities (such as navigation, list items) or have frequent logical judgments (such as permission control, feature switches)