巻物

毎日ブログを書いていると、ブログの設定もいじりたくなるということがわかった。先日のこの記事に書いたように、ページングしなくては。という気持ちが強まり、今日は朝からその設定をしていた。結局無限スクロールにしつつ、pushStateでページ移動がわかるようにもした。vanilla JSで書きたいというのもあり、割とてこずった。結果のコード変更点はこれ。

やったことの概要を以下に書く。

jekyll-paginate-v2を導入

まずは単純にペジネーションをする。1ページあたりの記事数が60と多いが、それはウィンドウの幅がどのサイズでも、ぴったり記事がおさまるようにしたかったからだ。 ペジネーションすると、pageが増えてしまい、その結果ヘッダにペジネーションしたページが並んでしまうので、indexおよび自動生成されたページは除外するようにした。

JavaScriptで指定されたページの中身をDOMに追加

UIは変更せずに、「指定されたページをfetchして、その内容をappendChildで追加」するコードを書き、開発者ツールから動作を確認した。

「もっと読む」ボタンを追加

fetchして追加のコードをリファクタしつつ、UIにボタンを追加した。

Window内でのページ位置を覚える

pushStateの準備として、どのへんにどのページがあるかをおぼえさせた。

途中ページが最初からロードされたら、その前のページを読み込む

page-10とか指定されたら、それより前も順次読み込んでDOMに追加するようにした。

Scrollして、ページ移動したらpushStateする

スクロール位置によって、pushStateでURLを書き換える。

今後の課題

  • 途中ページ読んだときに、前のページを一気に読みに行くのはあまり良くない。前ページだけ読んで、徐々に読む方が良いかもしれない。
  • これはこれとして、画像のlazy loadがあった方が良い。
  • カテゴリーページのペジネーションもできればやりたい。