在前端开发中，常常需要将静态页面和数据进行关联。为了方便管理和开发，我们可以使用各种静态网站生成工具。对于 Node.js 环境下的静态网站生成器 Metalsmith 来说，其模板中心管理工具 metalsmith-models 可以帮助我们更好地管理数据，同时也更好地掌控模板与数据间的关系。
什么是 metalsmith-models
metalsmith-models 是一个适用于 Metalsmith 的插件，可以将读取到的数据注入到模板中，就像一般的 Web 应用中一样。通过这个插件，我们不但可以更好地管理和组织数据，还可以将不同类型和来源的数据进行处理和过滤，以更好地满足业务需求。
安装和使用
使用 metalsmith-models 插件首先要安装 Metalsmith，并且需要预安装好一些必要的插件，比如 metalsmith-markdown、metalsmith-templates、metalsmith-collections 等。
在安装好 Metalsmith 和必要的插件后，我们可以通过 npm 进行安装：
npm install metalsmith-models --save
如果使用的版本在 2.0.0 及以上，还需要使用另一个插件 metalsmith-metadata 才能满足使用。
安装完成后，我们需要在 Metalsmith 的配置中使用模板中心插件，同时也需要指定模板引擎。下面以 Handlebars 为例，展示一份简单的配置：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ----------- - ----------------------------------
----- --------- - --------------------------------
----- ------ - -----------------------------
---------------------
-----------
----- -
------ --- ------
---- --------------------
-
--
----------------
-----------------------
----------------
------------------
------ ------------
---
-------------
---------- --------
---
-----------------------------
-------------------- -
-- ----- ----- ----
---在这个配置中，我们使用 markdown，collections 等插件定义如何读取和处理数据。当我们需要将数据注入到模板中时，只需要在定义的模板内添加 {{data}} 即可。其中 data 是数据的变量名，与数据在 metalsmith-models 定义时所设置的变量名相对应。
在 Metalmsith 中注册 metalsmith-models 插件时，我们可以通过 directory 参数指定数据所在的目录。默认情况下，metalsmith-models 将所有的数据存储在一个名为 models 的对象中，可指定 models 参数来改变默认值。
如何定义数据
在 Metalmsith 中使用 metalsmith-models，我们需要先定义数据。数据的定义操作在 models 中完成，接受一个配置对象。由于 metalsmith-models 不同于其他的 Metalsmith 插件，例如 markdown 和 collections，它不会自动读取文件或者从某个目录中加载数据。为了让 metalsmith-models 正确地读取到数据，必须通过 models 插件的配置来定义这些数据。
先来看一下数据的定义操作：
-- -------------------- ---- -------
--------
---------- ---------
----- -
------ --- ------
---- --------------------
--
------ -
----------- --------
-------- -------------
------- -------
-------- -----
------ --
-
---在上面的代码中，我们将数据分为两类：网站元数据和文章元数据。可以看到数据的定义采用了键值对和对象嵌套的方式。每个键值对中的键是数据的名称，它必须唯一且符合标识符的规则。而键值对中的值是一个对象，用于定义该数据实体的各种属性。
数据属性
- directory：数据文件所在的目录，默认在项目的根目录下。如果需要更改位置，可以通过指定这个属性来告诉 metalsmith-models 应该查找哪个目录下的数据文件。
- pattern：数据文件的匹配模式，默认为
*.json。该参数支持通配符，例如：**/*.json表示递归目录下的所有 json 文件。可以使用 models 插件的 glob 方法查找指定的文件。 - collection：元数据的集合名称，必须唯一。与 collections 插件相似，通过定义集合名称来组织数据。同一个模板可以渲染多个集合和数据。
- exclude：要排除的数据文件。可以指定一个字符串或者一个列表来排除一个或多个文件或者目录。该属性的值可以使用 glob 语法，支持多条规则，例如
exclude: ['posts/*.md', 'posts/*/*.md']。 - limit：返回数据的限制条数。默认为 -1，表示不限制。
- sortBy：用于排序的字段名称
- sortOrder：排序的顺序。默认值为 asc。指定为 desc 表示按倒序排列。
除了上述属性之外，我们还可以通过添加任何的自定义数据来设置元数据。定义好数据后，我们还可以使用 handlebars 的 helper 和 partial 等其他方法来处理和渲染数据。
示例代码
下面，我们来看一下使用 Metalsmith 和 metalsmith-models 插件搭建一个静态网站的完整示例代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ----------- - ----------------------------------
----- --------- - --------------------------------
----- ------ - -----------------------------
---------------------
-----------
----- -
------ --- ------
---- --------------------
-
--
----------------
-----------------------
----------------
------------------
------ ------------
---
-------------
---------- ---------
----- -
------ --- ------
---- --------------------
--
------ -
----------- --------
-------- -------------
------- -------
-------- -----
------ --
-
---
-----------------------------
-------------------- -
-- ----- ----- ----
---总结
使用 metalsmith-models，我们可以很方便地将数据注入到模板中，这在制作静态页面和博客等类型网站时非常重要。除此之外，metalsmith-models 还支持大量自定义的操作，可根据不同的业务需求进行灵活的配置和处理。不过需要注意的是，使用模板中心插件的同时，还需要了解其他的 Metalsmith 插件，并且需要具有一定的模板渲染知识。如果您是新手，可以从一个简单的示例开始，深入研究后才能获得更丰富的体验和挑战。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040c8b