記事のインデックスを作る
- 記事のインデックスが欲しい。
- タイトル以外に概要があるといい
- リンクをクリックして個別表示ページに飛ぶのはイヤ
これが私が求めるインデックスで、実際にこのページに設置されているものです。記事の一覧を表示させる事自体は、標準の独自タグである {selected_entry_list} を使えば良いのですが、これによって書き出されるリンクは各記事の個別表示へのリンクとなっています。ページの該当位置にジャンプさせるプラグインもあるようですが、実は HTML を工夫すればプラグイン無しでも実現可能です。
この記事はテンプレートの HTML をある程度書き換える事ができる人に向けた内容です。また、実際に自分のページのデザインにあわせて使用するには CSS の知識が必要になる場合も必要になります。
インデックスを表示する
最初のポイントはここです。前述のように {selected_entry_list} は使えないので他の方法を使いますが、ここは逆転の発想で「記事のタイトルと概要だけを表示させてインデックス代わりにする」という作戦をとります。...と、これだけでは何が逆転なのか分からないですね。sb 独自ブロックの entry は <!-- BEGIN entry --> と <!-- END entry --> で挟まれた内容を記事の件数分繰り返し表示し、記事一覧を作成します。そこで、記事そのものを表示するためにある entry ブロックを使ってインデックスを作ってしまおうという訳です。entry ブロックには1ページに1つだけという個数制限は無く、複数書けばその分だけ記事が表示されます。
つまり、実際に記事を表示させる entry ブロックはそのままに、インデックス用の entry ブロックをページ頭にもう1つ作るという事です。
<!-- BEGIN entry -->
{entry_title} {entry_date} {entry_time}
{entry_excerpt}
<!-- END entry -->
ページ内の該当記事にジャンプさせる
インデックスからページ内の該当記事にジャンプさせるためには 3つのステップが必要です。- 飛び先の準備
- 飛び先、つまり各記事に目印をつける必要があります。各記事には個別の ID が割り当てられており、独自タグ {entry_id} を使って表示する事ができます。実際の記事を表示させる entry ブロックの一番最初の要素に id="eid{entry_id}" を追加します。標準のテンプレートを例にとると、以下のようになります。（なお、各記事のタイトル部分に個別表示へのリンクを設定していない人は 「Netscape / Firefox でのページ内ジャンプ動作」：□ も併せて読んでください）
<!-- BEGIN entry -->
これで開始部分に記事 ID の目印（アンカー）が作られ、そこにジャンプする準備が整いました。
<div class="entry" id="eid{entry_id}">
<!-- BEGIN seque........ - インデックスの準備
- 次に、インデックス用の entry ブロックに先ほど作った目印（アンカー）にジャンプするリンクを作ります。ページ内ジャンプは # を使い、当然 {entry_id} と組み合わせて a href="#eid{entry_id}" というリンクを作成します。
<a href="#eid{entry_id}">{entry_title}</a>
- sb の設定
- sb はアーカイブ表示時、entry ブロックを使って作成した各記事の先頭に「eid記事 ID」という目印を自動的につける仕様となっています。この方法では entry ブロックでインデックスを作成しているため、そのままではリンクをクリックするとその場にジャンプするというなんともマヌケな状態になります。
そこで、sb 本体 lib フォルダ内の sbcommon.pl というファイル 71行目の「1」を「0」に書き換えて自動マーキングをオフにします。ファイルを修正したら所定の位置にアップロードしてください。
71行目 'marking' => 0, # アーカイブにつくエントリー用のマーキングフラグ
Serene Bach でマーキングをオフにするには
Serene Bach でマーキングをオフにするには「lib / sb」にある Config.pm 139行目の「1」を「0」に書き換えます。139行目 'basic_marking' => 0, # アーカイブにつくエントリー用のマーキングフラグ
おまけ
おまけとしてこの Studio Ponytail WEB のトップページで使用している昔ながらの What's New の作り方を紹介します。これはタイトルをクリックすると該当カテゴリの記事掲載場所にジャンプするというものです。<a href="sb.cgi?cid={category_id}#e_id{entry_id}">{entry_title}</a>
{category_id} は記事のカテゴリー ID を表示するための独自タグで（って、そのまんま）「sb.cgi?cid=○」というのはいわずと知れた、各カテゴリーを表示させる URL アドレスです。あとはその後ろに #e_id{entry_id} をつければ、該当箇所へのジャンプができあがり、という訳です。まあ、おそらくほとんどの人はトップページにそのまま新しい記事が表示される構成なので必要ないと思いますが、独自タグを組み合わせるとこういう事もできる、という余談でした。