How to make AnQiCMS template conditional rendering not produce any blank output?
Say goodbye to annoying blank: Zero blank output practice of AnQiCMS template conditional rendering
In website operation and development, we pursue the ultimate user experience and SEO optimization (SEO) as our relentless goal.A seemingly minor detail -- excessive whitespace and blank lines in templates can sometimes affect page loading speed, increase bandwidth consumption, and even cause rendering issues in some strict layouts or JSON-LD structured data.AnQiCMS as an enterprise-level content management system developed based on the Go language is known for its high performance, modular design, and SEO-friendliness.It uses a template engine syntax similar to Django, simple and efficient.However, when performing conditional rendering, how to ensure that these logical tags do not produce any unnecessary blank output is a skill that every AnQiCMS operator or developer pursuing perfection must master.
AnQiCMS's template system provides a series of powerful tags and filters, making content display flexible and versatile.Whether it is multi-site management, a flexible content model, or advanced SEO tools, AnQiCMS strives to provide users with a smooth experience.{% if ... %}/{% for ... %}When such conditions and loop logic are present, the lines they occupy, as well as the possibility of empty internal variables, may leave annoying blank spaces in the generated HTML.
Understanding the source of blankness: logical tags and empty data
Firstly, we need to clarify how these 'blanks' are generated. When we write the following code in the template:
{% if some_condition %}
<p>这段内容会在满足条件时显示。</p>
{% endif %}
Even ifsome_conditionWithtrue,<p>The label content is rendered,{% if ... %}and{% endif %}These two lines, after being processed by the template engine, may leave an empty line in the final HTML if there is no other content on the line. In addition, if the internal variable in conditional rendering is empty, for example,{{ item.Title }}InitemThere is not orTitleWhen the attribute is empty, it may also render an empty string, which may cause blank lines to appear. These seemingly harmless blanks, accumulated together, may become a problem.
Core Tool: Whitespace Control{%-and-%}
AnQiCMS's template engine provides a very intuitive and powerful solution for this:Whitespace Control. Add a hyphen next to the percentage symbol in the logical tag (%)-We can precisely control whether the template engine removes whitespace (including newline characters) before or after these tags.
In particular:
{%-This tag will remove the whitespace.FrontAll whitespace characters, including newline.-%}This tag will remove the whitespace.behindAll whitespace characters, including newline.
Imagine our previous example, if you want to modify it so that it does not produce a blank line, you can do it like this:
{%- if some_condition -%}
<p>这段内容会在满足条件时显示。</p>
{%- endif -%}
Here, {%- if some_condition -%}It will remove all leading spaces (up to the previous non-space content or the beginning of the file) and remove all trailing spaces (up to the<p>beginning of the tag). Similarly,{%- endif -%}It will delete it before (up to</p>Remove trailing spaces and delete any spaces after it (until the next non-space content or the end of the file)This way, the entire conditional block will not produce any blank lines when not rendered, and even when rendered, extra lines will be controlled accurately.
This technique is particularly suitable for loop tags, such as{%- for item in archives -%}, and it is necessary to<head>insert structured data (such as JSON-LD) within the tag:
{%- jsonLd -%}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "{{ archive.Title }}",
"description": "{{ archive.Description }}"
}
</script>
{%- endjsonLd -%}
Here, {%- jsonLd -%}and{%- endjsonLd -%}The use of it ensures.<script>The newline and whitespace before and after the tag block are not retained, making the JSON-LD content more compact and in line with the specification.
Fine control: combining variables with content
It is not enough to rely solely on blank control at the label level, we also need to consider the possibility that the variable itself may be empty. If a variable{{ some_variable }}After rendering it is an empty string, it can still lead to a blank line. Therefore, it is best to wrap the output variable in a conditional judgment and combine it with a whitespace control character:
{# 假设 item.Title 可能为空 #}
{%- if item.Title -%}{{ item.Title }}{%- endif -%}
So whenitem.TitleWhen it is empty, the whole{%- if -%}The block will not output any content, thereby completely eliminating whitespace.
Moreover, when the conditional rendering is not just text, but the entire HTML container (such as<div>or<img>When, we should render the entire container as the object of the condition. For example, a page banner image may only be displayed after it is uploaded to the backend:
{%- categoryDetail bannerImages with name="Images" -%}
{%- if bannerImages -%}
{%- set pageBanner = bannerImages[0] -%}
{%- if pageBanner -%}
<div class="page-banner" style="background: url({{pageBanner}}) no-repeat;"></div>
{%- endif -%}
{%- endif -%}
By such multi-layered nesting and white space control, we can ensure that only whenbannerImagesexisting and the first imagepageBanneralso exists,divthe container will be rendered, avoiding the creation of emptydivLabel or unnecessary blank lines.
Pre-check: Avoid rendering of empty data.
In addition to the aforementioned methods, we can also reduce unnecessary rendering logic by pre-checking whether the data itself is empty. AnQiCMS provideslengthFilters that can help us judge the length of a set or string:
{%- if someList|length > 0 -%}
<ul>
{%- for item in someList -%}
<li>{{ item.Name }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
This method is especially effective when dealing with lists, as it ensures that onlysomeListthe entire operation is performed when the data is indeed contained.<ul>The structure will be rendered, otherwise, along with<ul>All content within the tags will not be output, naturally avoiding blank spaces.
Maintain code readability and neatness
Although whitespace characters are powerful tools, overuse may make template code dense and affect reading experience. Therefore, it is recommended to prioritize their use in the following scenarios:
- Areas with strict requirements for performance or SEOFor example
<head>within the labelmetaInformation, JSON-LD scripts, etc. - Elements requiring a compact layoutFor example, the separator of links in the navigation bar and breadcrumb navigation.
- Repeatedly rendered small segmentsFor example, list items, tag clouds, ensure that the spacing between each element is controllable.
In other cases, moderate spacing helps with code readability, and we can maintain the logical clarity and visual neatness of the code without affecting the final rendering effect.The ultimate goal is to achieve zero blank output without sacrificing the maintainability of the template.
By practicing these methods, AnQiCMS users can more accurately control the output of templates, achieving zero blank rendering in the true sense, thereby optimizing website performance, enhancing user experience, and presenting a more professional and efficient image to search engines.