Shopify Schema区块数据属性传JS 多词字符串截断问题如何修复

核心问题是Liquid输出HTML自定义属性时，没有给属性值包裹双引号。浏览器解析不带引号的属性值时，遇到空格就会判定属性值结束，后面的内容会被识别为独立的无效属性，所以只能读取到第一个单词。

• 第一步：修改Liquid文件中的属性写法，给data-quote的值加上双引号，同时添加escape过滤器处理内容中的特殊字符（比如引号、尖括号），避免破坏HTML结构：
  修改前代码：

<li class="press-slider-item" data-quote={{block.settings.quote}} {{ block.shopify_attributes }}>

修改后代码：

<li class="press-slider-item" data-quote="{{ block.settings.quote | escape }}" {{ block.shopify_attributes }}>

• 第二步：原有JS逻辑无需改动，修改后slide.dataset.quote就可以正常读取到完整的多词字符串。

你可以修改后打开浏览器开发者工具查看元素，能看到data-quote属性的值是完整被双引号包裹的字符串，就说明修复生效。

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