metalsmith-template-data 是一个 Metalsmith 插件，用于为 HTML 模板添加数据。Metalsmith 是一个静态网站生成器，可以把 Markdown、Jade、CSS、JS 等文件转换为 HTML 网页，再由 Metalsmith 发布到服务器上。
metalsmith-template-data 插件可以方便地将 JSON 文件中的数据添加到 HTML 模板中。
安装 metalsmith-template-data
在项目目录下，使用 npm 安装 metalsmith-template-data：
--- ------- ------------------------ ----------
使用 metalsmith-template-data
在 Metalsmith 工程中，添加 metalsmith-template-data 插件，并配置 JSON 文件路径：
--- ---------- - ----------------------
--- ------------ - ------------------------------------
---------------------
----------------
-----------------------
-------------------
------- -------------
---------- ------------------
----- ---------
----- -----------------
---
---------配置 metalsmith-template-data
metalsmith-template-data 的配置选项如下：
- engine: 指定模板引擎，目前支持 handlebars、jade 和 ejs。
- directory: HTML 模板文件目录。
- glob: HTML 模板文件通配符。
- data: JSON 文件路径，包含数据。
使用数据
在 HTML 模板中使用数据的方式因模板引擎而异，下面是使用 Handlebars 模板引擎的示例代码：
--------- -----
------
------
----- ----------------
------------------------
-------
------
----
------- -------
-----------------
---------
-----
-------
-------上面的 HTML 模板使用了 Handlebars 模板引擎，数据包含 title 和 items 两个属性，其中 items 是一个数组。
数据文件示例
下面是一个 data.json 的示例文件：
-
-------- --- ------
-------- -------- -------- --------- --------
-接下来，运行 Metalsmith，HTML 模板将自动添加数据。
总结
metalsmith-template-data 插件方便了为 HTML 模板添加数据的操作，可让开发者更专注于网站内容的编辑和管理。知道如何使用 metalsmith-template-data 模板引擎，可以大大提高开发效率，让代码更加简洁明了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f421d8e776d08040dde