在进行前端开发时，我们经常需要使用到构建工具来编译代码并生成静态文件。而 metalsmith-hbt-md 是一个非常实用的 npm 包，它可以将 handlebars 和 markdown 结合起来，生成静态网站。
本文将为大家详细介绍 metalsmith-hbt-md 的使用方法，帮助大家更好地利用这个工具进行项目开发。
安装
首先，我们需要安装 metalsmith 和 metalsmith-hbt-md：
npm install metalsmith metalsmith-hbt-md --save-dev
基本用法
使用 metalsmith-hbt-md，我们需要在项目目录下创建一个名为 "src" 的目录，其中存放着我们需要渲染的 handlebars 模板和 markdown 文件。
在 metalsmith 的配置文件中，我们需要加入以下代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----- - -----------------------------
---------------------
--------------
--------------------
-----
-------
-------- --------------
------- -------------
--------- -
------- ----------------------
------- ---------------------
-
--
-
------------ ------ -- -
-- ----- ----- ----
------------------ ------------
---在上面的代码中，我们指定了源文件目录为 "src"，输出目录为 "dist"，加入了 metalsmith-hbt-md 的插件，将后缀为 ".md.hbs" 的文件进行渲染并生成相应的 html 文件。
我们还可以指定 handlebars 的模板引擎和需要使用的 partials（即模板片段），从而生成更加完整和美观的页面。
需要注意的是，模板的渲染过程中，变量值可通过在 markdown 文件前添加属性信息来进行传递。例如：
--- title: My First Post date: 2022-05-01 author: John Doe --- # Welcome! This is my first blog post!
上面的 "title"、"date" 和 "author" 属性可以在模板中直接调用。
进阶用法
在实际开发中，我们还需要对 metalsmith-hbt-md 进行更细致的配置，以满足不同的需求。下面将介绍一些进阶用法。
生成多个输出目录
有些时候，我们需要将生成的网站在不同的目录下进行部署。这时，可以使用 metalsmith 的 collections 功能。在配置文件中添加以下代码：
-- -------------------- ---- -------
---------------------
-- ---
-----
-------------
------ -
-------- -------------
------- -------
-------- ----
-
--
-
-----
-------
-------- -------------
------- -------------
------------ -
------ -------
-
--
-
-- ---上面的代码中，我们定义了一个名为 "posts" 的 collection，将所有后缀为 ".md" 的文件匹配到这个 collection 下。
接着，在插件的配置中，我们指定匹配的文件为 "posts/*.md"，同时指定生成的 collections 目录为 "posts"。
这样，我们就可以在生成的网站中创建一个 "posts" 目录，并将对应的 html 文件放到该目录下。
使用 markdown 插件
在实际开发中，我们通常需要使用一些 markdown 的扩展功能。这时，可以使用 markdown-it 或其他相应的插件，将这些功能添加到渲染器中。
在以下代码中，我们添加了 markdown-it-table-of-contents 插件，用于生成目录：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ------------- - -----------------------------------------
----- ----- - -----------------------------
---------------------
-- ---
-----
-------
-------- -------------
------- -------------
-------------- -------- ---------- -
----- -- - ------------ ----- ---- ---
----------------------
------ --------------------
-
--
-
-- ---在代码中，我们首先引入了 markdown-it 和 markdown-it-table-of-contents，然后在插件的配置中，将 parseMarkdown 属性设置为一个函数。该函数接收 markdown 源码，并通过 markdown-it 将其转换为 html。
通过这种方法，我们可以根据需要添加任意数量的 markdown 插件，实现更强大的功能。
示例代码
下面是一个完整的示例代码，帮助大家更好地理解 metalsmith-hbt-md 的使用方法：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----------- - ----------------------------------
----- ---------- - -----------------------
----- ------------- - -----------------------------------------
----- ----- - -----------------------------
----- -- - ------------ ----- ---- ---
----------------------
---------------------
--------------
--------------------
-----
-------------
------ -
-------- -------------
------- -------
-------- ----
-
--
-
-----
-------
-------- -------------
------- -------------
-------------- -------- ---------- -
------ --------------------
--
------------ -
------ -------
--
--------- -
------- ----------------------
------- ---------------------
-
--
-
------------ ------ -- -
-- ----- ----- ----
------------------ ------------
---在上面的代码中，我们使用了 metalsmith-collections 插件对源文件进行分类，使用了 markdown-it 和 markdown-it-table-of-contents 插件对 markdown 进行处理，并使用了 metalsmith-hbt-md 将它们编译成 html。同时，我们也指定了输出的目录结构和使用的模板的片段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bd1