Cara menyimpan gambar thumbnail di folder page bundle untuk situs Hugo dengan tema Mainroad

Menyimpan semua konten terkait halaman dalam satu folder...

Konten Halaman

Sudah cukup lama saya mengganggu dengan kekecewaan ini untuk memasukkan thumbnail gambar dari halaman ke dalam direktori statis. Ini berlaku untuk Mainroad, Rodster, dan tema Hugo serupa.

Saya suka mengorganisir konten halaman Hugo sebagai bundel halaman, dan saya lebih memilih jika semua gambar yang terkait dengan halaman disimpan di dalam bundel halaman ini.

gambar bundel halaman

Dan di sini saya mempresentasikan solusinya!

Cara menyimpan gambar thumbnail Mainroad Hugo Theme (dan tema serupa) di dalam folder Page Bundle

Hanya masukkan teks ini ke file ./layouts/partials/post_thumbnail.html, dan Anda dapat menyimpan gambar Anda di mana saja dari folder bundel dan folder statis :).

{{- if $thumbnail := .page.Params.thumbnail }}
    {{- $class := .class }}
    {{- $visibility := .page.Site.Params.thumbnail.visibility | default (slice "list" "post") }}

    {{- $valueType := printf "%T" $thumbnail -}}
    {{- $isMap := in $valueType "map" -}}
    {{- if $isMap }}
        {{ $visibility = default (slice "list" "post") (default .page.Site.Params.thumbnail.visibility $thumbnail.visibility) }}
        {{ $thumbnail = $thumbnail.src }}
    {{- end }}

    {{- if in $visibility $class }}
    {{- $thumbnailURL := "" }}
    
    {{- /* Coba cari gambar sebagai sumber daya halaman terlebih dahulu (untuk halaman bundel) */ -}}
    {{- $resource := .page.Resources.GetMatch $thumbnail }}
    {{- if $resource }}
        {{- $thumbnailURL = $resource.RelPermalink }}
    {{- else }}
        {{- /* Jika tidak ditemukan, fallback ke folder statis menggunakan relURL */ -}}
        {{- $thumbnailURL = $thumbnail | relURL }}
    {{- end }}
    
    <figure class="{{ with $class }}{{ . }}__thumbnail {{ end }}thumbnail">
        {{ if eq $class "list" }}<a class="thumbnail__link" href="{{ .page.RelPermalink }}">{{ end }}
        <img class="thumbnail__image" src="{{ $thumbnailURL }}" alt="{{ .page.Title }}">
        {{ if eq $class "list" }}</a>{{ end }}
    </figure>
    {{- end }}
{{- end }}

Seperti yang terlihat dari komentar, potongan template yang menarik ini berusaha untuk menghasilkan referensi gambar ke satu yang disimpan dalam bundel halaman, dan jika gambar tidak ditemukan, maka akan kembali ke default - folder statis. Jadi, ini kompatibel mundur!

Selamat menikmati!

Selamat ber-Hugo!

Tautan yang berguna