捆绑外的图像处理

Question

是否可以对其他文件夹中的图片使用 Hugo 0.32 新的图片处理功能？

例如，我有一个网站，它的结构已经采用一种格式，所有媒体都在一个单独的/content/images 文件夹中，而不是在每个条目旁边作为一个页面包。

Answer 1

可以通过引用访问页面的资源，因此通过非常简单的设置就可以做到这一点。

在content/images 文件夹中创建一个_index.md 文件，其简单的front-matter 类似于下面。

content/images/_index.md

---
title: Media Folder
---

这将允许您从站点上下文访问该部分中images 的资源并获取该页面。如果您不希望它在您发布的网站上显示为实际页面，您可以添加headless: true。

列出来自另一个页面模板的图像

{{ with .Site.GetPage "section" "images" }}
  <h2>{{ .Title }}</h2>
  {{ $resources := .Resources.ByType "image"}}
  {{ range $resources }}
    {{ with . }}
      <img style="max-width: 100%;" src="{{ .RelPermalink }}">
      <br />
    {{ end }}
  {{ end }}
{{ end }}

列出资源图像并调整其大小

{{ with .Site.GetPage "section" "images" }}
  <h2>From {{ .Title }} (images)</h2>
  {{ $resources := .Resources.ByType "image"}}
  {{ range $resources }}
    {{ with . }}
      {{ $image200x := (.Resize "200x") }}
      {{ $image400x := (.Resize "400x") }}
      <img src="{{ $image200x.RelPermalink }}">
      <img src="{{ $image400x.RelPermalink }}">
      <br />
    {{ end }}
  {{ end }}
{{ end }}

这些示例展示了如何从捆绑包中的另一个位置从 images 位置访问资源。您也可以通过.Resources.GetByPrefix "logo"直接获取图片资源，通过名称访问单个图片。

按名称访问图像资源

在页面的前面，您可以包含一个字段 imagename: logo 作为示例，然后：

{{ $page := . }}
{{ with .Site.GetPage "section" "images" }}
  {{ with .Resources.GetByPrefix $page.Params.imagename }}
    {{ $image200x := (.Resize "200x") }}
    {{ $image400x := (.Resize "400x") }}
    <img src="{{ $image200x.RelPermalink }}">
    <img src="{{ $image400x.RelPermalink }}">
    <br />
  {{ end }}
{{ end }}

注意：您也可以从 Markdown 访问这些图像，但这需要像 Hugo 文档中那样设置简码，我在下面的 GitHub 示例链接中包含了简码示例.

Here is the GitHub repository of the example