概要

このブログでも使用しているHugoのテーマであるPaperModでは、記事一覧にタグが表示されない。

タグを表示させるように改修したので方法をご紹介。

方法

1. list.htmlをオーバーライド

以下のlayouts/_default/list.htmlを作成して、PaperModのデフォルトのlist.htmlをオーバーライドする。

基本的には元のlist.htmlをコピペしただけで、タグ表示部分を追加していることだけが変更点である。

layouts/_default/list.html
{{- /*
  Forked from https://github.com/adityatelange/hugo-PaperMod/blob/master/layouts/list.html At 2026-07-20
  Added tags over the post title
*/}}

{{- define "main" }}

{{- if (and site.Params.profileMode.enabled .IsHome) }}
{{- partial "index_profile.html" . }}
{{- else }} {{/* if not profileMode */}}

{{- if not .IsHome | and .Title }}
<header class="page-header">
  {{- partial "breadcrumbs.html" . }}
  <h1>
    {{ .Title }}
    {{- if and (or (eq .Kind `term`) (eq .Kind `section`)) (.Param "ShowRssButtonInSectionTermList") }}
    {{- with .OutputFormats.Get "rss" }}
    <a href="{{ .RelPermalink }}" title="RSS" aria-label="RSS">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" height="23">
        <path d="M4 11a9 9 0 0 1 9 9" />
        <path d="M4 4a16 16 0 0 1 16 16" />
        <circle cx="5" cy="19" r="1" />
      </svg>
    </a>
    {{- end }}
    {{- end }}
  </h1>
  {{- if .Description }}
  <div class="post-description">
    {{ .Description | markdownify }}
  </div>
  {{- end }}
</header>
{{- end }}

{{- if .Content }}
<div class="post-content">
  {{- if not (.Param "disableAnchoredHeadings") }}
  {{- partial "anchored_headings.html" .Content -}}
  {{- else }}{{ .Content }}{{ end }}
</div>
{{- end }}

{{- $pages := union .RegularPages .Sections }}

{{- if .IsHome }}
{{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
{{- $pages = where $pages "Params.hiddenInHomeList" "!=" "true"  }}
{{- end }}

{{- $paginator := .Paginate $pages }}

{{- if and .IsHome site.Params.homeInfoParams (eq $paginator.PageNumber 1) }}
{{- partial "home_info.html" . }}
{{- end }}

{{- $term := .Data.Term }}
{{- range $index, $page := $paginator.Pages }}

{{- $class := "post-entry" }}

{{- $user_preferred := or site.Params.disableSpecial1stPost site.Params.homeInfoParams }}
{{- if (and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) (not $user_preferred)) }}
{{- $class = "first-entry" }}
{{- else if $term }}
{{- $class = "post-entry tag-entry" }}
{{- end }}

<article class="{{ $class }}">
  {{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
  {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
  <header class="entry-header">
    <!-- 変更点開始 -->
    {{- with .Params.tags }}
    <div class="entry-tags">
      {{- range . }}
      <a class="entry-tag" href="/tags/{{ . | urlize }}">{{ . }}</a>
      {{- end }}
    </div>
    {{- end }}
    <!-- 変更点終了 -->
    <h2 class="entry-hint-parent">
      {{- .Title }}
      {{- if .Draft }}
      <span class="entry-hint" title="Draft">
        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" fill="currentColor">
          <path
            d="M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" />
        </svg>
      </span>
      {{- end }}
    </h2>
  </header>
  {{- if (ne (.Param "hideSummary") true) }}
  <div class="entry-content">
    <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
  </div>
  {{- end }}
  {{- if not (.Param "hideMeta") }}
  <footer class="entry-footer">
    {{- partial "post_meta.html" . -}}
  </footer>
  {{- end }}
  <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
</article>
{{- end }}

{{- if gt $paginator.TotalPages 1 }}
<footer class="page-footer">
  <nav class="pagination">
    {{- if $paginator.HasPrev }}
    <a class="prev" href="{{ $paginator.Prev.URL | absURL }}">
      «&nbsp;{{ i18n "prev_page" }}&nbsp;
      {{- if (.Param "ShowPageNums") }}
      {{- sub $paginator.PageNumber 1 }}/{{ $paginator.TotalPages }}
      {{- end }}
    </a>
    {{- end }}
    {{- if $paginator.HasNext }}
    <a class="next" href="{{ $paginator.Next.URL | absURL }}">
      {{- i18n "next_page" }}&nbsp;
      {{- if (.Param "ShowPageNums") }}
      {{- add 1 $paginator.PageNumber }}/{{ $paginator.TotalPages }}
      {{- end }}&nbsp;»
    </a>
    {{- end }}
  </nav>
</footer>
{{- end }}

{{- end }}{{/* end profileMode */}}

{{- end }}{{- /* end main */ -}}

2. CSSの調整

以下のassets/css/extended/list-override.cssを作成して、タグ表示部分のCSSを調整する。

PaperModの記事一覧画面では、position: absoluteを使ってaタグを記事の上に重ねることによってリンク機能を実装している。

そのため、単にリンクつきのタグを作成しても、その上にaタグを重ねられてタグ側のリンクが機能しなくなる。

それを回避するためにpositionやz-indexなどを利用して、重ねられたaタグの上にタグを表示させている。

assets/css/extended/list-override.css
.entry-header .entry-tags {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  justify-content: flex-start;
  gap: 5px;
  margin-bottom: 12px;
}

.entry-header .entry-tag {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  font-size: 12px;
  line-height: 26px;
  color: var(--secondary);
  background-color: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.entry-header .entry-tag:hover {
  background-color: var(--border);
}

/* タグを押した時はpost-entryのtransformを無効化する */
.post-entry:has(.entry-tag:active),
.first-entry:has(.entry-tag:active) {
  transform: none;
}

3. 完成

Before Before

After After

まとめ

Beforeの方がスタイリッシュな気がするけど見なかったことにする。

あと、元のコードをコピペしてパッチを当てていくのって保守性を考えると最悪なのは理解しているんだけど、とはいえ他の手も思いつかず。