简介
Metalsmith 是一个基于 Node.js 的静态网站生成器框架，我们可以使用其完善的插件体系进行快速、简便地构建我们的网站。而其中的 metalsmith-json 插件则为我们提供了一种方便的将 Json 文件中的数据读取并注入至网站源文件的途径。本文将详细介绍如何使用该插件进行网站开发。
安装
在使用 metalsmith-json 插件进行网站开发前，我们需要先安装 Node.js 环境。在此基础上，我们使用 npm 工具来安装 metalsmith-json，并将其添加至我们要开发的网站的依赖。
npm install metalsmith-json --save-dev
基础使用
接下来，我们在项目中应用 metalsmith-json 插件。在 metalsmith 的配置文件中，我们可以将 metalsmith-json 插件用一下这样的方式进行调用：
const metalsmith = require('metalsmith');
const metalsmithJson = require('metalsmith-json');
metalsmith(__dirname)
.use(metalsmithJson())
.build();这样，metalsmith-json 插件就已经被调用并使用了默认的配置项，其默认源文件路径则为 ./src/data/，默认文件扩展名为 .json。我们也可以通过传参的方式来设置该插件的配置，其中：
src（字符串）：指定 json 文件所在目录路径pattern（字符串或数组）：指定要匹配的 json 文件名称，支持通配符，如*.jsonproperty（字符串或数组）：指定要提取的 json 数据属性名称，当可能出现重复键名时为数组类型
metalsmith(__dirname)
.use(metalsmithJson({
src: './src/config',
pattern: '*.config.json',
property: ['config', 'site']
}))
.build();指定 JSON 源文件
我们可以通过设置 src 参数来指定 JSON 文件所在目录路径，并将相应 JSON 文件的数据注入至目标网站代码中。例如，我们有一个包含如下所有数据的 JSON 文件：
{
"title": "使用 metalsmith-json",
"description": "metalsmith-json 插件使用教程",
"keywords": "metalsmith, json, 插件"
}我们可以通过如下配置将其应用于我们网站的源代码中：
metalsmith(__dirname)
.use(metalsmithJson({
src: './src/data/'
}))
.build();在这个例子中，./src/data/ 目录下的所有 JSON 文件中的所有数据都被注入到了 Metalsmith 的模板中。
例如，我们可以在 Metalsmith 的模板中使用如下的语法引用 JSON 数据：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
----- ------------------ --------------------------
----- --------------- -----------------------
-------
------
------------------
----------------------
----
------- ----------
-----------------
---------
-----
-------
-------其中，{{title}}、{{description}} 和 {{keywords}} 都是从我们的 JSON 数据文件中读入进来的。
指定 JSON 文件名
我们还可以通过直接指定 JSON 文件的名称来读入其中的数据。例如，我们有一个名为 metadata.json 的 JSON 文件，其中包含了网站的元数据信息：
{
"title": "使用 metalsmith-json",
"description": "metalsmith-json 插件使用教程",
"keywords": "metalsmith, json, 插件"
}我们可以通过如下配置将其应用于我们网站的源代码中：
metalsmith(__dirname)
.use(metalsmithJson({
pattern: 'metadata.json',
property: ['metadata']
}))
.build();在这个例子中，指定了 pattern 为 metadata.json，而其他 JSON 文件则不予处理。我们还可以指定要注入的 JSON 数据属性名称，并将其注入至我们使用 metalsmith 生成的 HTML 文件中。例如：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------------------
----- ------------------ -----------------------------------
----- --------------- --------------------------------
-------
------
---------------------------
-------------------------------
----
------- -------------------
-----------------
---------
-----
-------
-------这样我们就可以使用 metalsmith-json 插件很方便地读取 JSON 文件中的数据，并将其注入到 metalsmith 的源文件中，进而生成我们想要的 HTML 页面。
总结
使用 metalsmith-json 插件能够让我们轻松读取 JSON 文件中的数据，并将其应用于 metalsmith 生成的 HTML 模板中。在开发网站时，使用这个插件可以方便地简化数据的读取和注入过程，大大提升了网站的开发效率。
不过，在使用该插件时，我们也需要注意其配置和使用方式，以确保能够顺利读取数据并正确地应用于我们的网站中。希望本文的介绍能够帮助您更轻松地使用该插件，并带来更快速的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040c14