外部图像处理

Question

是否可以将Hugo 0.32的新图像处理功能用于其他文件夹中的图像？

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

Answer 1

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

在_index.md文件夹中创建content/images文件，其简单的正面内容类似于以下内容。

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 }}

注意：您也可以从降价处访问这些图片，但这需要像Hugo文档中那样设置短代码，并且我在GitHub示例中包含了一个短代码示例链接如下。

Here is the GitHub repository of the example