页面资源
页面资源只能从页面包访问,这些目录的根目录中包含 index.md
或 _index.md
文件。页面资源仅适用于与其绑定的页面。
在此示例中,first-post
是一个页面包,可以访问 10 个页面资源,包括音频、数据、文档、图像和视频。虽然 second-post
也是一个页面包,但它没有页面资源,也无法直接访问与 first-post
关联的页面资源。
content
└── post
├── first-post
│ ├── images
│ │ ├── a.jpg
│ │ ├── b.jpg
│ │ └── c.jpg
│ ├── index.md (root of page bundle)
│ ├── latest.html
│ ├── manual.json
│ ├── notice.md
│ ├── office.mp3
│ ├── pocket.mp4
│ ├── rating.pdf
│ └── safety.txt
└── second-post
└── index.md (root of page bundle)
示例
在 Page
对象上使用以下任何方法来捕获页面资源
捕获资源后,使用任何适用的Resource
方法来返回值或执行操作。
以下示例假设有此内容结构
content/
└── example/
├── data/
│ └── books.json <-- page resource
├── images/
│ ├── a.jpg <-- page resource
│ └── b.jpg <-- page resource
├── snippets/
│ └── text.md <-- page resource
└── index.md
渲染单个图像,如果文件不存在则抛出错误
{{ $path := "images/a.jpg" }}
{{ with .Resources.Get $path }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ else }}
{{ errorf "Unable to get page resource %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>Books:</p>
<ul>
{{ range . }}
<li>{{ .title }}</li>
{{ end }}
</ul>
{{ end }}
{{ else }}
{{ errorf "Unable to get page resource %q" $path }}
{{ end }}
元数据
页面资源的元数据通过相应的页面的前言进行管理,使用名为 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: Photo Specifications
- src: documents/guide.pdf
title: Instruction Guide
- src: documents/checklist.pdf
title: Document Checklist
- src: documents/payment.docx
title: Proof of Payment
- 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 = 'Photo Specifications'
[resources.params]
icon = 'photo'
[[resources]]
src = 'documents/guide.pdf'
title = 'Instruction Guide'
[[resources]]
src = 'documents/checklist.pdf'
title = 'Document Checklist'
[[resources]]
src = 'documents/payment.docx'
title = 'Proof of Payment'
[[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": "Photo Specifications"
},
{
"src": "documents/guide.pdf",
"title": "Instruction Guide"
},
{
"src": "documents/checklist.pdf",
"title": "Document Checklist"
},
{
"src": "documents/payment.docx",
"title": "Proof of Payment"
},
{
"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
是 name
和 title
参数 resources
中识别的特殊占位符。
计数器在首次在 name
或 title
中使用时从 1 开始。
例如,如果一个捆绑包具有资源 photo_specs.pdf
、other_specs.pdf
、guide.pdf
和 checklist.pdf
,并且前言已将 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 |
"规范 #1" |
photo_specs.pdf | "pdf-file-4.pdf |
“规范 #2” |
多语言
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 <-- shared page resource
├── b.jpg <-- shared page resource
├── c.de.jpg
├── c.en.jpg
├── index.de.md
└── index.en.md
在 v0.122.0 及更早版本中,Hugo 会复制共享页面资源,为每种语言创建副本
public/
├── de/
│ ├── my-bundle/
│ │ ├── a.jpg <-- shared page resource
│ │ ├── b.jpg <-- shared page resource
│ │ ├── c.de.jpg
│ │ └── index.html
│ └── index.html
├── en/
│ ├── my-bundle/
│ │ ├── a.jpg <-- shared page resource (duplicate)
│ │ ├── b.jpg <-- shared page resource (duplicate)
│ │ ├── c.en.jpg
│ │ └── index.html
│ └── index.html
└── index.html
在 v0.123.0 及更高版本中,Hugo 将共享资源放置在默认内容语言的页面包中
public/
├── de/
│ ├── my-bundle/
│ │ ├── a.jpg <-- shared page resource
│ │ ├── b.jpg <-- shared page resource
│ │ ├── 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
}
}
}