在我的博客文章索引中，我想从文章中获取第一张图片，以便仅使用液体将其显示在索引中，这样它就可以在 github 页面上使用。
我有一种感觉分裂是要走的路，但我不擅长液体。
我希望能够获取图像 url 并将其放入变量中以设置样式。
理想的解决方案是这样的：
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{post.content | first_image}}</a>
</li>
{% endfor %}
有什么想法吗？
【问题讨论】：
如果你只需要图片URL而不是img标签中的全部内容，你可以使用下面的方法。
安装液体过滤器match_regex：
gem install match_regex
然后将其添加到您的 Jekyll 配置中：
plugins:
- match_regex
在您的模板中创建一个捕获 sn-p：
{% capture post_first_image %}
{% assign hero_image = page.content | match_regex: '<img .*?src="([^"]+)"' %}
{% if hero_image == nil %}
{% assign hero_image = "/placeholder-image.png" | prepend: site_base %}
{% endif %}
{{ hero_image }}
{% endcapture %}
模板：
<meta property="og:image" content="{{ post_first_image | strip }}">
如果您不需要占位符图像，您可以简单地删除 if 条件。
【讨论】：
我接受了 David 的回答，并找到了一种从 img 标记中获取 src 属性的方法。
{% 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 %}
{% assign tags = html | split:" " %}
{% for tag in tags %}
{% if tag contains 'src' %}
<img {{ tag }} />
{% endif %}
{% endfor %}
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
【讨论】：
您可以为您的 Front Matter 定义一个名为“image”的自定义变量，这样它就可以像 Wordpress 的帖子 Featured Image 一样工作：
---
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>
就是这样。
【讨论】：
让它工作。不确定它会如何扩展，但这个流动代码循环遍历所有帖子并从帖子中获取第一张图片的来源并显示该帖子。我用多张图片对其进行了测试，它按预期工作。
<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>
【讨论】：
{% break %} 替换了foundImage 逻辑。为包含许多图像的帖子保存一些迭代。
src 属性而不是所有属性。我将如何做到这一点，而不仅仅是<img {{html}} />？
您的问题的一些解决方案：
1 - 使用帖子摘录标签Documentation is here
你的帖子：
---
layout: post
title: Testing images
---
## Title
Intro Text
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>
【讨论】：