Metalsmith 是一个基于 Node.js 平台的静态站点生成器,它提供了一种灵活而简单的方式,用于将 Markdown、HTML、CSS 等原始文件转换为 HTML 页面。在本文中,我们将深入介绍如何使用 Metalsmith 创建静态站点。
安装 Metalsmith
要开始使用 Metalsmith,您首先需要安装它。可以通过 npm 来进行安装,执行以下命令:
--- ------- ------ ----------
创建项目
创建一个新目录,并安装所需的插件,例如 metalsmith-markdown
和 metalsmith-layouts
:
----- ------- -- ------- --- ---- -- --- ------- ------ ---------- ------------------- ------------------
接下来,创建一个名为 index.js
的文件,在其中添加以下代码:
----- ---------- - ---------------------- ----- -------- - ------------------------------- ----- ------- - ------------------------------ --------------------- ----------- ------ --- ------ ------------ -- ------ ---- ----- ---- ----------- -- ---------------- ----------------------- ------------ ---------------- -------------- ------- ------------- ---------- ------------ -------- -------------- -------- ----------- --- -------------------- - -- ----- ----- ---- ------------------ ------------ ---
这段代码首先加载了所需的 Metalsmith 插件,然后使用 .metadata()
方法设置站点元数据。接下来,我们指定了源目录和目标目录,并启用了清除功能。最后,我们按顺序使用了 metalsmith-markdown
和 metalsmith-layouts
插件。
使用 Metalsmith 插件
Metalsmith 的核心功能是基于插件的。每个插件都会修改文件对象并将其传递给管道中的下一个插件。下面是一些常用的 Metalsmith 插件:
metalsmith-markdown
将 Markdown 文件转换为 HTML 文件。在上面的示例代码中,我们已经使用该插件。
--- ------- ------ -------------------
----- -------- - ------------------------------- --------------------- -----------------
metalsmith-permalinks
生成永久链接,从而使页面 URL 更加友好。
--- ------- ------ ---------------------
----- ---------- - --------------------------------- --------------------- -------------------
metalsmith-layouts
将文件渲染到指定的模板中。在上面的示例代码中,我们已经使用该插件。
--- ------- ------ ------------------
----- ------- - ------------------------------ --------------------- -------------- ------- ------------- ---------- ------------ -------- -------------- -------- ----------- ----
总结
Metalsmith 是一个非常灵活和强大的静态站点生成器,它使用插件来实现其核心功能。通过本文的介绍,您应该已经了解了如何使用 Metalsmith 创建静态站点,并且能够使用各种插件来扩展其功能。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/45536