a-blog cms で見出しモジュールを作ってみる

記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ で紹介されていた目次を自動で作る機能がいいなって事が a-blog cms のパートナーの Facebook グループで出てた事から、簡単にテンプレートのカスタマイズでできる範囲で作ってみようという事になった。

モジュールユニットとは

簡単にモジュールユニットについて説明しておきます。

モジュールユニットとは、通常テキストや画像などを入れるユニットに、Entry_List や Entry_Summary のようなモジュールを追加する事ができるようなユニットになります。追加する際にモジュールを作るのではなく、あらかじめモジュールIDとして準備されているものを選択するカタチになります。

標準で提供している site2015 にもありますので、よく分からない人は「デモサイト」でお試しください。

Unit_List を利用します

最初は、Entry_Body を利用して殆どのタグを削除し、unit:loop だけを利用し h2 のタグでリストを表示できるものを作ってみました。モジュールとして目的の表示や動きは作る事ができるように作れたのですが、モジュールユニットとして Entry_Body の unit:loop の中で Entry_Body を読み込むと無限ループになってしまい正常に動作しなくなる事が作ってから分かりました。

という事から、Unit_List を利用します。

Unit_List は名前のようにエントリーよりさらに細かい単位になるユニットを一覧表示させるモジュールになります。よく利用するのは、画像のみを取り出してギャラリーを作ったり、緯度経度とかだけで複数ピンをたてたマップを作ったりする際に利用します。

今回はテキストユニットのみを取り出します。（テキストユニットの際にはタグが選択できるといいなって気がしましたが、テキストユニットの拡張は今後の課題とします）

<!-- BEGIN_MODULE Unit_List id="mokuji" -->
<div>
<h3>目次</h3>
<ul>
<!-- BEGIN unit:loop -->
<!-- BEGIN_IF [{unit_field_2}/eq/h2] -->
<li>
<!-- BEGIN_IF [{unit_field_3}/nem] -->
<a href="#{unit_field_3}" class="scrollTo">
<!-- ELSE -->
<a href="#h{unit_id}" class="scrollTo">
<!-- END_IF -->{unit_field_1}</a></li>
<!-- END_IF -->
<!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Unit_List -->

Unit_List id="mokuji" 条件設定

エントリーIDで絞り込んで表示させたいので、エントリーID にチェックをつけます。

EID を指定して情報を取得する際に、一覧のときに条件が設定されない事になります。 そうなると、全件から見出しを表示する事になってしまいます。その事から、EID が指定されていない時のダミーの EID を指定しておきます。そうする事で一覧のときには表示されません。

Unit_List id="mokuji" 表示設定

ページャーやフィールドのチェックボックスは全て外して無効にします。

見出し側のカスタマイズ

見出し側も少しカスタマイズする必要があります。 まず、見出しに個別に id を設定できるようにする必要があります。ユニット側は以下のような入力欄が追加されます。 また、この欄が空だった時の対応も行っていきましょう。

コンフィグ > ユニット > 編集設定 > テキストタグセレクト

普段は空の拡張という欄の？を見てみると「エントリーのテキストユニットにおける、拡張フィールドラベルを設定します。＜変数 : {extend_tag}＞」と書かれています。 ここに ID と書くとユニット側のラベルとして利用される事になります。

例えば、他のタグでいえば BLOCKQUOTE のタグとかで CITE属性 を登録できるようにしてもいいですし、場合によっては STYLE として個別スタイルを無理矢理追記するために使ったりするようにしてもいいかもしれません。

include/unit.html を修正

/themes/system/include/unit.html をコピーして、自分のテーマの同様の場所に unit.html を用意します。その中で以下の場所を探してください。

<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h4><!-- END h2 -->

現状、既に extend_tag があったら id を追加するように書かれていますが、無かった時の処理がありません。そこを以下のように、空の場合にはユニットIDを編集するように変更してください。

<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- ELSE -->id="h{utid}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 -->

モジュールユニットで利用できるようにテンプレートを用意する

最初の方で Unit_List id="mokuji" のコードは紹介しましたが、このコードは entry.html の Entry_Body の上の方に書いてもいいですが、必要な時だけモジュールユニットで追加できるようにしてみたいと思います。

/themes/（利用テーマ）/include/module/template/Unit_List/mokuji.html

に用意してください。こうする事で、モジュールユニットで利用するテンプレートファイルとなります。モジュールID.html というファイル名にしておくとモジュールの選択時に固定されますのでオススメです。

これで、無事動作するようになったんじゃないかと思います。 最後に書いておきますが、誰か階層化されたオリジナルの「目次モジュール」作ってみませんか？