Item.Image 未在 Jekyll 中显示
Item.Image not displaying in Jekyll
我在 /_works/ 中有一堆作品集帖子,封面看起来像这样:
title: "Rock in Rio Lisbon 2018"
date: July, 2018
image: "/assets/images/work/rock-in-rio-lisbon-2018.jpg"
categories:
- Intro
slides:
- title: "Rock in Rio Lisbon 2018 Headliner Show for Bruno Mars, Katy Perry, Muse & The Killers"
id: "O-rZ6IFnv9g"
override: true
在主页上,我使用 Slides.ID 自动抓取 YouTube 视频的缩略图。如果 front matter 包含 Override: true 它应该显示我定义为图像的内容。这是我所拥有的:
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>
{% if item.override %}
{% for item in item.slides limit:1 %}
<img alt="A frame from a video of {{ item.title }}" loading="lazy" src="{{ site.url }}{{ item.image }}" />
{% endfor %}
{% else %}
{% for item in item.slides limit:1 %}
<img alt="A frame from a video of {{ item.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ item.id }}/sddefault.jpg" />
{% endfor %}
{% endif %}
<div class='overlay'>
<div class='thumb-info'>
<h3>{{ item.title }}</h3>
<p>{{ item.categories | sort | join:" • " | escape }}</p>
<p>{{ item.image }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
当 Jekyll 编译时,{{ item.image }}
不工作……但是,如果我将它与 {{ item.title }}
交换它就可以工作。知道为什么会这样吗?
您在幻灯片中重用了 'item' 变量,这会覆盖它。循环播放幻灯片时,将变量 'item' 重命名为 'slide',如下所示:
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>
{% if item.override %}
{% for slide in item.slides limit:1 %}
<img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="{{ site.url }}{{ slide.image }}" />
{% endfor %}
{% else %}
{% for slide in item.slides limit:1 %}
<img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ slide.id }}/sddefault.jpg" />
{% endfor %}
{% endif %}
<div class='overlay'>
<div class='thumb-info'>
<h3>{{ item.title }}</h3>
<p>{{ item.categories | sort | join:" • " | escape }}</p>
<p>{{ item.image }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
我在 /_works/ 中有一堆作品集帖子,封面看起来像这样:
title: "Rock in Rio Lisbon 2018"
date: July, 2018
image: "/assets/images/work/rock-in-rio-lisbon-2018.jpg"
categories:
- Intro
slides:
- title: "Rock in Rio Lisbon 2018 Headliner Show for Bruno Mars, Katy Perry, Muse & The Killers"
id: "O-rZ6IFnv9g"
override: true
在主页上,我使用 Slides.ID 自动抓取 YouTube 视频的缩略图。如果 front matter 包含 Override: true 它应该显示我定义为图像的内容。这是我所拥有的:
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>
{% if item.override %}
{% for item in item.slides limit:1 %}
<img alt="A frame from a video of {{ item.title }}" loading="lazy" src="{{ site.url }}{{ item.image }}" />
{% endfor %}
{% else %}
{% for item in item.slides limit:1 %}
<img alt="A frame from a video of {{ item.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ item.id }}/sddefault.jpg" />
{% endfor %}
{% endif %}
<div class='overlay'>
<div class='thumb-info'>
<h3>{{ item.title }}</h3>
<p>{{ item.categories | sort | join:" • " | escape }}</p>
<p>{{ item.image }}</p>
</div>
</div>
</a>
</li>
{% endfor %}
当 Jekyll 编译时,{{ item.image }}
不工作……但是,如果我将它与 {{ item.title }}
交换它就可以工作。知道为什么会这样吗?
您在幻灯片中重用了 'item' 变量,这会覆盖它。循环播放幻灯片时,将变量 'item' 重命名为 'slide',如下所示:
{% assign works = site.works | reverse %}
{% for item in works limit:9 %}
<li class="{% cycle 'wide','','','','','','','','' %}">
<a href='{{ site.url }}{{ item.url }}'>
{% if item.override %}
{% for slide in item.slides limit:1 %}
<img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="{{ site.url }}{{ slide.image }}" />
{% endfor %}
{% else %}
{% for slide in item.slides limit:1 %}
<img alt="A frame from a video of {{ slide.title }}" loading="lazy" src="https://img.youtube.com/vi/{{ slide.id }}/sddefault.jpg" />
{% endfor %}
{% endif %}
<div class='overlay'>
<div class='thumb-info'>
<h3>{{ item.title }}</h3>
<p>{{ item.categories | sort | join:" • " | escape }}</p>
<p>{{ item.image }}</p>
</div>
</div>
</a>
</li>
{% endfor %}