如何在Jekyll中为HTML标签条件添加data-origin属性

我懂你现在在处理Jekyll文章列表模板时遇到的小困扰：部分文章的origin字段是空的（只写了origin:），你希望只有当这个字段有实际值的时候，才给<li>标签加上data-origin属性，而且想直接在标签内部用Liquid的条件语法实现，对吧？

当然可以这么做！Liquid完全支持在HTML标签的属性位置嵌入条件判断逻辑，你想要的写法几乎是正确的，只需要微调一下条件判断的规则，就能精准识别origin是否有有效值。

给你整理好的最终可用代码：

{% for post in site.posts %}
  <li 
    data-title='{{ post.title }}' 
    {% if post.origin != blank %}data-origin="{{ post.origin }}"{% endif %}
    data-src="{{ post.src | prepend: relative_url}}" 
    data-content='{ "ingredients": {{ post.ingredients | jsonify }} }'
  >
    <a href="{{ site.baseurl }}{{ post.url }}">
      <img src="{{ post.src | prepend: relative_url }}" alt="{{ post.title }}"/>
    </a>
  </li>
{% endfor %}

逻辑说明： #

这里用{% if post.origin != blank %}作为判断条件——当你在YAML Front Matter里只写origin:时，这个变量在Liquid中会被识别为blank（空值），这个条件就能精准过滤掉这类情况，只有当origin有实际内容时，才会输出data-origin属性。

如果你的场景中存在部分文章根本没定义origin字段的情况，也可以直接用{% if post.origin %}来判断，它会同时处理“字段未定义”和“字段为空”两种情况。不过根据你的描述，所有文章都有origin字段（哪怕是空的），所以!= blank的判断会更贴合你的需求。

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