Eleventy Front matter

Front Matter 就像页面或模板的元数据。它通常由 YAML 提供支持，当在一组 --- 之间添加时，可以将额外的内容添加到 Markdown 文件、模板或 Eleventy 上下文中的几乎任何内容中。

在 Markdown 中加入元数据

---
title: 'Hello, world'
layout: 'layouts/home.html'
---

This is pretty _rad_, right?

加入多级元数据

---
title: 'Hello, world'
layout: 'layouts/home.html'
intro:
  eyebrow: 'Digital Marketing is our'
  main: 'Bread & Butter'
  summary: 'Let us help you create the perfect campaign with our multi-faceted team of talented creatives.'
  buttonText: 'See our work'
  buttonUrl: '/work'
  image: '/images/bg/toast.jpg'
  imageAlt: 'Buttered toasted white bread'
---

在模板中使用元数据

<article class="intro">
  <div class="[ intro__header ] [ radius frame ]">
    <h1 class="[ intro__heading ] [ weight-normal text-400 md:text-600 ]">
      {{ intro.eyebrow }}
      <em class="text-800 md:text-900 lg:text-major weight-bold">{{ intro.main }}</em>
    </h1>
  </div>
  <div class="[ intro__content ] [ flow ]">
    <p class="intro__summary">{{ intro.summary }}</p>
    <a href="{{ intro.buttonUrl }}" class="button">{{ intro.buttonText }}</a>
  </div>
  <div class="[ intro__media ] [ radius dot-shadow ]">
    <img
      class="[ intro__image ] [ radius ]"
      src="{{ intro.image }}"
      alt="{{ intro.imageAlt }}"
    />
  </div>
</article>

其中：{{}} 的部分，是使用了元数据。

本文作者：Maeiee

本文链接：Eleventy Front matter

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！