What is the special meaning of the writing style `{{- variable -}}` in AnQiCMS templates?

As an experienced website operation expert, I fully understand that even the smallest grammatical details in a content management system can affect the final page presentation and development efficiency.AnQiCMS with its efficient architecture based on the Go language and the easy-to-use Django template engine syntax, provides us with great flexibility.{{- 变量 -}}The special meaning contained in this writing.

In AnQiCMS template.{{- 变量 -}}The special meaning: Deep understanding of whitespace control.

In AnQiCMS templates, we are accustomed to using double curly braces{{ 变量 }}to output dynamic content, using single curly braces and percentage signs{% 标签 %}To handle logical judgment or loop control. However, when you add a hyphen inside or outside these curly braces-for example, written as{{- 变量 -}}or{%- 标签 -%}it has a very important special meaning:Whitespace control.

In short, this dash-is used to tell the template engine,Automatically remove the whitespace around the tag (including spaces, tabs, and newlines).

Let's break down this feature:

1. The hyphen on the left{{-or{%-: means the template engine will remove this tagOn the leftAll adjacent whitespace characters until a non-whitespace character is encountered.
2. The dash on the right-}}or-%}: means the template engine will remove this tagRightAll adjacent whitespace characters until a non-whitespace character is encountered.

For example, if you use both dashes on the left and right{{- 变量 -}}Then all whitespace characters on both sides of the label will be removed.

Why is whitespace control so important?

You might ask, is it really that significant to remove some whitespace characters? The answer is yes, especially in website frontend development and content presentation, it can solve many practical problems:

• HTML structure is neat: When we use{% for item in list %}such loop tags to generate a series of HTML elements (such as<li>/<div>If the short dash is not used within a tag, each loop tag itself may take up multiple lines in the template file, and these newline characters and indentation will be retained in the final rendered HTML source code, leading to a large number of blank lines and unnecessary spaces, making the source code appear redundant and difficult to read. Through-This style ensures that the generated HTML structure is compact and neat.

  Example comparison: Without using whitespace control:

  <ul>
      {% for item in archives %}
      <li>
          {{ item.Title }}
      </li>
      {% endfor %}
  </ul>
  

  The rendered output may contain extra blank lines:

  <ul>
  
      <li>
          文章标题1
      </li>
  
      <li>
          文章标题2
      </li>
  
  </ul>
  

  Using whitespace control:

  <ul>
      {%- for item in archives -%}
      <li>
          {{- item.Title -}}
      </li>
      {%- endfor -%}
  </ul>
  

  The structure is more compact after rendering:

  <ul><li>文章标题1</li><li>文章标题2</li></ul>
  

• Avoid front-end layout issuesIn some CSS layout scenarios, especially involving:display: inline-blockOr when using Flexbox/Grid layout, sometimes the whitespace between HTML elements is interpreted by the browser as actual spacing, resulting in unexpected layout issues.By precisely controlling whitespace characters, we can avoid these tiny spacing issues caused by whitespace, ensuring the accuracy of the layout.

• Optimize page loading performance (micro-level): Removing a small amount of whitespace characters has little effect on the overall page loading speed, but reducing the byte size of HTML files is still a worthy optimization goal for large-scale websites or projects with extreme performance requirements.A cleaner HTML also helps improve the parsing efficiency of search engine spiders, although this is more of an indirect impact rather than a direct SEO ranking factor.

• Enhance the readability and maintainability of the templateFor template developers, a clear template code structure is the key to improving development efficiency and reducing maintenance costs. By{{-and-}}This explicit writing allows us to maintain beautiful indentation and line breaks in the template code, without worrying about these producing unnecessary output during final rendering, thus balancing the readability of the code and the neatness of the output. AnQiCMS'stag-remove.mdThe document also clearly states this requirement and provides a method for-cleaning up the lines occupied by logical tags. Although the document is mainly about logical tags{%- tag -%}For example, but its principle also applies to variable output{{- 变量 -}}.

How to effectively use it in the AnQiCMS template?

After mastering this feature, you can develop AnQiCMS templates more skillfully.

1. In loops and conditional judgments.This is-The most commonly used scenarios. When{% for %}or{% if %}Tags before and after may contain line breaks or spaces, and if you do not want these whitespaces to appear in the final HTML, use{%-and-%}is the** choice.

   {# 假设这是一个导航菜单，不希望<li>之间有空行 #}
   <ul class="main-nav">
       {%- navList navs -%}
           {%- for item in navs -%}
               <li{% if item.IsCurrent %} class="active"{% endif %}>
                   <a href="{{- item.Link -}}">{{- item.Title -}}</a>
               </li>
           {%- endfor -%}
       {%- endnavList -%}
   </ul>
   

   The rendered HTML will be:

   <ul class="main-nav"><li class="active"><a href="/home">首页</a></li><li><a href="/about">关于我们</a></li></ul>
   

   Instead of:

   <ul class="main-nav">
   
       <li class="active">
           <a href="/home">首页</a>
       </li>
   
       <li>
           <a href="/about">关于我们</a>
       </li>
   
   </ul>
   

2. Before and after variable outputFor text or HTML fragments that need to be tightly connected,{{- 变量 -}}Ensure there are no extra spaces between them. For example, when you want to concatenate the contents of two variables seamlessly:

   <p>欢迎访问 {{- system.SiteName -}} 的 {{- system.BaseUrl -}}</p>
   

   This will output欢迎访问 AnQiCMS 的 http://www.anqicms.com, rather than what might exist.欢迎访问 AnQiCMS 的 http://www.anqicms.com(There is an extra space in the middle).

3. Inline script or style: If your template includes dynamically generated<script>or<style>tags, and you want the content inside them to be as compact as possible, you can also use{{-and-}}.

Summary

{{- 变量 -}}and{%- 标签 -%}with the hyphen-It is a powerful and exquisite control mechanism for blank characters in the AnQiCMS template engine.It can help us generate cleaner, more compact HTML source code, avoid potential layout issues, and optimize page performance at a micro level.As a website operator or template developer, fully understanding and making good use of this feature will undoubtedly make our AnQiCMS website more efficient and professional.

Frequently Asked Questions (FAQ)

1. When should I prioritize{{- 变量 -}}and{%- 标签 -%}this style controlled by white space?**Answer:**