hugoのトップページにカテゴリ毎の投稿一覧を表示する

authorBy idukn | March 20, 2025

hugoを使ってて,

「カテゴリ分けして記事一覧を表示出来たらなあ」

なんてことありませんか?

↑やりましょう!

こんにちは. iduknです.
今回はトップページにジャンル毎の記事一覧を表示する方法を紹介します.

なお, hugoのテーマにはhugo-universal-themeを使用しています.

目次

hugoテンプレート(苦戦したこと)

今回の実装の仕様として、

  1. コンテンツごとの処理の繰り返し(music, techなど)
  2. コンテンツ内でのマッチする記事を検索

というような流れがありますが、2.に関してはwhere文でin"記事全体"というような探し方をするようになります。

ただ、これを{{ range site.Params.mainSections }}の中でやると、記事全体に検索をかけるときに一度今いるドメインを出なければならず、その構文を見つけることに苦戦しました。

結果、{{$.}}でルートに戻れることを見つけことなきを得ました。

ということで次の見出しから実装の詳細です。

実装詳細

recent_posts.html

<section class="bar background-white no-mb">
    <div class="container">
        {{ range $section := site.Params.mainSections }} <!--ここでコンテンツ毎の繰り返し, sectionにコンテンツを代入-->
            <div class="col-md-12">
                <div class="heading text-center">
                    <h2>{{ $section | markdownify }}</h2>
                </div>
                <div class="row">
                    {{ $posts := where $.Site.RegularPages "Type" "eq" $section }}<!--where文で検索, このとき一度ルートに出る-->
                    {{ range first 4 $posts }}
                        <div class="col-md-3 col-sm-6">
                            <div class="box-image-text blog">
                                <div class="top">
                                    <div class="image" style="overflow:hidden; display:flex;">
                                        {{ if isset .Params "banner" }}
                                        <img src="{{ .Params.banner | relURL }}" class="img-responsive " alt="" loading="lazy" fetchpriority="low"><!--fetch priority, loadingはLCP対策, ページ毎にbannerを設定しておく-->
                                        {{ else }}
                                        <img src="{{ "img/placeholder.png" | relURL }}" class="img-responsive" alt="">
                                        {{ end }}
                                    </div>
                                    <div class="bg"></div>
                                    <div class="text">
                                        <p class="buttons">
                                            <a href="{{ .Permalink }}" class="btn btn-template-transparent-primary">
                                                <i class="fas fa-link"></i> readMore
                                            </a>
                                        </p>
                                    </div>
                                </div>

                                <div class="content">
                                    <h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
                                    {{ if not .Site.Params.recent_posts.hide_summary }}
                                        <p class="intro">{{ .Summary }}</p>
                                        <p class="read-more">
                                        <a href="{{ .Permalink }}" class="btn btn-template-main">
                                            {{ i18n "continueReading" }}
                                        </a>
                                        </p>
                                    {{ end }}
                                </div>
                            </div>
                            <!-- /.box-image-text -->
                        </div>
                    {{ end }}
                </div>
            </div>
        {{ end }}
    </div>
    <!-- /.container -->
</section>
<!-- /.bar -->

config.toml

[params]
    mainSections = ["music", "tech", "posts", "blog"]#載せたいカテゴリをmenu.topbarに合わせる

index.html

        {{ partial "recent_posts.html" . }} <!--よしなな場所に追加-->

こんな感じです。

メインで実装したのがだいぶ前なので記憶が曖昧ですが、おそらくfooterの構造を流用しているはずですので、ご自身でもご確認ください！


ということで今回はhugoでカテゴリ分けして記事一覧を表示する方法を紹介しました！

質問などありましたらコメントに書き込んでください！

それでは良いhugoライフを！ iduknでした！

コメント

    タグ