Shopify 主题与 Liquid

Liquid escape 与 strip_html 用反导致乱码

现象#

商品描述在详情页要么把 b 标签当成文字显示,要么整段标签消失只剩纯文本;搜索结果摘要里还出现 < 这种双重转义。

原因#

  • escape 把尖括号与 & 转成 HTML 实体,适合输出到属性或纯文本位置
  • strip_html 直接删掉标签保留文字,适合摘要和 meta description
  • 两者顺序颠倒会先转义再删标签,标签已变成实体而删不掉
  • 同一段内容既输出到富文本容器又写进属性,却共用了同一个过滤器

处理步骤#

  1. 富文本正文直接输出 {{ product.description }},不要再加 escape
  2. 生成摘要用 {{ product.description | strip_html | truncate: 160 }}
  3. 写进 alt、value 等属性时用 | escape,不要叠加 strip_html
  4. 需要保留部分标签时先 truncatewords 再 strip_html,顺序不能反
  5. 保存后查看页面源码,搜索 < 确认没有二次转义

验收标准#

商品详情页粗体正常渲染,源码中描述区域没有实体化标签;搜索摘要为纯文本且长度不超过 160 个字符。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。