本篇文章主要介绍如何使用 metalsmith-jade 这个 npm 包来帮助在前端开发中使用 jade 的模板引擎。
jade 模板引擎
首先，我们先来了解一下什么是 jade 模板引擎。jade 是一种高效、简洁的模板引擎，它可以快速生成 HTML 标记。在 jade 中我们可以通过缩进及标签缩写的方式来生成 HTML 标记，这种方式让我们能够更快的编写模板。下面是一个简单的 jade 模板示例：
-- -------------------- ---- -------
------- ----
---------------
----
------ ---------
-------------------------------
-- ----- -
------
-
----
-- ---- - ---- -------- ------
--------------
- --- --- -------
-------------------
- --------- ------如上所示，我们可以通过 “标签名#id.class” 或者 “标签名(class)” 的方式来生成 HTML 标记，同时也可以将文本与变量绑定到标记上，这让我们能够更灵活的创建模板。
以上只是 jade 模板引擎的简单介绍，感兴趣的读者可以去 jade 官网 深入学习。
使用 metalsmith-jade
在前端开发过程中，我们常常需要使用模板引擎来生成 HTML 页面。而在 node.js 环境下，有很多优秀的模板引擎可供选择，其中 jade 也是一种非常流行的选择。而 metalsmith-jade 这个 npm 包则是提供了使用 jade 模板引擎来构建静态页面的工具。
metalsmith-jade 的使用非常简单，我们只需要通过 npm 安装这个包，然后在项目中引用并配置即可。以下是一个基本的使用示例：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---- - ---------------------------
---------------------
--------------
---------------------
------------
------------ -- -
-- ----- ----- ----
------------------ -----------
---如上所示，我们首先引入了 metalsmith 和 metalsmith-jade 包，然后通过 metalsmith(__dirname) 创建了一个 metalsmith 实例。接着我们配置了输入和输出目录，并通过 .use(jade()) 来将 jade 模板处理器加入到 metalsmith 的构建流程中。最后通过 build 方法来生成网页。
同时，我们还可以对 jade 的渲染过程进行二次定制，以满足更高级的需求，以下是一个示例：
-- -------------------- ---- -------
---------------------
--------------
---------------------
-----------
------------ -----
------- -----
------- -
------ --- ------
------- ----- ----
--
----- -----------------------
---
------------ -- -
-- ----- ----- ----
------------------ -----------
---如上所示，我们在 jade() 里传入了一些参数。useMetadata: true 表示要从 markdown 文件里提取一些元数据作为变量，pretty: true 表示用美观的形式输出 HTML；locals 通过这个对象可以在 jade 模板里预置一些变量，而 jade: require('jade').compile 参数则是自定义 jdae 模板的编译方式。以上示例只是部分参数的使用，读者可以根据自己需求自行选择。
总结
通过使用 metalsmith-jade 这个 npm 包，我们可以更简单、高效的使用 jade 模板引擎来生成网页。希望本篇文章对前端开发者们有所帮助，并欢迎读者们自行探索更加高级的用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040c07