如何根据当前页面变量显示来自 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 %}