Jekyll 无法在 Post 上显示 Post 图片

Question

在我的前面，我有：

图片：SNKRS.jpeg

在我的 post 布局中，我有：

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

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

Answer 1

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

布局post文件：..\_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>

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

Markdown post 文件：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？

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

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

阅读下文以了解。

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

如果你想把一个YY-MM-DD-post-name.md文件当作一个post，你必须先把文件插入到Jekyll项目的_posts目录中。然后，您将必须创建一个页面（或布局），例如 blog.html，其中包含用于列出所有现有 post 的代码。为此，您需要创建一个循环来迭代 _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 中存在的值 post。从这里我们了解到 site.posts 被视为 array 并且我们需要 for 循环来访问 array 的每个元素。

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

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

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

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

更多信息在这里：Jekyll List posts

Jekyll 无法在 Post 上显示 Post 图片

Jekyll Can't Get Post Image to Show on Post

liquid

jekyll