if-statement - 在 Jekyll 中有条件地添加数据属性
问题描述
我的博客文章的基本 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 %}
解决方案
在这里,我看到了四个案例:
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"
从那里,使用逻辑流动运算符,我们可以建立一个条件,如:
<li
{% if post.origin and post.origin != "" %}
data-origin="{{ post.origin }}"{% endif %}>
</li>
请注意,这post.origin
意味着post.origin != null
.
推荐阅读
- php - 为什么我的 laravel 项目将@extends、@yield 和@section 显示为纯文本?
- python-3.x - pip3 install 没有在我的 docker 镜像中安装任何东西
- javascript - 数组部分的总和 - JavaScript
- html - 使 WolframAlpha iframe 重定向到网站
- php - 由于在 for 循环中加入查询,页面加载时间很长
- build - 无法创建目录“{p}”。无法验证目录是否存在:“{testDir}”
- angular - 仅在 e2e 测试中使用 Angular CLI 应用程序包含静态 html 文件
- android - 将 Json 和标头发布到 REST api KOTLIN
- java - Accept-Language 标头和 ResourceBundle 之间缺少功能
- react-hooks - 输入值数组上的 useState 移除焦点