页面资源

  5 分钟阅读  

Page Resources - 页面资源

https://gohugo.io/content-management/page-resources/

​ 页面资源（如图片、其他页面、文档等）具有相对于页面的 URL 和它们自己的元数据。

​ 页面资源只能从page bundles中访问，这些目录在其根目录中具有index.md或_index.md文件。页面资源仅可用于与其捆绑的页面。

​ 在此示例中，first-post是具有10个页面资源（包括音频，数据，文档，图像和视频）访问权限的page bundle。尽管second-post也是一个page bundle，但它没有页面资源，并且无法直接访问与first-post关联的页面资源。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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)

属性

  • ResourceType

    ​ 该资源媒体类型的主类型。例如，MIME类型为image/jpeg的文件的ResourceType为image。页面的ResourceType值为page。

  • Name

    默认值为文件名（相对于所属页面）。可以在前置元数据中设置。

  • Title

    默认值与 .Name 相同。可以在前置元数据中设置。

  • Permalink

    该资源的绝对URL。类型为page的资源将没有值。

  • RelPermalink

    该资源的相对URL。类型为page的资源将没有值。

  • Content

    该资源本身的内容。对于大多数资源，这将返回一个字符串，其中包含文件的内容。使用它来创建内联资源。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{ with .Resources.GetMatch "script.js" }}
  <script>{{ .Content | safeJS }}</script>
{{ end }}

{{ with .Resources.GetMatch "style.css" }}
  <style>{{ .Content | safeCSS }}</style>
{{ end }}

{{ with .Resources.GetMatch "img.png" }}
  <img src="data:{{ .MediaType }};base64,{{ .Content | base64Encode }}">
{{ end }}

  • MediaType

    该资源的MIME类型，例如image/jpeg。

  • MediaType.MainType

    该资源MIME类型的主类型。例如，MIME类型为application/pdf的文件的主类型为application。

  • MediaType.SubType

    该资源MIME类型的子类型。例如，MIME类型为application/pdf的文件的子类型为pdf。请注意，这与文件扩展名不同 —— PowerPoint文件的子类型为vnd.mspowerpoint。

  • MediaType.Suffixes

    该资源MIME类型的可能后缀切片。

方法

  • ByType

    返回给定类型的页面资源。

1

{{ .Resources.ByType "image" }}

  • Match

    返回所有Name与给定通配符模式（examples）匹配的页面资源（作为切片）。匹配不区分大小写。

1

{{ .Resources.Match "images/*" }}

  • GetMatch

    与Match相同，但将返回第一个匹配项。

模式匹配

1
2
3
4
5
6
7
8

// 使用 Match/GetMatch 来寻找这个 images/sunset.jpg ?
.Resources.Match "images/sun*" ✅
.Resources.Match "**/sunset.jpg" ✅
.Resources.Match "images/*.jpg" ✅
.Resources.Match "**.jpg" ✅
.Resources.Match "*" 🚫
.Resources.Match "sunset.jpg" 🚫
.Resources.Match "*sunset.jpg" 🚫

页面资源元数据

​ 页面资源的元数据由相应页面的前置元数据中的resources数组/表（array/table）参数进行管理。您可以使用通配符进行批量分配值。

​ 类型为page的资源从其自己的前置元数据中获取Title等。

  • name

    设置Name中返回的值

​ Match，Get和GetMatch方法使用Name来匹配资源。

  • title

    设置Title中返回的值。

  • params

    一个自定义键/值的映射。

资源元数据示例

=== “yaml”

``` yaml
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
```

=== “toml”

``` toml
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'
```

=== “json”

``` json
{
   "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，因此名称将是pdf-file-1、pdf-file-2、pdf-file-3。
  • 包中的每个docx都将获得word图标。

​ 顺序很重要 —— 只有title，name和params-keys的第一个设置值将被使用。连续的参数仅设置未设置的参数。在上面的示例中，.Params.icon首先在src = "documents/photo_specs.pdf"中设置为"photo"。因此，后来设置的src = "**.pdf"规则不会将其覆盖为"pdf"。

name 和 title 中的 :counter 占位符

​ :counter是在资源的name和title参数中识别的特殊占位符。

​ 该计数器从第一次在name或title中使用时开始计数。

​ 例如，如果一个包中有资源photo_specs.pdf，other_specs.pdf，guide.pdf和checklist.pdf，并且前置元数据已将resources指定为：

=== “yaml”

``` yaml
resources:
- src: '*specs.pdf'
  title: 'Specification #:counter'
- name: pdf-file-:counter
  src: '**.pdf'
```

=== “toml”

``` toml
[[resources]]
src = '*specs.pdf'
title = 'Specification #:counter'
[[resources]]
name = 'pdf-file-:counter'
src = '**.pdf'
```

=== “json”

``` json
{
   "resources": [
      {
         "src": "*specs.pdf",
         "title": "Specification #:counter"
      },
      {
         "name": "pdf-file-:counter",
         "src": "**.pdf"
      }
   ]
}
```

则Name和Title将按如下分配给资源文件：

Resource fileNameTitle
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"

另请参阅

最后修改 May 22, 2023: 第一次提交 (9f24e27)