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

includeする部品の一部に変数を使った。変数は変数だけの別ファイルにした。

成果物

pug.var.include.201705190959

前回まで

• 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

ソースコード

page1.pug

include ./page1_vars.pug
doctype html
html(lang="ja")
    head
        include ./page1_head.pug
    body
        include ./page1_body.pug

page1_vars.pug

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

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}

page1_body.pug

h1 #{Title}

#{Title}変数をheadとbodyで参照している。

所感

別ファイルに分けつつ、複数ファイルでタグが重複するが、値が違うようなテンプレートとして使える。これがやりたかった。

しかし、変数をpugファイルに書かねばならないのが微妙。起動引数やSQLiteから渡したい。