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

Posted 2023-02-15

【中文标题】在 Jekyll 中，我如何获取帖子的第一张图片？

【英文标题】：In Jekyll How do I grab a post's first image?

【发布时间】：2014-10-17 07:15:19

【问题描述】：

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

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

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

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

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

有什么想法吗？

【参考方案1】：

如果你只需要图片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 条件。

【讨论】：

不错。它适用于我的ubuntu，但不适用于github。不知道为什么。

@ihsanberahim GitHub Pages 支持的插件被列入白名单：docs.github.com/en/github/working-with-github-pages/…

【参考方案2】：

我接受了 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 %

【参考方案3】：

您可以为您的 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>

就是这样。

【讨论】：

这个选项增加了最多的控制（对于那些图像重的内容和各种宽高比的人很有帮助）

我认为这是一个更清洁的解决方案。

一个更直接的解决方案，一个解决方案

【参考方案4】：

让它工作。不确定它会如何扩展，但这个流动代码循环遍历所有帖子并从帖子中获取第一张图片的来源并显示该帖子。我用多张图片对其进行了测试，它按预期工作。

<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 逻辑。为包含许多图像的帖子保存一些迭代。

感谢您的提示！我不知道break。

这种方法也适用于我，只是我更喜欢只使用图像的 src 属性而不是所有属性。我将如何做到这一点，而不仅仅是<img html />？

我最终没有使用此代码，而是在 frontmatter 中使用 image: xxx.jpg。但是，如果您本质上使用上面的代码，您将进行另一个拆分以查找 src=" ，然后通过管道将文本抓取到另一个 " ，就像在 % assign html = image |拆分：“/>” |第 % 个案例。

非常好的提示，这正是我们所需要的。

【参考方案5】：

您的问题的一些解决方案：

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

【讨论】：

感谢您的全面回答。我应该提到我知道摘录，正如你指出的那样，如果图像出现在摘录中，它就会起作用。你的第二个建议回答了这个问题，但我希望我可以在模板中放入一些东西来拉出第一张图片。