Pugで共通化をする方法

Pugで共通化をする方法

Pugで共通化を行うには、テンプレートの継承やパーシャル（部分テンプレート）の使用が一般的です。
以下に、基本的な共通化の方法を説明します。

1. テンプレートの継承

親テンプレートを作成し、共通部分を定義します。
その後、子テンプレートが親テンプレートを拡張して、特定のブロックに独自の内容を追加します。

親テンプレート (layout.pug)

doctype html
html
  head
    title My Website
    block head
  body
    header
      h1 My Website
    block content
    footer
      p © 2024 My Website

子テンプレート (index.pug)

extends layout

block content
  p Welcome to my website!

block head
  link(rel="stylesheet", href="/styles.css")

2. パーシャル（部分テンプレート）

共通化したい部分をパーシャルとして別のファイルに分け、必要な場所でインクルードします。

パーシャルテンプレート (header.pug)

header
  h1 My Website
  nav
    ul
      li: a(href='/') Home
      li: a(href='/about') About
      li: a(href='/contact') Contact

メインテンプレート (index.pug)

doctype html
html
  head
    title My Website
  body
    include header.pug
    p Welcome to my website!

3. 変数の使用

Pugでは変数を使って動的にデータを渡すことができます。
これにより、テンプレート間で共通のデータを扱うことができます。

親テンプレート (layout.pug)

doctype html
html
  head
    title #{title}
  body
    header
      h1 #{header}
    block content
    footer
      p © 2024 My Website

子テンプレート (index.pug)

extends layout

block vars
  - var title = "Home"
  - var header = "Welcome to My Website"

block content
  p This is the homepage.

これらの方法を組み合わせることで、Pugで効率的にテンプレートを共通化することができます。