MovableTypeでDataAPIを使って最新記事を出力する

簡単に利用できるようになったDataAPI

ウェブサイトのブログから最新の記事を読み込む、という基本的な操作を行ってみました。
あらかじめ、トップページが置かれているウェブサイトに対しブログを新規で作成します
こちらは新着情報を管理するブログになりますので、ブログのタイトルは「新着情報」としておきます。

「新着情報」ブログから最新の記事を5件ウェブサイトのトップページに読み込んで、ブログ記事のタイトルと概要を出力してみます。

DataAPIはMovableType本体が入っているフォルダからmt-static/data-api/で各バージョンのjsファイルがあらかじめ配置されています。

mt-data-apiを設定

mt-data-apiのディレクトリは、MTのインストール直下にある、mt-static/data-api/v3/js/に格納されています。
そのjsをテンプレートに読み込み、機能するように設定します。

script type="text/javascript" src="http://your-domain/data-api/v3/js/mt-data-api.min.js"

<$mt:StaticWebPath$>を使えば、 サーバーに設置したスタティックディレクトリ(mt-static)を参照する URL を指定するため先頭の部分は置き換えます。

script type="text/javascript" src="<$mt:StaticWebPath$>data-api/v3/js/mt-data-api.min.js"

listEntries

エンドポイントメソッドのlistEntriesはブログ記事の一覧を取得します。

GET https://your-host/your-mt-api.cgi/v1/sites/:site_id/entries

listEntriesに設定するパラメーターは今回、ブログのIDにします。


var api = new MT.DataAPI({
baseUrl: '<$mt:CGIPath$>mt-data-api.cgi/v3/sites/2/entries',
clientId: '2'
});

var siteId = 2;
api.listEntries(siteId, function(response) {
  if (response.error) {
    return;
  }
  for (i=0; i< response.items.length; i++) {
    jQuery('#result').append($('
  • ').append(response.items[i].title)); } });

MTInclude

listEntriesを利用して新着記事を自動で表示させるテンプレートを作成しましたが、実はMTIncludeは外部ブログを読み込んでくれません。
そんな場合は環境変数をmt-cgiに、外部のファイルを読みに行く記述を与えてください。

テンプレートタグリファレンス:MTInclude

アクセスランキング

ブログ記事を人気ランキング順に表示させる公式ブログ

MovableType:ブログ