在使用 AnQiCMS 进行网站模板开发时，我们经常会遇到一个细节问题，那就是模板中逻辑标签（如 if 条件判断、for 循环）在渲染输出 HTML 内容时，有时会额外生成一些不必要的空行或换行符。这些看似无害的空白，虽然通常不影响页面最终的视觉呈现，但在某些对代码整洁度有高要求或需要精确控制元素间距的场景下，它们可能会带来一些小麻烦，比如影响 HTML 源代码的阅读体验，甚至在极少数情况下可能导致布局上的细微差异（特别是当使用 display: inline-block 等样式时）。
幸运的是，AnQiCMS 提供了一个简洁而强大的机制来解决这个问题，那就是在模板标签中运用 remove 标签，通过一个简单的 - 字符来消除这些多余的空白。
为什么会出现多余的空行或换行符？
当我们在编写 AnQiCMS 模板时，为了代码的可读性和维护性，通常会将逻辑标签放置在独立的行上，并进行适当的缩进。例如：
<nav>
{% if user.IsLoggedIn %}
<a href="/profile">个人中心</a>
{% else %}
<a href="/login">登录</a>
{% endif %}
</nav>
在模板引擎处理这段代码时，{% if ... %}、{% else %} 和 {% endif %} 这些标签本身并不会在最终的 HTML 中生成任何可见内容。然而，它们所在的行以及它们与实际内容之间的换行，在默认情况下可能会被保留下来，导致在最终渲染的 HTML 源代码中出现额外的空行：
<nav>
<a href="/profile">个人中心</a>
</nav>
可以看到，在 nav 标签内部，以及链接的前后，都出现了不必要的换行。
巧妙运用 remove 标签消除空白
AnQiCMS 模板引擎允许我们在逻辑标签的起始或结束标记内部，紧邻 {% 或 %} 的位置，添加一个减号 - 来控制其周围的空白输出。
消除标签前的空白：
{%-在标签的起始标记{%后面立即加上-，即{%-，这会告诉模板引擎移除此标签之前的所有空白字符（包括换行符）。消除标签后的空白：
-%}在标签的结束标记%}之前立即加上-，即-%}，这会告诉模板引擎移除此标签之后的所有空白字符（包括换行符）。
我们可以根据需要单独使用 {%- 或 -%}，也可以两者结合使用，以达到最紧凑的输出效果。
让我们通过几个实际例子来看看它的魔力：
示例一：条件判断中的空白消除
回到之前的导航示例，如果希望消除 if 条件块周围的空行，可以这样修改：
<nav>
{%- if user.IsLoggedIn -%}
<a href="/profile">个人中心</a>
{%- else -%}
<a href="/login">登录</a>
{%- endif -%}
</nav>
经过这样的处理，如果 user.IsLoggedIn 为真，那么渲染出的 HTML 可能会更加紧凑：
<nav>
<a href="/profile">个人中心</a>
</nav>
这样不仅让 HTML 源码看起来更整洁，也消除了潜在的间距问题。
示例二：循环中的空白控制
在 for 循环中，我们也常常需要控制每个循环项的输出格式。考虑一个产品列表：
<ul class="product-list">
{% for product in products %}
<li class="product-item">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}">
<h3>{{ product.Title }}</h3>
</li>
{% endfor %}
</ul>
默认情况下，每次循环都会在新行开始，{% for ... %} 和 {% endfor %} 标签自身也会贡献空行，导致输出可能如下：
<ul class="product-list">
<li class="product-item">
<img src="/thumb1.jpg" alt="产品1">
<h3>产品1</h3>
</li>
<li class="product-item">
<img src="/thumb2.jpg" alt="产品2">
<h3>产品2</h3>
</li>
</ul>
要消除循环标签本身产生的空行，同时保留每个 <li> 元素的独立行以保持可读性，我们可以这样做：
<ul class="product-list">
{%- for product in products -%}
<li class="product-item">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}">
<h3>{{ product.Title }}</h3>
</li>
{%- endfor -%}
</ul>
这样，HTML 结构将变得更加紧凑，而每个 <li> 仍然保持在独立行上：
<ul class="product-list">
<li class="product-item">
<img src="/thumb1.jpg" alt="产品1">
<h3>产品1</h3>
</li>
<li class="product-item">
<img src="/thumb2.jpg" alt="产品2">
<h3>产品2</h3>
</li>
</ul>
如果需要更极致的紧凑，例如将所有列表项渲染在一行，那可以对内容标签也使用 -：
<ul class="inline-list">{%- for item in items -%}{{- item.Title -}}{%- endfor -%}</ul>
这样生成的 HTML 将是：
<ul class="inline-list">标题1标题2标题3</ul>
这种极度压缩的用法，通常仅在非常特殊的布局需求或性能优化（减少文件大小）的场景下考虑。
实践中的考量
掌握 remove 标签的使用，能让我们在 AnQiCMS 模板开发中更加得心应手