Question

我对博客文章的基本YAML Front Matter看起来像：

   layout: post
   title:  'Crepes'
   permalink: /crepes/
   src: '/assets/images/crepes.jpg' 
   date:   2018-05-24 21:41:00
   origin: http//...
   ingredients: 
    - ingredient1: amount
    - ingredient2: amount

这是我的index.html来显示条目：

<ul>
{% for post in site.posts %}

<li data-title='{{ post.title }}' data-origin="{{ post.origin }}"
    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 %}
</ul>

问题是： 有些帖子应该没有原始价值，例如origin:。而且我正在寻找一种方法来添加data-origin属性，只有它在YAML Front Matter中指定的值。

Liquid提供以下选项：

{% if condition %}
    <li>....</li>
{% endif %}

有没有办法在html标签内使用它？就我而言，我期待这样的事情：

 {% for post in site.posts %}

 <li  
     {% if post.origin has value %}
         data-origin="{{ post.origin }}"
     {% endif %}">      
</li>
{% endfor %}

Answer 1

我在这里看到四种情况：

post.origin： post.origin == null
post.origin出现在前面的内容中，但没有设置（post.origin:） =＆GT; post.origin == null`
post.origin出现在前面的内容中，但设置为空字符串（post.origin: ""） =＆GT; post.origin == ""
post.origin出现在前面的内容中，并设置为有效的字符串（post.origin: "toto"） =＆GT; post.origin == "toto"

结果符合Truthy and falsy Liquid documentation。

从那里开始，使用logical liquid operators，我们可以建立一个类似的条件：

<li
  {% if post.origin and post.origin != "" %}
     data-origin="{{ post.origin }}"{% endif %}>
</li>

请注意，post.origin表示post.origin != null。

有条件地在Jekyll中添加数据属性

1 个答案: