As an experienced website operations expert, I know that every detail can affect the final user experience and website performance when managing website content and template development.During the template development process of AnQiCMS, a frequently overlooked but potentially minor issue is the blank line problem that various template tags may cause.{% set %}Tags in AnQiCMS template, whether they will produce blank lines, and how we can elegantly handle them.

Deep analysis: AnQiCMS template in{% set %}The secret of tags and blank lines

In AnQiCMS, we often take advantage of its powerful template engine, which supports tag syntax similar to Django or Blade, making variable definition and logical control very flexible.{% set %}The label is one of the most commonly used tools, which allows us to define and assign variables within the template for subsequent logic or content output, greatly enhancing the reusability and readability of the template. For example, we might use it like this: 

<nav>
    {% set menu_title = "网站主导航" %}
    <h3>{{ menu_title }}</h3>
</nav>

However, like many excellent template engines, AnQiCMS's template engine indeed may introduce some 'unexpected' blank lines in the final rendered HTML when handling such logic control tags by default. This is not a defect of the engine, but rather an embodiment of its parsing mechanism: when a logic tag, such as{% set %}When the tag is placed on a separate line, the newline characters before and after the tag are often preserved, thus forming empty lines in the generated HTML source code.

Imagine the example above, if{% set menu_title = "网站主导航" %}This line of code is on a separate line, then in the HTML source code parsed by the browser,<h3>{{ menu_title }}</h3>This line may have an extra blank line before it.Although in most cases these additional blank lines do not cause any visible layout issues for the final page display, they do increase the size of the HTML file and make the source code look less tidy.In scenarios with high requirements for performance and code cleanliness, it may even have a subtle impact on some JavaScript logic that depends on the precise DOM structure.

How can we solve this problem elegantly?

AnQiCMS provides a solution for us very considerately with its template engine.Blank line control operator，也就是在标签内部使用短横线（English）-）。这个操作符可以帮助我们精确地移除标签前或标签后不必要的空白字符，包括换行符。（English）

具体到（English）{% set %}Label, we can use it like this:

  1. Remove the blank lines before the label:In{%Add one after-.

    <nav>
    {%- set menu_title = "网站主导航" %}
    <h3>{{ menu_title }}</h3>
</nav>

    This is,{%- set ... %}Any preceding whitespace characters (including newlines) will be removed.

  2. Remove the blank lines after the label:Inset %}.-.

    <nav>
    {% set menu_title = "网站主导航" -%}
    <h3>{{ menu_title }}</h3>
</nav>

    This is,{% set ... -%}Any whitespace characters (including newlines) will be removed afterwards.

  3. Also remove whitespace lines before and after the tags:Combining the above two methods, this is the most common usage and the optimization strategy we recommend.

    <nav>
    {%- set menu_title = "网站主导航" -%}
    <h3>{{ menu_title }}</h3>
</nav>

    After such processing, the above code will not be{% set %}The position of the label generates additional blank lines, making the generated HTML code more compact and beautiful.

This technique of blank line control is not only applicable to{% set %}AnQiCMS template contains all logical control tags, such as{% if %}/{% for %}/{% with %}The, comma, semicolon, and other symbols can all be used in this way to precisely control the number of blank lines in the output HTML.This reflects the meticulous consideration in the design of AnQiCMS, aiming to provide developers with greater flexibility to build high-performance, high-maintainability websites.

As a website operation expert, I suggest forming the habit of using{%- 标签 -%}The habit of keeping things neat, especially when block-level logical tags are written on separate lines.This not only effectively controls the redundancy of HTML output and improves the tiny efficiency of page loading, but more importantly, it makes your code look more professional and tidy, laying a good foundation for future maintenance and collaboration.

Common Questions (FAQ)

  1. Q: Does this blank line optimization have a significant impact on the website's SEO? A:For single or a few blank lines, their direct impact on SEO is negligible.The search engine mainly focuses on the content quality, structure, and loading speed of the page.However, if a large number of logic tags in the template are not optimized with blank lines, it may lead to a significant increase in the size of the final HTML file, which may indirectly affect the page loading speed and slightly reduce the user experience and the efficiency of the crawler.Search engines usually prefer pages with clear structure and compact code, so optimization is still a good practice.

  2. Q: Besides{% set %}Are there any AnQiCMS template tags that will produce blank lines, and do they also need to be optimized? A:Yes, all 'block-level' tags used for controlling logic flow in AnQiCMS templates may generate blank lines, such as{% if %}/{% for %}/{% with %}/{% macro %}English.If these tags occupy a line independently or contain a newline character, it may cause blank lines in the output HTML.{%- 标签内容 -%}optimization methods.

  3. Q: When can I no longer use{%- set -%}This strict control of blank lines? A:If{% set %}Tags are inline in HTML text or tag attributes, for example<div style="{% set color = 'red' %}{{ color }}">...</div>Then it usually does not produce additional blank lines, because there are no newline characters before and after it.In addition, if a blank line has no negative impact on layout or performance, and keeping it makes the template code more readable (for example, leaving a blank line between some complex logic), then it is also possible to choose not to enforce strict control.-habits often save the trouble of subsequent troubleshooting potential problems.