HTMLテンプレートエンジンpugでmixinしてみた

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

成果物

pug.mixin.201705191300

前回まで

• 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
• http://ytyaru.hatenablog.com/entry/2018/04/03/000000

ソースコード（引数なし版）

page1.pug

include ./mixin_lists.pug
doctype html
html(lang="ja")
    head
        title 見出し
    body
        h1 見出し
        +CreateList

mixin_lists.pug

mixin CreateList
    ul
        li 項目1
        li 項目2
        li 項目3

ほぼincludeと同様。引数を使わないならincludeだけで済む。

ソースコード（引数あり版）

page2.pug

include ./mixin_lists2.pug
doctype html
html(lang="ja")
    head
        title 見出し
    body
        h1 見出し
        +CreateList('mylist', '項目1', '項目2', '項目3', '項目4', '項目5')

mixin_lists2.pug

mixin CreateList(id, ...items)
    ul(id=id)
        each item in items
            li= item

• Mixins – Pug

代入式のスペース問題

li = 値	li= 値

なんと左辺値にスペースを入れてしまうと表示が狂ってしまう。公式サイトにもあったがli= ...のスペースの開け方に違和感が合った。しかしその形でないと上記のように代入式にならない。

所感

mixinは使えそうと思ったが、代入式のスペース問題がひどい。エラーも表示されないため目視確認しないと不具合の確認ができない。pugの代入は使いたくない。