a-blog cmsの実務制作の流れをまとめています。
今回は詳細ページの作成についてです。
HTMLのファイル名について
a-blog cmsにはいくつかのデフォルトテーマがありますが、どのファイル名のHTMLを詳細ページとして扱うかは、テーマによって異なっています。「entry.html」が指定されているものもあれば、「index.html」で全てのテンプレートをまかなっているものもあります。
この辺りはテーマファイルの構成によって臨機応変に…となるのですが、今回は「entry.html」を詳細ページとして扱うことにします。
「カテゴリーのコードネーム」が付いたフォルダに同名のテンプレートがある場合はそちらを優先する仕様は、一覧ページのときと同じです。
なので、基本の詳細ページ用テンプレートをいちばん上の階層に作っておき、レイアウトが違っているカテゴリーのみ、フォルダ内に置いたテンプレートで上書きするのがおすすめです。
編集ページとユニット追加ページ
記事を書いたり編集できるようにするには、「編集画面」のテンプレートが必要になります。
またa-blog cmsの場合、見落としがちですが「一旦作成した記事にユニットを追加するときの画面」のテンプレートも必要です。
これも、テーマによっては「edit.html」「add.html」と別ファイルになっていることがありますが、だいたいは詳細ページと兼用することができます。
今回はこれらのテンプレートも「entry.html」とすることで以降の解説を進めます。
繰り返し・ブロック関連のタグを追加する
モジュールの開始・終了／エントリーループの開始・終了
エントリー詳細を表示しているページのうち、「タイトル」から「前後のページナビゲーション」までの範囲を、「BEGIN_MODULE」 0「END_MODULE」タグで囲みます。
ここでは全ての記事情報を参照できる「Entry_Body」モジュールを使用してください。モジュールIDは特に必要ありません。
また、詳細ページは記事を一回しか繰り返しませんが「entry:loop」タグも入れ子にする形で追加してください。
<!-- BEGIN_MODULE Entry_Body --> <!-- BEGIN entry:loop --> （エントリータイトル） （エントリー本文） （ページナビゲーション） <!-- END entry:loop --> <!-- END_MODULE Entry_Body -->
ダミーテキストを隠す
一覧ページのときと同じように、不要な文字列を「sample:veil」タグで隠します。本文を囲むくらいでいいのではと思います。
<!-- BEGIN sample:veil --> （隠したいダミーテキスト） <!-- END sample:veil -->
ページナビゲーション
新着情報などで前後リンクが必要な場合は、ページナビゲーションを「entry:loop」タグの外側に追加します。
これも一覧ページのときと同様、a-blog cmsの公式スニペットをそのまま利用して良いと思います。「BEGIN serialNavi:veil」 0「END serialNavi:veil」内が前後リンクを表示している箇所です。
以下は、私が自分のコーディングに併せて作った「serialNavi:veil」タグのサンプルです。ここもカスタマイズしたい方は参考にどうぞ。
<!-- BEGIN serialNavi:veil -->
<div class="page-navi">
<ul>
<li class="pnavi-p"><!-- BEGIN prevLink --><a href="{url}">&laquo;{name}[trim(30, '...')|escape]</a><!-- END prevLink --></li>
<li class="pnavi-i"><a href="{upperUrl}">%{CATEGORY_NAME}一覧</a></li>
<li class="pnavi-n"><!-- BEGIN nextLink --><a href="{url}">{name}[trim(30, '...')|escape]&raquo;</a><!-- END nextLink --></li>
</ul>
<!-- /.page-navi --></div>
<!-- END serialNavi:veil -->
記事が見つからない場合
「notFound」タグで囲まれている場所は、記事が見つからない場合に表示されます…が、「404ページ用のテンプレート」が別途指定されていると、これは有効にならないようです。
「404ページ用のテンプレート」に「entry.html」を指定した場合は、「entry:loop」タグの外側に以下のようなコードを追加してください。
<!-- BEGIN notFound --> <h1>ページが見つかりません</h1> <p class="message">お探しのページはURLが変更されたか、削除された可能性があります。<br /> お手数ですが、<a href="/">ホーム</a>から目的のページをお探しください。</p> <!-- END notFound -->
記事情報タグを追加する
entry:loopタグ内の記事情報を、a-blog cmsの変数に置き換えていきましょう。
記事情報のタグに関しては、の説明を参照してください。
ただし、詳細ページではグローバル変数「%{ENTRY_TITLE}」を使うことができるので、ページタイトル部分はこっちでもいいと思います。
本文にユニットを呼び出す
a-blog cmsは、本文を「ユニット」と呼ばれるブロックを積み重ねる形で表示します。
これらを表示するには、以下のタグを貼付けます。
<!-- BEGIN column:veil --> <!--#include file="/include/column.html"--> <!-- END column:veil -->
「column:veil」タグは、エントリー詳細ページでは本文を、編集ページでは各ユニットの入力フォームを呼び出します。
「/include/column.html」は、「system」テーマ内の同じパスから呼び出されているので、新規作成したり、テーマにコピーしたりする必要は特にありません。
編集関連のパーツを呼び出す
このままでは、まだ記事の表示しかできません。さらに、エントリーの編集に必要なパーツを追加していきます。
記事のメタ情報
記事のメタ情報（タイトル・公開日時など）を編集するパーツを呼び出すには、以下のタグを貼付けます。本文のすぐ上が良いと思います。
<!--#include file="/admin/entry/title.html"--></pre> <h4>保存ボタン・ユニット追加ボタン</h4> <p>編集画面で記事を更新したり、ユニットを追加したりするパーツを呼び出すには、以下のタグを貼付けます。これは本文のすぐ下が良いと思います。</p> <pre class="brush: xml"><!-- BEGIN adminEntryEdit --> <!--#include file="/admin/entry/edit.html"--> <!--#include file="/admin/entry/add.html"--> <!-- END adminEntryEdit -->
「/admin/entry/edit.html」「/admin/entry/add.html」は、「system」テーマ内の同じパスから呼び出されているので、新規作成したり、テーマにコピーしたりする必要は特にありません。
インクルードを囲んでいる「adminEntryEdit」は「エントリー編集画面のみ内側のタグを実行する」という意味のようです。後述するタッチモジュールと似ているようですが、詳しいことはちょっとわかりません。
編集画面へ移動するボタン
保存ボタン・ユニット追加ボタンのすぐ下に、詳細ページから編集ページへ移動するためのパーツを呼び出します。
以下のコードを貼付けてください。
<!-- BEGIN_MODULE Touch_Login --> <!--#include file="/admin/entry/action.html"--> <!-- END_MODULE Touch_Login -->
インクルードを囲んでいる「Touch_Login」は「ログインしているときだけ内側のタグを実行する」という意味です。
これが入っていないと、ログアウト後の公開画面でも編集ボタンが出てきてしまいます。
a-blog cmsでは、このようなページの状態による条件分岐タグのことを「タッチモジュール」と呼びます。
条件分岐をうまく使えば、テンプレート数を節約することもできますが、ソースコードがごちゃつきがちになるので、ご利用は計画的に。
タッチモジュール | a-blog cms – Web制作者のためのCMS
表示・動作を確認する
ここで一旦サーバーにアップロードして、きちんと詳細ページが表示されるか、編集が可能かどうかチェックしてみてください。
以下はよくあるトラブルシューティングです。
ユニット編集画面がうまく動作しない
編集画面が崩れる・文字サイズが小さすぎる・サイトの色調に合わない
編集画面の表示は、作成したウェブサイトのスタイルシートの影響を受けます。
たとえば、元のサイトのCSSで以下のような指定をしていると
table td {
font-size: 80%;
}
tdが入れ子になっている、a-blog cmsの編集画面の文字サイズがかなり小さくなってしまいます。
元のサイトのスタイルシートを調整するのがいちばんですが、かなりレガシーなマークアップで編集が難しいと言う場合は、入力フォーム用のCSSを調整する必要があります。
また、a-blog cmsの入力フォームは白系のサイトを想定したカラーリングになっているので、黒ベースのサイトで浮いてしまう、という場合も調整が必要です。
「system」テーマにある「/css/acms.css」をコピーして、作成したテーマの同じパスに置くと、CSSを上書きすることができます。CSSファイル内の説明書きを参考に、任意で編集してみてください。
編集画面で記事情報が変数のまま表示される
今回のように、詳細ページと編集ページを同じテンプレートにしていると、必ずこの現象が起こります。
日付などのEntry_Bodyの変数は、編集画面では変数のまま表示されてしまいます。
この場合は、タッチモジュール「Touch_NotAdmin」で囲むと編集画面で表示しないようにすることができます。
<!-- BEGIN_MODULE Touch_NotAdmin -->
<p class="date">更新：{date#Y}年{date#m}月{date#d}日</p>
<!-- END_MODULE Touch_NotAdmin -->
詳細ページ・編集ページの作成は、a-blog cmsのテーマ作成でいちばん難しいところです。
公開サイトに編集フォームを埋め込むという仕様のため、公開サイトのCSSを雑に書いていると、もろに編集フォームの崩れにつながってしまいます。
逆に、普段から計画的なコーディングをして、それぞれのタグの意味がわかっていれば、文字を大きくしてみる、不要なHTMLを消す、アイコンを出してみるなど、案件に併せたデザイン変更が自在にできると思います。
a-blog cmsの「Web制作者のためのCMS」というキャッチコピーは、このような特徴によるものなのです。
この記事で、構築に最低限必要なチュートリアルはだいたい終わりです。
今後は「ルール」「カスタムフィールド」機能などについて書いていけたらと思います。