页面资源
页面资源只能从 页面包 访问,这些目录在其根目录下具有 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
}
}
}