npm 包 metalsmith-pug 使用教程

简介

metalsmith-pug 是一个基于 Node.js 的静态网站生成器，它使用 Pug 作为模板引擎来渲染页面。在使用 metalsmith-pug 之前，需要首先安装 Node.js 和 Metalsmith。

安装

我们可以通过 npm 来安装 metalsmith-pug：

$ npm install metalsmith-pug --save-dev

在安装完成后，我们可以在项目的 package.json 文件的 devDependencies 中找到 metalsmith-pug。

如何使用

配置文件

metalsmith-pug 的配置文件非常简单，我们可以在 Metalsmith 的配置文件中添加以下代码：

-- -------------------- ---- -------
----- ---------- - ----------------------
----- --- - --------------------------

---------------------
  ----------------
  -----------------------
  ------------
  -----------
  -------------------- -
    -- ----- ----- ----
  ---

以上代码会将 src 目录下的所有 Pug 文件编译成 HTML 文件，并将结果输出到 build 目录中。

变量

当我们需要将变量传递到 Pug 模板中时，可以在配置文件中添加一个对象来存储这些变量：

-- -------------------- ---- -------
----- ---------- - ----------------------
----- --- - --------------------------

---------------------
  ----------------
  -----------------------
  ------------
  -----------
    ------ --- ------
  --
  -----------
  -------------------- -
    -- ----- ----- ----
  ---

在模板中我们可以使用以下方式来获取变量：

doctype html
html
  head
    title= title
  body
    h1= title

配置选项

metalsmith-pug 支持多种配置选项，以下是一些常用选项：

basedir

说明：Pug 模板文件的根目录。

类型：String。

默认值：process.cwd()。

.use(pug({
  basedir: './src/templates'
}))

locals

说明：传递到模板中的变量对象。

类型：Object。

默认值：{}。

.use(pug({
  locals: {
    title: 'My Title'
  }
}))

pretty

说明：是否美化输出的 HTML。

类型：Boolean。

默认值：false。

.use(pug({
  pretty: true
}))

debug

说明：是否输出调试信息。

类型：Boolean。

默认值：false。

.use(pug({
  debug: true
}))

示例代码

以下是一个简单的示例，演示了如何使用 metalsmith-pug：

1. 初始化项目。

$ npm init -y 

1. 安装 metalsmith 和 metalsmith-pug。

$ npm install metalsmith metalsmith-pug --save-dev

1. 创建以下文件：

.
├── build
├── src
│   ├── index.pug
│   └── layout.pug
└── .gitignore

1. 在 layout.pug 文件中添加以下代码：

doctype html
html
  head
    title= title
  body
    block content

1. 在 index.pug 文件中添加以下代码：

extends layout.pug

block content
  h1= title
  p Welcome to #{title}

1. 在配置文件中添加以下代码：

-- -------------------- ---- -------
----- ---------- - ----------------------
----- --- - --------------------------

---------------------
  ----------------
  -----------------------
  ------------
  -----------
    ------ --- ------
  --
  -----------
  -------------------- -
    -- ----- ----- ----
  ---

1. 运行以下命令：

$ node build.js

1. 打开 build 文件夹中的 index.html 文件，应该能够看到以下内容：

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- -------------
  -------
  ------
    ------ ----------
    ---------- -- -- ---------
  -------
-------

总结

在本文中，我们介绍了如何使用 metalsmith-pug 这个 npm 包来生成静态网站。另外，我们还讨论了一些常见的配置选项和示例代码以供参考。希望这篇文章能够帮助到你学习 metalsmith-pug，同时也希望你能够进一步了解这个工具的功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d19