Hugo で擬似的な無限スクロールを実装する

1. はじめに

Hugo は，ページネーションがテンプレートとして標準搭載されています。しかし，無限ページングのテンプレートは標準搭載されていないため，フルスクラッチで実装する必要があります。実装するに当たって (1) JavaScript を用いて実装する方法と (2) Hugo の機能で実装する方法が考えられます。(1) と (2) は，共にソースコードが公開されているので，公開されているソースコードを活用します。また，本記事内で行っている作業は，以下の環境下で実行したものです。

Hugo Ver.0.75.1
Zorin OS 15 Core (Ubuntu 18.04 LTS)

2. ソースコード

公開されているソースコードに手を加えたものを以下に示します。一般的な無限ページングは，JavaScript を用いて DOM を操作することで実現しています。しかし，公開されているソースコードは Hugo に標準搭載されているページネーションの機能を応用して擬似的な無限ページングを実現しています。

1
{{ $paginator := .Paginate .Pages }}
2
{{ $pageSize := $paginator.PageSize }}
3
{{ $totalPostsToShow := mul $paginator.PageNumber $pageSize }}
4
{{ range $index, $el := (first $totalPostsToShow .Pages) }}
5
<div {{ if eq $index (sub $totalPostsToShow $pageSize) }} id="bottom" {{ end }}>
6
    <a href="{{ .Permalink }}">{{ .Title }}</a>
7
</div>
8
{{ end }}
9
{{ if and (gt $paginator.TotalPages 1) ($paginator.HasNext) }}
10
<a class="nextpage" href="{{ $paginator.Next.URL }}#bottom">More</a>
11
{{ end }}

3. 実行環境構築

hugoBasicExample をベースに，実行環境を構築します。まずは，GitHub のリポジトリから hugoBasicExample を任意のディレクトリにクローンし，./hugoBasicExample/layouts/_default ディレクトリ直下に section.html を作成します。

1
$ pwd
2
$ /home/admin
3
$ git clone https://github.com/gohugoio/hugoBasicExample.git
4
$ cd hugoBasicExample
5
$ mkdir ./layouts/_default/
6
$ touch ./layouts/_default/section.html
7
$ tree
8
.
9
├── LICENSE
10
├── README.md
11
├── config.toml
12
├── configTaxo.toml
13
├── content
14
│   ├── _index.md
15
│   ├── about.md
16
│   ├── archives.md
17
│   ├── homepage
18
│   │   ├── about.md
19
│   │   ├── index.md
20
│   │   └── work.md
21
│   └── post
22
│       ├── _index.md
23
│       ├── emoji-support.md
24
│       ├── markdown-syntax.md
25
│       ├── math-typesetting.md
26
│       ├── placeholder-text.md
27
│       └── rich-content.md
28
├── layouts
29
│   └── _default
30
│       └── section.html
31
└── static
32

33
10 directories, 18 files

上記で作成した section.html を以下のソースコードに書き換えます。

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Document</title>
7
  </head>
8

9
  <body>
10
    {{ $paginator := .Paginate .Pages }} {{ $pageSize := $paginator.PageSize }} {{ $totalPostsToShow := mul
11
    $paginator.PageNumber $pageSize }} {{ range $index, $el := (first $totalPostsToShow .Pages) }}
12
    <div {{ if eq $index (sub $totalPostsToShow $pageSize) }} id="bottom" {{ end }}>
13
      <a href="{{ .Permalink }}">{{ .Title }}</a>
14
    </div>
15
    {{ end }} {{ if and (gt $paginator.TotalPages 1) ($paginator.HasNext) }}
16
    <a class="nextpage" href="{{ $paginator.Next.URL }}#bottom">More</a>
17
    {{ end }}
18
  </body>
19
</html>

4. 動作確認

hugoBasicExample ディレクトリ直下に移動し，hugo server を実行します。正常に実行されると，http://localhost:1313/ に Web サーバーが立ち上がります。しかし，http://localhost:1313/ にアクセスしても index.html を設置していないため，ブラウザ上には何も表示されません。section.html の内容を表示させるために，http://localhost:1313/post/ にアクセスします。

1
$ pwd
2
$ /home/admin/hugoBasicExample
3
$ hugo server
4

5
                   | EN
6
-------------------+-----
7
  Pages            | 19
8
  Paginator pages  |  1
9
  Non-page files   |  0
10
  Static files     |  1
11
  Processed images |  0
12
  Aliases          | 10
13
  Sitemaps         |  1
14
  Cleaned          |  0
15

16
Built in 13 ms
17
Watching for changes in /home/admin/hugoBasicExample/{content,layouts,static}
18
Watching for config changes in /home/admin/hugoBasicExample/config.toml
19
Environment: "development"
20
Serving pages from memory
21
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
22
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
23
Press Ctrl+C to stop

ブラウザで http://localhost:1313/post/ にアクセスすると，ブラウザ上に 3 つの記事タイトルと More ボタンが表示されます。表示されている More ボタンをクリックすることで，新たに 2 つの記事タイトルが表示されれば正常に動作しています。

5. おわりに

ここまで，Hugo に標準搭載されている機能を用いて擬似的な無限スクロールを実装する手順について記述してきました。擬似的な無限スクロールですが，完全な無限ページングと比較しても機能的な差はなく，ストレスを感じるようなこともありませんでした。また，config.toml の paginate に設定されている数値を変更することで，表示される記事数を変更することが出来ます。