アーカイブ画面を検索結果風にカスタム

カテゴリ: Movable Type
|

Movable Typeのデフォルトでは、カテゴリーアーカイブや月ごとのアーカイブは、全ての記事を、単にそのまま並べただけの構成になっています。この構成だと量が増えたときに見通しが悪いので、一覧的な画面をテンプレートのカスタマイズで作成してみることにします。

とはいったものの、今までやってきたテンプレートのカスタマイズは固定の CSSやHTMLの箇所の修正だったり、既存テンプレートからのコピペだけだったので、テンプレートの文法まで踏み込んで調べたことはありませんでした。Googleで探すと HOWTO系のページはいくつか HITするものの、個人的に満足出来るページが見つからなかったので、諦めて公式リファレンスを読むことにしました。

・・・基本的にテンプレートの変更は、データを展開して HTMLを作成するときの制御情報や置換情報を記述するために追加された独自のタグを理解すれば出来そうです。タグの数は結構あるみたいですが、元になるテンプレートがあればそんなに難しくもなさそうです。

やることが把握出来たら作業にかかります。

修正の方針は、アーカイブ画面は一覧化ということで検索サイトの検索結果ライクな画面し、元の全てのエントリーが並ぶ画面は一覧画面に「全てのエントリーの内容を表示」といった感じのリンクを設置することにします。

最初に、元の日付とカテゴリーのアーカイブテンプレートをコピーして、新たに「一括表示アーカイブ」というテンプレートとして保存しておきます。次にアーカイブのテンプレートを一覧化します。MTEntriesタグで囲んでエントリーを列挙する基本は変わらないので、その中を変更していきます。

最初にタイトルにパーマリンクを設定して表示させます。
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>

タグの中にタグが入れ子になるのが、ちょっと気持ち悪いですが、そういう仕様なので、しょうがないです。(^^;;;;;

続いて、本文の最初の何文字かだけを表示させます。
<$MTEntryBody convert_breaks="0" words="100"$>…

その後に、日付とコメント、トラックバックの情報表示をコピーしておきます。

最後に、適当に divタグで囲って、classを付け、CSSでスタイルを設定します。

テンプレートの修正が出来たら、GUIから Movable Typeに登録されている内容を更新します。ついでに、テンプレートを WWWから /mt-template/ で参照できるように「リンクするファイル」も設定します。(特にアクセス制限はかけていないので 実際のテンプレートを Hackしたい方はご自由にどうぞ...)

テンプレートの登録ができたら、次は Movable Typeが両方のテンプレートを使用するように設定を変更します。システムメニューの設定から公開の設定を開き、下のほうにあるアーカイブマッピングに、一括表示用のテンプレートのマッピングを追加します。

「マッピングを新規作成」をクリックして、「カテゴリ」と「月別」のアーカイブを、新規に登録したテンプレートを指定して追加します。追加できたら「出力フォーマット」を「カスタマイズする」で変更します。月別は、「%y/%m/show_all.html」カテゴリは「%c/show_all.html」にします。これで、一覧の方のアーカイブと同じディレクトリに show_all.htmlという名前で全表示の HTMLが作成されるので、一覧表示のテンプレートの MTEntriesのループの前に、show_all.htmlへのリンクも追加しておきます。

終わったら再構築を実行してサイトに反映します。
後は、納得いくまで調整と構築の繰り返しです...(^^;;;;;;;;;;

「Movable Type」の新着

最近のコメント


最近のコメントを表示...
Powered by Movable Type 7.1.1