Studio Ponytail

記事のインデックスを作る

2005年2月 7日 19:00 | コメント (12) | トラックバック (5)

1. 記事のインデックスが欲しい。
2. タイトル以外に概要があるといい
3. リンクをクリックして個別表示ページに飛ぶのはイヤ

　これが私が求めるインデックスで、実際にこのページに設置されているものです。記事の一覧を表示させる事自体は、標準の独自タグである {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 -->
<div class="entry" id="eid{entry_id}">
<!-- BEGIN seque........

　これで開始部分に記事 ID の目印（アンカー）が作られ、そこにジャンプする準備が整いました。

インデックスの準備

　次に、インデックス用の 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, # アーカイブにつくエントリー用のマーキングフラグ

　これでリンクをクリックするとページ内にジャンプするというインデックスが完成しました。テンプレートを自分で書き換えた事がある人ならお気づきだと思いますが、このインデックスは CSS を調整すれば2カラムや3カラム構成のメニュー部分に表示させることも可能です。ただし、その場合は記事タイトルのみを表示させるなど、すっきりまとめる必要があるでしょう。

おまけ

　おまけとしてこの 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} をつければ、該当箇所へのジャンプができあがり、という訳です。まあ、おそらくほとんどの人はトップページにそのまま新しい記事が表示される構成なので必要ないと思いますが、独自タグを組み合わせるとこういう事もできる、という余談でした。

コメント(12)

トラックバック(5)

トラックバックURL : http://www.studio-ponytail.com/mt/mt-tb.cgi/77