As an experienced website operation expert, I am well aware of the importance of every CMS detail for website performance and content display. In the template language of AnQiCMS, a seemingly trivial symbol, such as-，but it contains the powerful ability to optimize output and improve user experience. Today, let's delve into this important role played by the AnQiCMS template language.-add the symbol.

AnQiCMS template language in English-Symbol: Master the subtleties, optimize the output quality

Auto CMS is preferred by many enterprises and content operation teams for its high efficiency and customizable features.When building a website, the template plays a crucial role in converting backend data into a user-visible interface.AnQiCMS's template language design follows the syntax of Django template engine, allowing developers to flexibly control the presentation of content.-Symbol plays a crucial role in certain specific scenarios - that isControl the output of whitespace characters.

Unnoticed Challenge: Unnecessary Whitespace

During the template rendering process, we often add logical tags (such as{% if %}/{% for %}/{% block %}English before and after the characters in the brackets with line breaks and indentation.However, when the template engine processes these tags, it sometimes also outputs these whitespace characters used to beautify the template code to the final HTML code.

Imagine, when you define a loop in a template, iterating over a series of articles:

{% for item in archives %}
<li>
    <a href="{{item.Link}}">{{item.Title}}</a>
</li>
{% endfor %}

If no special handling is done, in the actual generated HTML,{% for %}and{% endfor %}The line where the tag is located, as well as its preceding and following newline characters, may be retained, resulting in extra blank lines or whitespace in the HTML source code.Although this usually does not directly affect the visual effects of the page, it does increase the size of the HTML file and may make the source code look less tidy, causing inconvenience for subsequent debugging or SEO optimization.

As mentioned in the AnQiCMS document, this requirement is often used, such as in if-elseif or for loops, it will also output the blank lines of the if-else label part. This is exactly why we need to use-Symbols to solve the pain points.

Refined craft:-The art of blank control of symbols

In AnQiCMS template language,-When combined with logical labels, symbols become powerful blank control tools. It mainly has two usages:

  1. Remove whitespace before the label:{%-When you are at the start of the label{%后面紧跟一个-，即写成{%-时，模板引擎会智能地移除该标签前所有不必要的空白字符，包括换行符。

  2. 移除标签后的空白字符：-%}Similarly, when you have a closing tag immediately before.}The template engine will remove all unnecessary whitespace characters after the tag.-，即写成-%}.

By combining these two forms, you can achieve precise control over the whitespace characters around template logic tags, making the generated HTML code more compact and tidy.

For example, if we want the HTML generated by the above loop to have no extra blank lines, we can modify the template code like this:

{%- for item in archives -%}
<li>
    <a href="{{item.Link}}">{{item.Title}}</a>
</li>
{%- endfor -%}

After this processing,{%- for ... -%}and{%- endfor -%}The line occupied by the tag itself and its preceding and trailing newline characters will be removed, resulting in a more concise HTML output.This is very valuable for generating JSON, XML, or other formats that are sensitive to whitespace, or simply for pursuing the highest quality of HTML code.

Not just white space:-The other sides of the symbol

Although blank control is-symbols are used as control characters in the AnQiCMS template languagecontrol charactersThe core function, but this symbol itself has other common uses in programming and text processing, which may also appear in AnQiCMS templates:

  • Arithmetic operators:In mathematical expressions,-symbols can be used as a negative sign (such as){{ -10 }}) or a minus sign (such as){{ 10 - 5 }}). The AnQiCMS'stag-calc.mddocument also clearly lists examples of its arithmetic operations.
  • String literal: -It may also appear as a normal character in a string literal, as part of the data, for example when settingtdkTagssepThe default value is when used as a delimiter-.
  • Filter name part:In some filters,-it is also part of the name, such astruncatechars-htmletc. But this is not a control character, it is part of the filter function name.

However, these usages differ fundamentally fromcontrol charactersof-those in template languages. Only the{%that comes}before or-after it are special symbols used for controlling whitespace.

Why is it so important? Value in operation practice

For website operators and optimizers, understanding and utilizing-The blank control function of symbols can bring multiple benefits:

  1. Cleaner HTML source code:Neat HTML code is easier for developers to read and maintain, and reduces visual clutter caused by unnecessary whitespace.
  2. Slightly improve page loading speed:Removing extra whitespace can slightly reduce the size of HTML files.Although the reduction of individual files may not be significant, the cumulative effect can have a positive impact on page loading speed during high-traffic website or mobile access, which is crucial for SEO.
  3. Avoid potential rendering issues:Although not common, in certain strict layout or CSS/JS processing scenarios, extra whitespace characters may cause unexpected layout shifts or script errors.
  4. 有利于生成非HTML格式文件：If AnQiCMS template is used to generate XML, JSON, or other text files that require strict formatting, precise control of whitespace is an essential ability.

In summary, the template language of AnQiCMS-Symbols may seem insignificant, but they are indispensable for the exquisite design of building efficient and tidy websites.Master its usage, and you will be able to better control the template output, providing users with a superior access experience.

Common Questions (FAQ)

  1. {%-and{{-What is the difference? {%-is used to controlLogical tag(such asif/for/block）surrounding whitespace characters. It removes the extra line breaks or spaces that the logical tag itself may produce during rendering.{{-is used to controlVariable outputSurrounding blank characters.It will remove any whitespace characters that may exist at both ends of the variable value, making the output more compact.The AnQiCMS document mainly discusses the blank control of logical tags, but understanding the differences between them helps to use them more comprehensively.

  2. overuse-what side effects might the symbol have?overuse-Symbols, especially in scenarios where strict control of whitespace is not required, may make template code harder to read and understand. In most cases, browsers will ignore multiple consecutive whitespace characters and blank lines in HTML, so not all places need to use-。Suggest using it strategically only when it is necessary to eliminate the redundant blank spaces generated by logical tags, or when generating text that is sensitive to format (such as JSON/XML).

  3. Except-之外，AnQiCMS template has other optimization output techniques?Of course. AnQiCMS provides a variety of optimization output strategies, such as:

    • Filter (Filters):Utilizetag-filters.mdDescribed in various filters to process variables, such astruncatechars(truncated characters),striptags(remove HTML tags) and others, which can effectively clean and format content.
    • Static cache and SEO optimization:The built-in static cache mechanism and comprehensive SEO tools (such as TDK configuration, pseudo-static rules) of AnQiCMS are the key to improving website performance and search engine friendliness.
    • Image Optimization:Inhelp-setting-content.mdMentioned in the WebP image format conversion, automatic compression of large images, and other functions, which can significantly