Pug

Pug 是一種編譯成 HTML 的範本語言。Parcel 使用 @parcel/transformer-pug 外掛自動支援 Pug。偵測到 .pug 檔案時，會自動安裝到您的專案中。

Pug 編譯成 HTML，並按照 HTML 文件 中所述處理。

範例用法

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 的入口

parcel index.pug

Pug 也可以在允許 URL 的任何地方參照，例如在 HTML 檔案中，或從 JS 檔案中參照。若要將編譯後的 HTML 內嵌到 JavaScript 檔案中，請使用 bundle-text: 架構。有關詳細資訊，請參閱 內嵌套件。

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

document.body.innerHTML = html;

組態

可以使用 .pugrc、.pugrc.js、.pugrc.mjs、.pugrc.cjs、pug.config.js、pug.config.mjs 或 pug.config.cjs 檔案來設定 Pug。有關可用選項的詳細資訊，請參閱 Pug API 參考。

區域變數

您可以在 Pug 設定中定義一個 locals 物件，並在渲染時提供給 Pug 範本。

h1 Hello, #{name}!

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