サマリーの変更とコメント欄を追加

2026年03月19日

はじめに

大まかなブログの体裁は整ったので、ブログとしての機能を拡充したいと思い始めました。一般的なブログとしては、サマリーが長すぎるので短くしたい、サマリーに日付を表示したい、サマリーから記事本文にとんで貰いたい、記事にコメント欄を追加したい、これからを実現できることは知っているんですが、GitHub Pageの手順は素人には非常に難しいので次のようにしてみました。

1. やりたいことをGminiに相談してみた

サマリーが長すぎるので短くしたい
サマリーのタイトル付近に日付を追加したい
サマリー下部に[Read More]と記事へのリンクを追加したい
記事にコメント欄を追加したい

2. 実作業

サマリーを短くする

hugo.tomlに次の行を追加する。

summaryLength = 10

具体的に追加したファイル

hugo.toml

baseURL = 'https://yuki9902-jp.github.io/'

title = 'yuki9902::blog'
theme = 'mainroad'

summaryLength = 10

languageCode = 'ja'
defaultContentLanguage = 'ja'

[languages]
[languages.ja]
    languageName = '日本語'
    contentDir = 'content' # または 'content/ja'
    weight = 1

[params]
    description = "Ameblo Archive 2009-2026"
# サイドバーの設定（これが重要です！）
[params.sidebar]
    home = "right"    # 右側にサイドバーを表示
    list = "right"
    single = "right"
    # 表示するウィジェット
    widgets = ["search", "recent", "archives", "categories", "taglist"]

[menu]
 [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1

 [[menu.main]]
    name = "Search"
    url = "/search/"
    weight = 2

 [[menu.main]]
    name = "Chronicle"
    url = "/chronicle-layout/"
    weight = 2

[taxonomies]
    category = "categories"
    tag = "tags"
    archive = "archives"  # 月別アーカイブ用の分類軸を追加

サマリーのタイトル付近に日付、サマリー下部にRead moreとリンクを追加する

編集前のsummary.html

<article class="list__item post">
    {{ partial "post_thumbnail.html" (dict "class" "list" "page" .) }}
    <header class="list__header">
	    <h2 class="list__title post__title">
		    <a href="{{ .RelPermalink }}" rel="bookmark">
		    {{ .Title }}
		    </a>
	    </h2>
	    {{- with .Params.lead }}
	    <p class="list__lead post__lead">{{ . }}</p>
	    {{- end }}
	    {{ with partial "post_meta.html" . -}}
	    <div class="list__meta meta">{{ . }}</div>
	    {{- end }}
    </header>
    <div class="content list__excerpt post__content clearfix">
		{{ .Summary }}
    </div>
    {{- if .Site.Params.readmore }}
    {{- if .Truncated }}
    <div class="list__footer clearfix">
	    <a class="list__footer-readmore btn" href="{{ .RelPermalink }}">{{ T "read_more" }}</a>
    </div>
    {{- end }}
    {{- end }}
</article>

編集後のsummary.html

<article class="list__item post">
    {{ partial "post_thumbnail.html" (dict "class" "list" "page" .) }}

    <header class="list__header">
        <!-- 日付の挿入位置 -->
        <div class="list__meta meta">
            <time class="post__meta-date" datetime="{{ .Date.Format "2006-01-02" }}">
                {{ .Date.Format "2006年01月02日" }}
            </time>
        </div>

        <h2 class="list__title post__title">
            <a href="{{ .RelPermalink }}" rel="bookmark">
                {{ .Title }}
            </a>
        </h2>

        {{- with .Params.lead }}
        <p class="list__lead post__lead">{{ . }}</p>
        {{- end }}

        {{ with partial "post_meta.html" . -}}
        <div class="list__meta meta">{{ . }}</div>
        {{- end }}
    </header>

    <div class="content list__excerpt post__content clearfix">
        {{ .Summary }}
    </div>
    <!-- Read moreを確実に有効にする -->
    {{- if .Truncated }}
    <div class="list__footer clearfix">
        <a class="list__footer-readmore btn" href="{{ .RelPermalink }}">
            {{ or (T "read_more") "Read more" }} &raquo;
        </a>
    </div>
    {{- end }}
</article>

記事にコメント欄を追加する

GitHubリポジトリの設定
1. 公開リポジトリの「Settings」→「Features」で Discussions にチェックを入れて有効化します。
2. giscus.app にアクセスし、リポジトリ名をいれて設定コード（scriptタグ）を生成します。
  1. リポジトリに「ユーザー名/リポジトリ名」を入力する。
  2. ページとDiscussions連携設定を「Discussionのタイトルにページのpatnameを利用する」を選択する。
  3. Discussionで使用するカテゴリ「General」を選択する。
  4. テーマは自分のサイトにあった物、私の場合は「カラースキームに従う」を選択する。
  5. giscusを有効にするのスクリプトをコピーする。
    例
```
<script src="https://giscus.app/client.js"
    data-repo="yuki9902-jp/yuki9902-jp.github.io"
    data-repo-id="xxxxxxxxxxxxxxx"
    data-category="General"
    data-category-id="xxxxxxxxxxxxxxxxx"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="preferred_color_scheme"
    data-lang="ja"
    crossorigin="anonymous"
    async>
</script>
```
  6. giscusアプリをインストールする以下のリンク（GitHub上のgiscusアプリページ）にアクセスしてください。 https://github.com/apps/giscus
  7. リポジトリを選択して許可する
    - 「Install」（または「Configure」）ボタンを押します。
    - インストール先としてご自身のアカウントを選択します。
    - 「Only select repositories」を選び、リストから yuki9902-jp.github.io を選択して保存します。
  8. giscusの設定画面をリロードする
    - インストール完了後、再度 giscus.app の画面に戻り、リポジトリ名を入力してください。
    - 今度は緑色で「成功」といったメッセージが表示されるはずです。

Hugoへの埋め込み

layouts/partials/comments.html というファイルを新規作成し、生成されたコードを貼り付けます。

例:comments.html

<script src="https://giscus.app/client.js"
    data-repo="yuki9902-jp/yuki9902-jp.github.io"
    data-repo-id="xxxxxxxxxxxxxxx"
    data-category="General"
    data-category-id="xxxxxxxxxxxxxxx"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="preferred_color_scheme"
    data-lang="ja"
    crossorigin="anonymous"
    async>
</script>
{{- $server := "" }}
{{- if ge (int (index (split hugo.Version ".") 1)) "120" }}
    {{- $server = hugo.IsServer }}
{{- else }}
    {{- $server = .Site.IsServer }}
{{- end }}
{{- if and .Site.Config.Services.Disqus.Shortname (index .Params "comments" | default "true") (not $server) }}
<section class="comments">
    {{ template "_internal/disqus.html" . }}
</section>
{{- end }}

_default/single.htmlの修正

default/single.html

 {{ define "main" }}
 <main class="main" role="main">
    <article class="post">
        <header class="post__header">
            <h1 class="post__title">{{ .Title }}</h1>
            <div class="post__meta meta">
                <time class="post__meta-item" datetime="{{ .Date.Format "2006-01-02" }}">
                    {{ .Date.Format "2006年01月02日" }}
                </time>
            </div>
            {{- with .Params.lead }}
                <p class="post__lead">{{ . }}</p>
            {{- end }}
            {{ with partial "post_meta.html" . -}}
                <div class="post__meta meta">{{ . }}</div>
            {{- end }}
        </header>
        {{ partial "post_thumbnail.html" (dict "class" "post" "page" .) }}
        {{- partial "post_toc.html" . -}}
        <div class="content post__content clearfix" data-pagefind-body>
            {{ .Content }}
        </div>
        {{- if .Params.tags }}
        <footer class="post__footer">
            {{ partial "post_tags.html" . }}
        </footer>
        {{- end }}
    </article>
</main>
{{ partial "authorbox.html" . }}
{{ partial "pager.html" . }}
{{ partial "comments.html" . }}
{{ end }}

注意点: > {{ partial “comments.html” . }} は、必ずコードの最後にある {{ end }} より前に挿入してください。{{ end }} はテンプレートの範囲を閉じる終端子なので、それ以降に記述しても正しく表示されません。

3. デプロイ

改修箇所が問題が無ければデプロイします。

最後に

今回もGeminiに相談しながら作業を進めました。うーん、公開ドキュメントだけでたどり着けるんだろうか。日本語圏だと厳しいんじゃないかな。ロジカル思考なので外国語が苦手で昔はドキュメントを読むだけで数日かかってたけど、最近は便利になったね。