How to explain the extra blank lines in the page source code after AnQiCMS template rendering?
As an experienced website operations expert, I know that the neatness of the source code not only affects the loading speed of the website, but is also a detail that we cannot ignore in daily maintenance and SEO optimization.When using an AnQiCMS content management system that is efficient and flexible, some attentive operators may find many extra blank lines in the page source code, which may seem a bit confusing at first glance.Today, let's delve into the reasons why there are extra blank lines after the AnQiCMS template rendering and discuss how to solve this problem elegantly.
The secret of the extra blank lines in the page source code after AnQiCMS template rendering
Firstly, we need to understand that AnQiCMS is developed based on the backend of Go language, its template engine is similar to Django syntax (Pongo2), and the server-side rendering (SSR) mechanism is the root cause of these blank lines.In the template file, we often use indentation, blank lines, and various logical control tags to organize content for code readability, maintainability, and clear logical structure.However, when these template files are rendered into the final HTML output by the AnQiCMS server, some 'non-content' elements existing at the template level for the sake of structural clarity may leave their own marks in the source code—the extra blank lines that we see.
In particular, these blank lines usually come from the following aspects:
- Whitespace and line breaks in the template file:When we write templates, we are accustomed to using indentation to make the code clear in levels, or to leave blank lines between different logic blocks to enhance readability. For example, in a
{% if %}After the tag, either<ul>Each tag's<li>Elements should retain blank lines. These seemingly harmless formatting whitespaces may be output unchanged to the HTML source code during rendering. - Logical control tags such as
if/forThe rendering characteristics of:AnQiCMS's template engine will parse{% tag %}Such logic labels, and embed the results of the executed instructions into the HTML stream.When these logical tags themselves are processed and removed from the output, the lines they occupied in the template file (especially the newline characters before and after the tags) may be retained.{% if 条件 %}The tag occupies a line alone in the template, even if the condition is not met, the original newline character may still exist in the output source code, causing an empty line. - Template annotation processing:Template annotation such as
{# 这是注释 #}or{% comment %}多行注释{% endcomment %}It will be completely stripped away during rendering and will not appear in the final HTML.But similar to logical tags, these comment tags may also leave blank lines at the line positions in the template file after stripping. - Template nesting and inheritance:When we use
{% include %}/{% extends %}and{% block %}When using tags for modular template development, the concatenation of different template fragments may also result in additional blank lines due to newline characters at the end or beginning of files.
These extra blank lines do not affect the normal display and functionality of the page, but they will increase the volume of the page source code, slightly affect the page loading speed, and bring some unnecessary visual interference to the developer during debugging.
AnQiCMS's elegant solution: white space control operator-
AnQiCMS knows the importance of clean template output, and therefore, its template engine provides a very elegant and powerful mechanism to control the whitespace in the rendered output - that is, using hyphens in template tags-operator. This small symbol can help us accurately tell the template engine whether to remove the surrounding whitespace when processing specific tags.
minus sign-Operators have three main uses:
Remove whitespace before the tag:
{%- tag %}When you are at a tag's left curly brace{And the percentage sign%Immediately add a minus sign after:-for example{%- if condition %}The template engine will remove this tagBeforeof all whitespace characters, including any newline characters. This is very suitable for scenarios where you need a compact output, avoiding blank lines before the tag.Remove the whitespace after the tag:
{% tag -%}On the contrary, if you are at a label's percent sign%and before the right curly bracket}add a minus sign-for example{% for item in list -%}The template engine will remove this tagAfter thatAll whitespace characters, including any newline characters. This is especially useful at the end of loops or conditional blocks to avoid blank lines after them.Remove whitespace before and after the tag:
{%- tag -%}Of course, you can also combine these two usages, putting a minus sign on both sides of a tag (for example{%- include "partial/header.html" -%}), so the template engine will remove the tag at the same timefront and backAll whitespace characters, achieve the most compact output.
Let's look at a simple example:
Original template code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的网站</title>
</head>
<body>
{% comment %}这是一个重要的导航块{% endcomment %}
<nav>
{% if user.IsAuthenticated %}
<span>欢迎回来，{{ user.Name }}！</span>
{% else %}
<span>请登录</span>
{% endif %}
</nav>
</body>
</html>
If we do not use whitespace control, ifuser.IsAuthenticatedWithfalseThen, in the rendered source code,<span>欢迎回来，{{ user.Name }}！</span>the line where it is located will disappear, but{% if %}and{% else %}as well as{% endif %}the line occupied by the tag may leave an empty line.
Use white space to control the optimized template code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的网站</title>
</head>
<body>
{%- comment %}这是一个重要的导航块{% endcomment -%}
<nav>
{%- if user.IsAuthenticated -%}
<span>欢迎回来，{{ user.Name }}！</span>
{%- else -%}
<span>请登录</span>
{%- endif -%}
</nav>
</body>
</html>
By using on all logical tags and comment tags{%-and-%}We can ensure that any blank lines brought by these tags will be cleared when they are processed, thus generating a more compact and neat HTML source code.
Why is this important? What is the value?
Controlling whitespace in the source code of the page has multiple values for website operation and development maintenance:
- Improve the cleanliness and readability of the code:Well-organized source code is easier to review in the browser developer tools, which helps us locate problems faster, understand the structure, and improve debugging efficiency.Especially in complex page structures, reducing unnecessary blank lines can make the HTML structure clear.
- Minor performance optimization:Although a single blank line has little impact on page loading speed, for large websites or pages with high traffic, the cumulative blank lines can increase the size of the page file.When these pages are transmitted over the network, even reducing the transmission volume by a few KB can save loading time in extreme cases, thereby improving the user experience.
- SEO-friendliness (minor but beneficial):Search engine spiders tend to prefer a more concise and focused HTML structure when crawling and analyzing web pages.Although the size of the HTML file and the number of blank lines are not decisive factors for SEO, a streamlined source code undoubtedly sends a more positive signal to search engines, helping them understand the content of the page more efficiently.
- Standardization and maintenance:In team collaboration, a unified whitespace control strategy can ensure consistency in code style, reduce unnecessary disputes, and make it easier for new members to get started.
**Practice and Suggestions
In practical applications, we do not necessarily need to add whitespace control to all tags. Here are some suggestions:
- Prioritize the use of logical control tags:
{% if %}/{% for %}/{% include %}/{% block %}/{% comment %}And, these tags are the main sources of extra blank lines. - Balance readability and output neatness:Sometimes, some blank lines in the template are indeed to improve the template