如何在使用 Mainroad 主题的 Hugo 网站中,将缩略图图像存储在页面包文件夹中
将所有与页面相关的内容放在一个文件夹中...
目录
有一段时间,我一直被一个烦人的问题困扰着,那就是如何将页面的缩略图放入静态目录中。这适用于 Mainroad、Rodster 和类似的 Hugo 主题。
我喜欢将 Hugo 页面内容组织为页面包, 并且更希望将所有与页面相关的图片存储在该页面包内。
在这里,我向你展示一个解决方案!
如何在页面包文件夹中保留 Mainroad Hugo 主题(及类似主题)的缩略图
只需将以下文本添加到文件 ./layouts/partials/post_thumbnail.html
,
你就可以将图片存储在 bundle 或 static 文件夹的任何位置 :).
{{- 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 }}
{{- /* 如果未找到,回退到静态文件夹中的图片(使用 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 }}
从注释中可以看出,这段漂亮的模板代码试图生成一个指向页面包中图片的引用, 如果找不到图片,则会回退到默认的静态文件夹。 因此,它是向后兼容的!
享受吧!
快乐的 Hugo 使用!