束外图像处理

Question

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

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

Answer 1

可以从页面的引用访问页面的资源，所以这可以通过非常简单的设置实现。

在 content/images 文件夹中创建一个 _index.md 文件，其前面的内容与下面类似。

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 示例 link 中的简码。

Here is the GitHub repository of the example

束外图像处理

Image Processing Outside Bundles

hugo

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

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

按名称访问图像资源