如何在Shopify Liquid中使用JavaScript变量？类似Vue.js的实现方式

原代码无法生效的核心原因是执行顺序冲突：Liquid是服务器端渲染模板，页面发送到浏览器前就会把{{year}}解析成对应值（此时JS还没执行，year变量不存在，所以会渲染成空）；而JS是在浏览器加载页面后才执行，这时候已经没法修改之前Liquid渲染好的内容了。

下面提供两种可行的解决思路：

思路一：用Liquid服务器端逻辑处理（优先推荐） #

如果你的Liquid环境支持获取请求的域名（比如Shopify、Jekyll等多数主流平台），直接在服务器端完成判断，渲染出最终内容：

{% assign current_host = request.host %}
<div>this is {% if current_host == 'stackoverflow.com' %}good{% else %}nood{% endif %}</div>

这种方式页面加载完成后直接显示正确内容，无需客户端额外处理。

思路二：用客户端JS动态修改DOM #

如果必须在客户端判断域名（比如服务器端无法获取请求域名），可以先渲染一个占位容器，再用JS更新内容：

<div id="year-content">this is </div>

<script>
var yearText = '';
if (location.hostname === 'stackoverflow.com') {
  yearText = 'good';
} else {
  yearText = 'nood';
}
// 找到容器并追加文本
document.getElementById('year-content').textContent += yearText;
</script>

这种方式让JS在浏览器端执行时，直接修改页面DOM元素的内容，达到预期效果。

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