COLUM
コラム
Ditto ページネーションかっこよくしたい!パラメータの使い方
2020/09/30
Ditto ページネーションは、Dittoで取得する複数のリソースを数件ごとにページを分けて表示する機能です。
http://modx.jp/docs/extras/snippets/ditto/params/main/paging.html
↑以下、こちらのページの補完内容です。
[!Ditto? &id=`blog` &parents=`リソースID` &display=`10` &paginate=`1` !] [+blog_previous+][+blog_pages+][+blog_next+]
基本的なページング機能では、以下のHTMLが出力されます
< 戻る 1| 2| 3 次へ >
ページングを、も少しかっこよく表示したいけどこれでは、装飾しづらいですよね。
ページングのテンプレートを変更
[!Ditto? &id=`blog` &parents=`リソースID` &display=`10` &paginate=`1` &paginateSplitterCharacter=`` &tplPaginateCurrentPage=`@CODE
-
[+blog_previous+][+blog_pages+][+blog_next+]
※[ ]は半角に変換してください。
&paginateSplitterCharacter=`` で「|」を非表示にし、個別にテンプレートを変更します。
これで以下の様にHTMLが出力されるので、CSSでの装飾が容易になりました。
こんな感じにCSSを調整
ul { list-style: none; } #pagination { display: flex; justify-content: flex-start; } #pagination li { margin-right: 4px; } #pagination li a, #pagination li span { text-decoration: none; border: 1px #ddd solid; font-size: 14px; color: #222; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; } #pagination li.prev a, #pagination li.next a { width: 50px; } #pagination li a { transition: background 0.2s ease 0s; } #pagination li a:hover { background: #ddd; } #pagination li.active span { color: #fff; border: 1px #b5282e solid; background: #b5282e; }
その他ページネーションパラメーター
&paginateAlwaysShowLinks=`1`
前の次のリンクを常に表示するか(初期値:0 表示しない)
&tplPaginateNextOff=`@CODE
前後のリンクがない場合のテンプレート
カテゴリ
最新記事
- Instagram Graph API(Ver22.0更新)+ショッピングカートへの埋込
- 怪しいアクセス
- 他者様から弊社に保守管理の変更依頼
- 【5】記事(コラムやお知らせ)を複製する
- 【4】既存の記事(コラムやお知らせ)を削除する
- 【3】既存の記事(コラムやお知らせ)を変更する
アーカイブ
- 2025年3月 (1)
- 2025年1月 (1)
- 2024年7月 (1)
- 2024年6月 (6)
- 2024年4月 (1)
- 2024年2月 (1)
- 2023年9月 (1)
- 2023年8月 (1)
- 2023年2月 (1)
- 2022年12月 (1)
- 2022年10月 (2)
- 2022年6月 (1)
- 2022年2月 (2)
- 2021年11月 (3)
- 2021年10月 (1)
- 2021年8月 (1)
- 2021年5月 (1)
- 2021年4月 (1)
- 2021年2月 (1)
- 2021年1月 (1)
- 2020年9月 (2)
- 2020年8月 (2)
- 2020年6月 (3)
- 2020年3月 (3)
- 2020年1月 (1)
- 2019年10月 (1)
- 2019年6月 (1)
MEETING
福岡市近郊は
無料でお伺いします