metalsmith-collection-grouping 是一个方便的 npm 包，它可以帮助开发者在 metalsmith 静态网站生成器中快速进行文档集合的分组。在这篇文章中，我们将介绍如何安装和使用这个包，并且提供了一些示例代码和实用技巧。
安装 metalsmith-collection-grouping
首先，我们需要安装 metalsmith-collection-grouping 包，这可以通过 npm 进行安装，打开命令行，运行以下命令行即可安装该包：
npm install --save metalsmith-collection-grouping
配置你的 metalsmith 项目
要使用 metalsmith-collection-grouping 包，需要让 metalsmith 载入这个插件，并进行一些配置。在 metalsmith 配置中添加以下代码：
-- -------------------- ---- -------
------
----- ----- - ------------------------------------------
------
------------
------------ -
------ -
-------- ----------------
------- -------
-------- ----
-
--
-------- ------
---collections定义一个文档集合，其中pattern是匹配文件路径的 glob 模式，sortBy指定排序方式，reverse指定按升序或降序排列。groupBy指定分组的依据，在示例代码中，我们将根据文章标签进行分类。
更新完配置后，我们可以执行命令来启动 metalsmith 生成网站，然后就可以看到生成的网站已经按照指定的标签进行了分组。
示例代码
下面是一些示例代码，我们从博客文章生成的集合中选取文章，并按日期和标签进行分组。
-- -------------------- ---- ------- --- --- - --- ----- - - --- --------- - - --- --------- - - --- --------- - - --- --------- - --- -------- --- -------- --- ------------ --- ---------
build.js
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - ------------------------------------------
---------------------
-----------
----- -
------ --- ------
---- --------------------
-
--
----------------
-----------------------
------------
------------ -
------ -
-------- ----------------
------- -------
-------- ----
-
--
-------- ------
---
-------------------- ------ -
-- ----- -
----- ----
-
---
src/index.md
-- -------------------- ---- ------- --- ------ -- ---- ------------ --- --- - -- ---- -- ---- -- --- ---- -- ---------------------- -- - --- ---------- ------ --------- --- -- ------ -- -- -- -- --- ---- ----- -- ----------- -- --- -- --- -- -- --- ---- -- ----- -- - --- ---------- ------ --------- --- -- ------ -- -- ------ --
src/posts/post-1.md
--- title: 'My First Post' date: '2021-01-01' tags: ['JavaScript', 'Metalsmith'] --- My first post, this is a test.
src/posts/post-2.md
--- title: 'My Second Post' date: '2021-02-01' tags: ['JavaScript', 'Metalsmith'] --- My second post, this is a test.
src/posts/post-3.md
--- title: 'My Third Post' date: '2021-03-01' tags: ['Vue', 'Metalsmith'] --- My third post, this is a test.
src/posts/post-4.md
--- title: 'My Fourth Post' date: '2021-04-01' tags: ['React', 'Metalsmith'] --- My fourth post, this is a test.
总结
使用 metalsmith-collection-grouping，我们可以简单方便地对文档进行分组，该包的配置和插件是非常易懂的，可以方便我们在 metasmith 中使用，从而大大提高了生成静态网站的效率和便利性。希望本篇文章对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b1b