背景

由于原来的主页显示是完全平铺，当文章数量较多时， 下拉进度条太长不方便阅读。因此，通过添加文章列表分页显示功能 可以更好的显示与阅读， 每页设计显示10篇刚好也比较好统计。

实现

编写pagination模板代码

首先， 编写分页显示的golang模板实现代码，代码见如下：

{{ $baseurl := .Site.BaseURL }}
{{ $pag := .Paginator }}
{{ if gt $pag.TotalPages 1 }}
<a aria-label="First" href="{{ $baseurl }}{{ $pag.First.URL }}">
  <span aria-hidden="true">««</span>
</a>

<a{{ if not $pag.HasPrev }} class="disabled"{{ end }} aria-label="Previous" href="{{ if $pag.HasPrev }}{{ $baseurl }}{{ $pag.Prev.URL }}{{ else }}#{{ end }}">
  <span aria-hidden="true">«</span>
</a>

{{ range $pag.Pagers }}
<a{{ if eq . $pag }} class="active"{{ end }} href="{{ $baseurl }}{{ .URL }}">
  {{ .PageNumber }}
</a>
{{ end }}

<a{{ if not $pag.HasNext }} class="disabled"{{ end }} aria-label="Next" href="{{ if $pag.HasNext }}{{ $baseurl }}{{ $pag.Next.URL }}{{ else }}#{{ end }}">
  <span aria-hidden="true">»</span>
</a>

<a aria-label="Last" href="{{ $baseurl }}{{ $pag.Last.URL }}">
  <span aria-hidden="true">»»</span>
</a>
{{ end }}

显示处调用

在需要显示处调用pageination.html，并控制好输入参数， 例如： homepages上的修改为根据文章索引$index与10的除数来进行控制。

 <div id="main">
   {{ $pag := .Paginator }}
   {{ range $index,$data := .Data.Pages }}
   {{ if ge $data.Date.Year .Now.Year }}
   {{ if eq (add (div $index 10) 1) $pag.PageNumber }}
   {{ partial "article.html" $data }}
   {{ end }}{{ end }}{{ end }}
   <nav id="page-nav" class="clearfix">
       {{ partial "pagination.html" . }}
   </nav>
</div>

显示效果

显示如下图红色框内显示：