介绍
metalsmith-jstransformer-layouts 是一个基于 Metalsmith 的插件，它可以将你的静态网站内容与一些可定制的布局文件结合起来，以生成最终的网页。它使用 JSTransformers 作为底层引擎，支持多种模板语言，包括 Handlebars、Jade、Swig 和 EJS 等等。
本文旨在介绍如何在前端项目中使用 metalsmith-jstransformer-layouts 插件，详细讨论它的使用方法和配置选项，并提供一些示例代码。
安装
在使用 metalsmith-jstransformer-layouts 之前，需要先完成环境准备和安装工作。首先确保本地已经安装好 Node.js 和 npm 包管理器。然后在终端中执行以下命令：
npm install metalsmith metalsmith-jstransformer-layouts --save-dev
该命令会自动下载和安装必要的依赖项，包括 metalsmith 和 metalsmith-jstransformer-layouts 插件本身。
使用
配置
在项目中安装好 metalsmith-jstransformer-layouts 之后，还需要在项目中添加一个配置文件 metalsmith.json，它指定了插件的各种配置选项。示例配置如下：
-- -------------------- ---- -------
-
--------- ------
-------------- --------
----------- -
-------- --- ---------
--------- ----- ----
--
---------- -
----------------------------------- -
--------- -------------
------------ ----------
----------- --------------------
---------- --------------
---------- ------------
--------- ----
-
-
-在上述配置文件中，有几个必要的配置项需要注意：
source：指定源文件的目录路径。destination：指定生成的网页文件的目录路径。metadata：指定全局变量，可以在模板中直接引用。plugins：指定使用的各种插件。在这里我们只使用metalsmith-jstransformer-layouts。
在 plugins 部分中，我们需要指定 metalsmith-jstransformer-layouts 插件的各种配置选项：
engine：指定底层转换引擎的名称，如handlebars、jade、swig或ejs等等。directory：指定布局文件（layout）的目录路径。默认是layouts。partials：指定局部视图（partials）的目录路径。可以使用包含通配符的字符串。在 Handlebars 中是*.hbs。default：指定默认布局文件的名称。pattern：指定匹配需渲染的文件路径的通配符。默认是**/*.html。rename：指定是否在生成目标文件时重命名文件（默认为false）。
示例
现在我们来看一个简单的示例，假设在项目的 src 目录下有如下文件：
|- src/ | |- about.html | |- contact.html | |- index.html | |- layout.hbs
其中 layout.hbs 是一个 Handlebars 模板文件，它定义了网站的布局：
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ----------
-------
------
--------
------ ----- -------
-----
----
------ ----------------------
------ ---------------------------------
------ -------------------------------------
-----
------
---------
-- -------- --
--------
------ -- ------ -- -- ---- --
---------
-------
-------我们接下来使用 metalsmith-jstransformer-layouts 插件将此布局文件与源文件结合起来，生成最终的网站文件。在终端中执行以下命令：
npx metalsmith
生成的网站文件将被保存在 build 目录中。现在您可以在浏览器中访问生成的文件，比如 build/index.html。
高级用法
分离配置文件
在项目开发和维护过程中，配置项可能变得越来越复杂和庞大。为了避免使配置文件变得难以维护，我们可以将其拆分为多个文件。
考虑一个示例配置文件 metalsmith.json，它有很多插件并有很多配置项，代码如下：
-- -------------------- ---- -------
-
--------- ------
-------------- --------
----------- -
-------- --- ---------
--------- ----- ----
--
---------- -
----------------------------------- -
--------- -------------
------------ ----------
----------- --------------------
---------- --------------
---------- ------------
--------- ----
--
-- ---- ----------
--
-- ---- ----- ---------
-现在我们可以创建一个名为 configs 的目录，其中包含多个配置文件，如下所示：
-- -------------------- ---- ------- - --- ---- - --- --- --- ------ - --- --- --- -------- - --- ------------- - ---------------- - --- --- --- ---------------
其中 metadata.json 文件包含了 metadata 配置项：
{
"metadata": {
"title": "My Website",
"author": "John Doe"
}
}而 _layouts.json 文件包含了与 metalsmith-jstransformer-layouts 插件相关的部分：
-- -------------------- ---- -------
-
----------------------------------- -
--------- -------------
------------ ----------
----------- --------------------
---------- --------------
---------- ------------
--------- ----
-
-然后我们可以将 metalsmith.json 文件修改如下：
-- -------------------- ---- -------
-
--------- ------
-------------- --------
---------- -
----------------------------------- -----------
-- ---- ----------
--
--------------- ----------
-------------- -
----------- ----------------
---------- ----------------
-- ---- ------ --------
-
-在上述修改后的文件中，我们使用了 configSource 和 configFiles 两个额外的配置项，从而支持以简单和统一的方式引入所有配置文件。
自定义 Helper
Handlebars 支持使用 Helper 帮助程序。Helper 是一个函数，它可以接收一个或多个参数，并在模板中使用。metalsmith-jstransformer-layouts 支持自定义这些 Handlebars Helper。
例如，我们可以创建一个名为 stripTitle 的 Helper，它可以接收一个参数并移除文本中的任何标题（以 ## 开头）：
const stripTitle = (text) => {
return text.replace(/^## .*$/gm, '');
};然后在模板中使用 {{ stripTitle myText }} 即可调用该 Helper。
鉴于 stripTitle 并不是内置 Helper，因此它需要在配置文件中进行定义：
-- -------------------- ---- -------
-
----------------------------------- -
--------- -------------
------------ ----------
----------- --------------------
---------- --------------
---------- ------------
--------- -----
---------- -
------------- -------------------------
-
-
-在上述示例中，stripTitle Helper 已被注册，并且它的实现被定义在了 ./helpers/stripTitle.js 文件中。
使用包装器
有时候，我们需要一个自定义的模板渲染过程。例如，在模板渲染时，我们需要执行一些特殊的逻辑或操作。这时，我们可以自定义一个包装器来代替默认的渲染过程。
一个示例的包装器如下：
-- -------------------- ---- -------
----- -- - --------------
----- ---- - ----------------
----- ---------- - ----------------------
----- ------- - -------- --------- -------- -- -
------ ------ ----- ----- -- -
----- ---------- - ---------------------------- ----------- -- -----------------
----- --- - ---------------------------------------------- ---------------------------
----- ---------- - ----------------- --------- ----- -
--------- ------------------------
---
------ ------------ ----------- ----- ------- -- -
-- ----- -
------ ----------
-
------------------- - ------------------
---------- -----------------
---
--
--上述包装器接收三个参数：render、metadata 和 options。其中 render 是渲染函数，metadata 是全局变量，options 是包装器的选项。
const wrapperOptions = {
directory: path.join(__dirname, 'layouts'),
default: 'default.hbs'
};
const wrapperRenderer = wrapper(renderer, metadata, wrapperOptions);在上述示例中，我们已创建了一个 wrapper 函数，并将其应用到 metalsmith-jstransformer-layouts 插件中的 renderer 函数上。
结论
metalsmith-jstransformer-layouts 插件提供了一种方便的方式来生成包含动态布局和模板的静态网站内容。使用它，我们可以轻松地将模板文件、局部视图和全局变量等各种元素结合在一起，以生成最终的网页。
除此之外，本文还介绍了 metalsmith-jstransformer-layouts 插件的配置选项和高级用法，如将配置文件拆分为单个文件、自定义 Helper 和使用自定义包装器。这些内容都将帮助您更好地了解和使用 metalsmith-jstransformer-layouts 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040c1c