Shopify Liquid中如何让HTML代码正常解析而非转义显示？

你遇到的问题是Liquid自动转义了变量中的HTML内容，导致<span>标签以实体形式显示而非解析成元素。解决方法很简单，有两种常用方式：

方式一：直接输出原生HTML（推荐） #

如果不需要通过变量拼接，直接在模板中写出HTML标签即可，Liquid不会转义直接编写的HTML：

{% assign price = product.price | money %}
ADD TO CART <span class='Button__SeparatorDot'></span> {{ price }}

方式二：使用raw过滤器让变量中的HTML生效 #

如果必须通过capture拼接字符串，输出时给变量加上raw过滤器，告诉Liquid不要转义其中的HTML内容：

{% assign price = product.price | money %}
{% capture dot_separator %} <span class='Button__SeparatorDot'></span> {% endcapture %}
{% capture addToCartText %} ADD TO CART {{ dot_separator }} {{ price }} {% endcapture %}
 
{{ addToCartText | raw }}

（注：你代码中product_price_formatted未定义，已替换为前面赋值的price变量）

原理说明 #

Liquid默认会对变量输出的内容进行HTML转义，目的是防范XSS攻击。当你确认变量中的HTML是安全可信的（比如自己编写的样式标签），就可以用raw过滤器强制Liquid解析其中的HTML代码。

内容的提问来源于stack exchange，提问作者Hiba abdel karim