Jekyll 在《杰基尔》中，我如何获得一篇帖子；第一张照片是什么？

在我的博客文章索引中，我想从文章中抓取第一个图像，使用just liquid将其显示在索引中，这样它就可以在github页面上工作

我有一种感觉分裂是一种方式去，但我不擅长与液体

我希望能够获得图像url，并将其放入一个变量中进行样式设置

理想的解决方案如下：

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

{%for site.posts%}


{%endfor%}

---

有什么想法吗？

一些解决问题的方法：

1-使用Post摘录标签

你的职位：

---
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>

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

{site.posts%中的post为%s}

{{post.extract}}

{%endfor%}

当您的图像标记出现在摘录分隔符之前时（\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 %}

---
布局：邮政
标题：测试图像
图像：
-url:/assets/img/cypedium-calceolum.jpg
alt：绿鲤
标题：Cypipedium Calceolum
-url:/assets/img/hello-bumblebee.jpg
你好，大黄蜂！
标题：你好，大黄蜂！
---
这里介绍哟 让它发挥作用。不确定它将如何扩展，但这段液态代码会在所有帖子中循环，并从帖子中获取第一幅图像的源代码，并显示该帖子。我用多个图像对它进行了测试，结果正如预期的那样

<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>


{site.posts%中的post为%s}

{%assign foundImage=0%}
{%assign images=post.content | split:| first%}
{%assign foundImage=1%}
{%endif%}
{%endif%}
{%endfor%}

{%endfor%}

您可以为前端内容定义一个名为“image”的自定义变量，因此它的工作原理与Wordpress的posts特色图片类似：

---
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>


{site.posts%中的post为%s}

{post.date | date:“%b%-d，%Y”}，
波尔
{{post.author}}

//形象
//形象
{{post.extract}}
{%endfor%}


就是这样。
我接受了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 %}

{%assign foundImage=0%}
{%assign images=post.content | split:| first%}
{%assign tags=html |拆分：%}
{标记%中的标记的%s}
{%如果标记包含“src”}
{%endif%}
{%endfor%}
{%assign foundImage=1%}
{%endif%}
{%endif%}
{%endfor%}
如果您只需要图像URL而不是
img
标记中的全部内容，您可以使用以下方法

安装液体过滤器
匹配\u regex
：

gem安装匹配\u regex

然后将其添加到Jekyll配置中：

插件：
-匹配正则表达式

在模板中创建捕获片段：

{%capture post\u first\u image%}
{%assign hero_image=page.content | match_regex:'
模板：



如果你不需要占位符图像，你可以简单地删除
if
条件。
谢谢你的全面回答。我应该提到我知道摘录，正如你所指出的，如果图像包含在摘录中，这是有效的。你的第二个建议回答了这个问题，但我希望我能在模板中放一些东西这是第一个图像。这很好，谢谢。我在我的站点中使用了它，但是用
{%break%}替换了
foundImage
逻辑
从循环中。为包含许多图像的帖子保存一些迭代。谢谢你的提示！我不知道。这种方法对我也很有效，只是我更喜欢只获取图像的
src
属性，而不是所有属性。我该如何做，而不仅仅是
？我最终没有使用此代码，而是使用了在frontmatter中使用ith image:xxx.jpg。但是，如果您使用上面的代码，您将通过管道将其传输到第一个位置（如{%assign html=image | split://>“| first%}案例）来执行另一个拆分以查找src=，然后将文本抓取到另一个。非常好的提示，这正是所需的。此选项添加了最多的控件（对那些具有大量图像内容和各种纵横比的人很有帮助）我认为这是一个更干净的解决方案。一个更直接的解决方案，一个适合thatNice的解决方案。它在我的ubuntu中工作，但在github中不工作。不确定为什么。@ihsanberahim由github页面支持的插件被列为白名单：
    {% 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 %}