As an experienced website operation expert, I have a deep understanding of AnQiCMS (AnQiCMS) template system and its content operation strategy.AnQi CMS, with its efficiency, security, and ease of use based on the Go language, has become a powerful assistant for small and medium-sized enterprises and content operation teams.In the daily creation and presentation of templates, the fine-grained control of templates, especially the handling of whitespace characters, is often a key detail affecting the rendering effect and performance of the page.macroDoes the body of the defined function need blank control?

AnQiCMS TemplatemacroDeep analysis of blank control: Creating a more elegant and efficient page output

The strength of AnQi CMS lies not only in its backend management features, but also in its flexible and powerful template engine.It adopts a syntax similar to the Django template engine, allowing developers to build front-end pages in a concise and efficient manner.macroTags undoubtedly are a tool to enhance code reusability and maintainability, allowing us to define reusable code snippets, just like functions in programming languages.

However, when usingmacroWhen modular development is in progress, a seemingly minor issue that may affect page rendering comes to light: macroWithin the body of the defined function, should blank character control be applied? To answer this question, we first need to understandmacroThe positioning in AnQiCMS template and the basic mechanism of AnQiCMS template engine handling whitespace.

macroThe role in AnQiCMS template.

In the AnQiCMS template system,macroIt is considered a 'template code snippet macro function'.Its core concept is to encapsulate a reusable template logic that can be dynamically rendered by passing in variables.macroThen call it in different places in the template, which greatly reduces duplicate code and improves development efficiency and the readability of the template.

For example, if we have an item to display in an article listmacroIt might be defined like this:

{% macro archive_item(archive) %}
<li class="item">
    <a href="/archive/{{archive.Id}}" class="link">
        <h5 class="title">{{archive.Title}}</h5>
    </a>
</li>
{% endmacro %}

Then, when we need to display the article list, we just call it simply:

{% for item in archives %}
    {{ archive_item(item) }}
{% endfor %}

This pattern ensures the consistency of the UI and also makes it easier to make changes later.

Deeply understand the blank control in AnQiCMS templates.

The Django-like template engine adopted by AnQi CMS, by default, will also output the line where the tag is located and any newline characters, spaces, and other whitespace characters that may exist before and after the tag.This could lead to some unexpected problems in certain scenarios.forloop, each iteration generates one<li>tag, if white space is not controlled, each time<li>Extra line breaks may occur, which can make the HTML source code look untidy, even in some CSS layouts likedisplay: inline-block）Under this condition, unnecessary gaps may occur between elements.

In order to solve this problem, the AnQiCMS template engine provides a general blank control mechanism, through adding a hyphen inside the template tag's{%or%}symbol-）to achieve this.

  • {%- tagThis syntax tells the template engine to remove all whitespace characters to the left of the tag, including newlines.
  • tag -%}This syntax tells the template engine to remove all whitespace characters, including newlines, to the right of the tag.

Let's look at a common example in the document that shows how whitespace control affects output:

正常下
{% for item in archives %}
{{ item.Id }}
{% endfor %}

The code above in{{ item.Id }}may have additional newline characters. If you want to remove these newline characters:

紧凑：
{% for item in archives %}
{{- item.Id }}
{% endfor %}

Here{{- item.Id }}Will remove{{The blank on the left. If you want to be more thorough, remove all whitespaces on both sides of the tag, including{% for %}and{% endfor %}The newline it produces:

不带换行
{% for item in archives -%}
{{ item.Id }}
{%- endfor %}

It is not difficult to find that this blank control mechanism is a general feature at the template engine level, which is applicable to all template tags, includingif/forand naturally includesmacrothe definition and invocation.

macroPractice of whitespace control within the function body

Now, let's return to the original question:macroDo we need whitespace control within the defined function body? The answer is:Affirmative.

due tomacroThe code inside the function body is essentially ordinary template code, which will be parsed and rendered by the AnQiCMS template engine just like any other template code. This means that ifmacroThe internal code logic may produce excessive whitespace characters, and these whitespace characters may affect the final HTML structure, page layout, or increase the unnecessary page volume, so it is necessary tomacroUse internal spacing control.

When is it necessary to use?

  1. When generating inline elements or list items.：WhenmacroUsed for generation.<p>/<li>/<span>/<td>When elements are arranged, if extra line breaks or spaces are not desired between these elements, the white space control should be used. For example, a control used to generate navigation items.macro:

    {% macro nav_item(nav) -%}
    <li class="nav-item{% if nav.IsCurrent %} active{% endif %}"><a href="{{ nav.Link }}">{{ nav.Title }}</a></li>
{%- endmacro %}

    here,{%-and-%}The use of it ensures.macroThe definition and its internal<li>The tag does not introduce additional line breaks when rendered, allowing multiple calls in a loop to be tightly spaced, avoiding unnecessary gaps.nav_itemThey can be tightly arranged, avoiding unnecessary gaps.

  2. Generate HTML fragments for JS operationsSometimesmacroIt generates HTML fragments for JavaScript processing. At this time, the simplified HTML structure can simplify the JS code parsing logic and reduce data transmission volume.

  3. When pursuing the ultimate page performance: Although a single whitespace character has a negligible impact on page performance, in large-scale, high-concurrency websites, the cumulative extra whitespace can increase the size of the page file, and have a subtle but real impact on bandwidth and loading speed.For websites that strive for extreme optimization, white space control is essential.

Summary

AnQiCMS'macroTags provide strong support for the reusability and modularity of template code, and the built-in blank control mechanism is the key to the refined output of templates.These are not independent, but can and should be combined.macroinside the function body, you can flexibly apply according to your actual needs{%- tag %}and{% tag -%}Remove unnecessary whitespace.This not only helps you build a cleaner, more expected HTML structure, but also optimizes page loading performance to the extent that it ultimately provides users with a smoother, more superior browsing experience.

Frequently Asked Questions (FAQ)

1. In the AnQiCMS templatemacroandincludeWhat is the difference?

macroSimilar to a function with parameters, it defines a reusable template logic, has its own local scope, operates only on the variables passed in, and reduces the risk of variable conflicts. AndincludeThe tag is more like a file container, it directly inserts the content of another template file at the current position, by default it inherits all the context variables of the current template (you can also do this throughonlyKeyword limitation. In short,macroFocus onLogical reuse and parameterization,includeFocus onStructural reuse and file modularization.

2. When should it bemacroInternal space control is used?

WhenmacroGenerated HTML fragment is an inline element (such as<span>), list item (such as<li>), or table cell (such as<td>), and these elements should be tightly aligned in layout, without any additional spaces or line breaks. Moreover, ifmacroThe content output should be as concise as possible to reduce page volume, and consider using whitespace control as well.

**3. If withinmacronot perform whitespace control, it may