More than 1 year has passed since last update.

Pugでextendsするときに変数を使う方法

Posted at 2022-02-18

結論から言うと extends するページの先頭で変数用のブロックを用意して、 extends 先でそこに変数定義する。

例えばこんな感じのhtmlを出力したいとする。

page.html

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    hogehoge
  </body>
</html>

pugを使って共通部分を extends として読み込むときに、 extends はページの先頭に記述する必要がある。
なので、以下のように extends より前に変数を定義する書き方だとエラーになってしまう。

_layout.pug

doctype html
html
    head
        title #title
    body
        block content

page.pug

- var title = "タイトル"
@extends _layout
block content
    | hogehoge

しかし、変数は先に定義しないと extends 元のpugファイルで使えない。
なので extends 元のpugファイルの先頭に変数定義用のブロックを追加して、そこに変数を記述することにする。

_layout.pug

block vars
doctype html
html
    head
        title #title

_layout.pug

block vars
    - var title = "タイトル"
block content
    | hogehoge

これでうまくコンパイルできた。