Ajax検索システムをタグ検索にも導入する

| カテゴリ: カスタマイズ

MovableType標準の検索システムは、バージョンが新しくなるにつれてかなり改善されてきているようですが、一度Ajax検索システムを使ってしまうとその快適さは捨てがたく・・・

MovableTypeの検索システムを見直す

サイト内検索はこれで万全になったのですが、課題がひとつ。


それは、「タグ検索」です。

タグとカテゴリの使い分けがイマイチ上手くできてないのはさておき、標準テンプレートではタグクラウドやエントリに表示されているタグをクリックすると、mt-search.cgiが作動します。

せっかく快適な検索システムを導入したんですから、できればタグ検索にもこれを使いたいものです。
そこで、前回のエントリへのトラックバックをたどってみたり、ググってみたりしたんですが、解説がありそうなページはことごとくなくなっていて、カスタマイズの仕方がわかりません。

カスタマイズの解説はありませんでしたが、Ajaxによるタグ検索を導入したというエントリがあるブログを参考にさせていただきました。

eternalheart.com: MTの検索をAjaxで高速化する、さらにタグクラウドもAjaxで表示!

以下の説明は、Ajax検索システムがすでに導入されていることが前提です。

変更するポイントは3つ。
blog_ajax_json_search.jsと検索用データを作成するテンプレートであるsearch_data.txtの変更、そしてタグのリンク先の変更です。

blog_ajax_json_search.jsの変更

まずは116行目

if ( !res_body && !res_title ) {

これを以下のように変更および追加。

var res_tag = key[j].exec( entries[i].tag );
if ( !res_body && !res_title&&!res_tag ) {

上記で一行挿入されていますので、挿入後の行数で148行目。

html += '<li><a href="' + result_data[i].link + '#search_word=' + search_keyword + '">' + highlight( result_data[i].title, keywords ) + '</a><br />' + highlight( trunc( result_data[i].body, keywords[0] ), keywords ) + '</li>';

これを下記のように変更。

html += '<li><a href="' + result_data[i].link + '#search_word=' + search_keyword + '">' + highlight( result_data[i].title, keywords ) + '</a><br />' + highlight( trunc( result_data[i].body, keywords[0] ), keywords ) + '<br />【このエントリーのタグ】' + highlighttag( trunc( result_data[i].tag, keywords[0] ), keywords ) + '</li>';

さらに末尾に以下を追加

function highlighttag( text, keywords ) {
    var keyword = '';
    for ( var i= 0; i<keywords.length; i++ ) {
        if ( i == keywords.length - 1 ) {
            keyword += keywords[i];
        } else {
            keyword += keywords[i] + '|'; 
        }
    }
    return text.replace( new RegExp( '(' + keyword + ')', "ig"), '<span style="background-color: plum;">' + "$1" + '</span>' );
}


検索用データテンプレートの修正

8行目に以下を挿入

,tag:"<MTEntryTags glue=','><$MTTagName$></MTEntryTags>"

さらに挿入後の行数で10行目を下記のように修正(赤色が追加箇所)

{title:"",link:"",body:"",tag:""}


タグのリンクの変更

タグクラウドやエントリの概要にあるタグのリンクを下記のように変更します。

<a href="#" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', '<$mt:TagName$>' );"><$mt:TagName$></a>

これで多分大丈夫なはずです。
もっと洗練されたカスタマイズもあると思いますが、まずは動作することを優先しました。

 
 

トラックバック(0)

このページにトラックバック&リンク

このエントリに関連する記事をブログに書いた方は、お氣軽にトラックバックしてください。
言及リンクは必須ではありませんが、このページの内容に関係のないトラックバックは削除します。

トラックバックURL:


CAPTCHA スパム防止のため、トラックバックURL末尾の XXXXXX 部分を上記画像の数字に置き換えてからご利用ください。お手数ですがご協力よろしくお願いいたします。

リンク用ソースコード:


このブログ記事を参照しているブログ一覧: Ajax検索システムをタグ検索にも導入する

コメントをどうぞ

アイテム


カテゴリ

アーカイブ

   
OpenID対応しています OpenIDについて