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
描述
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
目录之外。