Metalsmith 是一个流行的静态网站生成器，可以通过插件扩展其功能。其中，metalsmith-templates 是一个重要插件，它提供了将源文件和元数据渲染为 HTML 页面的能力。
安装和使用
首先，确保已安装 Node.js 和 npm。然后，使用以下命令安装 metalsmith 和 metalsmith-templates：
npm install --save-dev metalsmith metalsmith-templates
接下来，在项目根目录下创建一个名为 src 的文件夹，并在其中添加源文件和模板文件。例如，假设有一个 src/index.md 文件和一个 src/template.hbs 模板文件，其中 template.hbs 是 Handlebars 模板。
下一步是在项目根目录下创建一个名为 build.js 的构建脚本，该脚本将配置 Metalsmith 并运行它。以下是一个示例脚本：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- --------- - --------------------------------
---------------------
--------------
---------------------
----------------
------- -------------
---------- -----
---
------------ -- -
-- ----- ----- ----
------------------ ------------
---在此示例中，我们使用了 Handlebars 引擎，并指定模板目录为 src。
最后，运行构建脚本：
node build.js
如果一切顺利，生成的 HTML 文件将保存在 build 文件夹中。您可以在浏览器中打开其中任何一个文件来查看渲染结果。
模板语法
metalsmith-templates 支持多种模板引擎，包括 Handlebars、Jade、EJS 和 Swig。以下是一个示例 Handlebars 模板，用于渲染 src/index.md 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ----- ---------- ------- ------ ------ ----- ------- ------- -------- -------- ------- -------
在此示例中，我们使用了元数据中的 title 属性和源文件的 contents 属性来渲染页面标题和内容。
元数据
Metalsmith 使用 YAML 格式的元数据文件（通常命名为 metadata.yml），用于存储源文件的附加信息。这些信息可以在模板中使用，例如上面的示例中使用的 title 属性。
以下是一个示例 metadata.yml 文件：
title: My Website author: John Doe
要将元数据添加到源文件，请将其放置在文件顶部的 YAML 前置块中。例如：
--- title: About Me --- # About Me My name is John Doe...
插件
metalsmith-templates 将源文件和元数据渲染为 HTML 页面，但它并不负责处理其他任务，例如复制静态文件或压缩图像。这些任务通常由其他 Metalsmith 插件处理。
以下是一些与 metalsmith-templates 兼容的插件：
- metalsmith-markdown：将 Markdown 文件转换为 HTML。
- metalsmith-permalinks：为每个 HTML 页面生成永久链接。
- metalsmith-assets：将静态文件复制到输出目录中。
结论
使用 metalsmith-templates，您可以轻松地将源文件和元数据渲染为 HTML 页面，并通过其他 Metalsmith 插件扩展其功能。希望本文能够帮助您入门 Metalsmith 并了解其强大的模板引擎。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/45534