Hugo のページャ (pager) を WordPress みたいにする

Hugo のページャは基本的に「Prev」と「Next」しかありません。

テーマ「Robust」だとこんな感じ。

目標はこんな感じです。

では、早速修正していきましょう。

レイアウト修正
1. WordPress と合わせるために、タグと Class を微修正します。
CSS 修正
おわりに

レイアウト修正

テーマ「Robust」のレイアウト「pagination.html」を修正します。

\themes\hugo_theme_robust\layouts\partials\pagination.html

こちらの「The final code」の「PAGE NUMBERS」から下を全てコピーして

「pagination.html」に上書きします。

WordPress と合わせるために、タグと Class を微修正します。

１．ul を div と nav で囲います。

<div id="paging">
  <nav>
    <ul class="pagination">
    <!-- 省略 -->
    </ul><!-- .pagination -->
  </nav>
</div>

２．アクティブ時の Class を追加する。

<li class="pagination__item{{ if eq . $paginator }} pagination__item--current{{ end }}">
↓↓↓
<li class="pagination__item{{ if eq . $paginator }} pagination__item--current active{{ end }}">

とりあえずここまでで、ページャがこのように変わります。

CSS 修正

あとは、CSS を修正します。

テーマ「Robust」の CSS は、自由に編集できる「custom.css」が用意されているので、これに追記していきます。

\themes\hugo_theme_robust\layouts\partials\custom.css

こんな感じに適応してみました。

/*
------------------------------------
 Pagination
------------------------------------ */
#paging {
  margin: auto;
  text-align: center;
}
#paging ul {
  padding: 0;
}
#paging i {
  font-weight: bold;
}
#paging .not-allow i {
  font-weight: normal;
  opacity: 0.3;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 0;
  list-style: none;
  border-radius: .25rem;
}
.pagination li {
  flex: 1 1 42px;
  max-width: 42px;
  min-width: 27px;
  float: left;
}

.pagination > li > a {
  display: inline-block;
  width: 100%;
  padding: 6px 0;
  color: inherit;
  background: #fff;
  border: 1px solid #ddd;
  border-right: 0;
}
.pagination > li:last-child > a,
.pagination > .not-allow:first-child > a:hover {
  border-right: 1px solid #ddd;
}
.pagination > .active > a,
.pagination > li > a:hover {
  color: #fff;
  background: #dc143c;
}
.pagination > .active > a:hover,
.pagination > .not-allow > a:hover {
  cursor: text;
}
.post #paging {
  margin: 20px 0 40px 0;
}

おわりに

これだけでページャが WordPress みたいになります。

全ての機能が置き換えれたら、WordPress に移行したいですね。