Metalsmith-github 是一个 npm 包，它可以在使用 Metalsmith 静态网站生成器的项目中，自动从 GitHub 上获取 Markdown 文件并转换为 HTML 文件。本文将介绍如何在前端项目中使用 Metalsmith-github 包，并提供详细步骤以及代码示例。
安装 Metalsmith-github 包
在终端中使用以下命令安装 Metalsmith-github。
npm install metalsmith metalsmith-markdown metalsmith-github --save
在这个命令中，我们安装了 Metalsmith，Metalsmith-Markdown 和 Metalsmith-github 三个 npm 包。
创建 Metalsmith 静态网站生成器项目
创建项目目录：
mkdir example cd example
在项目目录中,创建 package.json 文件：
npm init -y
这个命令将自动生成一个 package.json 文件。
现在,我们来创建一个目录，用于存放 Markdown 文件：
mkdir src
在 src 目录中，我们可以使用以下内容来创建一个简单的 Markdown 文件：
# Hello, world! This is a simple example of a Markdown file.
使用 Metalsmith-github 包
在项目中创建一个名为 build.js 的文件，在其中编写以下代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ------ - -----------------------------
---------------------
--------------
--------------
----------------
---------------------
------------ ------ -- -
-- ----- ----- ----
------------------ ------------
---在这个代码中，我们使用了三个 npm 包：Metalsmith，Metalsmith-Markdown 和 Metalsmith-github。
首先我们调用 metalsmith 函数来初始化 Metalsmith 静态网站生成器，并设置源目录为 src。然后我们调用 Metalsmith-github 的 github() 方法来获取 GitHub 的 Markdown 文件。接下来，我们使用 markdown() 方法将这些文件转换为 HTML 文件。最后，我们设置 Metalsmith 的生成目录为 build，并调用 build() 方法进行生成。
运行项目
在终端中执行以下命令运行项目：
node build.js
这个命令会遍历 src 目录中的 Markdown 文件，并转换为 HTML 文件，并保存到 build 目录中。
现在,我们来看一下生成的 HTML 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------------- ------- ------ --- ----------------------- ----------- ------- -- - ------ ------- -- - -------- --------- ------- -------
我们可以看到生成的 HTML 文件已经包含了原始 Markdown 文件的内容，同时也具有 HTML 文件的结构。
总结
通过本文，我们了解到如何使用 npm 包 Metalsmith-github 来获取 GitHub 上的 Markdown 文件，并将其转换为 HTML 文件。此功能可以极大地简化在静态网站生成器项目中生成内容的工作，同时也方便了团队协作，提高了项目开发效率。如果您从事前端开发工作，我们强烈建议您尝试使用 Metalsmith-github 包来为您的项目提供更好的生成支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bb2