リンク先のチュートリアルは、コントロール パネル用です。フロントエンドのコンテンツについて話しているので、通常の古い EE タグを使用して EE テンプレートですべて行うことができます。
HTML フラグメントを保持するためのテンプレート グループを用意することをお勧めします。この場合、エントリの本文とエントリのリンクを 1 つのテンプレートに入れると便利な場合があります。
ajax.group
- single_entry.html
次に、最も簡単に言えば、そのテンプレートで
<div id="entry-body">
{exp:channel:entries channel="channel_name_here" entry_id="{segment_3}"}
<h2>{title}</h2>
{body}
{/exp:channel:entries}
</div>
<div id="entry-links">
{exp:channel:next_entry}
<a href="{path='ajax/single_entry'}" class="next">Next</a>
{/exp:channel:next_entry}
{exp:channel:prev_entry}
<a href="{path='ajax/single_entry'}" class="prev">Previous</a>
{/exp:channel:prev_entry}
</div>
ajax を使用してこれらのフラグメントをリクエストする場合は、フラグメント テンプレートが正しいデータをロードするように、現在のentry_id
またはurl セグメントとして渡すようにしてください。url_title
セレクターを渡してload()
、必要な html のチャンクを取得し、ページ上の適切なコンテナーにロードすることができます。最も単純には、次のようなものです
$('#entry-container').load('ajax/single_entry/2 #entry-body');
$('#entry-links').load('ajax/single_entry/2 #entry-links');
ここで、2
はentry_id
ロードするエントリの です。http://api.jquery.com/on/を参照してください。
最後に、次のエントリ リンクと前のエントリ リンクに jQuery イベント リスナを配置して、jQueryload()
が次のエントリをロードするようにトリガーする必要があります。.next
リンクの例を次に示します。
$(document).on('click', '.next', function(event) {
var url = $(this).attr('href');
$('#entry-container').load(url); // load the html into your chosen DOM element
event.preventDefault(); // prevent the browser from navigating to this page
});
http://api.jquery.com/on/を参照してください。