SlimでHTMLタグを動的に切り替えたい

概要

高性能かつ、シンプルなシンタックスでシェアを伸ばしているテンプレートエンジン「Slim」 → Slim公式GitHub

弊社でも導入しているのですが SEOなどの観点から特定条件下でタグを切り替えたい 場合があって、その方法を調べたので記載します。

要件

わかりやすい具体例を挙げると下記のように出力させることを想定しています。
共通のテンプレートになっていて、各所から呼ばれていると仮定してください。

html

# トップページで呼び出された場合
<h1>
    タイトル
    <span>サブタイトル</span>
</h1>

# 他コンテンツで呼び出された場合
<div>
    タイトル
    <span>サブタイトル</span>
</div>

このように、特定の条件だけトップノードのタグが異なって内包する要素は同一となっています。

方法

解決方法は下記の通りです。

slim

# top_page = トップページの場合はtrueを返す

*{tag: (top_page ? 'h1' : 'div')}
    | タイトル
    span サブタイトル

ちなみに *{} の記法ですが、tag以外にもidやclassといったプロパティも対応しているので、動的にCSSクラスを書き換えたい場合にも有用です。

slim

*{tag: タグ名, id: ID名, class: クラス名}