ブログのトップページの上からも検索できるようにしました
最近だんだんとブログ記事が増えてきたので、
ブログのトップページの上の部分からも、キーワード検索ができるようにしました。
いま「ラーメン」と検索すると、上の画面のように表示されます。
いままで検索結果は「キーワードを含むブログ記事の内容全部」だったため、
たくさんヒットすると、かなりスクロールしないと見られない長い結果でした。
見ている端末によってはメモリもたくさん使っていたと思います。
今回の変更後は、ブログ記事のタイトルと、記事の概要を最初の100文字だけ表示、
「続きを読む」をクリックした場合に記事のページを開くようにしました。
ここからはブログを管理しているMovable Typeの変更点の説明になります。
ブログ側のインデックステンプレート「メインページ」の「alpha-inner」の次に、
検索のウィジェットを表示するように1行追加しました。
<div id="alpha-inner">
<$mt:Include widget="検索"$>
これで、検索窓がブログのトップページの上の部分に表示されるようになりました。
次に、検索結果で概要を表示するためのテンプレートを作成しました。
テンプレートモジュール「ブログ記事の概要」を複製して「ブログ記事の概要2」とします。
その「EntryBody」の中身を以下のように変更します。
<mt:If tag="EntryBody">
<div class="asset-body">
<$MTEntryExcerpt$><br />
<a href="<$mt:EntryPermalink>#more" rel="bookmark">>> 続きを読む</a>
</div>
</mt:If>
これが記事ひとつ分の概要になります。
次に、システムテンプレート「検索結果」で使用している「ブログ記事の概要」を、
先ほど作成した「ブログ記事の概要2」に変更します。
これで、検索結果として、記事全文ではなく、記事の概要が表示されるようになります。
ここまでで、ブログのトップページに検索窓が追加され、検索結果はブログの概要の一覧、
見たいブログ記事の「続きを読む」をクリックすれば記事のページが開くようになりました。
自分の備忘録としてもブログを書いているので、この検索は自分でも使う予定です。