Dreamweaverのテンプレートで特定のページのみにスタイルをつける

2010/9/28

tutorial

Dreamweaver

Dreamweaverのテンプレート機能は、
フッターやヘッダーなど共通の場所を一元管理できるので非常に便利です。

ただ、メニューなどでページによってスタイルを変える必要がある時、
メニューもテンプレートに含んでしまうと個別に編集出来なくなります。
かと言って、テンプレートから外してしまうとメニューの増減があった時など、
修正が手間になります。

そこでifを使います。

Dreamweaverテンプレートのif文の使い方

例えば下記の様なメニューだとして、

<ul class="pager">
	<li><a href="top.thml">top</a></li>
	<li><a href="about.html">about</a></li>
	<li><a href="contact.html">contact</a></li>
</ul>

aboutのページでは</li>にcurrentと言うスタイルを付けたいとします。

<ul class="pager">
	<li><a href="top.thml">top</a></li>
	<li class="current"><a href="about.html">about</a></li>
	<li><a href="contact.html">contact</a></li>
</ul>

まずテンプレートの直前に

<!-- TemplateParam name="category" type="text" value="" -->

と入れます。

name="category"

のcategoryの部分は好きな文字で構いません。

そしてメニューの部分は以下の様に書きます。

<ul class="pager">
	<li><!-- TemplateBeginIf cond="category=='top'" --> class="current"<!-- TemplateEndIf -->&gt;<a href="top.thml">top</a></li>
	<li><!-- TemplateBeginIf cond="category=='about'" --> class="current"<!-- TemplateEndIf -->&gt;<a href="about.html">about</a></li>
	<li><!-- TemplateBeginIf cond="category=='contact'" --> class="current"<!-- TemplateEndIf -->&gt;<a href="contact.html">contact</a></li>
</ul>

<!-- TemplateBeginIf cond="category=='XXX'" -->

から

<!-- TemplateEndIf -->

までがif文です。

cond="category=='XXX'"

のcategoryの部分は上記の name=”category”で設定した文字と同じにします。
この構文の意味はcategoryにXXXが設定されてるページでは、

<!-- TemplateBeginIf cond="category=='XXX'" -->
〜
<!-- TemplateEndIf -->

で囲まれてる文を実行する、となります。

ですのでXXXの部分にtopと入れた場合は、
それ以降の文を実行したいページの

<!-- TemplateParam name="category" type="text" value="" -->

に value=”top”と入力します。

同様にaboutページで

<!-- TemplateBeginIf cond="category=='about'" -->
〜
<!-- TemplateEndIf -->

を実行したい場合は、
aboutページで

<!-- TemplateParam name="category" type="text" value="about" -->

と書きます。

指定したページ以外に適用したい場合

例えばトップページは

<ul class="pager">
	<li><a href="about.html">about</a></li>
	<li><a href="contact.html">contact</a></li>
</ul>

トップページ以外は

<ul class="pager">
	<li><a href="top.thml">top</a></li>
	<li><a href="about.html">about</a></li>
	<li><a href="contact.html">contact</a></li>
</ul>

としたい場合。

<ul class="pager"> <!-- TemplateBeginIf cond="category!='top'" -->
	<li><a href="top.thml">top</a></li>
<!-- TemplateEndIf -->
	<li><a href="about.html">about</a></li>
	<li><a href="contact.html">contact</a></li>
</ul>

と書きます。