Pugでblockの使い方

HTML Pug

Pugでblockの使い方

Pugでblockを使うと、テンプレートの特定の部分を上書きしたり、拡張したりすることができます。
特に、親テンプレートと子テンプレートを使って共通のレイアウトを作る際に役立ちます。

1. 親テンプレートでの設定

//- layout.pug
doctype html
html
  head
    title My Website
    block head
  body
    header
      h1 Welcome to My Website
    block content
    footer
      p Footer content here

2. 子テンプレートでの利用

//- index.pug
extends layout

block head
  meta(charset='UTF-8')
  link(rel='stylesheet', href='/styles.css')

block content
  p This is the main content of the page.

解説

  • block head:

親テンプレートのhead内に追加する内容を指定。

  • block content:

親テンプレートのcontentブロックを上書きして、ページごとに異なる内容を提供。

このように、blockを使うことで、共通のレイアウトを持ちながら、ページごとに異なる内容を柔軟に差し込むことができます。