Pugを利用したHTML制作とPowerCMS Xテンプレート

夏からHTML/CSS/JavaScriptの設計をして改めて感じたのですが、テンプレートエンジン「Pug」を利用してHTMLを制作するとPowerCMS Xのテンプレートはある程度設計が完了した状態になります。

例えばこのような下層ページのPugがあったとします。

extend /_template/_default
include /_partial/_variable

append variables
  - var pageTitle = '会社概要'
  - var pageDescription = '説明を入れる'
  - var isHomePage = false

append css
  link(rel="stylesheet", href=jsDir + "slick/slick.css")

block content
  main
    .l-content
      .l-content__inner
        nav(aria-label="現在の位置").p-breadcrumb
          ol.p-breadcrumb__list
            li: a(href="/") ホーム
            li: span(aria-current="true") #{pageTitle}

    .l-content.l-content--col2.l-content--withNav
      .l-content__inner
        .l-content__contentColumn.c-content
          h1 #{pageTitle}
          .p-editorContent
            p 会社概要のコンテンツが入ります。

            - var category = ['CMS','UX','アクセシビリティ','HTML/CSS','JavaScript']
            each item, index in category
                input(type="checkbox", name="category", id="category_" + index, value=item)
                label(for="category_" + index) #{item}

          include /_partial/_share_sns

        .l-content__scanColumn.c-content
          // 掲載省略

extend /_template/_defaultはPowerCMS Xのテンプレートだと<mt:includeblock module="基本レイアウト"></mt:includeblock>に置き換えます。Pugの/_template/_defaultは以下のような内容ですが、

block variables
doctype html
html(lang="ja")
  head
    include /_partial/_meta

  body
    include /_partial/_header

    block content

    include /_partial/_footer
    include /_partial/_foot_script

PowerCMS Xのテンプレートにすると以下のようになります。完全一致しないもののPugのincludeはそのままPowerCMS Xのmt:includeに置き換えています。

<mt:if name="page_is_english">
  <mt:include workspace_id="1" module="ヘッダー_英語">
<mt:else>
  <mt:include workspace_id="1" module="ヘッダー">
</mt:if>

<main>
  <mt:var name="contents">
</main>

<mt:if name="page_is_english">
  <mt:include workspace_id="1" module="フッター_英語">
<mt:else>
  <mt:include workspace_id="1" module="フッター">
</mt:if>

Pugのvar pageTitleでページタイトルを変数に代入していますが、これはPowerCMS Xだとmt:setvarとかmt:setvarblockになるでしょう。また、Pugでappend cssを利用して追加のCSSを指定していますが、これもPowerCMS Xだとmt:setvarblockでCSS（link要素）を変数に追加、ヘッダーテンプレートモジュールで<mt:var name="page_additional_meta_html" />等と書いてhead内に出力することにより同じ機能が実現できます。

また、Pugのeach item, index in categoryでラジオボタンを生成していますが、

- var category = ['CMS','UX','アクセシビリティ','HTML/CSS','JavaScript']
  each item, index in category
    input(type="checkbox", name="category", id="category_" + index, value=item)
    label(for="category_" + index) #{item}

これは前の記事で紹介したmt:columnpropertyを利用してモデルに設定した選択項目を呼び出すテンプレートタグに置き換えれば済みます。

<mt:ignore>オプション項目を表示する</mt:ignore>
<mt:loop name="option_categories">
  <input type="radio" name="_custom_filter_categories" id="category_<mt:var name="__key__" />" value="<mt:var name="__key__" escape />"<mt:if name="category_param" eq="$__key__"> checked</mt:if>>
  <label for="category_<mt:var name="__key__" />"><mt:if name="page_is_english"><mt:var name="__value__" escape /><mt:else><mt:var name="__value__" translate escape /></mt:if></label>
</mt:loop>

Pugのinclude /_partial/_share_snsでSNS共有ボタンをインクルードしていますが、これは各ページで共通の部品を読み込んでいるのだなと解釈でき、PowerCMS Xのテンプレートモジュールを呼び出せば良いと考えることができます。

Pugで上手くテンプレート化することができていれば、PowerCMS Xのテンプレートも自ずと良いものができる・効率よく制作ができる、そのように感じます。