Metalsmith 是一个静态网站生成器，类似于 Jekyll。Metalsmith 提供了一个插件系统，其中一些插件可以通过 npm 包安装。其中之一是 metalsmith-collections-addmeta，它可以为集合中的每个文件添加元数据信息。
安装
要安装 metalsmith-collections-addmeta，可以使用 npm。终端输入以下命令：
npm install metalsmith-collections-addmeta --save-dev
使用
在 Metalsmith 的配置文件中添加该插件，如下所示：
-- -------------------- ---- -------
----- ---------- - ---------------------
----- ----------- - ---------------------------------
----- ------- - -----------------------------------------
---------------------
------------------
------ ---------
---
--------------
------ -
------- ----------
-
---在上面的配置中，我们定义了 posts 集合，它包含所有具有 md 扩展名的文件。然后，我们使用 addmeta 插件为 post 集合添加元数据信息。在此例中，我们为每个文章添加了一个布局名。
在您的模板文件中可以像以下方式访问元数据信息：
{{#each collections.posts}}
<h2><a href="{{path}}">{{ title }}</a></h2>
<p>{{ date }}</p>
{{content}}
{{/each}}这将为每个文章显示标题、日期和内容，并将它们放在名为 post.hbs 的布局文件中。
示范代码
在这里，我们讲解如何使用 metalsmith-collections-addmeta 插件来创建一个简单的博客网站。假设您已经安装了 Metalsmith 和主题，那么按照以下步骤操作：
- 创建一个文件夹，将名为 package.json 的文件和名为 _posts 的子文件夹放入其中。
- 在 package.json 中添加以下依赖：
"dependencies": {
"metalsmith": "^2.3.0",
"metalsmith-collections": "^1.2.0",
"metalsmith-collections-addmeta": "^0.1.0"
}- 创建一个名为 build.js 的文件，向其中添加以下内容：
-- -------------------- ---- -------
----- ---------- - ---------------------
----- ----------- - ---------------------------------
----- -------- - ------------------------------
----- ------- - -----------------------------
----- ---------- - --------------------------------
----- ------- - -----------------------------------------
---------------------
-----------
----- -
------ --- ------
------------ -- ---- ----- ------
-
--
-------------------
-----------------------
------------------
------ -
-------- -------
------- -------
-------- ----
-
---
--------------
------ -
------- ----------
-
---
----------------
------------------
--------------
------- -------------
---------- ------------
--------- ------------
---
--------------- ----- ------ -
-- ----- -
----------------
-
--- 创建一个名为 post.hbs 的布局文件，并在其中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- - ----------------------
-------
------
------------------
---------------
---- ----------------
--------------
------
-------
-------- 创建一个名为 index.hbs 的主页文件，并在其中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------------
-------
------
-----------------------
---------------------------
----
------- -------------------
------ ----------------------------------
---------
-----
-------
-------- 在终端输入以下命令以构建网站：
node build.js
- 用浏览器打开 build 目录中的 index.html 文件，查看您的网站吧！
在上面的代码中，我们定义了一个名为 post 的集合，并根据日期反向排序了所有文章。然后，我们使用 addmeta 插件为 poST集合添加了一个布局名。在使用 markdown、permalinks 和 layouts 插件之后，包括 post.hbs 布局和 index.hbs 主页，Metalsmith 会将所有内容生成为一个静态网站。
总结
以下是进一步的建议：
- 参见每个插件的文档，了解有关更多选项的信息。网站 https://www.npmjs.com/ 可以提供有关每个插件的更多信息。
- 了解有关如何使用 GitHub Pages 等源控制服务托管您的静态网站的信息。此方案可使您在托管您的代码的同时托管您的网站，而不需要额外的服务器成本。
- 与其他人合作，了解 their 静态网站生成器 workflow，以确保我们都在同一页上工作。
希望这篇文章能够帮助你理解 metalsmith-collections-addmeta 插件的使用教程。祝你学习顺利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b23
