Jekyll 无法在帖子上显示帖子图片

Question

在前面的问题上，我有：

图片：SNKRS.jpeg

在我的帖子布局中，我有：

---
layout: "wrapper"
---

<section class="postlayout">
      <div class="postsummary">
        <h1>{{ page.title }}</h1>
        <p>{{ page.description }}</p>
        {% if post.image %}
          <img src="{{ site.baseurl }}/assets/blogimages/{{ post.image }}" alt="{{ site.baseurl }}{{ post.title }}"">
        {% endif %}
      </div>
</section>
<section class="postbody">
  {{content}}
  {% include lazyload.html %}
</section>

但是在帖子中，图像没有被拉出。只有当我在代码周围有一个 {% for post in site.posts %} 时，它才会拉动。但是当我使用它时，它会拉取网站上的所有帖子，而不仅仅是当前帖子。

Answer 1

如果您的目标是从帖子的 Front Matter 中获取图片，此代码可能会对您有所帮助。

版面发布文件：..\_layouts\post.html

<section class="postlayout">
  <div class="postsummary">
    <h1>{{ page.title }}</h1>
    <p>{{ page.description }}</p>
    {% if page.image %}
      <img src="{{ page.image }}" alt="{{ page.title }}"">
    {% endif %}
  </div>
</section>

注意：记得将此信息添加到帖子的 Front Matter。

Markdown 发布文件：2020-05-12-my-post.md

---
title: "I'm the title of Post."
description: "I'm the description of the post."
image: /assets/blogimages/name_of_image.jpg
---

更好地理解（回复后添加）。

为什么我使用page.image 而不是post.image？

因为，在您的问题中发布的示例中，您将 .html 或 .md 文件视为页面，而不是帖子。

page.image 中的变量page 是一个官方的 Jekyll 变量。 虽然 post.image 的变量 post 不是官方 Jekyll 变量，因此除非明确声明，否则它不存在 （这里有更多信息：Jekyll Variables）

阅读下文以了解。

如果你使用变量page.image，Jekyll 会从页面的 Front Matter 中获取变量image 中存在的内容（默认情况下，页面是 Jekyll 项目根目录中包含的文件page-name.html） .请注意，此处.html 文件因此被视为一个页面。您还可以使用 page-name.md 文件创建页面，以利用 MarkDown 语法的优势，但您应该将其与可能是 blog.html 的布局相关联，适当地放置在 _layout 目录中。

如果你想把一个YY-MM-DD-post-name.md文件当作一个帖子，你必须先把这个文件插入到Jekyll项目的_posts目录下。然后您必须创建一个页面（或布局），例如blog.html，其中包含列出所有现有帖子的代码。为此，您需要创建一个循环来迭代 _posts 文件夹中的每个 .md 文件。

以下代码为典型示例：

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      <img src="{{ post.image }}" alt="{{ post.title }}">
    </li>
  {% endfor %}
</ul>

在第二行中，变量post 将包含每个帖子的 Front Matter 中存在的值。从这里我们了解到site.posts 被视为array，我们需要for 循环来访问array 的每个元素。

因此，使用for 循环，我们可以通过post.title 变量访问帖子的标题或通过post.image 变量访问图片。

不使用for循环，我们也可以通过指定array中每个元素的位置来访问array的值，如下例：

<h2>{{ site.posts[0].title }}</h2>
<img src="{{ site.posts[0].image }}" >

在上面的示例中，我们访问了array 的位置0 中的元素，但这显然是一种没有利用for 循环功能的无用方法。

更多信息在这里：Jekyll List posts