在前端开发中，Metalsmith 是一个强大的静态网站生成器，它是一个基于 Node.js 构建的工具，可以帮助开发者自动化完成构建、转换和优化网站的过程。Metalsmith 采用了类似于 Gulp 和 Grunt 的管道（Pipeline）方式，通过不同的插件来实现不同的功能。
Metalsmith-layouts 是 Metalsmith 的一个插件，可以帮助我们自动化渲染静态网站的布局。但是，这个插件有一个限制，就是只能支持 Handlebars、Mustache、Nunjucks 这三种模板引擎文件后缀名。如果你使用了其他的模板引擎，例如 Pug、EJS、Jade 等等，那么 Metalsmith-layouts 就无法正常工作了。
为了解决这个问题，我们可以使用另外一个 Metalsmith 插件：metalsmith-layouts-add-extension。这个插件可以让 Metalsmith-layouts 支持读取其他模板引擎的文件，例如 Pug、EJS、Jade 等等。
安装
在项目的根目录下执行以下命令来安装 metalsmith-layouts-add-extension：
npm install metalsmith-layouts-add-extension --save-dev
使用
在 Metalsmith JavaScript 文件中，先引入插件：
const layouts = require('metalsmith-layouts');
const layoutsAddExtension = require('metalsmith-layouts-add-extension');
const pug = require('pug');然后，将 layoutsAddExtension 插件作为 layouts 插件的参数使用：
-- -------------------- ---- -------
---------------------
--------------
------- ------
---------- ----------
--------- -----------
-------- -------------
----------------------------
------- ---
----
---------在上面的代码中，我们指定了 Pug 作为模板引擎，engine 参数指定了 Pug 的变量名。如果你使用的是 EJS，那么将变量名指定为 ejs；如果是 Jade，则指定为 jade。然后，指定了 Pug 模板文件所在的目录、局部模板文件所在的目录、默认的页面布局文件，接着使用 layoutsAddExtension 插件，并将 Pug 引擎传递给它，就完成了对 Pug 的支持。
接下来，我们可以在 Pug 文件中使用 extends 指令来继承父布局文件，例如：
extends default.pug block content h1= title p= description
在上面的代码中，我们继承了 default.pug 文件，同时使用 block 块语句来定义了内容块。在父布局文件中，我们可以使用 block 块语句来引用这个内容块，例如：
html
head
title Example
body
block content在上面的代码中，我们使用 block 块语句来引用了 content 内容块。当 Metalsmith 运行时，会自动将子布局文件中的内容块插入到父布局文件中。
此外，如果你想要使用自己的模板引擎并支持 Metalsmith-layouts，请确保你的模板引擎符合标准的模板引擎语法。在 Metalsmith-layouts 插件中，使用了一个变量 locals 来存储传递给模板引擎的数据，你的自定义模板引擎需要支持该变量的使用。
示例
使用 Pug 模板引擎的示例：
-- -------------------- ---- -------
-- ---------
----- ---------- - ----------------------
----- ------- - ------------------------------
----- ------------------- - --------------------------------------------
----- --- - ---------------
-- -- ---------- -----
---------------------
--------------
---------------------
--------------
------- ------
---------- ----------
--------- -----------
-------- -------------
----------------------------
------- ---
----
------------ ------ -- -
-- ----- -
-------------------
- ---- -
------------------ -------------
-
---在项目的 src 目录下，我们创建了多个 .pug 文件，例如 index.pug、about.pug 等等。这些 .pug 文件都继承了 default.pug 布局文件，在子文件中使用 block 块语句来定义自己的内容，例如：
extends default.pug block content h1= title p= description
在 default.pug 布局文件中，我们使用 block 块语句来引用了子文件中的 content 内容块。
在 build 目录下，我们可以看到生成了多个 HTML 文件，这些 HTML 文件就是由 Metalsmith 生成的静态网站。其中，每个 HTML 文件都应用了自己的布局文件，并将子文件中的内容块嵌入到父布局文件中，最终生成了完整的页面。
结论
Metalsmith-layouts 是一个强大的静态网站生成器，可以帮助我们自动化渲染静态网站的布局，但是它只支持 Handlebars、Mustache、Nunjucks 这三种模板引擎文件后缀名。为了使用其他的模板引擎，我们可以使用 metalsmith-layouts-add-extension 插件来扩展它的功能。这个插件可以让 Metalsmith-layouts 支持读取其他模板引擎的文件，非常方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005592381e8991b448d6976