MovableType.net で flexibleSearch を使ってみる

昨日、MT Live! に参加しまして、その中で MovableType.net の説明会があったので色々聞いてきました。

MovableType.net | ウェブサービス型高機能CMS
https://movabletype.net/

検索の機能がまだないようで、 flexibleSearch で出来るよね、という話もあったので早速試してみました。

flexibleSearch
https://github.com/tinybeans/jq-plugin-flexibleSearch

検索用JSON

検索データ用のJSONを作成します。コードはこんな感じでインデックステンプレートで作ると良いかと思います。

{"items":[
<mt:entries lastn="0">{
"title":"<mt:entryTitle>",
"url":"<mt:entryPermalink>",
"body":"<mt:entryBody remove_html="1" strip_linefeeds="1">"
}<mt:unless name="__last__">,</mt:unless>
</mt:entries>
]}

/data.json として出力しておきました。
正規表現が多分?つかえないようなので、Githubのサンプルコードとはちょっと変えました。

必要ファイルのアップロード

Githubからもってきたファイルのうち

  • /flexibleSearch/flexibleSearch.js
  • /flexibleSearch/mustache.js
  • /flexibleSearch/loading.gif

のファイルをアップロードします。

MovableType.net では作れるフォルダ名が小文字だけなので flexiblesearch としました。
(最初フォルダの作る場所が分からなくて探しました・・)

flexibleSearch-config の作成

flexibleSearch-config.js として入っていたファイルを編集しやすいようにインデックステンプレートにします。

出力先はアップロードしたファイルと揃えて flexiblesearch/flexibleSearch-config.js がよいかと思います。

こんなかんじで必要なオプションを指定しておきます。

(function ($) {
    $("#search").flexibleSearch({
        searchDataPath: "/data.json",
        searchFormAction: "/search.html",
        loadingImgPath: "/flexiblesearch/loading.gif",
        resultItemTmpl : '<div id="fs-result-items"><ul>{{#items}}<li><a href="{{&url}}">{{&title}}</a></li>{{/items}}</ul></div>',
        dummy: false
    });
})(jQuery);

検索結果テンプレートの作成

もともとあったトップページなどのテンプレートを複製して、検索結果のページを作成します。 /search.html として複製しました。

コンテンツ部分に検索結果表示用の div を追加します。

<div id="content">
  <div id="content-inner">
    <div id="index-main" class="main" role="main">
      <h1>検索結果</h1>
      <div id="fs-result"></div>
    </div>
    <aside class="widgets related" role="complementary">
      <$mt:Include module="サイドバー"$>
    </aside>
  </div>
</div>

あとは、body 閉じタグの前に js を読み込ませておきます。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/flexiblesearch/mustache.js"></script>
<script src="/flexiblesearch/flexibleSearch.js"></script>
<script src="/flexiblesearch/flexibleSearch-config.js"></script>

ファイルを置いた/出力した所に変更する必要があります。

flexibleSearchを使いたい全てのページで上記の js を読み込ませる必要があります。

検索フォームの追加

検索窓を追加します。ひとまず今回はサイドバーに追加してみます。

<div class="widget-syndication widget section">
  <div class="widget-content">
    <h3>検索</h3>
    <div id="search"></div>
  </div>
</div>

このような感じでテンプレートに記載しました。

これでサイドバーに検索フォームが表示されます。

検索してみる

適当に検索ワードをいれて検索してみます。

大丈夫なようです。

ということで、MovableType.net で検索を使ってみたい方はflexibleSearchという選択もありかもしれません。


Comments

comments powered by Disqus