ページネーションテンプレート作成

ページネーションテンプレートについて

ページネーションテンプレートを使うと、別ページのマルチタイプ参照機能で詳細ページへのリンクリストを用意している場合などに、リンクリストを複数ページに分割することができます。

※ページネーションテンプレートを作成するためには、「システム管理者」か「デザイナー」ロールに設定されたユーザーである必要があります。また、テンプレートを作成するためにはHTMLの知識も必要です。

ページネーションテンプレートの作成方法

ページネーションテンプレートの作成方法をステップに別けて説明します。

ステップ１：別ページのマルチタイプ参照を実装する。

別ページのマルチタイプ参照機能を使ってページネーション対象となるリンクリストを用意してください。
例：

<ul>
<!--{repeat id="p1" ref_template_id="1"}--><li><!--{text id="p2" ref_id="_title" ref_link="on"}--><!--{/text}--> - <!--{date id="p3" ref_id="_create_date"}--><!--{/date}--></li><!--{/repeat}-->
</ul>

※ref_template_id は実際のIDを指定する必要があります。

ステップ２：テンプレートタイプを設定する。
  1. テンプレート編集画面のテンプレートタイプ設定で「ページネーションタイプ」を選択します。
  2. テンプレート編集画面でページネーション用項目を設定します。

    対象リピートIDには別ページのマルチタイプ参照機能を活用しているリピートタグIDを指定します。
    例：p1

    ページネーション設定で、１ページに表示するアイテム数（詳細ページへのリンク数）を指定します。
    例：20

    出力ページ名設定では、ページネーションページとして出力する２ページ目以降ページ名を指定します。
    例えば、プレフィックスに「page_」を指定すると２ページ目のファイル名は「page_2.html」になります。

ステップ３：次へ・前へリンクを作成する。

分割された各ページに移動するために次へ・前へリンクを作成します。
ページネーションの次へ・前へリンクのURLは予約IDの _prev_url と _next_url に保持しています。それらを出力するために次のように実装します。

例：
<ul>
<!--{repeat id="p1" ref_template_id="1"}--><li><!--{text id="p2" ref_id="_title" ref_link="on"}--><!--{/text}--> - <!--{date id="p3" ref_id="_create_date"}--><!--{/date}--></li><!--{/repeat}-->
</ul>

<!--{delete id="p7"}--><!--{attr id="prev_url" target="href" ref_id="_prev_url"}--><a href=""><!--{/attr}-->前へ</a><!--{/delete}-->
<!--{delete id="p16"}--><!--{attr id="next_url" target="href" ref_id="_next_url"}--><a href=""><!--{/attr}-->次へ</a><!--{/delete}-->

このテンプレートのページを書き出すと、次へ・前へページに移動できるようになります。
ステップ３まで実装することで、最小限のページネーションの機能を確認できます。
ページネーションの全機能を試したい場合は、ステップ４に進んでください。

ステップ４：ページ番号リンクを作成する。

各ページや最後のページに直接移動するために、予約IDの _first_url、_prev_url、_next_url、_last_url、_pages、_url、_class、_no、_item_count、_current_no、_page_count を活用して次のような記述をテンプレートに追加します。
次の例では、簡単に動作確認をするために style要素を用意していますが、実際のサイトを作成する場合には別途ご用意ください。

例： 
<ul>
<!--{repeat id="p1" ref_template_id="1"}--><li><!--{text id="p2" ref_id="_title" ref_link="on"}--><!--{/text}--> - <!--{date id="p3" ref_id="_create_date"}--><!--{/date}--></li><!--{/repeat}-->
</ul>

<style>
.pagination li {
display:inline-block;
margin: 5px 10px;
}
</style>
<ul class="pagination">
<li><!--{delete id="p4"}--><!--{attr id="first_url" target="href" ref_id="_first_url"}--><a href=""><!--{/attr}--><!--{/delete}-->最初へ<!--{delete id="p6" target_id="first_url"}--></a><!--{/delete}--></li>
<li><!--{delete id="p7"}--><!--{attr id="prev_url" target="href" ref_id="_prev_url"}--><a href=""><!--{/attr}--><!--{/delete}-->前へ<!--{delete id="p9" target_id="prev_url"}--></a><!--{/delete}--></li>

<!--{repeat id="p10" ref_id="_pages"}-->
<!--{attr id="p11" target="class" ref_id="_class"}--><li class=""><!--{/attr}-->
    <!--{delete id="p12"}--><!--{attr id="url" target="href" ref_id="_url"}--><a href=""><!--{/attr}--><!--{/delete}-->
    <!--{text id="p14" ref_id="_no"}-->1<!--{/text}-->
    <!--{delete id="p15" target_id="url"}--></a><!--{/delete}-->
</li>
<!--{/repeat}-->

<li><!--{delete id="p16"}--><!--{attr id="next_url" target="href" ref_id="_next_url"}--><a href=""><!--{/attr}--><!--{/delete}-->次へ<!--{delete id="p18" target_id="next_url"}--></a><!--{/delete}--></li>
<li><!--{delete id="p19"}--><!--{attr id="last_url" target="href" ref_id="_last_url"}--><a href=""><!--{/attr}--><!--{/delete}-->最後へ<!--{delete id="p21" target_id="last_url"}--></a><!--{/delete}--></li>
 </ul>

<p>合計アイテム数： <!--{text id="p22" ref_id="_item_count"}--><!--{/text}--></p>
<p>ページ： <!--{text id="p23" ref_id="_current_no"}--><!--{/text}--> / <!--{text id="p24" ref_id="_page_count"}--><!--{/text}--></p>

上記のように実装すると、下記のようなページネーションリンクを作成することができます。
ページネーションリンクの作成例：

ページネーション機能の設定

設定ファイル（config.ini）の [pagination] セクションで、表示するページ番号のリンク数やナビゲーション箇所のクラス名などを設定できます。

予約ID

ページネーションタイプテンプレートで有効になる予約IDの一覧です。

_first_url１ページ目のURLを保持します。現在ページが１ページ目の場合は値が空になります。
_prev_url次のページのURLを保持します。次のページが無い場合（最終ページの場合）は値が空になります。
_next_url前のページのURLを保持します。前のページが無い場合（１ページ目の場合）は値が空になります。
_last_url最終ページ目のURLを保持します。現在ページが最終ページの場合は値が空になります。
_pagesページ番号ナビゲーション情報を保持します。repeatタグで展開すると各ページの情報を取り出せます。
_no_pagesをrepeatタグで展開した際に、ページ番号ナビゲーションのページ番号を保持します。
_url_pagesをrepeatタグで展開した際に、ページ番号ナビゲーションの各ページのURLを保持します。
_class_pagesをrepeatタグで展開した際に、ページ番号ナビゲーションの状況に応じたクラス名を保持します。クラス名は、設定ファイルの[pagination] セクションで指定できます。
_item_countページネーション対象アイテム（ページ）の合計数を保持します。
_current_noページ番号ナビゲーションの現在ページ番号を保持します。
_page_countページ番号ナビゲーションの合計ページ数を保持します。

1.4 マニュアル