在 11ty 中使用 frontmatter 作为数据

Question

我需要一些帮助来设置特色图片前参数。我已经尝试了几个小时来让它工作，但似乎无法弄清楚。

---
title: My post
date: 2020-02-23
published: true
thumb: '/assets/img/img.jpg'
tags:
- Tag 1
- Tag2
---

这是我的降价代码。我想在我的帖子页面上做的是显示特色图片，但是当代码呈现图像的 src 时显示为（未知）。我用来生成它的代码是 post.data.thumb.

<img src="{{ post.data.thumb }}" alt="Some alt text">

我一直在查看 11ty 初学者博客的一些回购协议，其中一些有很多自定义的前文，但我在他们的任何文件中都看不到它被配置为工作。

我试过使用 eleventyComputed，但似乎不起作用。我也尝试过在我的帖子文件夹中使用 posts.11tydata.js 文件，但它也没有做任何事情。我怀疑这可能很简单，但我花了几个小时查看它，此时我完全迷路了。

module.exports = {
layout: 'post',
title: 'Untitled',
eleventyComputed: {
permalink: (data) => `${data.page.fileSlug}/index.html`,
thumb: (data) => {
  if (data.thumb) {
    if (data.thumb.search(/^https?:\/\//) !== -1) {
      return data.thumb;
    }
    return `/assets/img/${data.thumb}`;
  } else {
    return false;
  }
}

} };

Here is a working example of what I'm trying to achieve，但我不明白为什么他们的有效而我的无效。

Here is the link to my project on github if you would like to take a closer look

感谢任何帮助！

Answer 1

在 example you provided, they have a collection of posts as Markdown files where each post (.md) file has a thumb field defined in frontmatter representing an image thumbnail name. Each post in the "posts" collection utilize the post.njk 布局中，这是将使用每个 post 的 frontmatter 数据的地方：

{% if thumb %}
<div class="mt-10 -mx-7 md:mx-0">
   <img class="w-full max-w-2xl mx-auto" src="{{ thumb | url }}" width="960" height="500" alt="This post thumbnail">
</div>
{% endif %}

他们（您链接的示例回购）使用 JavaScript Data Files to prepend "/assets/img/" to the thumb value and then end up with "/assets/img/${data.thumb}" via posts.11tydata.js 在布局 post.njk 文件中使用。这可行，但在父布局中简单地使用 frontmatter 数据有点复杂。

我会推荐以下内容：

将 frontmatter 中的 thumb 字段定义为您将传递给 post.liquid 或 .njk 布局文件的每个 Markdown/Liquid 模板的图像名称。

post-one.md

---
title: Post One
date: 2020-02-23
layout: post.liquid
published: true
thumb: foo.jpg
tags:
- tag1
---

{{ thumb }} is foo.jpg

post-two.md

---
title: Post One
date: 2020-02-23
layout: post.liquid
published: true
thumb: bar.jpg
tags:
- tag1
---

{{ thumb }} is bar.jpg

在您的“posts”正在使用的布局中，即 src/_includes/layouts/post.liquid，将“/assets/img/”添加到图像的 src 之前，然后只需利用每个 post 模板中的 thumb，而不是在数据文件中引入额外的逻辑。

<!-- layouts/post.liquid -->
<html>
  <body>
     <div class="featured-img-container">
        <img src="/assets/img/{{ thumb }}" alt="Some alt text">
     </div>
  </body>
</html>

在 11ty 中使用 frontmatter 作为数据

using frontmatter as data in 11ty

javascript

eleventy