1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Hugoでブログ記事一覧ページ(ブログアーカイブページ)を作成する

Hugoでブログ記事一覧ページ(ブログアーカイブページ)を作成する

更新日:2021.01.05 作成日:2020.12.26

以前、ブログメンタリングを受講していたときの課題でもあった「アーカイブページ」を作った時のメモです。 ようやく、ブログ記事一覧の機能を実装できました。

https://www.meganii.com/blog/archives/

実装方法

Hugoでのアーカイブページの作り方を調べてみると、大きく分けて次の2つがありました。

  • a) Taxonomyでコンテンツごとに年・月の情報を付加する
    • /2020/, /2020-12/のように年ごと、月ごとのアーカイブページを自動生成できる
  • b) Archive用のテンプレートと、Archiveページのコンテンツを作成する

a)の方式だと各コンテンツのFront Matterに情報を付加しないといけないため、まずは簡単にできそうなb)の方法で実装しました。

layouts/_default/archive.html

{{ define "main" }}
<article class="mx-4 sm:mx-12">
  <section class="">
    <div class="">
      <h2 class="font-bold text-xl">Blog Archives</h2>
      {{ $type := "blog" }}
      {{ $isGroupKey := true}}

      {{ range (.Site.RegularPages.GroupByDate "2006") }}

      {{ $count := (len .Pages) }}
      {{ if (gt .Key 2000) }}

      {{ range (where .Pages "Type" $type) }}
      {{ if $isGroupKey }}
      <h1 class="font-bold mt-2">{{ .Date.Format "2006" }}年 ({{ $count }})</h1>
      {{ $isGroupKey = false}}
      {{ end }}
      {{ end }}

      {{ $isGroupKey = true}}

      <ul class="">
        {{ range (where .Pages "Type" $type) }}
        <li>
          <a class="" href="{{ .RelPermalink }}">
            <span class="">{{ .Date.Format "01/02" }}</span> — {{ .Title }}
          </a>
        </li>
        {{ end }}
      </ul>

      <br>

      {{ end }}
      {{ end }}
    </div>
  </section>
  <section>
    <div class="mt-8">
      {{- partial "share.html" . -}}
    </div>
  </section>
</article>
{{ end }}

content/blog/archives/index.md

---
title: "Blog Archive"
layout: archive
slug: archives
---

.Site.RegularPages.GroupByDate "2006"で年ごとにグルーピングされたリストを取得できます。

if (gt .Key 2000)としているのは、このcontent/blog/archives/index.md自体がアーカイブページへ表示されないようにするためです。 (index.mdではコンテンツの日付を指定していないため、0年として表示される)

参考ページ

スポンサーリンク

Related contents

TECH

2020.11.01

HugoでTailwindCSSを利用しAMP Validなページを生成する

TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する

TECH

2020.02.02

HugoでAMP対応のブログカードを作る

TECH

2021.01.09

GitHub Actionsのスケジューラ実行を利用して定期的にビルドする

TECH

2019.12.03

Homebrewで過去バージョンのパッケージをインストールする方法

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

TECH

2018.07.11

Hugoのテーマでsubmoduleを使う方法