パグ

パグ はHTMLにコンパイルするテンプレート言語です。Parcelは @parcel/transformer-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")

パグはHTMLのようにParcelのエントリとして使用できます

parcel index.pug

パグは、HTMLファイルやJSファイルなど、URLが許可されている場所ならどこでも参照できます。コンパイルされた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ファイルを使用して設定できます。利用可能なオプションの詳細については、パグAPIリファレンスを参照してください。

ローカル

パグ構成にlocalsオブジェクトを定義できます。これにより、パグテンプレートがレンダリングされるときにパグテンプレートに提供されます。

h1 Hello, #{name}!

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