やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

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

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

成果物

GitHubpug.var.extends.201705191202

前回まで

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というのがあるらしい。