baserCMSのページネーション（ページャー）のカスタマイズ

baserCMS公式の、ページネーションのドキュメントが少ないので、私が把握していることをまとめます。

## 基本的な使い方

baserCMSでは「ブログ」のアーカイブページでページネーションが使用できます。
pagination関数が提供されています。

```php
<?php $this->BcBaser->pagination(); ?>
```

https://wiki.basercms.net/ver4/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/BcBaser_pagination

## 引数と出力内容

pagination関数には「出力するHTML」を変更する第1引数`$name`があり、テーマ側で何もしていなければ（後述）、受け付ける引数は3種類です。
CSSのみでカスタマイズするのであれば、ordered_listで良いかと思います。

### default(または引数なし)

```php
<?php $this->BcBaser->pagination('default'); ?>
```

```html
<div class="pagination">
	<div class="pagination-result">結果：　00～00 件 ／ 総件数：　99 件</div>
	<div class="pagination-numbers">
		<span><a href="/pathToBlog/index/page:1" rel="first">|&lt;</a></span>　
		<span class="prev"><a href="/pathToBlog/index/page:2" rel="prev">&lt;&lt;</a></span>　
		<span><a href="/pathToBlog/index/page:1">1</a></span> | <span><a href="/pathToBlog/index/page:2">2</a></span> | <span class="current">3</span> | <span><a href="/pathToBlog/index/page:4">4</a></span> | <span><a href="/pathToBlog/index/page:5">5</a></span> | <span><a href="/pathToBlog/index/page:6">6</a></span> | <span><a href="/pathToBlog/index/page:7">7</a></span> | <span><a href="/pathToBlog/index/page:8">8</a></span> | <span><a href="/pathToBlog/index/page:9">9</a></span>　
		<span class="next"><a href="/pathToBlog/index/page:4" rel="next">&gt;&gt;</a></span>　
		<span><a href="/pathToBlog/index/page:10" rel="last">&gt;|</a></span>
	</div>
</div>
```


### simple

```php
<?php $this->BcBaser->pagination('simple'); ?>
```

```html
<div class="pagination">
	<span class="prev"><a href="/pathToBlog/index/page:2" rel="prev">&lt; 前へ</a></span>
	<span>
		<span class="number"><a href="/pathToBlog/index/page:1">1</a></span>
		<span class="number"><a href="/pathToBlog/index/page:2">2</a></span>
		<span class="current number">3</span>
		<span class="number"><a href="/pathToBlog/index/page:4">4</a></span>
		<span class="number"><a href="/pathToBlog/index/page:5">5</a></span>
		<span class="number"><a href="/pathToBlog/index/page:6">6</a></span>
		<span class="number"><a href="/pathToBlog/index/page:7">7</a></span>
		<span class="number"><a href="/pathToBlog/index/page:8">8</a></span>
		<span class="number"><a href="/pathToBlog/index/page:9">9</a></span>
	</span>
	<span class="next"><a href="/pathToBlog/index/page:4" rel="next">次へ &gt;</a></span>
</div>
```


### ordered_list

```php
<?php $this->BcBaser->pagination('ordered_list'); ?>
```

```html
<nav class="c-pagination" aria-label="">
	<div class="c-pagination__prev">
		<a href="/pathToBlog/index/page:2" class="prev" rel="prev">prev</a>
	</div>
	<div class="c-pagination__next">
		<a href="/pathToBlog/index/page:4" class="next" rel="next">next</a>
	</div>
	<ol class="c-pagination__numbers">
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:1">1</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:2">2</a></li>
		<li class="current c-pagination__number"><a aria-current="page">3</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:4">4</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:5">5</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:6">6</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:7">7</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:8">8</a></li>
		<li class="c-pagination__number"><a href="/pathToBlog/index/page:9">9</a></li>
	</ol>
</nav>
```

## ページネーションのテンプレートの場所

それぞれのページネーションの処理は、baserCMSのコアパッケージ内の、以下のパスにあるテンプレートを参照しています。

- /lib/Baser/View/Elements/paginations/default.php
- /lib/Baser/View/Elements/paginations/ordered_list.php
- /lib/Baser/View/Elements/paginations/simple.php

baserCMSはコアテンプレートを、管理画面からブラウザで見ることもできます。

- /admin/theme_files/view/core/Elements/paginations/default.php
- /admin/theme_files/view/core/Elements/paginations/ordered_list.php
- /admin/theme_files/view/core/Elements/paginations/simple.php

## HTMLを細かくカスタマイズする

コーディングされた静的HTMLをテーマ化したい場合は、以下の通り作業します。

### 独自の引数を渡す

pagination関数の引数を、上記とは違う値にします。ここでは`pager`にしました。

```php
<?php $this->BcBaser->pagination('pager'); ?>
```

### コアテンプレートを複製

前項のどれかのテンプレートをコピーし、自作のテーマ（ここでは`myBaserTheme`）の以下のパスに設置します。

/theme/myBaserTheme/Elements/paginations/pager.php

引数をなしにして、テンプレートを以下のパスに設置しても同じ結果となります。この場合はbaserCMSのdefaultテンプレートを上書きします。

/theme/myBaserTheme/Elements/paginations/default.php

### テンプレートをカスタマイズ

テンプレートのHTMLを修正します。細かいページネーションの定義はPaginatorクラスを使用します。

https://wiki.basercms.net/ver4/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/Paginator

PaginatorはCakePHPを継承しています。よほどがっつりしたカスタマイズでない限り不要と思いますが、細かい引数や処理を知りたい場合は、baserCMSのコアパッケージの以下のパスから参照できます。

/lib/Cake/View/Helper/PaginatorHelper.php

## TIPS

よくありそうな細かいカスタマイズを書いておきます。

### 現在ページのマークアップをa要素にする

baserCMS = CakePHPではページネーションの現在ページはspanでマークアップされますが、最近のCSSフレームワークはクラス付きのa要素であることが多いです。

a要素にする場合は、Paginatorのnumbersクラスメソッド（関数）の、tagオプションを空にしてspanを削除しつつ、currentTagオプションを指定します。以下のように書いておけばまず大丈夫です。

```php
<?php echo $this->Paginator->numbers([
	'tag' => false,
	'separator' => '',
	'currentTag' => 'a href="' . $this->BcBaser->getHere() . '" class="is-current"',
	'modulus' => $modules,
]); ?>
```

### 前後リンクがない場合に何も表示しない

Paginatorの、hasPrev・hasNextクラスメソッドで判定できます。

```php
<?php if( $this->Paginator->hasPrev() ) : ?>
	<?php echo $this->Paginator->prev('< 前のページ', ['class' => 'prev']) ?>
<?php endif; ?>
```

### 前後リンクにアイコンフォントを使う

デフォルトでは、prev・nextクラスメソッドはラベルがエスケープされてしまうので、以下のように引数escapeを渡します。

```php
<?php echo $this->Paginator->next(
	'次のページ<i class="fas fa-chevron-right"></i>',
	[
		'class' => 'next',
		'escape' => false,
	]
); ?>
```

### 変数の値を渡す

ページネーションに現在のブログIDなどの変数の値を渡す場合は、以下のように第2引数を配列で指定します。この場合は変数`hoge`の値として`huga`が渡ります。

```php
<?php $this->BcBaser->pagination( 'default', [ 'hoge' => 'huga' ] ); ?>
```

----

以上です。

baserCMSはCakePHPをベースに開発されているためか、公式のドキュメントが少ないです。もうちょっと充実させてほしいですが、よくわからないときはとりあえずCakeのコアやCookBook、有志のチートシートを読むと解決できるかもしれません。

https://book.cakephp.org/3/ja/index.html