在前端开发中，Metalsmith是一个非常流行的静态网站生成器，它基于Node.js运行，并且可以通过插件来扩展其功能。其中，Metalsmith-Collections是一款非常实用的插件，它可以帮助我们对文件进行分类和归档。本文将详细介绍Metalsmith-Collections的使用方法。
安装Metalsmith和Metalsmith-Collections
首先，我们需要安装Metalsmith和Metalsmith-Collections这两个npm包。请在命令行窗口中运行以下命令：
npm install metalsmith metalsmith-collections --save-dev
配置Metalsmith-Collections
在使用Metalsmith-Collections之前，我们需要在Metalsmith的配置文件中进行相关设置。下面是一个示例配置文件：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----------- - ----------------------------------
---------------------
----------------
-----------------------
------------------
------ -
-------- ----------------
------- -------
-------- ----
-
---
---------- -- -
-- ----- ----- ----
---在上面的代码中，我们定义了一个名为"posts"的集合，并指定了集合中的文件匹配模式、排序方式以及是否要反转排序结果。具体说明如下：
pattern: 文件匹配模式。这里使用通配符**/*表示任意目录下的任意文件，后缀名为.md。sortBy: 排序方式。这里指定按照日期进行排序。reverse: 是否反转排序结果。这里将其设置为true，表示按照倒序排列。
使用Metalsmith-Collections
配置好Metalsmith-Collections之后，我们可以在模板中使用集合了。下面是一个示例模板：
<ul>
<% for (let post of collections.posts) { %>
<li><a href="<%= post.path %>"><%= post.title %></a></li>
<% } %>
</ul>在上面的代码中，我们通过collections.posts访问名为"posts"的集合，并遍历其中的每一篇文章，生成一个包含文章标题和链接的列表。
示例代码
最后，我们提供一个完整的示例代码，以便读者更好地理解Metalsmith-Collections的使用方法：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----------- - ----------------------------------
---------------------
----------------
-----------------------
------------------
------ -
-------- ----------------
------- -------
-------- ----
-
---
---------- -- -
-- ----- ----- ----
---
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
--------- ------------
-------
------
-------------
----
-- --- ---- ---- -- ------------------ - --
------ --------- --------- ------- ---------- -----------
-- - --
-----
-------
--------- -------------------- ---- ------- ---- ------------------------------- --- --- ------ ------- ------- ----- ------------ --- - ------ ------ ------------
上述代码可以根据文件结构自动生成一个包含文章列表的静态网站。其中，src目录下存放着所有的源文件，build目录是输出目录。在模板中，我们使用了Metalsmith-Collections提供的collections.posts变量来访问名为"posts"的集合，并生成了文章列表。在每篇文章的头部，我们指定了标题、日期等元数据，Metalsmith-Collections
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45723