1

我的博客文章的基本 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 中指定的值。

液体给出以下选项:

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

有没有办法在 html 标签中使用它?就我而言,我期望这样的事情:

 {% for post in site.posts %}

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

1 回答 1

1

在这里,我看到了四个案例:

  • post.origin前面不存在: post.origin == null
  • post.origin存在于前面,但未设置 ( post.origin:) => post.origin == null`
  • post.origin出现在前面,但设置为空字符串 ( post.origin: "") =>post.origin == ""
  • post.origin出现在前面的内容中,并设置为有效字符串 ( post.origin: "toto") =>post.origin == "toto"

结果符合Truthy 和 falsy Liquid 文档

从那里,使用逻辑流动运算符,我们可以建立一个条件,如:

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

请注意,这post.origin意味着post.origin != null.

于 2018-05-31T10:35:01.643 回答