この章では、R100サイトをより使いやすく・見やすくするために実施した構造・UIカスタマイズの事例をまとめます。

1. ナビゲーションバーの追加とカスタマイズ

  • hugo.toml（または hugo.yaml）の [menu] セクションを編集してグローバルナビを設定。
  • ラボ／プロジェクト／お知らせなどカテゴリごとのリンクをメニューに追加。
  • アイコンやラベルをカスタムすることで視認性アップ。
[[menu.main]]
  name = "Lab"
  url = "/lab/"
  weight = 1
[[menu.main]]
  name = "Project"
  url = "/project/"
  weight = 2
[[menu.main]]
  name = "News"
  url = "/news/"
  weight = 3

2. バックボタン・上階層ナビゲーション（up_navigation.html）の追加手順

  • PaperModの layouts/_default/single.html をコピーし、カスタマイズ用ディレクトリ layouts/partials/ に up_navigation.html を新規作成。
  • 例：
<!-- layouts/partials/up_navigation.html -->
{{- if .Parent -}}
<div class="up-navigation">
    <a href="{{ .Parent.Permalink }}" class="up-link">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
        {{ .Parent.Title | default "Up" }}
    </a>
</div>
{{- end -}}
  • single.html や list.html の表示したい位置に、下記を追記：
{{ partial "up_navigation.html" . }}
  • TailwindCSSやカスタムCSSでデザインを調整可。

ポイント・Tips：

  • .Parent はHugo 0.92.0以降で利用可能。未対応の場合は手動でリンク先を調整。
  • サイト構造が3階層以上になる場合も柔軟にカスタマイズ可。

3. 階層構造とパンくずリストの実装

  • PaperModはセクション（ディレクトリ）ごとのリスト表示に対応。
  • breadcrumbs.html 部分テンプレートを作成し、ページ上部にパンくずリストを自動表示。
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    {{ range .Ancestors.Reverse }}
      <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
    <li>{{ .Title }}</li>
  </ol>
</nav>
  • single.html や list.html に {{ partial "breadcrumbs.html" . }} を挿入して利用。

4. サマリーリスト＆セクションリストのカスタマイズ

  • 各セクションのトップ（_index.md）やリストページで、最近の投稿サマリーやカスタム説明を表示。
  • layouts/_default/list.html を編集し、記事タイトル・投稿日・サマリー等を柔軟にレイアウト。
{{ range .Pages }}
  <article>
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
    <time>{{ .Date.Format "2006-01-02" }}</time>
    <p>{{ .Summary }}</p>
  </article>
{{ end }}

5. PaperMod固有のTips

  • フッターやプロフィールカードのカスタマイズ
  • モバイル表示やダークモードの対応強化
  • アイキャッチ画像（cover画像）の設定方法