在前端开发中，静态网站生成器分为两大类：基于模板引擎的，和基于数据驱动的。其中基于数据驱动的一般采用 markdown 的方式存储文章，通过解析 markdown 文本来生成 HTML 静态页面。在这个过程中，我们需要对 markdown 解析进行处理，对于这个问题，有一个轻量的 NPM 包可以解决：metalsmith-view-model。本文将介绍 metalsmith-view-model 的使用教程，并提供相关示例代码。
metalsmith-view-model 是什么
metalsmith-view-model 是一个 View Model 插件，它是一个流式处理系统，用于将模型绑定到模板上。它支持模板引擎（Handlebars、EJS、Jade等）和 markdown 解析库（marked、markdown-it 等），并且还提供了一些辅助函数来帮助您在模板中访问您的数据。
metalsmith-view-model 的安装
metalsmith-view-model 可以通过 npm 来安装：
npm install metalsmith-view-model
metalsmith-view-model 的使用
下面是使用 metalsmith-view-model 的最基本的示例配置：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -----------------------
----- --------- - ---------------------------------
---------------------
----------------
----------------------
----------------
------- -------------
----------- -
----- -
-------- -------------
--------- -
------- ---------------
--
-------- ------- ----- -- -
------------- - -------------------------------------------
-
-
-
---
---------上述配置说明了如何使用 metalsmith-view-model 将 markdown 文件和视图模板进行结合。通过这种方式，在 markdown 文件和视图模板之间建立关联，我们可以轻松地实现静态网站的内容生成。
metalsmith-view-model 的具体功能
模板引擎支持
metalsmith-view-model 支持多种模板引擎，包括 Handlebars、EJS、Jade 等。在配置中，可以通过 engine 字段来指定使用的模板引擎：
.use(viewmodel({
engine: 'handlebars'
}))ViewModel 的定义
metalsmith-view-model 的核心是 ViewModel 的概念，ViewModel 就是将数据模型绑定到模板上的中间模型。ViewModel 定义了数据模型和模板之间的映射规则。在配置中，可以通过 viewModels 字段来定义多个 ViewModel：
.use(viewmodel({
viewModels: {
post: {}
}
}))ViewModel 匹配规则
在配置一个 ViewModel 时，需要指定 ViewModel 解析的文件路径和相应的元数据。可以通过 pattern 字段指定文件路径的匹配规则：
.use(viewmodel({
viewModels: {
post: {
pattern: 'posts/*.md'
}
}
}))另外，metalsmith-view-model 在解析文件时，会自动加入文件元数据，这些元数据可以在 ViewModel 中使用。可以通过 metadata 字段来定义元数据：
-- -------------------- ---- -------
----------------
----------- -
----- -
-------- -------------
--------- -
------- ---------------
-
-
-
---ViewModel 的处理
在指定 ViewModel 的 pattern（文件路径）和 metadata（元数据）后，需要指定 ViewModel 的处理方法。可以通过 process 字段，传入一个处理函数来自定义 ViewModel 的处理过程。
-- -------------------- ---- -------
----------------
----------- -
----- -
-------- -------------
--------- -
------- ---------------
--
-------- ------- ----- -- -
------------- - -------------------------------------------
-
-
-
---在上述示例中，我们将 markdown 文件的内容渲染为 HTML，然后将结果存储到模型的 content 属性中。
ViewModel 的辅助函数
在模板中，有时候需要获取一些辅助数据，例如日期格式化、URL 编码、字符串截取等。metalsmith-view-model 提供了一些辅助函数来帮助您在模板中访问您的数据。
以 Handlebars 模板引擎为例，我们可以在模板中像这样使用 helpers：
<div class="post-meta">
<span class="published-date">{{formatDate this.publishedDate 'MMM D, YYYY'}}</span>
</div>在上述例子中，调用了 formatDate 函数。定义如下：
-- -------------------- ---- -------
----------------
----------- -
----- -
-------- -
----------- ------ ------- -- -
------ ----------------------------
-
-
-
-
---在上述 ViewModel 配置中，我们定义了名为 formatDate 的 helper 函数，该函数使用 moment.js 库来格式化日期。
metalsmith-view-model 示例代码
下面是一个完整的使用 Handlebars 和 metalsmith-view-model 生成静态网站的示例代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---------- - ----------------------
----- -------- - -----------------------
----- ------ - ------------------
----- --------- - ---------------------------------
---------------------
-----------
----- -
------ --- ------- -----
-
--
----------------
----------------------
------------
----------------
------- -------------
----------- -
----- -
-------- -------------
--------- -
------- ---------------
--
-------- -
----------- ------ ------- -- -
------ ----------------------------
-
--
-------- ------- ----- -- -
------------- - -------------------------------------------
-
--
----- -
-------- -------
--------- -
------- ----------
--
-------- ------- ----- --------- -- -
------------- - -------------------------------------------
-
-
-
---
------------ ----------- ----- -- -
----- ---- - -------------------
---------------- -- -
----- ---- - -----------
----- --------- - -------------- -- ---
----- -------- - -
----- ---------------------------
----- -------- -- --
--
----- ---- - ----------------- --------- -----------
----- ---- - ---------------------------------------------------
------------- - ------------------
--
-------
--
---------- -- -
-- ----- ----- ----
---上述代码完成了以下工作：
- 使用 Handlebars 编写了两个布局模板：blog-post.hbs 和 page.hbs。
- 使用 markdown 文件编写了一个博客文章，存放在 posts 目录。
- 使用 markdown 文件编写了一个常规网站页面，存放在根目录。
- 使用 Handlebars 辅助函数对日期进行格式化。
- 通过 metalsmith-view-model 将 markdown 对应到 layout 模板上。
- 最后，将页面渲染成 HTML 文件并输出到 dist 目录。
总结
metalsmith-view-model 是一个简单但功能强大的 NPM 包，它可以帮助我们在使用静态网站生成器时更加灵活方便。通过学习本文中的示例代码，我们可以更深入了解 metalsmith-view-model，掌握其使用方法。这将有助于我们更好地将静态网站生成器应用到我们的项目中，并提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158151