As a senior website operation expert, I am very familiar with the template mechanism of AnQiCMS.In the daily content operation and website optimization work, the details of the template often determine the ultimate user experience and the tidiness of the front-end code.-It combines with template tags, what kind of sparks can it ignite? Is it really suitable for all types of tags?
The core composition of AnQiCMS template syntax
In AnQiCMS, we mainly deal with syntax similar to the Django template engine. The template tags can be roughly divided into three categories:
- Variable output tags (
{{ 变量 }}): This tag is used to directly render data passed from the backend to the front-end page, for example{{ archive.Title }}The article title will be displayed. - Logical control tag (
{% 标签名 参数 %}): This tag is used to implement logical judgment, loop traversal, file inclusion, and other control flow functions, such as{% if 条件 %}...{% endif %}/{% for item in list %}...{% endfor %}as well as{% include "partial/header.html" %}They usually appear in pairs, enclosing a block of template code. - comment tags (
{# 注释内容 #}or{% comment %}...{% endcomment %}): Used to add comments in templates, which will be completely ignored during final rendering and will not be output to the front-end page.
Understanding these three types of tags is the basis for-the application of symbol boundaries.
-The core function of the symbol: precise control of whitespace characters
Especially in the process of template rendering, particularly in handling{% %}When controlling this type of logic tag, the template engine often outputs the whitespace characters such as newline and space before and after the tag as well.This may result in a large number of unwanted blank lines in the generated HTML code, making the code bulky and not easy to read, and even affecting the page style under some strict layouts.
Introduced by AnQiCMS-Symbol, is used to solve this 'ghostly blank line' problem. When we place the Symbol inside the logical control tag, right next to-Symbol, placing it inside the logical control tag, right next to%When a symbol is used, it becomes a 'trimmer':
{%-: Indicates the removal of this tagpreviouslyAll whitespace characters (including newline characters) following this tag are removed.-%}: Indicates the removal of this tagafterAll whitespace characters (including newline characters) following this tag are removed.
The core purpose of this feature isTo optimize the HTML output structure, rather than changing the variable contentIt is like a scalpel in a surgeon's hands, precisely trimming away the redundant 'tissue' to make the code look more compact and professional.
So, which types of tags can handle this-Symbols?
Understood-By understanding the principle of symbol, we can clearly define its applicable scope in AnQiCMS templates.
1.{% ... %}Logical control tags: main battlefield
Without a doubt,Logic control label is-The main stage where symbols excelThese tags do not produce any visible output themselves, but their presence, especially when they occupy a line by themselves, can easily introduce unnecessary blank lines.
For example, aforLoop:
{% for item in archives %}
<li>{{ item.Title }}</li>
{% endfor %}
without using-Under the symbol, if{% for ... %}and{% endfor %}Each tag occupies a line, it may generate two extra blank lines outside their rendering<li>List, extra two blank lines.
But when we cleverly introduce-symbol after:
{%- for item in archives -%}
<li>{{ item.Title }}</li>
{%- endfor -%}
After this processing,{%- for ... -%}it will remove all previous whitespace, including newline characters,{%- endfor -%}Then all the following whitespace will be removed. This ensures that the start and end of the loop block do not produce extra blank lines, making the HTML output more compact.
This also applies to other logic control tags, such as:
- Conditional judgment tag:
{%- if condition -%}…{%- elif otherCondition -%}…{%- else -%}…{%- endif -%} - Include file tag:
{%- include "partial/header.html" -%} - Macro definition tag:
{%- macro my_macro(arg) -%}…{%- endmacro -%}
Through this method, we can effectively control the white space before and after these logic blocks, avoiding unnecessary line breaks and spaces, making the final HTML code cleaner and more organized.
2.{{ ... }}Variable output label: The effect is negligible, usually unnecessary
ForVariable output label{{ 变量 }}Use-The effect of symbols is usually negligible, even to the point of being unnecessary.
{{ 变量 }}The function of the label is to directly output the value of the variable. It itself does not introduce additional line breaks like logical control labels, due to its block-like structure. Even if you in{{- 变量 -}}This usage simply removes the whitespace before and after the variable label, and this whitespace has little impact on the final rendered HTML structure in most cases.
It is more important that, if the variableTitlethe value itself contains leading or trailing spaces (for example" AnQiCMS "){%- Title -%}Cannot help you remove this content. To handle whitespace within variable values, AnQiCMS provides more professional tools ——Filtersfor example{{ archive.Title|trim }}you can remove the whitespace at both ends of the variable values.
Therefore, it is not recommended to use this type of label.-symbols to avoid increasing the complexity of the template without any actual benefit.
3. `
` Comment tags: useless.
As forComment tags{# ... #}or{% comment %}...{% endcomment %}Use-The symbol is completely meaningless.
The characteristics of comments determine that they are completely removed during the template parsing stage, producing no front-end output. Since there is no output, there is naturally no issue of introducing whitespace characters.-The symbol loses its value of existence.
Summary and **Practice
AnQiCMS template's-It is an efficient processing mechanism for redundant blank characters generated during template rendering, and it mainly acts onLogical control tag ({% %})Through adding inside the tag-symbols, we can precisely control the white space output before and after these tags, thus generating more compact and clearer HTML code.
It is crucial to understand its working principle: it is an HTML structure optimization tool, not a variable content processing tool.Therefore, when using it, please remember that its main purpose is to optimize the HTML structure, not to change the variable content.For the formatting of variable content, please consider using the various filters provided by AnQiCMS.
Reasonable use-Symbols, which can help us write more elegant and efficient AnQiCMS templates, providing a better front-end experience for the website.
Common Questions and Answers (FAQ)
Q1: Use-Will the symbol significantly improve the performance of my website?
A1:Generally speaking,-The direct improvement to website performance by symbols is negligible.It mainly reduces the whitespace characters in HTML files, slightly reducing the file size, theoretically able to slightly speed up the transfer speed.But this optimization is usually not felt, its main value lies in improving the tidiness and readability of front-end code, making it easier for developers to maintain and debug.
Q2: If I do not use-What will happen to the symbol? Will there be any negative effects?
A2:If not using-The symbol, the most direct impact is that the HTML file rendered by the template may contain extra blank lines or whitespace characters.