Hugo 사이트에서 Mainroad 테마를 사용할 때 썸네일 이미지를 페이지 번들 폴더에 저장하는 방법
모든 페이지 관련 콘텐츠를 하나의 폴더에 보관하는 중...
Page content
조금 오랜 시간 동안 저는 페이지의 썸네일 이미지를 정적 디렉토리에 넣는 이 번거로움에 시달려 왔습니다. 이는 Mainroad, Rodster와 유사한 Hugo 테마를 위한 것입니다.
저는 Hugo 페이지 콘텐츠를 페이지 번들로 정리하는 것을 선호하며, 모든 페이지 관련 이미지를 이 페이지 번들 내부에 저장하는 것이 더 나을 것이라고 생각합니다.
여기서 저는 여러분께 해결책을 제시하고자 합니다!
Mainroad Hugo 테마(및 유사한 테마)의 썸네일 이미지를 페이지 번들 폴더에 보관하는 방법
다음 텍스트를 파일 ./layouts/partials/post_thumbnail.html에 넣어 주세요. 그러면 이미지를 번들 폴더나 정적 폴더의 어디에나 저장할 수 있습니다.
{{- 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 := "" }}
{{- /* 먼저 페이지 리소스에서 이미지를 찾으려고 시도합니다 (번들 페이지용) */ -}}
{{- $resource := .page.Resources.GetMatch $thumbnail }}
{{- if $resource }}
{{- $thumbnailURL = $resource.RelPermalink }}
{{- else }}
{{- /* 기본값으로 정적 폴더의 이미지를 사용합니다 */ -}}
{{- $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 }}
주석을 보면 이 템플릿은 페이지 번들에 저장된 이미지의 참조를 생성하려는 시도를 보여주며, 이미지를 찾을 수 없는 경우 기본값인 정적 폴더로 돌아갑니다. 따라서 이는 뒷받침이 가능합니다!
즐겁게 사용해 보세요!
행복한 Hugo 사용이 되시길 바랍니다!
