如何根据当前页面变量显示来自 Jekyll 数据文件的数据
How to display data from Jekyll data file based on current page variable
问题
我的 Jekyll 站点上有一个 div
,我想在其中显示从 _data/book-data.yml
生成的数据,例如:
- name: johnson-everything-under
title: Everything Under
author: Daisy Johnson
publisher: Faber & Faber
pub-date: 12/12/2012
- name: johnson-train-dreams
title: Train Dreams
author: Denis Johsnon
publisher: Granta
pub-date: 01/01/2001
我正在尝试找到一种方法来显示对应于相关页面的数据(每本书条目都有不同的页面),我认为如果 name
键对应,这可能是可能的page.url
或其他一些页面变量。
我试过的
在工作页面上,我有一个 include
,其中包含以下 HTML:
<div class="book-meta">
{% if page.category == "reviews"%}
<div class="book-thumbnail">
<img class="post-thumbnail-lg" src="{{ site.baseurl }}/assets/images/{{ page.thumbnail }}" alt="{{ page.thumbnail }}">
</div>
{% for book in site.data.book-data %}
<div class="book-details">
<ul class="book-meta-list">
<li class="book-meta-item"><p><a href="#">{{ book.author }}</a></p></li>
<li class="book-meta-item"><p><em>{{ book.title }}</em></p></li>
<li class="book-meta-item"><p>{{ book.publisher }}</p></li>
<li class="book-meta-item"><p>{{ book.pub-date }}</p></li>
</ul>
</div>
{% endfor %}
{% endif %}
</div>
CSS 并不重要,但是目前上面 HTML 的输出是:
期望的输出
如您所见,输出包含 .yml
文件中的两个元数据块。我想找到一种方法,以便只显示相关的数据块(本例中的第一个块):
可能的解决方案
我认为可能有一种方法可以将 page.variable
与 YAML 块名称相匹配,以便只输出正确的书籍数据。大致如下:
{% assign url_substring = page.url | split, '/' | last %}
// url_substring = johnson-everything-under
{% for book in site.data.book-data %}
{% if url_substring == book.name %}
// = true
<p>{{ book.title }}<p>
{% endif %}
{% endfor %}
除了我无法让它正常工作之外,我还可以看到 liquid 标签 {{ book.title }}
无法知道要输出哪个书名,即使 page.url
匹配。
我不确定我是否走在正确的轨道上,所以如果有人对如何实现这一点有任何其他建议,我很想听听。提前致谢。
您可以使用 Jekyll 的 where
过滤器和智能包含:
{% assign book = site.data.book-data | where: 'title', include.title | first %}
<div class="book-meta">
<div class="book-thumbnail">
<img
class="post-thumbnail-lg"
src="{{ book.thumbnail | prepend: 'assets/images/' | relative_url }}"
alt="{{ book.title }}"
/>
</div>
<div class="book-details">
<ul class="book-meta-list">
<li class="book-meta-item"><p><a href="#">{{ book.author }}</a></p></li>
<li class="book-meta-item"><p><em>{{ book.title }}</em></p></li>
<li class="book-meta-item"><p>{{ book.publisher }}</p></li>
<li class="book-meta-item"><p>{{ book.pub-date }}</p></li>
</ul>
</div>
</div>
请注意,我还在数据文件中包含了 thumbnail
信息..
然后只需将 title
参数传递给 include(在您的图书页面的布局中):
{% include books.html title = 'Everything Under' %}
如果您想渲染 "listing",则只需循环并渲染:
{% for book in site.data.book-data %}
{% include books.html title = book.title %}
{% endfor %}
问题
我的 Jekyll 站点上有一个 div
,我想在其中显示从 _data/book-data.yml
生成的数据,例如:
- name: johnson-everything-under
title: Everything Under
author: Daisy Johnson
publisher: Faber & Faber
pub-date: 12/12/2012
- name: johnson-train-dreams
title: Train Dreams
author: Denis Johsnon
publisher: Granta
pub-date: 01/01/2001
我正在尝试找到一种方法来显示对应于相关页面的数据(每本书条目都有不同的页面),我认为如果 name
键对应,这可能是可能的page.url
或其他一些页面变量。
我试过的
在工作页面上,我有一个 include
,其中包含以下 HTML:
<div class="book-meta">
{% if page.category == "reviews"%}
<div class="book-thumbnail">
<img class="post-thumbnail-lg" src="{{ site.baseurl }}/assets/images/{{ page.thumbnail }}" alt="{{ page.thumbnail }}">
</div>
{% for book in site.data.book-data %}
<div class="book-details">
<ul class="book-meta-list">
<li class="book-meta-item"><p><a href="#">{{ book.author }}</a></p></li>
<li class="book-meta-item"><p><em>{{ book.title }}</em></p></li>
<li class="book-meta-item"><p>{{ book.publisher }}</p></li>
<li class="book-meta-item"><p>{{ book.pub-date }}</p></li>
</ul>
</div>
{% endfor %}
{% endif %}
</div>
CSS 并不重要,但是目前上面 HTML 的输出是:
期望的输出
如您所见,输出包含 .yml
文件中的两个元数据块。我想找到一种方法,以便只显示相关的数据块(本例中的第一个块):
可能的解决方案
我认为可能有一种方法可以将 page.variable
与 YAML 块名称相匹配,以便只输出正确的书籍数据。大致如下:
{% assign url_substring = page.url | split, '/' | last %}
// url_substring = johnson-everything-under
{% for book in site.data.book-data %}
{% if url_substring == book.name %}
// = true
<p>{{ book.title }}<p>
{% endif %}
{% endfor %}
除了我无法让它正常工作之外,我还可以看到 liquid 标签 {{ book.title }}
无法知道要输出哪个书名,即使 page.url
匹配。
我不确定我是否走在正确的轨道上,所以如果有人对如何实现这一点有任何其他建议,我很想听听。提前致谢。
您可以使用 Jekyll 的 where
过滤器和智能包含:
{% assign book = site.data.book-data | where: 'title', include.title | first %}
<div class="book-meta">
<div class="book-thumbnail">
<img
class="post-thumbnail-lg"
src="{{ book.thumbnail | prepend: 'assets/images/' | relative_url }}"
alt="{{ book.title }}"
/>
</div>
<div class="book-details">
<ul class="book-meta-list">
<li class="book-meta-item"><p><a href="#">{{ book.author }}</a></p></li>
<li class="book-meta-item"><p><em>{{ book.title }}</em></p></li>
<li class="book-meta-item"><p>{{ book.publisher }}</p></li>
<li class="book-meta-item"><p>{{ book.pub-date }}</p></li>
</ul>
</div>
</div>
请注意,我还在数据文件中包含了 thumbnail
信息..
然后只需将 title
参数传递给 include(在您的图书页面的布局中):
{% include books.html title = 'Everything Under' %}
如果您想渲染 "listing",则只需循环并渲染:
{% for book in site.data.book-data %}
{% include books.html title = book.title %}
{% endfor %}