OctoberCMSでPaginatorをカスタマイズしてみた（Customizing The Pagination View on OctoberCMS）

#TL; DR
適当なPluginを作って、その中にviewsディレクトリを切りhtmを作成する。
ペジネータは$paginatorで渡される。

#やりたかったこと・やったこと
Laravelでは、適当にbladeファイルを作ることでカスタムペジネータを作れる。
(eg.) https://qiita.com/C_HERO/items/8e1203e1d3a773fd83d0

ならばLaravelベースのOctoberCMSでも同じことができるのではないか？とググってみたものの、やってる人が皆無だったのでトライアンドエラーでどうにかしてみた。

具体的に言うと、backend/CMSのPageで

 {{ results.appends(this.page.query).links()|raw }} 

みたいな書き方をしている部分があったので、そのままカスタムペジネータをねじ込めないかなと試行錯誤したという話。（this.page.queryは別途定義した引き継ぎたいクエリストリング。withQueryStringが使えない悲しみ……）

もちろんそのままPage内に書いてもよかったのだけど、けっこうたくさんのページに共通して入れたかったので再利用性を高めたかったのと、appendsをちゃんと引き継いでくれるか不安？だったので。

#やり方
まず、適当なPluginを作る。ここではTest.Paginateとする。

その後、Test.Paginateのディレクトリ配下（plugins/test/paginateあたり？）にviewsというディレクトリを新規で切る。そして、その中にカスタムペジネータとして使いたいhtmファイルを作成。ここでは仮にpaginator.htmとする。

で、以下みたいな書き方をする。ご覧の通り、$paginatorとしてペジネータ変数が渡されます。

paginator.htm

{% if paginator.lastPage > 1 %}
<ul class="pagination">

    {% if paginator.currentPage > 1 %}
        <li>
            <a class="button " href="{{ paginator.previousPageUrl }}"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
        </li>
    {% else %}
        <li>
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
        </li>
    {% endif %}
    
    {% for page in range(1, paginator.lastPage) %}
        <li>
            <a href="{{ paginator.url(page) }}">{{ page }}</a>
        </li>
    {% endfor %}

    {% if paginator.lastPage > paginator.currentPage %}
        <li>
            <a href="{{ paginator.nextPageUrl }}" class="button"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
        </li>
    {% else %}
        <li>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </li>
    {% endif %}

</ul>
{% endif %}

もちろんタグ構造とかロジックとかは別で作ってください。ただし、PageとかComponentっぽくonStartとかでPHPの埋め込みができないので注意。Twigで頑張るか、別途コントローラっぽくPageを使ってviewへデータを渡しましょう。viewへのデータの渡し方は後述します。

そしてこれをPageへ埋め込むには、

{{ results.appends(this.page.query).links('test.paginate::paginator')|raw }}

こういう書き方をします。で、もしPageからviewにデータを渡したければ、

{{ results.appends(this.page.query).links('test.paginate::paginator', {"test": "test"})|raw }}

こんな感じ。Twigでは["test" => "test"]みたいな書き方をするとエラー吐きます。

これでたぶんペジネータが表示されてくれるはず。

#おわりに
正直なところ、ペジネータのviewはPlugin配下に置くんではなくPartialとかにしたいんですが、たぶんlinksで参照できなそうなんですよね。かなC
よくよく考えたら、普通にPartialへpaginator変数渡して動かせばいいじゃないですかね。アホか。

まあ、いい感じに動いてるのでいいとします。動くコードが正義。なにかいい感じの方法ありましたら教えていただけると嬉しいです。

#参考

https://laravel.com/docs/7.x/pagination#customizing-the-pagination-view
https://qiita.com/C_HERO/items/8e1203e1d3a773fd83d0
https://octobertricks.com/tricks/customize-pagination-markup
https://octobercms.com/docs/services/response-view#views