Pug

使用 Pug 模板引擎创建页面和布局

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:
[ ".pug" ]
pageSubExtension string

Optional sub-extension for page files

includes string

Custom includes path

Default:
site.options.includes
options object

Options passed to Pug

See https://pugjs.org/api/reference.html#options

描述

Pug 是一种深受 Haml 影响的模板引擎。此插件允许你使用它来创建页面和布局。

安装

在你的 _config.ts 文件中导入此插件以使用它:

import lume from "lume/mod.ts";
import pug from "lume/plugins/pug.ts";

const site = lume();

site.use(pug(/* 选项 */)); // Options

export default site;

创建布局

_includes 目录中添加一个扩展名为 .pug 的文件。使用 front matter 来为模板设置数据。

---
title: 欢迎来到我的页面
intro: 这是我使用 Lume 的第一篇文章。希望你喜欢它!
---

doctype html
html
head
title= title

body
include partials/nav.pug

p= title

请注意,传递给 include 的路径是相对于 _includes 目录的。

创建页面

创建页面与创建布局相同;只需将 .pug 文件放在 _includes 目录之外。