Dreamwevaerテンプレートで三項演算子を使ってQ&Aテンプレートを作る
またまたDreamweaverテンプレートネタです。
Dreamweaverのテンプレートでは三項演算子が使えます。三項演算子とはある条件が一致した場合は左の値、それ以外は右の値を実行する演算子です。記述方法は@@((条件)?'真の時実行する値':'それ以外の場合実行する値')@@と言う形です。
今回はDreamweaverのリピート領域を使ってQ&Aの部分をテンプレート化します。まず以下のような条件のテンプレートを作る事にします。
- 質問と回答を編集可能とする。
- 質問、回答に連番を振る。
- 5項目おきに"このページの一番上へ"のリンクを表示する
プレーンなHTMLコードを次のようにマークアップします
<dl>
<dt>Q1 質問内容</dt>
<dd>A1 その回答</dd>
<dd><a href="#pageTop">このページの一番上へ</a></dd>
</dl>
まずはQ!の内容とQ1の回答を編集可能領域にし、<dt>〜</dd>間をリピート領域に設定します。その次に連番をふる訳ですが、Dreamweaverのテンプレートでは@@(_index)@@でリピート領域の番号を取得することが出来ます。この値はゼロからスタートするので今回は1を足してマークアップします。ここまでのテンプレートコードは次のようになります。
<dl>
<!-- TemplateBeginRepeat name="QandAリピート" -->
<dt>Q@@(_index+1)@@ <!-- TemplateBeginEditable name="質問" -->質問内容<!-- TemplateEndEditable --></dt>
<dd>A@@(_index+1)@@ <!-- TemplateBeginEditable name="回答" -->その回答<!-- TemplateEndEditable --></dd>
<dd><a href="#container">このページの一番上へ</a></dd>
<!-- TemplateEndRepeat -->
</dl>
次に"このページの一番上へ"リンクを5項目おきに表示する訳ですが、ここで三項演算子を使います。条件ですが、_indexの値を5で割った余りが4の時に表示するようにするとちょうど5項目置きに表示されるようになります。条件式は(_index%5)==4のような記述になります。
<dl>
<!-- TemplateBeginRepeat name="QandAリピート" -->
<dt>Q@@(_index+1)@@ <!-- TemplateBeginEditable name="質問" -->質問内容<!-- TemplateEndEditable --></dt>
<dd>A@@(_index+1)@@ <!-- TemplateBeginEditable name="回答" -->その回答<!-- TemplateEndEditable --></dd>
@@((_index%5)==4?'<dd><a href="#container">このページの一番上へ</a></dd>':'')@@
<!-- TemplateEndRepeat -->
</dl>
これでQAのテンプレートの完成です。