a-blog cmsの続きを読むをAjax対応にする方法

検索部分のAjax対応について company3で試すjs-post_inculde機能 | kazumich.log で書きましたが、今回は続きを読むのリンクについてカスタマイズしてみようと思います。カスタマイズのベースとなるテーマとしては、1.3.0bより同梱されるようになった company3 です。

初期状態の続きを読む部分

まずは、今回のカスタマイズをする部分を見てみましょう。 一覧用のテンプレートになりますので、index.html というファイルになります。company3 には

• /themes/company3/index.html（標準的に利用される日付がない一覧）
• /themes/company3/news/index.html（日付がある一覧）
• /themes/company3/search.html（検索結果一覧）
• /themes/company3/search.html（タグ検索結果一覧）

の4つの一覧表示のテンプレートがあるようです。まずは、お知らせ（/news/）のテンプレートを修正していきましょう。

<!-- BEGIN continueLink:veil -->
<p class="continueLink clear"><a href="{continueUrl}">「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

違うテンプレートで表示させる

URL上に /tpl/＊＊テンプレート名＊＊ と書く事でテンプレートを切り換える事が可能です。以下のように修正して下さい。

<!-- BEGIN continueLink:veil -->
<p class="continueLink clear"><a href="{continueUrl}/tpl/include/continue.html">「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

include/continue.html という以下のファイルが1.3.0b2以降は用意されていますので、これで実際にブラウザで表示させると、続き部分のみが表示されたかと思います。これは、Entry_Continue というモジュールが動作し、続き部分のみを表示させたからという事になります。

<!-- BEGIN_MODULE Entry_Continue -->
<!--#include file="/include/column.html"-->
<!-- END_MODULE Entry_Continue -->

通常のリンクをAjax対応に

フォームからの情報をPOSTすると、その部分だけを書き換えてくれる js-post_include 機能というものを利用しますので、aタグでのリンクだった部分をformで処理するように以下のように修正します。

<!-- BEGIN continueLink:veil -->
<form action="{continueUrl}/tpl/include/continue.html" method="post" class="js-post_include">
<input type="submit" value="「{continueName}」の続きを読む" />
</form>
<!-- END continueLink:veil -->

あとは、ボタンのスタイルを調整するとか、画像のボタンにするとかで好みにあわせてカスタマイズして下さい。残り3つのテンプレートも同様に修正する事で、company3のテーマでの続きを読む部分をAjax対応は完了となります。

以下に、結果の動画だけ貼っておきます。前半は検索結果のAjax化、後半がココで紹介した続きを読むのAjax化です。フォームに class="js-post_include" というクラスを書き、target="#main" のような感じでどのエリアを書き換えるかを指定するだけ でページのリロード無しにコンテンツを書き換える事ができるようになります。アイデア次第で、いろいろなところで利用可能かと思います。一度、お試し下さい。