Pug

Pug 是一种编译为 HTML 的模板语言。Parcel 使用 @parcel/transformer-pug 插件自动支持 Pug。当检测到 .pug 文件时，它将自动安装到你的项目中。

¥Pug is a templating language that compiles to HTML. Parcel supports Pug automatically using the @parcel/transformer-pug plugin. When a .pug file is detected, it will be installed into your project automatically.

Pug 被编译为 HTML 并按照 HTML 文档中的描述进行处理。

¥Pug is compiled to HTML and processed as described in the HTML docs.

用法示例

¥Example usage

doctype html
html(lang="en")
  head
    link(rel="stylesheet", href="style.css")
  body
    h1 Hello Pug!
    p.
      Pug is a terse and simple templating language with a
      strong focus on performance and powerful features.
    script(type="module", src="index.js")

Pug 可以像 HTML 一样用作 Parcel 的入口：

¥Pug may be used as an entry to Parcel just like HTML:

parcel index.pug

Pug 也可以在允许 URL 的任何地方引用，例如在 HTML 文件中，或在 JS 文件中。要将已编译的 HTML 内联到 JavaScript 文件中，请使用 bundle-text: 方案。详情请参见打包内联。

¥Pug may also be referenced anywhere a URL is allowed, e.g. in an HTML file, or from a JS file. To inline the compiled HTML into a JavaScript file, use the bundle-text: scheme. See Bundle inlining for details.

import html from 'bundle-text:./index.pug';

document.body.innerHTML = html;

配置

¥Configuration

Pug 可以使用 .pugrc、.pugrc.js、.pugrc.mjs、.pugrc.cjs、pug.config.js、pug.config.mjs 或 pug.config.cjs 文件进行配置。有关可用选项的详细信息，请参阅 Pug API 参考。

¥Pug can be configured using a .pugrc, .pugrc.js, .pugrc.mjs, .pugrc.cjs, pug.config.js, pug.config.mjs, or pug.config.cjs file. See the Pug API Reference for details on the available options.

注意：应尽可能避免基于 JavaScript 的配置，因为它会降低 Parcel 缓存的效率。请改用基于 JSON 的配置格式（例如 .pugrc）。

¥Note: JavaScript-based configuration should be avoided when possible because it reduces the effectiveness of Parcel's caching. Use a JSON based configuration format (e.g. .pugrc) instead.

本地

¥Locals

你可以在 Pug 配置中定义 locals 对象，这将在渲染时提供给你的 Pug 模板。

¥You can define a locals object in your Pug config, and this will be provided to your Pug templates when rendering.

index.pug:

h1 Hello, #{name}!

.pugrc:

{
  "locals": {
    "name": "Puggy"
  }
}