(Hugo)「ギャラリーページ」を作成する!

きっかけ

これからどんなふうにSNSを管理していけばいいのか・・・悩んだ末、この時点の結論としては

  • 「基本的」に全ての活動をブログにまとめるようにする
  • その上で各種SNSに投稿をしていく

みたいにするのが良いではないか?となった。

これを逆に考えると・・・

これまで、SNSにしか投稿していなかったものをブログにまとめる必要がある

ということになるよね??

ということで、「Pixivに投稿していたイラストをブログでまとめる」という作業が生まれました;;(めんどくさい)





どうせまとめるなら「画像一覧」みたいなページを作りたい

という流れです。

やるよ!!

大雑把な流れ

方法としては、現在このブログは

/tags/〇〇 /categories/〇〇

のようなURLにアクセスするとそのタグや、カテゴリ(taxonomyというのかな?)が設定されたページ一覧(リストページ?)が表示されるようになっている。

これを利用する。

  • お絵描きに関するページのカテゴリとして「お絵描き」を指定する
  • 「/categories/お絵描き」にアクセスした際に、お絵描きカテゴリがついたページからイラストを引っ張ってきて表示。「画像一覧的なページ」が表示されるようにする

特定のカテゴリのリストページを開いた際に適用するテンプレートを指定するにはどうしたら良い?

これ、本当にこれ以外の方法がないのか・・・?と思いつつなんだけど・・・(自分のHugoに対する理解が追いついていないだけだと思う・・・)

上の会話の中で出ていた方法を参考にする

見た目の作成などはほぼ全てAIちゃんにやってもらっているよ!!!(感謝)

  • content/categories/お絵描き/_index.mdを作成し、フロントマターにlayout: "oekaki"を指定する。これで「/categories/お絵描き」にアクセスした際にoekaki.htmlっていうテンプレートを利用するようになるらしい。
  • layouts/categories/oekaki.htmlを作成して、その中に「画像一覧ページ」を表示するための記述を行う
    • 既存のテーマの記述と、AIちゃんの考えを参考にしつつ書いたよ
{{- define "title" }}
    ギャラリーだよ
{{- end -}}

{{ define "content" }}
<div class="page archive">
  <h1>お絵描きギャラリー</h1>

  {{- if .Pages -}}
    {{/* ページネーションの設定 */}}
    {{- $paginator := .Paginate (.Pages.ByDate.Reverse) -}}

    <div class="art-grid">
      {{- range $paginator.Pages -}}
        {{- $image := .Resources.GetMatch .Params.featuredImage }}
        <a href="{{ .RelPermalink }}" class="art-card-link">
          <div class="art-card">
            <div class="art-image-wrapper">
              {{- with $image }}
                <img src="{{ .RelPermalink }}" alt="作品画像" class="art-thumbnail" />
              {{- end }}
              {{- with .Params.images }}
                <div class="image-count-badge">
                  📷 {{ len . }}
                </div>
              {{- end }}
            </div>
            <div class="art-content">
              <h3 class="art-title">{{ .Title }}</h3>
              {{- with .Params.description }}
                <p class="art-description">{{ . }}</p>
              {{- end }}
            </div>
          </div>
        </a>
      {{- end }}
    </div>

    {{/* ページネーション表示 */}}
    {{ partial "paginator.html" . }}
  {{- else -}}
    <p>まだお絵描き作品はありません。</p>
  {{- end }}
</div>
{{ end }}
  • cssで見た目を整えてあげる(一部抜粋・・・というかダークテーマ対応のための記述とかあるはずなので・・・)
    • LoveItテーマは_custom.scssに記述をすると良いらしいとドキュメントに書いてあった気がするのでそこに書いていく
// ========== layouts\categories\oekaki.html用 ========== //

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;

    .art-card-link {
        text-decoration: none;
        color: inherit;

        .art-card {
            border: 1px solid $global-border-color;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            background: $link-card-bg-color;
            transition: transform 0.2s ease;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            body[theme="dark"] & {
                border-color: $global-border-color-dark;
                background-color: $link-card-bg-color-dark;
                color: $link-card-text-color-dark;

                &:hover {
                    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
                }
            }

            .art-image-wrapper {
                position: relative;

                .art-thumbnail {
                    width: 100%;
                    height: auto;
                    display: block;
                }

                .image-count-badge {
                    position: absolute;
                    top: 8px;
                    right: 8px;
                    background: rgba(0, 0, 0, 0.6);
                    color: white;
                    padding: 4px 8px;
                    font-size: 0.8rem;
                    border-radius: 999px;
                }
            }

            .art-content {
                padding: 1rem;

                .art-title {
                    margin: 0;
                    font-size: 1.1rem;
                }

                .art-description {
                    font-size: 0.9rem;
                    margin-top: 0.5rem;
                    color: $link-card-description-color;

                    body[theme="dark"] & {
                        color: $link-card-description-color-dark;
                    }
                }
            }
        }
    }
}

完成!!!

アホアホなので色々苦労しながらだったけど完成しました・・・やったね。(なお、イラストの移行作業の方がきつかった・・・量的に・・・)

/posts/2025/05/added_galley_page/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2025-05-07_19.55.48.png