如何在一个Liquid文件中访问另一个Liquid文件的JSON数据？

问题原因 #

你当前的vars.liquid只是直接输出前端JS代码，这些代码在Liquid模板编译阶段不会被识别为Liquid上下文的变量，因此main.liquid里的vars.config无法获取到对应值，返回null。

解决方案 #

需要在vars.liquid中通过Liquid语法定义变量，让变量进入Liquid上下文，这样render后才能被外部访问。

修改后的vars.liquid

{%- assign config = {
  "key1": "value1",
  "key2": "value2"
} -%}

<!-- 如果需要同时在前端生成config变量，保留以下代码；不需要则可删除 -->
<script>
  var config = {{ config | json }};
</script>

修改后的main.liquid

{%- render 'vars' -%}
<script>
  // 注意：不要用单引号包裹，json过滤器已处理引号，直接输出会得到JS对象
  var config = {{ vars.config | json }};
</script>

关键说明 #

1. 使用Liquid的{% assign %}标签在模板上下文定义config变量，而非仅输出客户端JS。
2. 通过render调用片段后，片段内定义的变量会被挂载到vars对象下，因此可以用vars.config访问。
3. json过滤器会自动将Liquid对象转换为合法的JS对象格式，不需要额外添加单引号，否则会得到字符串类型的JSON而非对象。

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