What is the best practice for batch removing empty lines of `if/for` tags in AnQiCMS templates?

Saying goodbye to redundant empty lines in AnQiCMS template development,if/forLabel blank control **practice

As a senior website operations expert, I fully understand the importance of a highly efficient and neat template system for the long-term healthy development of a website.AnQiCMS (AnQiCMS) boasts its high-performance architecture based on the Go language and its flexible Django-style template engine, bringing an excellent experience to content management.ifcondition judgment andforExtra blank lines generated by looping tags when rendering. Today, let's delve deeply into how to elegantly batch remove these in the AnQiCMS template.if/forLine breaks brought by tags, creating a perfect HTML output.

Redundant line breaks: The 'trouble' in template rendering

In traditional Web template development, logic control tags such as{% if condition %}and{% for item in list %}In order to improve the readability of the code, we usually put them in separate lines and add appropriate indentation. For example, you might write a code to conditionally display an image like this:

<div>
    {% if archive.Thumb %}
        <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" />
    {% endif %}
</div>

Or a simple list loop:

<ul>
    {% for item in archives %}
        <li>{{ item.Title }}</li>
    {% empty %}
        <li>目前没有相关内容。</li>
    {% endfor %}
</ul>

However, whenarchive.ThumbWhen false (i.e., no thumbnail){% if ... %}The tag itself and the line breaks before and after it, which may leave one or more blank lines in the final rendered HTML. Similarly, whenarchivesWhen the list is empty,{% for ... %}and{% empty %}Tags can also introduce unnecessary spaces.

These extra blank lines, although they may not be obvious visually, may still bring some 'small troubles' for website operators and developers who追求极致：

  • HTML structure is not neat:This leads to redundant HTML code seen in the browser's developer tools, increasing the difficulty of troubleshooting.
  • Debugging and maintenance困扰:In complex template nesting, it is difficult to distinguish between which blank lines are deliberately done and which are the 'side effects' of the template engine.
  • Slight performance impact:Although trivial, each additional character increases the file size of the page, and when accumulated, it is not without impact on large-scale websites.
  • Potential layout issues:In some CSS scenarios that depend on precise layout (such asinline-blockelement spacing) these blank lines can even lead to unexpected visual discrepancies.

How does AnQiCMS provide solutions to help us say goodbye to these redundant blank lines?

AnQiCMS' elegant solution: white space control character (-)

AnQiCMS's template engine is well-versed in this and provides a simple yet powerful mechanism to solve this problem---Whitespace control character(-). By adding a hyphen at the beginning or end of the template tag, we can precisely control whether the whitespace before or after the tag is removed.

This blank control character has three common uses:

  1. Remove the blank before the tag:{%- tag %}When you use a hyphen at the beginning of the tag ({%) after it, such as{%- if ... %}The template engine will remove all whitespace characters before this tag, including newline characters.

  2. Whitespace after the tag:{% tag -%}When you use a hyphen at the end of the tag (%}before it), such as{% ... -%}The template engine will remove all whitespace characters after this tag, including newline characters.

  3. Also remove the whitespace before and after the tag:{%- tag -%}Combine both usages, you can remove leading and trailing whitespace on a label at the same time. This is most commonly used in scenarios where redundant blank lines need to be removed.

Let's use a real example to see this magic:

{# 原始代码可能产生空行 #}
<div>
    {% if some_condition %}
        <p>这是条件内容</p>
    {% endif %}
</div>

{# 使用空白控制符后 #}
<div>
{%- if some_condition -%}
    <p>这是条件内容</p>
{%- endif -%}
</div>

Whensome_conditionWhen false, the first example might render an empty line, while the second example will ensure:<div>Keep the tags clean within, and no output will appear by:ifThe blank space introduced by the tag.

**Practice and Application Scenarios

Mastering the usage of whitespace control characters, we can apply them to all aspects of AnQiCMS template development, achieving finer control over HTML output.

1.ifConditional judgment tag

This is one of the most common application scenarios. Whether you are rendering content based on the existence of a variable or performing complex logical judgments,{%- if ... -%}they are your good helpers.

{# 示例：显示缩略图，并避免无图片时的空行 #}
{%- if archive.Thumb -%}
    <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" loading="lazy" />
{%- endif -%}

{# 示例：显示特定属性内容 #}
{%- if archive.Flag | contain: 'h' -%}
    <span class="flag-hot">头条</span>
{%- elif archive.Flag | contain: 'c' -%}
    <span class="flag-recommend">推荐</span>
{%- endif -%}

by using allif/elif/elseandendifTags are used{%- ... -%}, We can ensure that the entire conditional block will leave no trace when it is not rendering any content.

2.forLoop through tags

The loop is the core of dynamically generating list content. Combined{% empty %}The clause, white space characters can effectively avoid the blank lines generated when the empty list is empty.

{# 示例：渲染文章列表，并优雅处理空列表情况 #}
<ul class="article-list">
{%- for item in archives -%}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{%- empty -%}
    <li class="no-content">目前没有相关内容。</li>
{%- endfor -%}
</ul>

here,{%- for ... -%}and{%- empty -%}Ensures that whether the list is content or not, the outermost<ul>Labels can be kept compact without extra blank lines.

3. Complex nested structures and code snippets

When the template contains multi-layered nested logical judgments and loops, or when referencing common code segments (such as{% include "partial/header.html" %}), whitespace characters still play a role. Inincludetags usage{%- include "..." -%}Can prevent the blank space before and after the file from affecting the layout of the main template.

{# 示例：在包含代码片段时控制空白 #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    {# ... 其他head内容 ... #}
</head>
<body>
{%- include "partial/header.html" -%}
<main>
    {# ... 主要内容 ... #}
</main>
{%- include "partial/footer.html" -%}
</body>
</html>

4. When should it be used cautiously?

Although whitespace control characters are very useful, they are not needed or suitable for all scenarios. Be cautious in the following cases:

  • The HTML structure itself requires whitespace:For example, in<pre>When displaying code or plain text within tags, spaces are part of the content and should not be removed.
  • Inline elements:For words like<span>/<a>This type of inline element often appears in the text stream, even with blank lines, it has a negligible impact on rendering, and excessive use of whitespace control characters may increase the visual complexity of the code.
  • Semantic line break:If you want some block-level elements to be naturally separated by line breaks to maintain the readability of the code, you can also choose not to use them.

**In practice, it can be summarized as:**Elements may become block-level due to those logical tags such asdiv,ul,pAvoid unnecessary blank lines within or between elements, which may affect the HTML structure or layout.{%- ... -%}In most other cases, keep the code naturally readable.

Summary

A blank control character provided by AnQiCMS-is a simple and efficient tool that allows template developers to precisely manage whitespace characters in HTML output. By using inifandforUse logical labels ingeniously{%- ... -%}We can generate cleaner and more easily debuggable HTML code, and avoid various problems caused by redundant blank lines and the like