As an experienced website operations expert, I am well aware that every detail is crucial in the pursuit of efficient content management and a high-quality user experience.AnQiCMS (AnQiCMS) provides us with great flexibility with its high-performance architecture based on the Go language and the Django-style template engine, but just like all powerful tools, truly unleashing its maximum potential requires mastering its nuances.includeAre tags likely to create blank lines, and how can we cleverly control them.
includeTags: The foundation of modular templates
In the template system of Anqi CMS,includeTags are one of the core features for modular design and code reuse.It allows us to extract the common parts of the page, such as the header (header), footer (footer), sidebar (sidebar), or any reusable code snippets, into independent template files and then introduce them where needed.This greatly enhances the maintainability and development efficiency of the template, also making team collaboration smoother.
For example, we can introducebase.htmlto include headers and footers like this:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ tdk.Title }}</title>
<!-- 其他头部元信息 -->
</head>
<body>
{% include "partial/header.html" %}
<main>
{% block content %}
<!-- 页面内容 -->
{% endblock %}
</main>
{% include "partial/footer.html" %}
</body>
</html>
This is a clear and responsibility-separated template organization method, which is exactly what Anqi CMS recommends. However, careful developers and operators may find that occasionally, unexpected blank lines may appear in the page source code, which are often hidden inincludearound logical tags.
Reveal the cause of blank lines.
Where do these blank lines come from? This is actually a common behavior when many template engines parse and render. When a template engine processes{% ... %}When such block-level tags are encountered, it treats the tags themselves as part of the template structure.Even though these tags do not directly generate visible content, the line positions they occupy in the template file, as well as the invisible characters such as newline characters and spaces before and after them, may also be output unchanged to the final HTML or text stream by default.
Imagine if{% include "partial/header.html" %}This line of code is alone in the template file, and it is also surrounded by line breaks before and after, so after the template engine processes the label and generates its content, these line breaks and spaces around the label may be retained, resulting in extra blank lines in the final page source code.Although most of the time these blank lines have no effect on the visual presentation of the page, as browsers automatically ignore multiple whitespace characters between HTML tags, they may slightly increase the size of the page file and bring unnecessary "noise" in certain scenarios that require high cleanliness of source code (such as detection by some SEO tools, or when pursuing page performance optimization to the extreme).
The Way of Control: AnQiCMS Solution
幸运的是，AnQi CMS的模板引擎深谙此道，并提供了一个简洁而强大的解决方案来精确控制这些空白行——那就是在标签内部使用 hyphen-This tiny symbol allows us to have fine-grained control over the output of whitespace in the template.
Specifically, hyphen-can be placed inside the block-level tag'sleft side of the start tag.orThe right side of the closing tagTo indicate that the template engine should remove the line containing the tag or the specific whitespace around it:
Remove the whitespace before the tag:
{%-When you are at the start symbol of a block-level tag{%Following a hyphen, written as{%-The template engine will remove this tagBeforeAll whitespace characters, including newline characters.Whitespace after removing the tag:
-%}When you are at the end symbol of a block-level tag%}Followed immediately by a hyphen, written as-%}The template engine will remove this tagAfter thatAll whitespace characters, including newline characters.Remove the leading and trailing whitespace at the same time:
{%- ... -%}If you want to remove the leading and trailing whitespace from the tag at the same time, you can combine the two aforementioned methods, that is, use it at the beginning of the tag{%-at the end of the tag-%}.
Let's go through some specific examples to see how the magical-operator works:
Start withincludeTake the tag as an example:
<!-- 未使用空白控制前 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- ... -->
</head>
<body>
{% include "partial/header.html" %}
<main>
<!-- ... -->
</main>
{% include "partial/footer.html" %}
</body>
</html>
In the rendered HTML source code, you might find after the<body>tag and<main>Before the tag, you see an extra blank line, this{% include ... %}is caused by the line position occupied by the tag in the template file.
After using white space control:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- ... -->
</head>
<body>{%- include "partial/header.html" -%}
<main>
{% block content %}
<!-- 页面内容 -->
{% endblock %}{%- include "partial/footer.html" -%}
</main>
</body>
</html>
By adding inincludeon both sides of the tag-We tell the template engine to remove all whitespace lines or spaces before and after these tags during rendering.This will make the final HTML source code very compact, without these extra blank lines.
Not limited toincludeThis rule applies to all block-level tags such asifJudgment andforLoop:
<!-- 未使用空白控制前 -->
<div>
{% if condition %}
<p>这是条件内容</p>
{% endif %}
</div>
<!-- 使用空白控制后 -->
<div>{%- if condition -%}
<p>这是条件内容</p>{%- endif -%}
</div>
<!-- for 循环示例 -->
<ul>
{% for item in items %}
<li>{{ item.name }}</li>
{% endfor %}
</ul>
<!-- 使用空白控制的 for 循环 -->
<ul>{%- for item in items -%}
<li>{{ item.name }}</li>{%- endfor -%}
</ul>
In the aboveifandforIn the example, through{%- ... -%}The use of, we can ensure that logical tags will not produce unnecessary line breaks at their locations, making the generated HTML structure more compact.This is especially useful for generating list items or inline elements without additional line breaks.
**Practice and Application Scenarios
Mastered-After the operator, we can build AnQiCMS templates more intelligently:
The introduction of public componentsFor header, footer, navigation bar, and other common code snippets, especially when their content is inline or needs to be tightly connected, use
{%- include "path/to/component.html" -%}Almost always **select. This ensures that these components are seamlessly embedded in the page, avoiding unnecessary vertical spacing or rendering issues.List and table renderingIn
forLoop generation<li>/<tr>or<td>When elements are aligned, blank lines may affect some CSS layouts or appear redundant in the source code. By using in{%- for ... -%}and{%- endfor -%}the inside-, a more compact structure can be generated.Inline content rendered by condition：When
if/elif/elseWhen the text or inline HTML within the tag is desired to be tightly connected-It can prevent the creation of blank lines after the conditional judgment, affecting the text flow.SEO and performance considerations: Although modern browsers and the HTTP/2 protocol are very efficient in handling a small number of extra whitespace characters, in extreme optimization scenarios, reducing the size of each byte of the page file is beneficial.A clean and compact HTML source code, theoretically helps the parsing efficiency of SEO spiders.
However, we should also avoid overuse-Operator. In some cases, retaining some blank lines helps improve the readability of template files, especially in complex HTML structures. For example, if two largedivBlocks naturally need an empty line to separate, and forcefully removing all whitespace will make the template code difficult to understand. Therefore, the key isWeighing and selective useOptimized for scenarios where a compact output is truly needed.
Summary
In the world of AnQiCMS templates,includeLabels and other block-level logical labels bring us powerful modular capabilities. And the clever use of hyphens