页面资源
页面资源只能从 页面包 访问,这些目录在其根目录下具有 index.md 或 _index.md 文件。页面资源仅对与其捆绑在一起的页面可用。
在此示例中,“first-post”是一个页面包,可以访问10个页面资源,包括音频、数据、文档、图像和视频。“second-post”也是一个页面包,但它没有页面资源,无法直接访问与“first-post”关联的页面资源。
content
└── post
├── first-post
│ ├── images
│ │ ├── a.jpg
│ │ ├── b.jpg
│ │ └── c.jpg
│ ├── index.md (页面包根目录)
│ ├── latest.html
│ ├── manual.json
│ ├── notice.md
│ ├── office.mp3
│ ├── pocket.mp4
│ ├── rating.pdf
│ └── safety.txt
└── second-post
└── index.md (页面包根目录)
示例
在 Page 对象上使用以下任何方法来捕获页面资源:
捕获资源后,使用任何适用的 Resource 方法返回一个值或执行一个操作。
以下示例假设此内容结构:
content/
└── example/
├── data/
│ └── books.json <-- 页面资源
├── images/
│ ├── a.jpg <-- 页面资源
│ └── b.jpg <-- 页面资源
├── snippets/
│ └── text.md <-- 页面资源
└── index.md
渲染单个图像,如果文件不存在则抛出错误:
{{ $path := "images/a.jpg" }}
{{ with .Resources.Get $path }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ else }}
{{ errorf "无法获取页面资源 %q" $path }}
{{ end }}
渲染所有图像,调整大小为 300 像素宽:
{{ range .Resources.ByType "image" }}
{{ with .Resize "300x" }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}
渲染 Markdown 代码片段:
{{ with .Resources.Get "snippets/text.md" }}
{{ .Content }}
{{ end }}
列出数据文件中的标题,如果文件不存在则抛出错误。
{{ $path := "data/books.json" }}
{{ with .Resources.Get $path }}
{{ with . | transform.Unmarshal }}
<p>图书:</p>
<ul>
{{ range . }}
<li>{{ .title }}</li>
{{ end }}
</ul>
{{ end }}
{{ else }}
{{ errorf "无法获取页面资源 %q" $path }}
{{ end }}
元数据
页面资源的元数据由相应页面的前置 matter 中名为 resources 的数组/表参数管理。您可以使用 通配符 批量分配值。
- name
- (
string) 设置在Name中返回的值。
- title
- (
string) 设置在Title中返回的值 - params
- (
map) 自定义键值对的映射。
资源元数据示例
---
date: "2018-01-25"
resources:
- name: header
src: images/sunset.jpg
- params:
icon: photo
src: documents/photo_specs.pdf
title: 照片规格
- src: documents/guide.pdf
title: 使用指南
- src: documents/checklist.pdf
title: 文档清单
- src: documents/payment.docx
title: 付款证明
- name: pdf-file-:counter
params:
icon: pdf
src: '**.pdf'
- params:
icon: word
src: '**.docx'
title: Application
---+++
date = '2018-01-25'
title = 'Application'
[[resources]]
name = 'header'
src = 'images/sunset.jpg'
[[resources]]
src = 'documents/photo_specs.pdf'
title = '照片规格'
[resources.params]
icon = 'photo'
[[resources]]
src = 'documents/guide.pdf'
title = '使用指南'
[[resources]]
src = 'documents/checklist.pdf'
title = '文档清单'
[[resources]]
src = 'documents/payment.docx'
title = '付款证明'
[[resources]]
name = 'pdf-file-:counter'
src = '**.pdf'
[resources.params]
icon = 'pdf'
[[resources]]
src = '**.docx'
[resources.params]
icon = 'word'
+++{
"date": "2018-01-25",
"resources": [
{
"name": "header",
"src": "images/sunset.jpg"
},
{
"params": {
"icon": "photo"
},
"src": "documents/photo_specs.pdf",
"title": "照片规格"
},
{
"src": "documents/guide.pdf",
"title": "使用指南"
},
{
"src": "documents/checklist.pdf",
"title": "文档清单"
},
{
"src": "documents/payment.docx",
"title": "付款证明"
},
{
"name": "pdf-file-:counter",
"params": {
"icon": "pdf"
},
"src": "**.pdf"
},
{
"params": {
"icon": "word"
},
"src": "**.docx"
}
],
"title": "Application"
}
从上面的示例:
sunset.jpg将接收一个新的Name,现在可以使用.GetMatch "header"找到它。documents/photo_specs.pdf将获得photo图标。documents/checklist.pdf、documents/guide.pdf和documents/payment.docx将获得由title设置的Title。- 包中除
documents/photo_specs.pdf之外的每个PDF文件都将获得pdf图标。 - 所有
PDF文件都将获得一个新的Name。name参数包含一个特殊的占位符 :counter ,因此Name将为pdf-file-1、pdf-file-2、pdf-file-3。 - 包中的每个 docx 文件都将获得
word图标。
name 和 title 中的 :counter 占位符
:counter 是 resources 的 name 和 title 参数中识别的特殊占位符。
当它们第一次在 name 或 title 中使用时,计数器从 1 开始。
例如,如果一个包具有资源 photo_specs.pdf 、 other_specs.pdf 、 guide.pdf 和 checklist.pdf ,并且前置 matter 已将 resources 指定为:
---
resources:
- src: '*specs.pdf'
title: 'Specification #:counter'
- name: pdf-file-:counter
src: '**.pdf'
title: Engine inspections
---+++
title = 'Engine inspections'
[[resources]]
src = '*specs.pdf'
title = 'Specification #:counter'
[[resources]]
name = 'pdf-file-:counter'
src = '**.pdf'
+++{
"resources": [
{
"src": "*specs.pdf",
"title": "Specification #:counter"
},
{
"name": "pdf-file-:counter",
"src": "**.pdf"
}
],
"title": "Engine inspections"
}
则 Name 和 Title 将按如下方式分配给资源文件:
| 资源文件 | Name |
Title |
|---|---|---|
| checklist.pdf | "pdf-file-1.pdf |
"checklist.pdf" |
| guide.pdf | "pdf-file-2.pdf |
"guide.pdf" |
| other_specs.pdf | "pdf-file-3.pdf |
"Specification #1" |
| photo_specs.pdf | "pdf-file-4.pdf |
"Specification #2" |
多语言
New in v0.123.0默认情况下,对于多语言单主机站点,Hugo 在构建站点时不会复制共享页面资源。
考虑此站点配置:
defaultContentLanguage: de
defaultContentLanguageInSubdir: true
languages:
de:
languageCode: de-DE
languageName: Deutsch
weight: 1
en:
languageCode: en-US
languageName: English
weight: 2
defaultContentLanguage = 'de'
defaultContentLanguageInSubdir = true
[languages]
[languages.de]
languageCode = 'de-DE'
languageName = 'Deutsch'
weight = 1
[languages.en]
languageCode = 'en-US'
languageName = 'English'
weight = 2
{
"defaultContentLanguage": "de",
"defaultContentLanguageInSubdir": true,
"languages": {
"de": {
"languageCode": "de-DE",
"languageName": "Deutsch",
"weight": 1
},
"en": {
"languageCode": "en-US",
"languageName": "English",
"weight": 2
}
}
}
以及此内容:
content/
└── my-bundle/
├── a.jpg <-- 共享页面资源
├── b.jpg <-- 共享页面资源
├── c.de.jpg
├── c.en.jpg
├── index.de.md
└── index.en.md
在 v0.122.0 和更早版本中,Hugo 复制了共享页面资源,为每种语言创建副本:
public/
├── de/
│ ├── my-bundle/
│ │ ├── a.jpg <-- 共享页面资源
│ │ ├── b.jpg <-- 共享页面资源
│ │ ├── c.de.jpg
│ │ └── index.html
│ └── index.html
├── en/
│ ├── my-bundle/
│ │ ├── a.jpg <-- 共享页面资源(副本)
│ │ ├── b.jpg <-- 共享页面资源(副本)
│ │ ├── c.en.jpg
│ │ └── index.html
│ └── index.html
└── index.html
在 v0.123.0 和更高版本中,Hugo 将共享资源放在默认内容语言的页面包中:
public/
├── de/
│ ├── my-bundle/
│ │ ├── a.jpg <-- 共享页面资源
│ │ ├── b.jpg <-- 共享页面资源
│ │ ├── c.de.jpg
│ │ └── index.html
│ └── index.html
├── en/
│ ├── my-bundle/
│ │ ├── c.en.jpg
│ │ └── index.html
│ └── index.html
└── index.html
这种方法减少了构建时间、存储需求、带宽消耗和部署时间,最终降低了成本。
尽管复制共享页面资源效率低下,但如果需要,您可以在站点配置中启用此功能:
markup:
goldmark:
duplicateResourceFiles: true
[markup]
[markup.goldmark]
duplicateResourceFiles = true
{
"markup": {
"goldmark": {
"duplicateResourceFiles": true
}
}
}