Metalsmith 是一个基于 Node.js 的静态网站生成器，而 Metalsmith Sugar 则是其中一个非常实用的插件，它可以让我们更快捷地创建和管理静态网站的模板和内容。
本文将详细介绍 Metalsmith Sugar 的使用方法和优势，以及一些实用的示例代码，帮助大家更好地掌握这个工具。
什么是 Metalsmith Sugar
Metalsmith Sugar 是一个基于 Metalsmith 的插件，它提供了一个易于使用的语法来管理网站的内容和模板。
通过使用 Metalsmith Sugar，我们可以更快速地创建和修改网站的页面，包括添加和修改网站的元数据、使用模板引擎渲染内容、抽取元素为组件等等。
Metalsmith Sugar 的优势
Metalsmith Sugar 有如下优势：
- 简单易用：使用 Metalsmith Sugar 可以更快捷地创建和管理网站的内容和模板，大大提高了开发效率。
- 高度可定制化：Metalsmith Sugar 相对于其他网站生成器，能提供更高度的自定义组件和特性。
- 高效的任务管理：Metalsmith Sugar 将多个任务整合在一起，大大提高了任务执行的效率，也给网站生成器开发者带来了不小的便利。
Metalsmith Sugar 的使用方法
安装
使用 npm 安装 Metalsmith 和 Metalsmith Sugar：
npm install metalsmith metalsmith-sugar --save-dev
引入和基本配置
在项目的主逻辑中引入 Metalsmith 和 Metalsmith Sugar，并配置基本参数：
const metalsmith = require('metalsmith');
const sugar = require('metalsmith-sugar');
metalsmith(__dirname)
.source('./src')
.destination('./dist')
.use(sugar())
.build();上述代码中，我们指定了项目的源文件夹 ./src 和生成文件夹 ./dist，并使用了 metalsmith-sugar 插件。
添加数据和元数据
在 src 目录下的每个文件夹中添加一个 metadata.json 文件，例如：
{
"title": "Hello World",
"date": "2018-01-01"
}该文件中的内容将会成为当前页面的元数据。同时，可以在该文件夹下添加任意个 .md 文件或 .html 文件，这些文件的内容将会被解析成页面内容。
页面模板
我们可以在项目目录下新建一个 layouts 文件夹，其中包含一个 default.hbs 文件作为默认的页面模板。在页面中使用 {{{body}}} 占位符插入页面内容，例如：
-- -------------------- ---- -------
--------- -----
------
------
--------- ----- ----------
-------
------
----------
-------
-------这里我们采用了 Handlebars 作为页面模板引擎。
添加页面
在 src 目录下任意位置新建一个 .md 文件或 .html 文件，同时创建这个页面对应的元数据文件 metadata.json。例如：
src/index.html src/index.metadata.json
其中 index.metadata.json 中包含：
{
"title": "My Static Website"
}然后我们可以将我们需要呈现的内容写在 index.html 中。例如：
<h1>{{title}}</h1>
<p>Hello, world!</p>代码示例
以下是一个完整的示例代码，展示了如何使用 Metalsmith Sugar 进行网站建设：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - ----------------------------
----- ------- - ------------------------------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ----------- - ----------------------------------
---------------------
----------------
----------------------
-------------
------------------
------ -
-------- ----------------
------- -------
-------- ----
-
---
----------------
--------------
------- -------------
--------- -------------------
---------- ----------
-------- -----------
---
---------其中，我们还使用了 metalsmith-layouts 进行页面布局，handlebars 作为页面模板引擎，metalsmith-markdown 用于将 Markdown 文件转换为 HTML 文件，并使用 metalsmith-collections 进行页面分类和排序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adf81e8991b448d8848