エントリーの「続きを読む」以降の内容をその場で表示する

エントリーの一覧表示で「続きを読む」のリンクをクリックしたときに、「続きを読む」以降の内容をページの移動なしでその場で表示する方法を説明します。

a-blog cmsでは、「続きを読む」という機能があります。この「続きを読む」はエントリーごとに指定できます。一覧ページには「続きを読む」というリンクが表示され、リンクをクリックするとエントリーの内容が詳細ページで全て表示されるようになっています。「続きを読む」を指定すると、それ以降のユニットは一覧ページには表示されず、詳細ページに表示されるようになります。

---

---

エントリーの「続きを読む」以降の内容をその場で表示する

一覧ページの「続きを読む」リンクをクリックしたときに、post include機能を利用してエントリーの続きの内容をページ移動なしで表示する方法を説明します。

1. 「続きを読む」以降の内容を読み込むインクルードファイルを用意する

post includeで読み込むために、「続きを読む」以降の内容を出力するファイルを用意します。「続きを読む」以降の内容を表示するには、コンティニュー（Entry_Continue）モジュールを使用します。

例）/themes/適用しているテーマ/include/continue.html というファイルを用意する場合

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

2. 一覧ページの「続きを読む」リンクに手順1で用意したテンプレートを適用させる

エントリー本文（Entry_Body）モジュールにある「continueLink」部分の詳細ページへのリンクURLに、手順1で用意したテンプレートを適用させます。これで、「続きを読む」リンクをクリックすると、「続きを読む」以降の内容のみ表示されたページに移動する状態になりました。

例）

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

URLを出力する変数の末尾に「/tpl/sample.html」のように /tpl/テンプレートファイル名 と記述すると、そのURLのページがテンプレートが適用された状態で表示されます。

3. post include機能を利用する

post include機能を利用するためには、アンカーリンクをフォームに変更します。以下のように記述してください。

例）

<!-- 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 -->

これで、フォームの送信ボタンを押したときには「続きを読む」以降の内容を読み込み、その場で表示されるようになります。

以下の動画の0:30以降から動作例をご覧いただけます。

---

---