如何用NodeJS的jQuery为Shopify模板条件渲染元素添加span占位符

我明白你遇到的麻烦了——在NodeJS环境里把Shopify的模板字符串转成jQuery对象后，那些被Liquid条件标签（{% if collection %}、{% unless product == empty %}）包裹的元素根本找不到，更别说添加span占位符了。这其实是因为Liquid模板标签在Node环境下不会被解析，它们只是普通的文本内容，所以jQuery/cheerio没办法识别里面的HTML结构。

下面我给你一套可行的解决方案，用cheerio（Node环境下最常用的HTML解析库，和jQuery语法几乎一致）来处理：

核心思路 #

因为Liquid条件块里的HTML在原始字符串中是被模板标签包裹的，我们需要先把这些条件块内的HTML内容单独提取出来，转成可操作的DOM对象，添加完span后再把Liquid标签重新包裹回去，保证模板的完整性。

具体代码实现 #

首先如果你还没装cheerio，先安装：

npm install cheerio

然后用下面的代码处理你的模板：

const cheerio = require('cheerio');

// 你的原始Shopify模板字符串
const productTemplate = `
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true"> 
<meta itemprop="name" content="{{ product.title }}"> 
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}"> 
</div> 
{% if collection %} 
<p class="text-center return-link-wrapper"> 
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link"> 
{% include 'icon-arrow-left' %} {{ 'products.product.back_to_collection' | t: title: collection.title }} 
</a> 
</p> 
{% endif %} 
{% unless product == empty %} 
<span id="ProductJson-{{ section.id }}"> 
{{ product | json }} 
</span> 
{% endunless %}
`;

// 1. 提取各个条件块内的HTML内容
// 提取{% if collection %}和{% endif %}之间的HTML
const collectionBlock = productTemplate.match(/{% if collection %}\s*([\s\S]*?)\s*{% endif %}/);
const collectionInnerHtml = collectionBlock ? collectionBlock[1] : '';

// 提取{% unless product == empty %}和{% endunless %}之间的HTML
const productBlock = productTemplate.match(/{% unless product == empty %}\s*([\s\S]*?)\s*{% endunless %}/);
const productInnerHtml = productBlock ? productBlock[1] : '';

// 提取product-template__container的div部分
const containerHtml = productTemplate.match(/<div class="product-template__container[^>]*>[\s\S]*?<\/div>/)[0];

// 2. 将各部分转为cheerio可操作的DOM对象
const $container = cheerio.load(containerHtml);
const $collectionP = cheerio.load(collectionInnerHtml);
const $productSpan = cheerio.load(productInnerHtml);

// 3. 添加对应的span占位符
// 给product-template__container内部加span
$container('.product-template__container').append('<span class="placeholder-container"></span>');

// 给if collection的p标签内部加span
$collectionP('.return-link-wrapper').append('<span class="placeholder-collection"></span>');

// 给unless product empty的span内部加span
$productSpan('#ProductJson-{{ section.id }}').append('<span class="placeholder-product"></span>');

// 4. 重新组合成完整的模板字符串
const finalTemplate = 
  $container.html() + '\n' +
  (collectionInnerHtml ? `{% if collection %}\n${$collectionP.html()}\n{% endif %}` : '') + '\n' +
  (productInnerHtml ? `{% unless product == empty %}\n${$productSpan.html()}\n{% endunless %}` : '');

// 输出处理后的模板
console.log(finalTemplate);

代码说明 #

• 我们用正则表达式精准提取每个Liquid条件块内的HTML内容，这样就能单独处理这些部分的DOM结构了
• 处理完每个部分的span添加后，再把Liquid的条件标签重新包裹回去，确保模板在Shopify环境中能正常渲染
• 如果你用的是Node环境的jquery包而不是cheerio，逻辑完全一样，只是加载HTML的方式略有区别

内容的提问来源于stack exchange，提问作者Azher