a-blog cmsの実務制作（５）一覧ページの作成

a-blog cmsの実務制作の流れをまとめています。

初めての方は（１）からお読みください

今回は一覧ページの作成についてです。

HTMLのファイル名について

a-blog cmsは、初期設定でファイル名が「index.html」となっているHTMLを一覧ページとして読み込みます。

基本的にテーマのいちばん上の階層にある「index.html」を参照しますが、「カテゴリーのコードネーム」が付いたフォルダにindex.htmlがある場合はそちらを優先します。

つまり、「news」というカテゴリーを作っている状態で「news/index.html」があると、そのページでは「news/index.html」のデザインを反映して、newsカテゴリーだけが絞り込まれたリストが出てくることになります。< /p>

別のファイル名になっていて、ファイル名を「index.html」に変更すると都合が悪い場合は、コンフィグの「テーマ設定」で、一覧ページとして読み込むファイル名を変更してください。

スニペットを参照する

a-blog cmsの開発元では、CMSのテーマ制作に不慣れな人でも簡単に組み込みができるように、コピペで使えるサンプルコード＝スニペットを提供しています。
こちらのページの、各モジュールの一覧から「スニペット」のリンクをクリックすると、いつでもコードを参照できます。

ビルトインモジュール | a-blog cms – Web制作者のためのCMS

また、エディタにDremweaverやTextExpanderを使っている場合は、専用の拡張機能が提供されています。
各変数をいつでも簡単に呼び出せるようになるので、利用している人はぜひインストールしてください。

• Dreamweaver用スニペット
• Dreamweaver用コードヒント | a-blog cms – Web制作者のためのCMS
• TextExpander用スニペット

さて、エントリー表示部分のコードに制限がないのであればスニペットのコピペで済むのですが、既存サイトの改装だったり、独自のコーディングだったりする場合は、各変数の大体の役割を知っている必要があります。
基本のスニペットを元に、作成したHTMLに併せてカスタマイズを進めてみましょう。

※以前の記事で説明した通り、使用できるタグ・変数は、モジュールによって微妙に異なります。利用したいモジュールのスニペットを適当な場所にコピペして進めてください。

繰り返し・ブロック関連のタグを追加する

モジュールの開始・終了

エントリー一覧を表示している範囲全体を、「BEGIN_MODULE」0「END_MODULE」タグで囲みます。このタグがMovableTypeでの「mt:Entries」タグ、WordPressでの「while (have_posts()) : the_post();」にあたります。
Entry_Headlineモジュールであれば以下のようになります。

<!-- BEGIN_MODULE Entry_Headline id="NewsList" -->
（エントリー一覧のコード）
<!-- END_MODULE Entry_Headline -->

さらにモジュールの開始タグ内に、HTMLの属性値の感覚で「ID」を付けておいてください。半角英数字で、現在のモジュールの役割がわかればなんでも構いません。ここでは「NewsList」としてみました。
また、このとき、ページナビゲーションがあればそれも含めて囲んでください。

ダミーテキストを隠す

テンプレートには、表示テスト用のダミー記事が書かれているはずです。a-blog cmsは、こういった本番では不要な文字列を「sample:veil」タグで隠すことができます。任意の部分を囲んでください。

<!-- BEGIN sample:veil -->
（隠したいダミーテキスト）
<!-- END sample:veil -->

※このタグは、スニペットには含まれていません。

MovableTypeを使い慣れている人は「mt:Ignore」タグと同じ役割だということに気付くと思いますが、a-blog cmsのsample:veilタグは基本的に「コメント」なので、囲んだあともhtmlファイルをブラウザで問題なく表示することができます。
ローカル環境ではダミーテキストが表示され、本番環境ではCMSに投稿した記事が表示されるのでとても便利です。

エントリーループの開始・終了

ダミーテキストのうち1記事分だけを、sample:veilタグの外側にコピペして「entry:loop」タグで囲みます。

<!-- BEGIN entry:loop -->
（1エントリー分のHTML）
<!-- END entry:loop -->

ページナビゲーション

モジュールがページナビゲーションに対応している場合は、それも追加します。
この辺は複雑なので、a-blog cmsの公式スニペットをそのまま利用した方が吉です。「BEGIN pager:veil」0「END pager:veil」を使ってください。

pager:veilタグの仕様はどのモジュールでも共通して使い回せるので、前回の記事のパンくずリストのように、別途HTMLファイルにしてインクルードで呼び出すのがおすすめです。

以下は、私が自分のコーディングに併せて作った、pager:veilタグのサンプルです。「N件目 / 全 N件」あたりも細かくコーディングしたい方はこちらをどうぞ。

<!-- BEGIN pager:veil -->
<div class="contents-navi">
<p class="cnt">{itemsFrom} ～ {itemsTo} 件目 / 全 {itemsAmount} 件</p>
<p class="pager">
<!-- BEGIN backLink --><a href="{url}" class="back">&laquo;</a><span class="joint">&nbsp;</span><!-- END backLink -->
<!-- BEGIN page:loop -->
<!-- BEGIN link#front --><a href="{url}"{pageCurAttr}[raw]><!-- END link#front -->{page}</a><!-- BEGIN link#rear --><!-- END link#rear -->
<!-- BEGIN glue --><span class="joint">&amp;nbsp;</span><!-- END glue --><!-- END page:loop -->
<!-- BEGIN lastPage:veil --><span class="omission">...</span><span class="joint">&amp;nbsp;</span><a href="{lastPageUrl}">{lastPage}</a><!-- END lastPage:veil -->
<!-- BEGIN forwardLink --><span class="joint">&amp;nbsp;</span><a href="{url}" class="forward">&amp;raquo;</a><!-- END forwardLink -->
<!-- /.pager --></p>
<!-- /.contents-navi --></div>
<!-- END pager:veil -->

記事が一件もない場合

「notFound」タグで囲まれている場所は、記事が一件もない場合に表示されます。モジュール内のどこかに追加してください。
ブログだと「エントリーがありません」となるところを「このコンテンツは準備中です」などとすると良いでしょう…と言っても、商用サイトでは無意味なコンテンツがあること自体、基本的に避けなければならないのですが。

<!-- BEGIN notFound -->
<p class="message">コンテンツは準備中です。</p>
<!-- END notFound -->

記事情報タグを追加する

繰り返し関連のタグを埋め込んだら、entry:loopタグ内の記事情報を、a-blog cmsの変数に置き換えていきましょう。

基本的には、元のスニペットからそれらしい名前がついている変数を探してコピペしていけばなんとかなります。
画像・サムネイル関連が少しわかりにくいです。a-blog cmsの公式スニペットでは、divにインラインスタイルで幅や高さが指定されているあたりになります。画像のサムネイルサイズによって、はみ出さないようにdivの大きさが調整されるようになっています。

よく使う変数（モジュールによっては使えないものもあります）

{eid}

エントリーIDです。

{cid}

カテゴリーIDです。

{title}

エントリーのタイトルです。

{url}

エントリーの個別ページへのURLです。Entry_Bodyモジュールの場合は「{titleUrl}」になるので注意。

{date#Y}年{date#m}月{date#d}日( {date#week} ) {date#h}時{date#i}分{date#s}秒

エントリーの日付を表示します。#の後ろのアルファベットは、PHPのdate関数と同じ意味です。他にも「udate(最終更新日)」「pdate(公開日)」もあります。

<!– BEGIN new –> [NEW]<!– END new –>

新着期間以内であればタグ内を表示します。期間の設定は管理画面「コンフィグ」内の、各モジュール設定で指定することができます。

<!– BEGIN category:veil –>{categoryName}<!– END category:veil –>

カテゴリーの指定があれば、カテゴリー名を表示します。

{summary}[trim(51, ‘…’)]

記事の抜粋です。[trim(51, ‘…’)]は「半角で最大51文字まで表示し、それ以上であれば末尾に…を付与する」という意味の校正オプションです。

表示を確認する

必要なタグを全て埋め込んだら、サーバーにアップロードして確認してみましょう。
a-blog cmsに投稿したテスト記事がちゃんと表示されていればテーマファイルに問題はありません。

…が、ちゃんと表示されないページが絶対にあるはずです。
「ニュースのカテゴリーだけ表示したいのに全部出てしまう…」とか、
「同じEntry_Summaryモジュールでも、こっちは3件表示、こっちは5件表示にしたい…」とかです。

こういった細かい絞り込みで役に立つのが、モジュールの開始タグの中に書いた「モジュールID」です。

---

というわけで、次回はモジュールIDの話です。
次の記事はいつ書くんだ！という人はぐぐってくださいw