如何在Shopify Liquid的if语句中使用多for及and与or多条件？

问题场景 #

在CSS中嵌入Liquid if语句时触发语法错误，原代码如下：

grid-template-columns: 1fr 1fr 1fr;
{% if section.settings.video_position == 'top' and (section.settings.video_link != nil or section.settings.video != nil) %}
grid-template-rows: 100px 50vw 2fr 1fr 1fr 1fr;
{% else %}
grid-template-rows: 1fr 2fr 1fr 1fr 1fr;
{% endif %}

错误提示：

Liquid syntax error (line 404): Expected dotdot but found comparison in "section.settings.video_position == 'top' and (section.settings.video_link != nil or section.settings.video != nil)"

用户疑问：如何在Shopify Liquid的if语句中正确使用多个and、or，以及结合使用and与多个or条件？

错误原因与修正方案 #

Liquid的逻辑表达式不支持括号内嵌套多条件判断，这是触发错误的核心原因。以下是几种正确的写法：

写法1：利用逻辑分配律拆分条件 #

把A and (B or C)转换成A and B or A and C，符合Liquid语法规则：

grid-template-columns: 1fr 1fr 1fr;
{% if section.settings.video_position == 'top' and section.settings.video_link != nil or section.settings.video_position == 'top' and section.settings.video != nil %}
grid-template-rows: 100px 50vw 2fr 1fr 1fr 1fr;
{% else %}
grid-template-rows: 1fr 2fr 1fr 1fr 1fr;
{% endif %}

写法2：用变量提前存储嵌套条件 #

对于复杂逻辑，先将内部or的结果存入变量，再进行判断，可读性更强：

grid-template-columns: 1fr 1fr 1fr;
{% assign has_video = section.settings.video_link != nil or section.settings.video != nil %}
{% if section.settings.video_position == 'top' and has_video %}
grid-template-rows: 100px 50vw 2fr 1fr 1fr 1fr;
{% else %}
grid-template-rows: 1fr 2fr 1fr 1fr 1fr;
{% endif %}

写法3：简化非空判断（Liquid风格） #

Liquid中可直接通过变量本身判断是否非空，无需显式写!= nil，代码更简洁：

grid-template-columns: 1fr 1fr 1fr;
{% assign has_video = section.settings.video_link or section.settings.video %}
{% if section.settings.video_position == 'top' and has_video %}
grid-template-rows: 100px 50vw 2fr 1fr 1fr 1fr;
{% else %}
grid-template-rows: 1fr 2fr 1fr 1fr 1fr;
{% endif %}

Liquid多条件逻辑判断规则 #

• 不支持括号嵌套的条件组合，需通过变量拆分或逻辑分配律转换写法。
• and优先级高于or，混合使用时注意运算顺序，必要时用变量明确逻辑分组。
• 判断变量非空时，直接写变量名即可（如section.settings.video_link等价于section.settings.video_link != nil），空字符串、false、nil会被视为假值。

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