August 2008

MODx(0.9.6)において、Dittoは記事をソートして一覧表示などする場合に必須のスニペットだ。 今回、一覧表示した記事を10件ごとにページングして表示する機会があったので、その方法をここに残しておく。

1. 必要最小限の書式は以下

   [!Ditto? &id=`id` &display=`10` &paginate=`1` &language=`japanese-utf8` !]

   パラメータ名	役割
   id	Dittoごとに一意なID
   display	１ページに表示する件数
   paginate	1でページング処理を有効にする
   language	デフォルトでは英語になっていたので日本語を指定（「前へ」「次へ」などの文言）

   注意点

   • ページのキャッシュを無効にするために [[Ditto ～ ]] ではなく [!Ditto ～ !] の書式にする
   • 必ずidパラメータに適当な値を設定する（Dittoを同ページで複数使用するときにはそれぞれ別の値を設定する）

2. ページのナビゲーションを表示したい場所に以下のタグを追加する

   <p id="ditto_pages">[+id_previous+] [+id_pages+] [+id_next+]</p>

   強調している「id」のところには自分がDittoのタグに使用したidの値と置きかえる。 HTMLは別にPタグでなくとも良いが、スタイルの指定のためタグのID指定はditto_pagesにする。（まぎらわしいがDittoのidのことではなくHTMLタグのこと）

3. スタイルシートに以下を追加する

   .ditto_paging {
       border-top: 1px solid #ccc;
       padding: 10px;
       font-size: 86%;
       color: black;
   }
   #ditto_pages .ditto_currentpage {
       border: 1px solid black;
       padding: 1px 5px 2px;
       margin-right: 1px;
       background-color: #008CBA;
       color: #fff;
   }
   #ditto_pages .ditto_off {
       border: 1px solid #ccc;
       padding: 1px 5px 2px;
       margin-right: 1px;
       color: #ccc;
   }
   #ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {
       border: 1px solid #008CBA;
       padding: 1px 5px 2px;
       margin-right: 1px;
       text-decoration: none !important;
       color: black;
   }
   #ditto_pages a:hover {
       background-color: #fff;
       color: #000;
   }
   

   このスタイルシートは以下のページでDittoの作者が提供しているものだ。 好きに改変して使用すればいいだろう。

   Pagination - Ditto Support Site

4. 以上

   これでid="ditto_pages"のタグ内が自動で変換されてページングのナビゲーションが表示される。 うまくいかないときはid指定、ページのキャッシュなどに気をつけて確認してみよう。

ちなみに使ってみるとこんな感じにできました。

破れGo on !! - 未経験２７歳プログラマーへの道（イバラ）