在前端开发中，静态站点是一个很常见的项目类型，与应用程序或动态Web站点相比，静态站点更加轻量，更易于实现，同时也具有更好的性能。
然而，静态站点的创建并不是一项简单的任务。虽然现在有很多静态站点生成器可供选择，但如何有效地管理和组织构建过程仍然是很具挑战性的。特别是在实现扩展性和可重用性方面。
在本篇文章中，我们将介绍一个称为 MetalSmith 的JavaScript库和一个特定的 MetalSmith 插件 metalsmith-markdown-partials，这些库将帮助我们更容易地创建和管理静态站点的构建过程。
MetalSmith 简介
MetalSmith是一个基于流式处理的静态站点生成工具，允许用户按照自定义的规则进行文件处理和转换，从而构建出最终的站点。在 MetalSmith 中，每个文件都可以作为流进行处理，这使得用户可以自由地串联和组合不同的转换器进行文件处理。
与其他现代静态站点生成器的区别是，MetalSmith 没有“内置”的模板引擎，而是允许用户自由选择和结合不同的插件来实现目标功能。
一个基本的 MetalSmith 项目通常包含：
- MetalSmith库
- 包含源文件的目录
- 包含构建输出文件的目录
- 配置文件，包括插件和其选项的列表和属性
例如，下面是一个简单的 MetalSmith 项目目录结构：
-- -------------------- ---- ------- ------- --- ---- - --- -------- - --- ----- - --- -------- --- ------ --- --------- --- ------------ --- ---------
MetalSmith 本身并不会生成任何输出，相反，它会将每个文件通过一系列插件处理后，最终写入输出目录。下面我们来介绍一个常用的 MetalSmith 插件：
metalsmith-markdown-partials 插件
metalsmith-markdown-partials 是一个 MetalSmith 插件，用于将 Markdown 文件转换为 HTML，并支持使用“偏差”——即片段文件来分解源文件内容。这个插件尤其适用于具有高度重用性内容的站点，如导航、页脚、头部等等。
与其他类似的 Markdown 转换器不同的是，metalsmith-markdown-partials 可以读取 Markdown 片段文件，并将其嵌入到 Markdown 主源文件的适当位置。这样，在每个源文件中可以更轻松地创建和组织内容。例如，下面是一个通用的包含页脚和导航信息的 Markdown 文件：
-- -------------------- ---- ------- --- ------ -- ---- ------- ---- --- ------- ----------- --- - ------- -- -- ---- ---- -- ---- ---- --- -- ----- --- ------ -- --- --- --
如上所示，在Markdown文件中，可以使用类似于 Handlebars 或 Mustache 的部分注释，然后在 MetalSmith 插件的处理过程中，将这些注释解释为 Markdown 片段文件。
使用 metalsmith-markdown-partials 非常简单。首先，您需要将其安装为项目的依赖项：
npm install metalsmith-markdown-partials --save-dev
然后在配置文件中引入该插件，并设置相关选项，如下面的示例所示：
-- -------------------- ---- -------
--- -------- - ----------------------------------------
-- ---
---------------
-- -- -------- - --- --
----------- -----------
-- ------- ----
---------- ----------
-- ------- ----
--------- -----------
-- --------------
---------- -------- ------ ----- -
-- ------------------ -------
------ -----
-
---简要说明一下上述示例代码中各个选项的作用：
defaultKey：设置存储 Markdown 内容的 metadata 主键directory：设置存储布局文件的路径partials：设置存储 Markdown 片段文件的路径highlight：设置是否对 Markdown 中的代码段进行语法高亮
有了这些基本的配置，现在 MetalSmith 系统就能够读取您的 Markdown 文件、布局文件和片段文件，并最终生成网站的 HTML 文件了。享受吧！
示例应用
下面是一个包含 MetalSmith 和 metalsmith-markdown-partials 插件的简单应用程序的文件结构：
-- -------------------- ---- ------- ------ --- ---- - --- -------- - --- -------- - --- ------ - - --- -------- - - --- -------- - --- ---------- - --- ---------- - --- ---------- --- ------ --- --------- --- ------------ --- ---------
通过配置文件，我们告诉 MetalSmith 具体使用哪些插件，如下：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -------- - ----------------------------------------
---------------------
----------------
-----------------------
---------------
----------- -----------
---------- ----------
--------- -----------
---------- -------- ------ ----- -
-- ------------------ -------
------ -----
-
---
--------------- ----- -
-- ----- -
----- ----
-
------------------ ------------
---在这个例子中，我们将所有的 Markdown 文件作为源文件（位于 /src 目录下），并将转换后的 HTML 写入输出目录（/build目录）中。上面的配置示例通过引入 metalsmith-markdown-partials 插件，设置默认选项来将 Markdown 转换为 HTML。
另外，我们还在 /src/layouts 目录下存储了布局文件（例如 layout.hbs），以及在 /src/partials 目录下存储了页面片段文件（例如 header.hbs 和 footer.hbs）。这样，MetalSmith 就可以自动将这些内容插入 Markdown 输入中，生成最终的 HTML 页面。
结论
MetalSmith 是一个非常灵活和强大的工具，特别是对于复杂和高度定制的静态站点生成需求。而 metalsmith-markdown-partials 则为 MetalSmith 的 Markdown 处理功能提供了额外的可定制性和重用性。
在本文中，我们向您介绍了这两个工具的一些基础知识，并提供了一些用例示例。如果您感兴趣，请查看官方文档以获取更多信息。
我们希望这篇文章对您有所帮助，同时也欢迎您分享您的应用经验、建议和评论。谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661581e8991b448e1f62