在Jekyll我如何抓住帖子的第一张图片？

Question

在我的博客文章索引中,我想从帖子中抓取第一张图片,只使用液体在索引中显示它,因此它适用于github页面.

我有一种感觉分裂是要走的路,但我对液体不好.

我希望能够获取图像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>

而已.

Answer 2

一些问题的解决方案:

1 - 使用Post Excerpt标签文档在这里

你的帖子:

---
layout: post
title: Testing images
---
## Title
Intro Text
![Image alt]({{ site.baseurl }}/assets/img/image.jpg "image title")
More intro text

Some more text blah !

你的模板:

<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

由于您的图像标记出现在excerpt_separator(\n \n =两个换行符)之前,它将在摘录后.

2 - 使用帖子的Yaml前端内容来存储图像的数据

发布:

---
layout: post
title: Testing images

images:

  - url: /assets/img/cypripedium-calceolum.jpg
    alt: Cypripedium Calceolum
    title: Cypripedium Calceolum

  - url: /assets/img/hello-bumblebee.jpg
    alt: Hello bumblebee !
    title: Hello bumblebee !
---

Intro here yo ! <-- THIS IS THE EXCERPT

Post body begin, and first image not in excerpt
{% assign image = page.images[0] %} <-- first element of the array is zero
{% include image.html image=image %}

Some more text blah !
{% assign image = page.images[1] %}
{% include image.html image=image %}

_includes/image.html(集中在标准化的包含中,但可以在模板中):

<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}">

索引页面:

<ul class="posts">
  {% for post in site.posts %}
    <li>
      <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
      <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      {{ post.excerpt }}
      {% assign image = post.images[0] %}
      {% include image.html image=image %}
    </li>
  {% endfor %}
</ul>

Answer 3

得到它的工作.不知道它将如何扩展,但这个液体代码循环遍历所有帖子并从帖子中抓取第一张图像的来源并显示该帖子.我用多个图像测试它,它按预期工作.

<ul>
  {% for post in site.posts %}
    <li>

      {% assign foundImage = 0 %}
      {% assign images = post.content | split:"<img " %}
      {% for image in images %}
        {% if image contains 'src' %}

            {% if foundImage == 0 %}
                {% assign html = image | split:"/>" | first %}
                <img {{ html }} />
                {% assign foundImage = 1 %}
            {% endif %}
        {% endif %}
      {% endfor %}

      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>