Hugo 文章页添加翻页按钮

在文章页底部为 Hugo 增加翻页按钮，并显示上一篇和下一篇的标题。这样做能增大读者在阅读完文章后继续在本站停留的几率。

使用方法

本功能利用了 .Next、.Prev 这两个变量，在页面模板 single.html 的适当位置添加如下代码即可。

{{with .PrevInSection}}

  <a href="{{.Permalink}}">前一页</a>

{{end}}

{{with .NextInSection}}

  <a href="{{.Permalink}}">后一页</a>

{{end}}

运用实例

下面是我使用的翻页按钮的「Html」及「CSS」配置，供大家参考。

<div class="pre-next">

  {{with .PrevInSection}}

    <a class="pre-next-btn bg" href="{{.Permalink}}"><svg t="1605930649708" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2619" width="22" height="22"><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#515151" p-id="2620"></path></svg>前一页</a>

  {{end}}

  {{with .NextInSection}}

    <a class="pre-next-btn bg" href="{{.Permalink}}">后一页<svg t="1605930744277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2981" width="22" height="22"><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#515151" p-id="2982"></path></svg></a>

  {{end}}

</div>

.pre-next {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.pre-next-btn {
  width: 46%;
  padding: 10px 0;
  border-radius: 4px;
  border: 1px solid #dadce0;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  transition: all .3s;
  background-color: #fff;
}

.pre-next-btn:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.1); 
}