Dreamweaver のテンプレート内で条件分岐処理をする
サイトを Dreamweaver のテンプレートで管理していると
「トップページではヘッダのサイト名を h1 でマークアップしたいけど、トップページ以外ではページ名を h1 にするのでサイト名は p でマークアップしたいよな」
という時に、通常はサイト名のあるヘッダエリアは編集可能領域にしていないことが多いため、少し面倒だったりします。
強引にヘッダエリアを編集可能領域にしてしまう力技も可能ですが、一つのテンプレートの中で分岐処理を入れてやると、スマートかつ効率的にテンプレートを設計することができます。
分岐の方法はいくつかありますが、まずは基本的なのが Dreamweaver テンプレートのオプション領域を使用した以下の方法です。
1. <head></head> 内に以下の記述を入れます。
<head>
:
<!-- InstanceParam name="hoge" type="boolean" value="false" -->
</head>
2. 分岐したい箇所を以下のように記述します。
<!-- TemplateBeginIf cond="hoge" --><h1>サイト名</h1><!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="!hoge" --><p>サイト名</p><!-- TemplateEndIf -->
これで、hoge の値が真(true)だった場合には h1 でマークアップされた行が、 偽(false)だった場合には p でマークアップされた行が表示されます。
3. トップページを Dreamweaver で開き、【修正】→【テンプレートプロパティ】→「hoge を表示」 にチェックを入れて、hoge の値を真(true)にします。
オプション領域を使用した簡単な Dreamweaver テンプレート内での分岐方法は以上です。
次回は「編集可能オプション領域」を使用して、さらに多彩な分岐処理を行う方法をご紹介します。