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

2025年5月7日

カテゴリ: 技術

タグ: Blog Hugo Tips Web

きっかけ

SNSの運用方針について考える！！ | かもしかのお部屋…

https://www.forrexlapis.win/posts/2025/05/managing_social_media/

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

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

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

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

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

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

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

カモシカ

ゲーム素材で使えるくらいの簡単なイラストを描けるようになりたい・・・…

https://www.pixiv.net/users/38792548

・
・
・

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

という流れです。

やるよ！！

大雑把な流れ

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

/tags/〇〇 /categories/〇〇

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

これを利用する。

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

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

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

Custom template for one category?

You can specify a custom layout in categories/blog/_index.md layout: ……

https://discourse.gohugo.io/t/custom-template-for-one-category/25025/2/

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

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

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

    html
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


{{- 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に記述をすると良いらしいとドキュメントに書いてあった気がするのでそこに書いていく

    scss
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76


// ========== 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;
                    }
                }
            }
        }
    }
}