Eleventy Collection

将集合想象成内容组。将内容组织起来，在模板中能够方便地展示。

参阅《Lesson 8: Creating our first collection | Learn Eleventy From Scratch》课程，假设网站中有工作、人员和博客 3 个部分。对于每个部分，都将创建一个集合。

创建集合

在 .eleventy.js 中，通过 addCollection 方法添加集合：

// Returns work items, sorted by display order
config.addCollection('work', collection => {
  return collection
    .getFilteredByGlob('./src/work/*.md')
    .sort((a, b) => (Number(a.data.displayOrder) > Number(b.data.displayOrder) ? 1 : -1));
});

其中，将 src/work 下所有的 Markdown 添加到集合中，并且根据文档的 displayOrder 属性进行排序。displayOrder 定义在 Markdown 的元数据里：

---
title: 'Outgoings iOS App'
summary: 'A native iOS app to help people to keep a track of their finances by providing easy-to use tracking and organising capabilities.'
displayOrder: 1
featured: true
---

其中，像排序（sort）的通用能力，可以抽成工具方法。在 mkdir src/utils 中创建一个 sort-by-display-order.js：

/**
 * Takes a collection and returns it back in display order
 *
 * @param {Array} collection The 11ty collection
 * @returns {Array} the sorted collection
 */
module.exports = collection =>
  collection.sort((a, b) =>
    Number(a.data.displayOrder) > Number(b.data.displayOrder) ? 1 : -1
  );

在 .eleventy.js 通过依赖引用方式，引入该文件：

const sortByDisplayOrder = require('./src/utils/sort-by-display-order.js');

这样，代码可以简化为：

// Returns work items, sorted by display order
config.addCollection('work', collection => {
  return sortByDisplayOrder(collection.getFilteredByGlob('./src/work/*.md'));
});

// Returns work items, sorted by display order then filtered by featured
config.addCollection('featuredWork', collection => {
  return sortByDisplayOrder(collection.getFilteredByGlob('./src/work/*.md')).filter(
    x => x.data.featured
  );
});

使用结合

创建一个名为 featured-work.html 的 Partial 演示如何使用集合：

{% for item in collections.featuredWork %}
  <a href="{{ item.url }}" aria-label="See {{ item.data.title }}" class="[ featured-work__item ] [ frame ]" data-frame="quaternary">
    <img src="{{ item.data.hero.image }}" alt="{{ item.data.hero.imageAlt }}" loading="lazy" class="radius" />
  </a>
{% endfor %}

其中，直接引用添加的集合名称，当作数组访问就可以了。

网络资源

• Collections — Eleventy

本文作者：Maeiee

本文链接：Eleventy Collection

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

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