在 Web 前端开发中，有许多工具和框架可以让我们更加方便地开发网站，其中一个非常常见的工具就是 Metalsmith。Metalsmith 是一个静态网站生成器，可以将 Markdown 文件、HTML 文件以及其他资源转换为静态网页。在这个过程中，我们可能需要一些数据来渲染我们的网页，比如文章的分类、标签、作者等等。这时候，就需要使用一个叫做 metalsmith-page-data 的 npm 包。
metalsmith-page-data 可以将来自不同来源的数据注入到 metalsmith 的 metadata 中，并在渲染文章时使用这些数据。它的配置和使用都非常简单，下面我们就来一步步介绍。
安装
使用 npm 安装 metalsmith-page-data：
npm install metalsmith-page-data --save
配置
在使用 metalsmith-page-data 之前，需要在 metalsmith 的配置中添加插件。以下是一个简单的例子：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - --------------------------------
---------------------
----------------
-----------------------
---------------
------------- -
----- ----------------------------
---- ------
-
---
------------ -- -
-- ----- ----- ----
------------------ -----------
---metalsmith-page-data 的配置是一个对象，其中的每个键名表示匹配的文件路径，每个键值则表示对应文件需要注入的数据。在上面的示例中，我们假设 articles 文件夹下的所有文件都需要使用 source/data/articles.json 中的数据，key 则指定了用于匹配的键。
使用
在模板中可以通过 ejs、handlebars 或其他模板引擎来获取注入的数据。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ----------
----- ------------------ ------------ ----------- ----
-------
------
--------
------- ----- -------
---------
---------
------ ------- ------
----
-- --------------------------- -- - --
------- -------- -------
-- --- --
-----
----------
-------
-------上面的模板中使用了 ejs 语法，利用注入的数据来渲染网页内容，<%= title %>，<%= description %> 和 <%= content %> 分别表示文章的标题、描述和正文，<% categories.forEach(category => { %> 和 <% }); %> 中的代码用来遍历文章的分类并渲染到网页中。
示例
以下是一个完整的示例：
目录结构
-- -------------------- ---- ------- - --- --- - --- -------- - - --- ------------- - - --- ------------- - --- ---- - - --- ------------- - --- --------- - --- ----------- - --- ---------- --- ------------ --- -------------
src/data/articles.json
-- -------------------- ---- -------
-
------------- -
-------- --- ----- ---------
-------------- ----- -- --- ----- ----------
---------- -------- -- ---- --------------
------------- -------- ------
--
------------- -
-------- --- ------ ---------
-------------- ----- -- --- ------ ----------
---------- -------- -- ---- --------------
------------- --------------
-
-src/articles/article-01.md
--- title: My first article description: This is the first article. --- This is some content.
src/articles/article-02.md
--- title: My second article description: This is the second article. --- This is some content.
src/templates/layout.ejs
-- -------------------- ---- -------
--------- -----
------
------
---------- ----- ----------
----- ------------------ ------------ ----------- ----
-------
------
--------
------- ----- -------
---------
------
--- -------- --
-------
-------
-------src/templates/article.ejs
-- -------------------- ---- -------
---------
------- ----- -------
------ ----------- ------
------ ------- ------
----
-- --------------------------- -- - --
------- -------- -------
-- --- --
-----
----------metalsmith.js
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - --------------------------------
----- -------- - -------------------------------
----- ------- - ------------------------------
---------------------
----------------
-----------------------
---------------
------------- -
----- ---------------------
---- -------
-
---
----------------
--------------
------- ------
---------- ------------
-------- ------------
---
------------ -- -
-- ----- ----- ----
------------------ -----------
---构建输出
运行 node metalsmith.js 后，生成的网站将被保存在 build 目录下，以下是部分输出（未做样式调整）：
build/articles/article-01.html
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ---------------
----- ------------------ ------------- -- --- ----- ----------
-------
------
--------
------ ----- ------------
---------
------
---------
------ ----- ------------
------- -- --- ----- ------------
---------- -- ---- ------------
----
----
-------------
------------
-----
----------
-------
-------
-------build/articles/article-02.html
-- -------------------- ---- -------
--------- -----
------
------
--------- ------ ---------------
----- ------------------ ------------- -- --- ------ ----------
-------
------
--------
------ ------ ------------
---------
------
---------
------ ------ ------------
------- -- --- ------ ------------
---------- -- ---- ------------
----
----
-------------------
-----
----------
-------
-------
-------小结
本文介绍了 metalsmith-page-data 的使用方法和示例，它可以让我们更方便地在 metalsmith 中注入数据并渲染网页。使用它，我们可以避免在每个文件中重复定义数据，而是集中管理数据，提高开发效率。
更多关于 metalsmith-page-data 的文档，可以查看 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040cb6