如何将Shopify Liquid中render内部变量传递到外部？

核心特性说明 #

render是作用域隔离的，内部定义的变量默认无法被外部模板访问，这是Shopify为模板模块化设计的特性，和include废弃无关——哪怕include未被废弃，官方现在也主推render，只是include过去采用共享作用域，而render是隔离作用域。

让外部访问内部变量的两种方法 #

1. 使用return标签返回变量 #

子模板中可以通过{% return %}标签将变量传递给调用方，调用时用{% assign %}接收返回值即可。

简单示例：

• test.liquid代码：

{% assign test_xyz = '123abc' %}
{% return test_xyz %}

• template.liquid调用代码：

{% assign received_val = render 'test' %}
{{ received_val }} <!-- 输出123abc -->

需要返回多个变量时，可将变量打包成对象：

• test.liquid代码：

{% assign result = {
  'xyz': '123abc',
  'foo': 'bar'
} %}
{% return result %}

• template.liquid调用代码：

{% assign get_data = render 'test' %}
{{ get_data.xyz }} <!-- 输出123abc -->
{{ get_data.foo }} <!-- 输出bar -->

2. 通过context参数反向传递 #

若需要在子模板中修改外部变量，调用render时传递一个空对象作为context参数，子模板中对该对象属性的修改会同步到外部。

示例：

• template.liquid代码：

{% assign outer_data = {} %}
{% render 'test', context: outer_data %}
{{ outer_data.test_xyz }} <!-- 输出123abc -->

• test.liquid代码：

{% assign context.test_xyz = '123abc' %}

关于Render的返回内容 #

render本身会直接输出子模板中的内容（如HTML、文本），同时结合return标签可额外传递变量。需要注意：如果子模板既有输出内容又有return语句，assign接收的是return的值，而子模板的输出内容会直接渲染在调用位置。

示例：

• test.liquid代码：

<p>子模板的内容会直接显示</p>
{% assign test_xyz = '123abc' %}
{% return test_xyz %}

• template.liquid调用代码：

{% assign get_val = render 'test' %}
<!-- 先渲染<p>子模板的内容会直接显示</p> -->
{{ get_val }} <!-- 再输出123abc -->

内容的提问来源于stack exchange，提问作者datasn.io