記事プレビュー（要約）の設定

一覧ページに表示される記事プレビュー（要約）の長さを調整する方法を解説します。

要約が長すぎる問題

デフォルトでは、Hugoは記事の最初の70単語を要約として表示します。これが長すぎると、記事の境目が分かりにくくなります。

方法1: グローバル設定で長さを制限

hugo.toml に summaryLength を追加：

baseURL = 'https://example.org/'
languageCode = 'ja'
title = 'My Hugo Site'
theme = 'ananke'

# 要約の単語数（デフォルトは70）
summaryLength = 30

方法2: 記事内で明示的に区切りを指定

<!--more--> を使うと、その位置で要約が切れます：

+++
title = "記事タイトル"
+++

この記事では、Hugoの使い方を解説します。
初心者にもわかりやすく説明していきます。

<!--more-->

## 詳細な内容

ここから下は要約に含まれません...

<!--more--> より上の部分だけが一覧に表示されます。

方法3: フロントマターでカスタム要約

完全に独自の要約文を指定：

+++
title = "記事タイトル"
summary = "この記事ではHugoの基本的な使い方を解説します。"
+++

比較表

方法適用範囲柔軟性
summaryLengthサイト全体低（単語数のみ）
<!--more-->記事ごと中（位置を指定）
summary フロントマター記事ごと高（完全カスタム）

おすすめの使い分け

ブログ記事が多い場合

  1. hugo.toml で summaryLength = 30 を設定
  2. 特に重要な記事は <!--more--> で調整

各記事を丁寧に見せたい場合

各記事のフロントマターで summary を設定：

+++
title = "Hugoでブログを始める"
summary = "静的サイトジェネレーターHugoを使って、高速で美しいブログを構築する方法をステップバイステップで解説します。"
+++

テンプレートでの要約表示

テンプレート内では .Summary で要約を取得：

{{ range .Pages }}
  <article>
    <h2>{{ .Title }}</h2>
    <p>{{ .Summary }}</p>
    <a href="{{ .Permalink }}">続きを読む</a>
  </article>
{{ end }}

まとめ

  • サイト全体 → hugo.toml の summaryLength
  • 記事ごとの位置指定 → <!--more-->
  • 完全カスタム → フロントマターの summary
  • 組み合わせて使うのがベスト！