Liquid代码疑问：对象引号包裹原因及宽高拼接px方法

1. 为什么Liquid对象{{ news.image }}被引号包裹？ #

这其实是错误的写法。在Liquid标签（比如这里的{% pic %}）中传递变量时，直接写变量名即可，不需要用引号包裹。如果加了引号，{% pic '{{ news.image }}' %}会被Liquid解释为把字面量字符串'{{ news.image }}'传给pic标签，而不是解析news.image变量的实际值——这会导致图片路径完全错误，根本加载不出图片。

正确的写法应该是去掉引号，直接传递变量：

{% pic news.image %}

2. 如何将width和height的数值与px拼接？ #

你当前用的join过滤器是错的，join是用来把数组元素拼接成字符串的，而width/height都是单个数值变量，完全不适用。

Liquid支持直接把数值和字符串拼接，只需要写成{{ width }}px、{{ height }}px即可——Liquid会自动把数值类型转换成字符串，再和px拼接。

另外还要注意：你的style属性写法不符合CSS语法，属性之间需要用分号分隔，属性名和值之间是冒号（不是等号），而且background-image的url后面要加分号。

修正后的完整代码 #

{% for news in page.carousel %}
  {% assign width = 1920 %}
  {% assign height = width | times: 20 | divided_by: 100 | times: 140 | divided_by: 100 %}
  <div class="item img-cover img-fixed {% if forloop.first %}active{% endif %}" 
       style="background-image: url({% pic news.image %}); width: {{ width }}px; height: {{ height }}px;">
    <h2>{{ news.text }}</h2>
  </div>
{% endfor %}

我把代码做了换行格式化，可读性更强，同时修复了所有语法错误：

• 去掉了{% pic %}里的多余引号
• 把错误的join替换成直接拼接px的写法
• 修正了style属性里的CSS语法（用冒号、分号分隔属性）

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