jekyll - 在 Jekyll 中，如何获取帖子的第一张图片？

Question

在我的博客文章索引中，我想从文章中获取第一张图片，以仅使用液体将其显示在索引中，以便它可以在 github 页面上使用。

我有一种感觉 split 是要走的路，但我不擅长液体。

我希望能够获取图像 url 并将其放入变量中以对其进行样式设置。

理想的解决方案是这样的:

{% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{post.content | first_image}}</a>
    </li>
  {% endfor %}

有任何想法吗？

Answer 1

您可以为您的 Front Matter 定义一个名为“image”的自定义变量，因此它会像 Wordpress 的帖子特色图片一样工作:

---
image: featured-image.jpg
---

请注意记住您的图像保存在哪里。就我而言，我创建了一个名为“imagens”的目录(此处为 PT-BR)。然后，转到您的 index.html 并将图像添加到您的模板中，无论您想要什么。在我的网站中，它看起来像这样:

<ul class="post-list">
    {% for post in site.posts %}
      <li>
        <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }},</span>
        <span class="post-meta">por</span>
        <span class="post-meta">{{ post.author }}</span>
      </li>

      //IMAGE
      <img src="{{ site.baseurl }}/imagens/{{ post.image }}">
      //IMAGE


      {{ post.excerpt }}
      <a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>
    {% endfor %}
  </ul>

就是这样。