How is the blank control effect of `{{- obj|filter -}}` in the AnQiCMS template?

What is the blank control in the AnQiCMS template:{{- obj|filter -}}How to enhance your website experience?

As an experienced website operations expert, I know that every detail can affect the final presentation and user experience of the website.In AnQiCMS such an efficient and flexible Go language content management system, fine control of templates is the key to achieving these goals.{{- obj|filter -}}The effect of whitespace control.

AnQiCMS with its easy deployment, fast operation, and SEO-friendly features, has won the favor of many small and medium-sized enterprises and self-media operators.Its template engine inherits the elegant syntax of Django templates, making the content presentation both intuitive and malleable.However, during the actual template development process, we sometimes encounter some unexpected blank characters that may cause the HTML structure to be not as compact as it should be, even affecting the precise layout of the page.At this time, the Blank Control template has become our powerful tool.

What is whitespace control and why is it so important?

In simple terms, whitespace control allows us to precisely manage the extraneous whitespace characters that may be generated by the template engine when rendering tags, such as newlines, tabs, or spaces. In the AnQiCMS template, whether it is outputting variables,{{ ... }}Label, or control logic{% ... %}Tags, by default, they and the whitespace characters adjacent to them (such as newline characters before and after the tags) are rendered in the final HTML output.

These seemingly harmless blanks may cause trouble in the following scenarios:

1. The neatness of HTML source code:Excessive blank lines and extra spaces can increase the size of HTML files, although the impact is negligible for modern networks, it should not be ignored by developers who pursue extreme optimization and code cleanliness.
2. Precise page layout:When you use CSS'sdisplay: inline-block/flexorgridWhen using certain layout methods, the whitespace characters between elements may be interpreted as actual spacing by the browser, thereby disrupting your expected layout. For example, in a navigation menu within<li>If there is a newline character between elements, it may cause an extra few pixels of space between them.
3. Generate non-HTML content:When a template is used to generate XML, JSON, or other strictly formatted text content, any extra whitespace can lead to format errors or parsing failures.

In order to solve these problems, AnQiCMS introduced a mechanism to add within the tag tohyphen-achieve blank control.

{{- obj|filter -}}: Fine control of variable output

AnQiCMS template variable output tags are usually{{ 变量名 }}. When we want to remove the whitespace around the tag, we can introduce a hyphen-.

• {{- obj }}: This syntax indicates that the whitespace will be removed{{ objThe space characters adjacent to the left of the tag (i.e., before the tag starts).
• {{ obj -}}: This syntax indicates that the whitespace will be removedobj }}The space characters adjacent to the right of the tag (i.e., after the tag ends).
• {{- obj -}}: Using both the left and right hyphens will remove all adjacent whitespace on both sides of the label.

Mentioned in the document.{{obj|filter__name:param}}The format is the output of a variable with a filter. White space control also applies to this variable with a filter because-acts on the entire{{ ... }}output result of the expression.

For example, suppose we have a list item that contains a truncated description:

<p>
  这是一段描述：
  {{ archive.Description|truncatechars:50 }}
</p>

Ifarchive.Descriptionwith a newline character before or after the value or{{...}}The tag itself occupies a line in the template file, so when rendering,这是一段描述：An unnecessary newline may appear. To keep the description close to the colon, we can use whitespace control:

<p>
  这是一段描述：{{- archive.Description|truncatechars:50 -}}
</p>

On the left side, here-Removed：and{{Any existing blank spaces, to ensure that the description content is closely connected; while on the right-is removed}}to</p>Any existing blank spaces, making the HTML output more compact.

{%- logic -%}: Logical tag blank trimming technique

Blank control is not limited to variable output, in handling such{% if ... %}/{% for ... %}When logical control tags are used, their effect is more significant.These tags do not output visible content directly, but their existence in the template file often leads to extra line breaks.

Consider a common list structure:

<ul>
  {% for item in archives %}
    <li>
      <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
  {% endfor %}
</ul>

In many cases,{% for ... %}and{% endfor %}Tags after rendering may be in,<ul>and the first<li>between, or the last</li>and</ul>between, as well as each<li>additional blank lines are generated between elements. This not only makes the generated HTML source code redundant, but may also affect the CSS oninline-blockItem spacing processing.

At this point, we cantag-remove.mdAs mentioned in the document, use whitespace control to solve:

<ul>
  {%- for item in archives -%}
    <li>
      <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
  {%- endfor -%}
</ul>

By adding in{% for ... %}and{% endfor %}Add whitespace on both sides of the tag.-We tell the template engine to remove the tags themselves and the adjacent whitespace characters that should be output to HTML. This way, the final HTML code will be highly compact,,<ul>and<li>There will be no extra blank lines, the arrangement of list items will be more expected.

Strategies and considerations in practice**

Blank control is a powerful tool, but it needs to be weighed against the pros and cons when used.Overusing whitespace control can make template code difficult to read because all natural indentation and line breaks are forced to be removed.

• Use specifically:Only in specific scenarios where whitespace characters actually affect page layout, visual presentation, or cause formatting errors (such as generating XML/JSON) should they be used.For example, navigation menus, inline element lists, API responses that require strict control of output formats, and so on.
• Maintain readability:Maintain the natural indentation and line breaks of the template code as much as possible without affecting the final effect to enhance the efficiency of development and maintenance.
• Testing is the way to go:No matter when blank control is introduced, it is necessary to thoroughly test on different browsers and devices to ensure that the page layout and content presentation fully meet your expectations.

This fine template control capability provided by AnQiCMS reflects its pursuit of detail, aiming to help operators and developers build websites that are both beautiful and efficient.Master these little tricks, undoubtedly, will allow you to go further on the road of content operation and website optimization.

Frequently Asked Questions (FAQ)

Q1: Does white space control have a significant impact on website performance?A1: The impact of whitespace control on website performance is usually negligible.It mainly reduces the size of the HTML source code by removing redundant characters, thereby slightly reducing the file size.For most websites, the more important performance optimization lies in image compression, CDN usage, database query optimization, and so on.Blank control is more to improve the accuracy of front-end rendering and the code management experience of developers.

Q2: Should I use white space control on all template tags?A2: It is not recommended to use whitespace control on all template tags.Although it can generate extremely compact HTML, it will sacrifice the readability of the template itself.{%- ... -%}and{{- ... -}}When, it will increase the difficulty of understanding and maintaining the code. **Practice is only used when it is truly necessary to remove whitespace to solve layout problems or meet strict formatting requirements.

Q3: The blank control in{% include %}or{% extends %}such tags is effective?A3: Yes, the blank control in{% include %}and{% extends %}Labels are equally valid.These tags may also be output to the final HTML if there are newline characters or other whitespace around them during template rendering.-Effectively removes the whitespace they themselves introduce, thereby ensuring that template fragments or inherited layouts