birdHugoのPaginationテンプレート, きょうのつぶやき@digitune

HugoのPaginationテンプレート

最近のHugoにはPagination機能が含まれていますが、標準で含まれるページ送りUIがbootstrap必須だったり表示されるページ数が再現なく増えてしまったりと若干使いにくかったので1下記のようなむっちゃ簡素な見た目のオレオレテンプレートを書きました。

        {{ $pag := .Paginator }}{{ $url := .Site.BaseURL }}  
        {{ if gt $pag.TotalPages 1 }}  
            <div class="paginator">  
                {{ if $pag.First }}<a href="{{ $url }}{{ $pag.First.URL }}">First</a> |{{ end }}  
                {{ if $pag.HasPrev }}<a href="{{ $url }}{{ $pag.Prev.URL }}">Prev</a>{{ else }}Prev{{ end }} |  
                {{ if gt $pag.TotalPages .Site.Params.pagernum }}  
                    {{ $.Scratch.Set "start" (sub $pag.PageNumber (div .Site.Params.pagernum 2)) }}  
                    {{ $.Scratch.Set "end" (add $pag.PageNumber (div .Site.Params.pagernum 2)) }}  
                    {{ if lt ($.Scratch.Get "start") 1 }}  
                        {{ $.Scratch.Set "end" (sub ($.Scratch.Get "end") (sub ($.Scratch.Get "start") 1)) }}  
                        {{ $.Scratch.Set "start" 1 }}  
                    {{ else if gt ($.Scratch.Get "end") $pag.TotalPages }}  
                        {{ $.Scratch.Set "start" (sub ($.Scratch.Get "start") (sub ($.Scratch.Get "end") $pag.TotalPages)) }}  
                        {{ $.Scratch.Set "end" $pag.TotalPages }}  
                    {{ end }}  
                {{  else }}  
                    {{ $.Scratch.Set "start" 1 }}  
                    {{ $.Scratch.Set "end" $pag.TotalPages }}  
                {{ end }}  
                {{ $start := $.Scratch.Get "start" }}  
                {{ $end := $.Scratch.Get "end" }}  
                {{ range $pag.Pagers }}  
                    {{ if and (ge .PageNumber $start) (le .PageNumber $end) }}  
                        {{ if eq . $pag }}{{ .PageNumber }} |{{ else }}<a href="{{ $url }}{{ .URL }}">{{ .PageNumber }}</a> |{{ end }}  
                    {{ end }}  
                {{ end }}  
                {{ if $pag.HasNext }}<a href="{{ $url }}{{ $pag.Next.URL }}">Next</a>{{ else }}Next{{ end }} |  
                {{ if $pag.Last }}<a href="{{ $url }}{{ $pag.Last.URL }}">Last</a>{{ end }}  
            </div>  
        {{ end }}  

config.tomlなどのparams欄に、表示したい最大ページ数を「pagernum」という引数で指定してください。

Goのhtml/templateでrangeに部分配列を与える方法が分からなくてちょっと非効率な形になっちゃってますがそこはまあご愛嬌ということで。変数のスコープにも散々悩まされました…。Go templateむずい。

きょうのつぶやき@digitune

image 0 Hugo標準のPagination機能がちと使いにくかったので作った>Digitune [memo] - HugoのPaginationテンプレート http://memo.digitune.org/?date=20150425 (11:00 Twitter Web Clientから・詳細)

htmlのテンプレート機能って、テンプレート側を分かりやすく綺麗に書こうと思うと変換後HTMLが汚くなっちゃうのがちょっとやな感じだよな。テンプレート側タグ内で改行するなりしてHTML側に残る改行やwhite spaceを調整するのがセオリーなんだろうけどちとめんどくさい。 (11:11 Twitter Web Clientから・詳細)

Hugoが使っているMarkdownエンジンのblackfridayはまだ定義リスト(dl/dt/dd)をサポートしておらず、今のところHTMLタグを残すしかないのだけれど、そうするとそのブロックではMarkdown記法が使えなくなってしまうのが不便。サポートされるといいなぁ。 (11:54 Twitter Web Clientから・詳細)

?なんかウチのiMacのChrome、font-family: monospaceが等幅フォントになってないんですけど… (14:12 Twitter Web Clientから・詳細)


  1. 作者の方はフィードバックを求めているようです。