Metalsmith 是一个简单且灵活的静态网站生成器，它可以帮助我们轻松地创建并生成静态网站。而 metalsmith-markdown-precompiler 则是一个可以让我们在 Metalsmith 当中使用 Markdown 的插件，它可以将 Markdown 文件转换为 HTML 文件。本文将详细介绍如何使用这个插件来生成静态的 Markdown 网站。
安装
要使用 metalsmith-markdown-precompiler，首先需要在你的项目中安装它。打开终端，切换到项目的根目录下，然后运行以下命令来进行安装：
npm install metalsmith-markdown-precompiler --save-dev
安装完成后，即可在项目中使用该插件。
使用
接下来，我们就可以开始使用 metalsmith-markdown-precompiler 了。首先，需要在 Metalsmith 的配置文件中添加该插件，示例配置文件如下所示：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ----------- - -------------------------------------------
---------------------
--------------
---------------------
----------------
------------------
-------- ----------
------- ------
-------------- -------- -
------ --------------------
-- ------------------------ --- ----- - ------------ --------
-
---
--------------- ----- -
-- ----- ----- ----
---在这个配置文件中，我们首先引入了三个模块，分别是 metalsmith、metalsmith-markdown 和 metalsmith-markdown-precompiler。然后，我们创建了一个名为 metalsmith 的对象，并通过这个对象来进行 Metalsmith 的配置。
在配置之后，我们使用了 Metalsmith 的 use 方法来使用 metalsmith-markdown 和 metalsmith-markdown-precompiler 这两个插件。在使用 metalsmith-markdown-precompiler 插件时，我们在其配置选项中指定了要生成的文件的文件名模式，以及要使用的 Markdown 引擎等选项。最后，我们通过 build 方法来启动 Metalsmith 的生成程序。
配置选项
metalsmith-markdown-precompiler 的配置选项如下：
pattern：要处理的文件的文件名模式。默认为**/*.md，表示处理所有后缀为 .md 的文件。engine：要使用的 Markdown 引擎，可选值包括marked、markdown-it和commonmark。默认为marked。preCompile：用于预处理 Markdown 文件的函数。该函数需要接收两个参数：md是一个字符串类型的 Markdown 内容，options是当前的 metalsmith-markdown-precompiler 配置选项。默认值为：
function (md) {
return md;
}在使用该函数时，你可以通过 options 参数来自定义生成的 HTML 内容。
示例代码
以下是一个简单的示例代码，其中包含了一个 Markdown 文件和实现其内容的 HTML 文件。在代码中，我们使用了 markdown-it 引擎来实现 Markdown 和 HTML 的转换。
myFile.md
-- -------------------- ---- ------- - -- ---- ---- ---- -- - ---- ---- ----- ------ -- ------- --- ----- -- -- -------- -- ------- --- ------ - ------- -- ---- ------ ------------------ --------
myFile.html
<h1>My blog post</h1> <p>This is a blog post about metal.</p> <h2>Section One</h2> <p>Metal is an element.</p> <h2>Section Two</h2> <p>Here's a picture of some metal:</p> <p><img src="metal.png" alt="Metal" title="Metal"></p>
总结
通过使用 metalsmith-markdown-precompiler 插件，我们可以轻松地将 Markdown 转换为静态的 HTML 内容。该插件功能强大，且易于配置和使用，是我们进行静态网站生成的重要辅助工具之一。在实际应用中，我们可以通过配置该插件的选项来满足不同的需求，并生成出符合我们要求的静态网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f401d8e776d08040c47