代码之家 › 专栏 › 技术社区 › Xoog

11ty中使用frontmatter作为数据

11ty javascript

Xoog · 技术社区 · 2 年前

我需要一些帮助来设置一个特色图像的frontmatter参数。我已经试了好几个小时了,但似乎还是想不通。

---
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文件夹中使用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

感谢您的帮助!

0 回复 | 直到 2 年前

Tanner Dolby 2 年前

在 example 你提供了,他们有一个集合 posts 作为Markdown文件( .md )文件具有 thumb 在表示图像缩略图名称的frontmatter中定义的字段。“posts”集合中的每个post都使用 post.njk 布局,这就是每个帖子的前沿数据将被利用的地方:

{% 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 在 拇指 值,然后通过 posts.11tydata.js 在布局中使用 post.njk 文件这是可行的,但对于在父布局中简单地使用frontmatter数据来说有点复杂。

我建议如下:

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

一个月后

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

{{ thumb }} is foo.jpg

两个月后

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

{{ thumb }} is bar.jpg

在您的“帖子”正在使用的布局中,即。 src/_includes/layouts/post.liquid ,在 src 对于图像,然后简单地利用 拇指 而不是在数据文件中引入额外的逻辑。

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