如何将Liquid的my_page.title参数传递给JS函数smoothlyScrollToSection？

这问题我之前也碰到过！核心问题是你直接把my_page.title这个模板变量塞进JS函数参数时，生成的代码里字符串没有被引号包裹，JS会把它当作未定义的变量而非字符串，自然就没法正常工作了。下面给你两个可行的解决思路：

方案1：给参数添加转义后的引号 #

直接在模板里给变量包裹单引号，同时处理可能存在的单引号转义，避免破坏JS代码结构：

<a class="page-link" onclick="return smoothlyScrollToSection('{{ my_page.title | escape | replace:"'", "\\'" }}')">{{ my_page.title | escape }}</a>

• escape先处理HTML特殊字符，避免XSS风险和渲染错误
• replace:"'", "\\'"把标题里的单引号转义成\'，防止它闭合我们外层的单引号，导致JS语法错误

方案2：使用data属性传递（更优雅稳妥） #

把标题存到元素的data属性里，再通过JS读取这个属性值，这样完全不用纠结引号转义的问题：

<a class="page-link" data-section-title="{{ my_page.title | escape }}" onclick="return smoothlyScrollToSection(this.dataset.sectionTitle)">{{ my_page.title | escape }}</a>

这种方法更符合现代前端实践，尤其是当标题里包含各种特殊字符（比如双引号、反斜杠）时，data属性会自动帮你处理好这些情况，代码可读性也更高。

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