Question

在我的博客文章索引中，我想从帖子中抓取第一张图片，只使用液体在索引中显示它，这样就可以在github页面上运行。

我有一种感觉分裂是要走的路，但我对液体并不好。

我希望能够获取图片网址并将其放入变量中进行设计。

理想的解决方案是：

{% 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 - 使用帖子摘录标记Documentation is here

你的帖子：

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

Answer 4

我已经采纳了David的回答，并找到了从img标记中获取{% 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 %}属性的方法。

. . .
builder.Append("</title>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.AppendFormat("<script src=\"https://code.jquery.com/jquery-1.12.2.min.js\" integrity=\"sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=\" crossorigin=\"anonymous\"></script>");
builder.Append("</head>");
. . .

Answer 5

如果您只需要图片网址而不是img标记中的全部内容，则可以使用以下方法。

安装液体过滤器match_regex：

gem install match_regex

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

plugins:
  - match_regex

在模板中创建一个捕获代码段：

{% 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条件。

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

5 个答案: