トップページをいじるネタ

MLに投げられたネタから。

ミッションは、カテゴリAとカテゴリBがあるときに、

・トップページに各カテゴリの最新エントリを表示する
・表示する際にはカテゴリAとカテゴリBで背景色を変える

という２つのポイント。

まずはトップページをいじる。

index_htmlの### Content block ###というコメントがある少し下、



<dtml-unless top_days>

<dtml-call "REQUEST.set('top_days',4)">

</dtml-unless top_days>



<dtml-in "rev_day_entry_items(count=top_days)">

<dtml-var entry_body>

<dtml-else>

<div id="content">

There are no entry.

</div>

</dtml-in>

これがトップページに４日分のエントリを表示する部分なので、すべてコメントアウト。

代わりにカテゴリAとBの最新エントリを表示したいわけだけど、さて、どうするか。

そこでCOREBlogのヘルプを見てみると、様々なAPIについての説明が書いてある。注目したのは↓これ。

category_entry_items(self, category_id, start=0, count=-1, consider_moderation=1):

Return list of Entry in a category, in reverse order.

あるカテゴリのエントリリストが最新のものから入ってるらしい。このリストの一番最初に入ってるエントリを抜き出してやればいいのね。
（ちなみにここではカテゴリAのIDは２，カテゴリBのIDは３とします）



<dtml-in "category_entry_items(category_id=2,count=1)">

<dtml-var entry_body>

<dtml-else>

<div id="content">

There are no entry for category "A".

</div>

</dtml-in>

こんな感じでやってみてレンダリングすると…

……

………

…………

「There are no entry for category "A".」

(*´Д`)なんでやねん…

どうやらcountがうまくいってないぽい。仕方ないのでdtml-ifを使ってやる。



<dtml-in "category_entry_items(category_id=2)">

  <dtml-if sequence-start>

    <dtml-var entry_body>

  <dtml-else>

  </dtml-if>

<dtml-else>

  <div id="content">

    There are no entry for category "A".

  </div>

</dtml-in>

sequence-startだったら、すなわち、リストの最初の要素だったら、entry_bodyを表示し、そうでなかったら、すなわち、リストの最初の要素じゃなかったら、なにも表示しない。激しく格好悪いですね、はい。

これをカテゴリBについても作ってやります。



<dtml-in "category_entry_items(category_id=3)">

  <dtml-if sequence-start>

    <dtml-var entry_body>

  <dtml-else>

  </dtml-if>

<dtml-else>

  <div id="content">

    There are no entry for category "B".

  </div>

</dtml-in>

と、ここまででindex_htmlにカテゴリA、Bの最新エントリを表示することには成功です。
次は色づけなのですが、とりあえずはentry_bodyの該当部を見てみます。



<dtml-comment>* Show date banner once in a same day.</dtml-comment>

<dtml-if "t_year != year_created()

 or t_month != month_created()

 or t_day != day_created()">

  <div class="date">

    <span class="day">

     <dtml-var date_created missing="00" fmt="%d"> 

    </span>

    <dtml-var date_created missing="00" fmt="%B"><br />

    <dtml-var year_created missing="00">

  </div>

</dtml-if>

ソースのコメントにもあるとおり、日付のバナーは同じ日には重複して表示されません。一日に二つのエントリを投稿した場合には、日付のバナーは１回しか表示されないのですが、今回のミッションではそれぞれのカテゴリに背景色を設定したいので、同じ日であってもエントリごとに日付のバナーを表示したいわけです。

エントリごとに日付のバナーを表示するのはとても簡単。上記のソースの中の、dtml-ifを削除するだけです。



<dtml-comment>* Show date banner</dtml-comment>

<div class="date">

  <span class="day">

   <dtml-var date_created missing="00" fmt="%d"> 

  </span>

  <dtml-var date_created missing="00" fmt="%B"><br />

  <dtml-var year_created missing="00">

</div>

これで同じ日のエントリであっても、エントリごとに日付のバナーが表示されるようになりました。

ちなみに日付のバナーの背景色を決めているのはclass="date"の部分。つまりここからの方針としては、style_cssにカテゴリA用のクラス（date_a）とカテゴリB用のクラス（date_b）を加えてやり、カテゴリAの最新エントリを表示してやるときにはdate_aを、カテゴリBの最新エントリを表示してやるときにはdate_bを適用してやる、という感じで。

まずはstyle_cssにdate_a、date_bを追加してやります。



.date {

	background: #<dtml-var color4 missing="606060">;

	color: #FFF;

	font-family:verdana,arial,georgia,"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", sans-serif;

	font-size: small;

	line-height: 110%;

	font-weight: normal;

	padding: 3px 0;

	margin-bottom: 10px;

}

こいつをコピー＆ペーストして、dateをdate_a、date_bとし、backgroundを、#FF3F00;、#FFBF00;にしてやりました。

最後に考えるのは条件分岐です。index_htmlにて最新エントリを追加する際に、カテゴリがAならdate_aを、カテゴリがBならdate_bを適用するわけです。

ということでinde_htmlの最新エントリ表示ソースを編集します。



<dtml-let category="getCategory(2)">　←加える

<dtml-in "category_entry_items(category_id=2)">

  <dtml-if sequence-start>

    <dtml-var entry_body>

  <dtml-else>

  </dtml-if>

<dtml-else>

  <div id="content">

    There are no entry for category "A".

  </div>

</dtml-in>

</dtml-let>　←加える

カテゴリBの方についても同様に編集します。

entry_bodyの方には、date_a、date_bを適用するための変更を加えます。



<dtml-comment>* Show date banner</dtml-comment>

<dtml-if "category == [2]">    |

  <div class="date_a">         |

<dtml-elif "category == [3]">  |

  <div class="date_b">         |　←加える

<dtml-else>                    |

  <div class="date">           |

</dtml-if>                     |

  <span class="day">

    <dtml-var date_created missing="00" fmt="%d"> 

  </span>

    <dtml-var date_created missing="00" fmt="%B"><br />

    <dtml-var year_created missing="00">

  </div>