如何在使用 Mainroad 主题的 Hugo 网站中,将缩略图图像存储在页面包文件夹中

将所有与页面相关的内容放在一个文件夹中...

目录

有一段时间,我一直被一个烦人的问题困扰着,那就是如何将页面的缩略图放入静态目录中。这适用于 Mainroad、Rodster 和类似的 Hugo 主题。

我喜欢将 Hugo 页面内容组织为页面包, 并且更希望将所有与页面相关的图片存储在该页面包内。

image page bundle

在这里,我向你展示一个解决方案!

如何在页面包文件夹中保留 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 使用!

有用的链接