関連記事を簡単に表示できるプラグイン「SimilarEntries」をリリースしました。
このブログでのお知らせが遅くなりましたが、先日、Movable Type で関連記事を表示するプラグイン「SimilarEntries」をリリースしました。
今日は SimilarEntries プラグインの特徴をご紹介します。
Movable Type のデフォルトの機能を使って関連記事を表示する場合、「同じタグが付けられている記事」や「同じカテゴリに属する記事」をリストアップすることが多いですが、当プラグインは、複数のフィールドで関連性を判定することができます。
カスタムフィールドも関連性の判定に含めることができます。
フィールドごとに優先度を変えることができるので、例えば、
といった設定が可能です。これらの点数を積み上げていき、点数の多い記事から順にリストアップしていきます。
このプラグインでは、JavaScript で動的に関連記事を表示します。
まず、インデックステンプレートで関連付けを判定するための専用フォーマットの JSON を、スタティックパブリッシングで書き出します。JSON を書き出すと言っても、下記のようなファンクションタグをインデックステンプレートに書けばOKです。
<mt:SimilarEntriesRelateJSON
include_blogs="7"
fields="tags,keywords,field.text01,category">
これだけ書けば、あとはファンクションタグがよしなにやってくれます。
次に、同じくインデックステンプレートで出力 HTML 用の JSON ファイルをスタティックパブリッシングで書き出します。これも、下記のようにブロックタグ内に出力したい情報の MTML を書けばOKです。
<mt:SimilarEntriesTemplateJSON include_blogs="7">
<li><a href="<mt:EntryPermalink>"><mt:EntryTitle></a>(<mt:BlogName>)[<mt:EntryPrimaryCategory><mt:CategoryLabel></mt:EntryPrimaryCategory>]</li>
</mt:SimilarEntriesTemplateJSON>
これで、
{
e718: "<li><a href="/SimilarEntries/archives/000718.html">すべてのページで同じ「最近のブログ記事一覧」を表示するカスタマイズ</a>(SimilarEntries)[MT Customize]</li>",
e725: "<li><a href="/SimilarEntries/archives/000725.html">一定時間で自動的に消える New マークを付ける JavaScript の jQuery 版</a>(SimilarEntries)[JavaScript]</li>",
(省略)
}
のような JSON を書き出してくれます。
あとは、出力したい場所(記事のテンプレートなど)に、
<mt:SimilarEntriesShow
fields="tags,keywords,field.text01,category"
relation_url="http://your-host/SimilarEntries/relation.json"
template_url="http://your-host/SimilarEntries/template.json"
target_selector="#similar-entries"
limit="5">
と書けば、実行する部分の JavaScript を書き出してくれます。
使い方の詳細は、mt-plugin-SimilarEntries/README.md at master · bit-part/mt-plugin-SimilarEntries をご覧ください。
流れとしては、
するとこになります。
jQuery 等のライブラリは使っていないので、jQuery を使ったサイトでも AngularJS を使ったサイトでも、どんなサイトでも利用することが可能です。
JavaScript での処理がメインのプラグインですが、基本的に JavaScript は書かなくても利用できます。
また、関連記事をリストアップするループで毎回呼ばれる関数を JavaScript で設定することもできるので、少し JavaScript が書ければさらにきめ細かい制御が可能となります。
下記に、
した例を掲載します。
<mt:SetVarBlock name="first"><ul></mt:SetVarBlock>
<mt:SetVarBlock name="last"></ul></mt:SetVarBlock>
<mt:SetVarBlock name="each_function">
function(i, text, odd, even){
if (odd) {
text = text.replace(/<li/, '<li class="odd"');
}
else if (even) {
text = text.replace(/<li/, '<li class="even"');
}
if (i % 3 == 0) {
text += '</ul><ul>'
}
return text;
}
</mt:SetVarBlock>
<mt:SimilarEntriesShow
fields="tags,keywords,field.text01,category"
relation_url="http://your-host/SimilarEntries/relation.json"
template_url="http://your-host/SimilarEntries/template.json"
target_selector="#similar-entries"
limit="5"
first="$first"
last="$last"
each_function="$each_function">
</div>
以上です。商用利用は有料となりますが、皆様のお役に立てば幸いです。