Pug

本页大纲

安装
Pug 选项
- 添加编译/渲染选项
支持的功能

Eleventy 简称	文件扩展名	npm 包
`pug`	`.pug`	`pug`

Pug 模板以前被称为 Jade 模板（项目已重命名）。

Eleventy 或插件版本	`pug` 版本
`@11ty/eleventy@0.x`	`pug@3.x`
`@11ty/eleventy@1.x`	`pug@3.x`
`@11ty/eleventy@2.x`	`pug@3.x`
`@11ty/eleventy@3.x` 及更新版本	N/A
`@11ty/eleventy-plugin-pug@1.x`	`pug@3.x`

您可以覆盖 .pug 文件的模板引擎。更多信息请阅读更改模板的渲染引擎。

安装

pug 模板语言在 v3 中已从 Eleventy 核心中移出，现在需要插件安装。

GitHub 上的 11ty/eleventy-plugin-template-languages

npm install @11ty/eleventy-plugin-pug

添加到您的配置文件：

eleventy.config.js

ESM CommonJS

import pugPlugin from "@11ty/eleventy-plugin-pug";

export default function (eleventyConfig) {
eleventyConfig.addPlugin(pugPlugin);
}

const pugPlugin = require("@11ty/eleventy-plugin-pug");

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pugPlugin);
}

Pug 选项

添加编译/渲染选项

使用配置 API 设置编译/渲染选项。查看所有 Pug 选项。

eleventy.config.js

ESM CommonJS

import pugPlugin from "@11ty/eleventy-plugin-pug";

export default function (eleventyConfig) {
eleventyConfig.addPlugin(pugPlugin, {
debug: true
});
}

const pugPlugin = require("@11ty/eleventy-plugin-pug");

module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(pugPlugin, {
debug: true
});
}

支持的功能

功能	语法
✅ 包含（绝对路径）	`include /includedvar.pug` 在 `_includes/includedvar.pug` 中查找。不处理 include 文件中的前置内容。
✅ 包含（相对路径）	相对路径使用 `./`（模板的目录）或 `../`（模板的父目录）。示例：`{% include ./included.pug %}` 在模板的当前目录中查找 `included.pug`。不处理 include 文件中的前置内容。
✅ 扩展（绝对路径）	`extends /layout.pug` 在 `_includes/layout.pug` 中查找。不处理 include 文件中的前置内容。
✅ 扩展（相对路径）	相对路径使用 `./`（模板的目录）或 `../`（模板的父目录）。示例：`{% extends ./layout.pug %}` 在模板的当前目录中查找 `layout.pug`。不处理 extends 文件中的前置内容。

Pug

安装

Pug 选项

添加编译/渲染选项

支持的功能

其他页面在 Template Languages