ページリソース

ページリソース (画像、他のページ、ドキュメントなど) は、ページ相対 URL と独自のメタデータを持ちます。

On this page

ページリソースはページバンドルからしかアクセスできません。 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)

プロパティ

ResourceType: リソースのメディアタイプのメインタイプです。たとえば、MIME タイプ image/jpeg のファイルは ResourceType が image となります。Page は ResourceType に page という値を持ちます。
Name: デフォルト値は、ファイル名 (所有ページからの相対パス) です。フロントマターで設定できます。
Title: デフォルト値は .Name と同じです。フロントマターで設定できます。
Permalink: リソースへの絶対 URL です。 page 型のリソースは値を持ちません。
RelPermalink: リソースへの相対 URL です。 page 型のリソースは値を持ちません。
Content: リソース自体のコンテンツです。ほとんどのリソースでは、これはファイルの内容を含む文字列を返します。これを使用してインラインリソースを作成します。

{{ 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.Type }};base64,{{ .Content | base64Encode }}">
{{ end }}

MediaType.Type: リソースのメディアタイプ (以前は MIME タイプとして知られていた) です (たとえば、image/jpeg)。
MediaType.MainType: リソースの MIME タイプのメインタイプです (たとえば、image)
MediaType.SubType: リソースのタイプのサブタイプです (たとえば、jpeg)。これは、ファイルサフィックスに対応する場合とそうでない場合があります。
MediaType.Suffixes: リソースのメディアタイプに対応するファイルサフィックスのスライスです (たとえば、[jpg jpeg jpe jif jfif])。

メソッド

ByType: 指定されたタイプのページリソースを返します。

{{ .Resources.ByType "image" }}

Match: 指定された glob パターン (例 ) に一致する Name を持つすべてのページリソースを (スライスとして) 返します。マッチングは大文字と小文字を区別しません。

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

GetMatch: Match と同じですが、最初にマッチしたものを返します。

パターンマッチング

// 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 という名前の配列/テーブルパラメータで管理されます。ワイルドカードを使って、値をバッチで割り当てることができます。

name: Name で返される値を設定します。

title: Title で返される値を設定します。
params: カスタムキー/値のマップ。

リソースメタデータの例

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'

[[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"
      }
   ]
}

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