<img src="%{ARCHIVES_DIR}{img}[resizeImgFill(200,200)]">
<img src="%{ARCHIVES_DIR}{img}[resizeImgFit(200,200)]">

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 ではテンプレートファイルはテキストファイルであれば、どのようなファイルでもテンプレートにすることが可能です。

タッチモジュールの紹介を前にしましたが、モジュール内の部分的な表示の制御について紹介します。

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

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

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

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

のようなタグがそのままHTMLに表示されてしまいます。imgタグ自体を消すために、: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つも書かれなかった時に動作する事になります。

Ver1.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ブロック内では動作しませんのでご注意下さい。

IFブロックはVer.2.0から追加された機能です。 先ほどご紹介した、:veil や :empty は、ブロック内のすべての変数がなかったときのみ表示または非表示の動作をしますが、IFブロックは指定した条件だったときに表示または非表示の動作をするブロックになります。 たとえば、

<!-- BEGIN_IF [%{CID}/eq/1] -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END_IF -->

とすれば、カテゴリーIDが1のときしか、画像が表示されません。（%{CID}という新しい記述が出てきましたが、こちらはグローバル変数というものになります。グローバル変数については、後述しております。） さらに、その他にも条件を指定するときには、以下のように記述します。

<!-- BEGIN_IF [%{CID}/eq/1] -->
  <!-- カテゴリーIDが1のときに表示します -->
  <p>サンプルの本文です。</p>
<!-- ELSE_IF [%{CID}/eq/2] -->
   <!-- カテゴリーIDが1ではなくて、2だったときに表示します -->
  <p>サンプルの本文です。</p>
<!-- ELSE -->
  <!-- さらに上の条件が一致しなかったときに表示します -->
  <p>サンプルの本文です。</p>
<!-- END_IF -->

1ページに何百という単位でお使いでなければ動作にはあまり影響がありませんが、 :veil より動作が遅くなってしまいます。

なるべく:veil を使い、いざという時にIFブロックを使うのがおすすめです。

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

@include("/include/sample.html")
@include("http://www.example.com/include/sample.txt")

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

例：

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

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

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

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

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

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

{number}[number_format]

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

{date}[wareki]

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

{date}[age]

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

[escape|nl2br]

この記事では、site2018テーマを元に記述しています

テンプレートファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsのカスタマイズをする際に作るものがテーマであり、そのテーマを利用した設定（コンフィグ）をすることでサイトが出来上がります。

オリジナルのテーマを作る際に、一番最初に設定を変更する部分になります。コンフィグ >テーマ設定 にアクセスして下さい。

上記のような画面が表示されます。

themes ディレクトリ内にあるテーマディレクトリを指定します。

テンプレートのコントロールについては、テンプレートの章で紹介します。トップページ・一覧ページ・詳細ページ・エラーページ・管理ページ・エントリー編集ページ・ユニット追加ページ・ログインページの8種類のテンプレートを指定します。

一般的には、詳細ページとエントリー編集ページ・ユニット追加ページのテンプレートは同じに設定しておくようにした方がいいでしょう。

このテーマを複数用意する事によってコンテンツのデザインを切り換えて表示させる事が可能です。しかし、ブログ単位に設定するか、この後に紹介するルール機能を利用して設定する事になります。

a-blog cms では、もっと簡単にカテゴリー毎にテンプレートを設定する事が可能です。テーマディレクトリ内にカテゴリーコードのフォルダと、その中に必要なテンプレートファイルを用意します。 また、エントリーコードのファイル名を用意する事で特定のエントリー専用のテンプレートも設定できます。

news というカテゴリーには、/themes/site2018/news/index.html（一覧）と /themes/site2018/news/entry.html（詳細）のテンプレートが用意されています。この場合であれば、news のカテゴリーの際は、これらのテンプレートファイルを利用する事になります。

もし、詳細ページのテンプレートが他のページと共用の設定にするのであれば、/themes/site2018/news/entry.html（詳細）のファイルを削除します。すると、newsより上の階層にあるファイルを参照するようになり、この場合 /themes/site2018/entry.html（詳細）を利用するようになります。

例えば、クライアント側でproducts内に子カテゴリーを追加したとします。 テーマ内にそのカテゴリーコードのディレクトリは存在しませんので、 /themes/site2015/products/entry.html（詳細）を利用し、あらかじめ用意している他の子カテゴリーのページとは違った表示になります。

デバッグモード（config.server.php の DEBUG_MODE）が 1 の時のみ上記のように、現在表示しているテンプレートがどのファイルなのかを表示させています。この部分で表示させるファイルの確認を行って下さい。

もしくは、調べたいテンプレートの場所で、(Win: Ctrl, Mac: ⌘) + K を押して、グローバル変数を調べることでも確認できます。

(Win: Ctrl, Mac: ⌘) + K -> %tpl と入力

テーマディレクトリ（themes）には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここに全ての管理ページのテンプレートファイルが格納されています。ですから a-blog cms の管理ページをカスタマイズする際は、admin の中のファイルを修正すればいい事になります。

テーマ設定のページで設定されているテーマ（site2018）と、system のテーマは継承関係にあり、テーマ設定のページで設定されているテーマに呼び出すファイルが存在しない時は、system のファイルをチェックし、存在していればそのファイルを表示します。例えば、login.html や 404.html は site2018 のテーマの中には存在していませんが、system のテーマに存在しているため、表示される仕組みになっています。

また、テーマ作成の作法として、system のファイルを直接修正するのではなく、テーマ設定で設定しているテーマにコピーして修正するようにして下さい。

例として、/themes/system/404.html をコピーし /themes/site2018/404.html に設置して修正をします。

システムのアップデートの際に system ディレクトリはアップデートされる事になり、カスタマイズ部分が消えてしまう恐れがありますので、ご注意ください。

blog@site2018