ホーム > サポート・マニュアル > 基本からしっかり学ぶ a-blog cms > 基礎編 > テンプレート

基本からしっかり学ぶ a-blog cms

a-blog cms で更新ができるページを作るためのHTMLファイルをテンプレートファイルといいます。テンプレートには、一番最初にお伝えしたようにモジュールを貼り付けていく事で、データベースに保存されている情報をHTMLに配置していきます。

エントリーの一覧の例:

    <!-- BEGIN_MODULE Entry_List -->
    <ul>
      <!-- BEGIN entry:loop -->
      <li><a href="{url}">{title}</a></li>
      <!-- END entry:loop -->
    </ul>
    <!-- END_MODULE Entry_List -->

<!-- BEGIN entry:loop -->から<!-- END entry:loop -->の間を繰り返し表示する事になります。また、モジュールのコメントタグについては実行後には削除され通常のHTMLソース側には表示されません。

また、a-blog cms ではテンプレートファイルはテキストファイルであれば、どのようなファイルでもテンプレートにする事が可能です。

非表示部分の制御 :veil と :empty

タッチモジュールの紹介を前にしましたが、モジュール内の部分的な表示の制御について紹介します。IF 〜 ELSE 〜 のようなプログラムのような表記での条件分岐は用意されておりません。

:veil 表示させないブロック

例えば、画像を表示させる際には、

<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">

のような記述をする事になります。この場合画像が無い場合には、

<img src="" width="" height="">

のようなタグがそのまま表示されてしまう事になります。これを消すために、:veil という機能が用意されています。

	<!-- BEGIN photo:veil -->
	<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
	<!-- END photo:veil -->

消したい部分を <!-- BEGIN photo:veil --> から <!-- END photo:veil -->で囲む事で、その間にある変数 {photo1@path}, {photo1@x}, {photo1@y} のいずれも編集されなかった時に囲まれていた部分全体を非表示にします。

:veil については、変数名:veil と決まっているものではなく、中の複数の変数が1つも書かれなかった時に動作する事になります。

:empty 無かった際に表示させるブロック

1.6.1で追加された特定の変数が空の時に表示させる機能です。:veil の時の例に画像が無かった時に noimage.png を表示させる機能を追加でするには以下のように書きます。

	<!-- BEGIN photo:veil -->
	<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
	<!-- END photo:veil -->
	<!-- BEGIN photo1@path:empty -->
	<img src="noimage.png" width="100" height="100">
	<!-- END photo1@path:empty -->

1点注意するべきところは、:veil の前の文字列は任意ですが、:empty はモジュールやカスタムフィールドで利用する変数 {photo1@path} を指定し photo1@path:empty ように記述します。:emptyブロックは:veilブロック内では動作しませんのでご注意下さい。

インクルード機能

いくつかのテンプレートファイルが出来てくると、共通部分を1つにまとめて管理ができるようにしたいという事になるかと思います。以下のような記述でインクルード(外部ファイルを読み込む)を設定します。

<!--#include file='/include/sample.html'-->
<!--#include file='http://www.example.com/include/sample.txt'-->

上記の表記については、SSI と同様の記述になりますが、a-blog cms がSSIを使ってインクルードをしているという事ではありません。Adobe Dreamweaver のデザインビューでインクルード後の画面が表示されるように同じ表記としています。

また、インクルードの記述をする際には、相対パスで記述する事も可能ですが、絶対パスで設定する事をオススメします。絶対パスのルートについてはテーマのディレクトリがルートになり、SSIとは違います。

グローバル変数

{title}のような変数はモジュールの中に記述されている必要がありますが、グローバル変数はテンプレートのどこに記述しても編集されます。テンプレートの編集する順序としては、グローバル変数、インクルード、モジュールの順で実行されます。

例:

  • %{BLOG_NAME} 表示ページが属するブログの名前
  • %{CATEGORY_NAME} 表示ページが属するカテゴリーの名前
  • %{KEYWORD} URLコンテキスト上で、指定されたキーワード
  • %{CID} カテゴリーID
  • %{EID} エントリーID

また、グローバル変数を利用したインクルード機能を使うと、表示ページのカテゴリー毎に違うテンプレートファイルを読み込むような事も可能になります。

<!--#include file='/admin/entry/category%{CID}.html'-->

このような組み合わせでテンプレートのカスタマイズをする事は多くあります。特定のカテゴリーの時だけ利用したいカスタムフィールドを書いたテンプレートファイルを読み込む際に大事なテクニックの1つになります。

校正オプション

{data}のような変数に{data}[option]のような表記でデータをプログラムで処理する事ができる機能を校正オプションと呼びます。いろいろな校正オプションがありますが、いくつかの例を紹介します。

文字数を指定した数で足切りします。(半角の幅は1、全角の幅は2となります。)

{text}[trim(13, '...')]

数字を千位毎にカンマ区切りにします。

{number}[number_format]

日付から和暦の年を算出して表示します。(1985/08/26[wareki] -> 昭和60年)

{date}[wareki]

日付を誕生日としたときの現在の年齢を表示します。(1985/08/26[age] -> 23)

{date}[age]

また複数の校正オプションを設定する事もできます。| を利用し [ ] 内に複数書く事ができます。

[escape|nl2br]

お問い合わせフォーム等で閲覧権限でユーザーがフォームにデータを入力できる場合、このようにエスケープする校正オプションの併用をするようにして下さい。

オリジナルのファイルを修正せずに、以下の場所にオリジナルの Corrector.php を作る事もできます。 /omake/php の中にサンプルファイルが入っていますので、こちらもチェックしてみて下さい。

/php/ACMS/User/Corrector.php

関連エントリー

このエントリーについているタグから関連するエントリーを表示しています。


携帯アクセス解析