HTMLテンプレートエンジンpugでextendsしつつ変数を使ってみた

ファイル数が多くなってきた。

成果物

pug.var.extends.201705191202

前回まで

• http://ytyaru.hatenablog.com/entry/2018/03/26/000000
• http://ytyaru.hatenablog.com/entry/2018/03/27/000000
• http://ytyaru.hatenablog.com/entry/2018/03/28/000000
• http://ytyaru.hatenablog.com/entry/2018/03/29/000000
• http://ytyaru.hatenablog.com/entry/2018/03/30/000000
• http://ytyaru.hatenablog.com/entry/2018/03/31/000000
• http://ytyaru.hatenablog.com/entry/2018/04/01/000000
• http://ytyaru.hatenablog.com/entry/2018/04/02/000000

extendsエラー

include ./page1_vars.pug
extends ./layout_page.pug
block contents
    h1 #{Title}

Declaration of template inheritance ("extends") should be the first thing in the file. There can only be one extends statement per file.

• extendsはファイルの先頭でないとエラーになる
• extendsは1ファイルに1つだけしか使えない

extendsとはそういうものらしい。includeにはない制約。

ソースコード

page1.pug

include ./page1_vars.pug
include ./layout_page1.pug

page1_vars.pug

- var Title = "page1_vars.pugで書いた見出し"

layout_page1.pug

extends ./layout_page.pug
block contents
    h1 #{Title}

layout_page.pug

doctype html
html(lang="ja")
    head
        include ./page1_head.pug
    body
        block contents

page1_head.pug

meta(charset="utf-8")
meta(name="description" content="")
meta(name="author" content="")
meta(name="viewport" content="")
link(rel="stylesheet" href="")
link(rel="shortcut icon" href="")
title #{Title}

所感

かなり細かくコードを管理しやすくなりそう。しかしコードを静的テキストで書いている点がどうにも。もう少し変動させることはできないか。mixinというのがあるらしい。