如何移除Shopify商店Liquid代码生成的多余空行？

你之前使用replace、strip未生效的核心原因是：这类过滤器仅作用于局部内容，无法处理Liquid多模板、片段渲染拼接过程中产生的空白，可通过以下两种方案解决：

方案1：原生Liquid空白控制语法（推荐，不影响代码可读性） #

Liquid原生支持在标签首尾添加-去除对应方向的空白/空行，适配所有Liquid标签（逻辑标签、变量输出标签都支持）：

• 逻辑标签用法：将{% xxx %}改为{%- xxx -%}，可去除该标签前后所有的空行、缩进空白
• 变量输出用法：将{{ xxx }}改为{{- xxx -}}，可去除变量输出前后的空白

示例代码：

<!-- 修改前，渲染后会产生大量空行 -->
{% for product in collections.frontpage.products %}
  <div class="card">
    {{ product.title }}
    <span>{{ product.price | money }}</span>
  </div>
{% endfor %}

<!-- 修改后，无多余空行输出 -->
{%- for product in collections.frontpage.products -%}
  <div class="card">
    {{- product.title -}}
    <span>{{- product.price | money -}}</span>
  </div>
{%- endfor -%}

如果不需要去除两端的空白，也可以仅在单侧加-，比如{%- if %}只去除标签前的空白，{% if -%}只去除标签后的空白。

方案2：全局内容捕获后批量处理（适合不想逐行修改模板的场景） #

直接在主题根模板theme.liquid中把所有页面内容包裹进捕获标签，统一处理空白后再输出：

{%- capture full_page_output -%}
<!-- 此处放置原来theme.liquid的全部代码，包含content_for_layout输出 -->
<!DOCTYPE html>
<html lang="{{ shop.locale }}">
<head>
  {%- render 'meta-tags' -%}
  {{ content_for_header }}
</head>
<body>
  {%- section 'header' -%}
  <main role="main">
    {{ content_for_layout }}
  </main>
  {%- section 'footer' -%}
</body>
</html>
{%- endcapture -%}
{{- full_page_output | strip | replace: '\n\n', '\n' | replace: '  ', ' ' -}}

如果你的站点有<pre>、<code>这类需要保留空格换行的标签，可以先把对应标签内容暂存，处理完其余内容后再还原，避免破坏格式。

内容的提问来源于stack exchange，提问作者Berk B.