HUGO ja 非公式

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
gohugoio Star づけ
  暫定公開中 2024/09/16 (94d7f576a 対応, 2024/09/15)
  • Hugo について
    • 本節
    • Introduction
    • Hugo の機能
    • Privacy
    • セキュリティ
    • ライセンス
  • インストール
    • 本節
    • macOS
    • Linux
    • Windows
    • BSD
  • はじめよう
    • 本節
    • クイックスタート
    • ディレクトリ構造
    • 基本操作
    • 設定
    • Configure markup
    • 用語集
    • 本書以外の学習リソース
  • クイックリファレンス
    • 本節
    • Emojis
    • Functions
    • Methods
    • Page collections
  • コンテント管理
    • 本節
    • コンテントの構成
    • ページバンドル
    • コンテントフォーマット
    • フロントマター
    • ビルドオプション
    • ページリソース
    • イメージ処理
    • ショートコード
    • 関連コンテント
    • Sections
    • Content types
    • アーキタイプ
    • 分類
    • Summaries
    • Links and cross references
    • URL 管理
    • メニュー
    • コメント
    • マルチ言語
    • Markdown attributes
    • シンタックスハイライト
    • Diagrams
    • Mathematics
    • Data sources
    • Content adapters
  • テンプレート
    • 本節
    • はじめに
    • Template types
    • Lookup order
    • 基本テンプレート
    • Home templates
    • Single templates
    • Section templates
    • Taxonomy templates
    • Term templates
    • 部分テンプレート
    • コンテントビューテンプレート
    • ショートコードテンプレート
    • サイトマップテンプレート
    • RSS テンプレート
    • 404 テンプレート
    • robots.txt templates
    • メニュー
    • ページネーション
    • Embedded templates
    • Custom output formats
  • 関数
    • 本節
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • メソッド
    • 本節
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • レンダーフック
    • 本節
    • Introduction
    • Blockquotes
    • Code blocks
    • Headings
    • Images
    • Links
    • Passthrough
    • Tables
  • Hugo モジュール
    • In this section
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo パイプ
    • 本節
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • トラブルシューティング
    • 本節
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • 開発ツール
    • 本節
    • Editor plugins
    • Front-ends
    • 検索
    • Migrations
    • Other projects
  • ホスティングと開発
    • 本節
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • 貢献
    • 本節
    • Development
    • ドキュメント
    • Themes
  • メンテナンス
コンテント管理

ページリソース

Use page resources to logically associate assets with a page.

ページリソース (page resource) は ページバンドル (page bundle) からしかアクセスできません。 これを配置するディレクトリには、そのルートに 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 (ページバンドルのルート)

Examples

Use any of these methods on a Page object to capture page resources:

  • Resources.ByType
  • Resources.Get
  • Resources.GetMatch
  • Resources.Match

Once you have captured a resource, use any of the applicable Resource methods to return a value or perform an action.

The following examples assume this content structure:

content/
└── example/
    ├── data/
    │  └── books.json   <-- page resource
    ├── images/
    │  ├── a.jpg        <-- page resource
    │  └── b.jpg        <-- page resource
    ├── snippets/
    │  └── text.md      <-- page resource
    └── index.md

Render a single image, and throw an error if the file does not exist:

{{ $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 }}

Render all images, resized to 300 px wide:

{{ range .Resources.ByType "image" }}
  {{ with .Resize "300x" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

Render the markdown snippet:

{{ with .Resources.Get "snippets/text.md" }}
  {{ .Content }}
{{ end }}

List the titles in the data file, and throw an error if the file does not exist.

{{ $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 }}

Metadata

The page resources’ metadata is managed from the corresponding page’s front matter with an array/table parameter named resources. You can batch assign values using wildcards.

Resources of type page get Title etc. from their own front matter.

name
(string) Sets the value returned in Name.

The methods Match, Get and GetMatch use Name to match the resources.

title
(string) Sets the value returned in Title
params
(map) A map of custom key-value pairs.

Resources metadata example

content/example.md
     
---
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"
}

From the example above:

  • sunset.jpg will receive a new Name and can now be found with .GetMatch "header".
  • documents/photo_specs.pdf will get the photo icon.
  • documents/checklist.pdf, documents/guide.pdf and documents/payment.docx will get Title as set by title.
  • Every PDF in the bundle except documents/photo_specs.pdf will get the pdf icon.
  • All PDF files will get a new Name. The name parameter contains a special placeholder :counter, so the Name will be pdf-file-1, pdf-file-2, pdf-file-3.
  • Every docx in the bundle will receive the word icon.

The order matters; only the first set values of the title, name and params keys will be used. Consecutive parameters will be set only for the ones not already set. In the above example, .Params.icon is first set to "photo" in src = "documents/photo_specs.pdf". So that would not get overridden to "pdf" by the later set src = "**.pdf" rule.

The :counter placeholder in name and title

The :counter is a special placeholder recognized in name and title parameters resources.

The counter starts at 1 the first time they are used in either name or title.

For example, if a bundle has the resources photo_specs.pdf, other_specs.pdf, guide.pdf and checklist.pdf, and the front matter has specified the resources as:

content/inspections/engine/index.md
     
---
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"
}

the Name and Title will be assigned to the resource files as follows:

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

Multilingual

v0.123.0 の新機能

By default, with a multilingual single-host site, Hugo does not duplicate shared page resources when building the site.

This behavior is limited to Markdown content. Shared page resources for other content formats are copied into each language bundle.

Consider this site configuration:

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
      }
   }
}

And this content:

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

With v0.122.0 and earlier, Hugo duplicated the shared page resources, creating copies for each language:

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

With v0.123.0 and later, Hugo places the shared resources in the page bundle for the default content language:

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

This approach reduces build times, storage requirements, bandwidth consumption, and deployment times, ultimately reducing cost.

To resolve Markdown link and image destinations to the correct location, you must use link and image render hooks that capture the page resource with the Resources.Get method, and then invoke its RelPermalink method.

By default, with multilingual single-host sites, Hugo enables its embedded link render hook and embedded image render hook to resolve Markdown link and image destinations.

You may override the embedded render hooks as needed, provided they capture the resource as described above.

Although duplicating shared page resources is inefficient, you can enable this feature in your site configuration if desired:

hugo.
     
markup:
  goldmark:
    duplicateResourceFiles: true
[markup]
  [markup.goldmark]
    duplicateResourceFiles = true
{
   "markup": {
      "goldmark": {
         "duplicateResourceFiles": true
      }
   }
}

関連項目

  • コンテントの構成
  • Babel
  • Blockquote render hooks
  • Code block render hooks
  • Colors

このページ内

  • Examples
  • Metadata
  • Multilingual
最終更新日付: 0001/01/01
ページの変更
Hugo 作者より
Hugo Logo
  • Issue 報告
  • ヘルプ
  • @GoHugoIO
  • @spf13
  • @bepsays
 

Hugo Sponsors

Route4Me
Your Company?
 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
  • Hugo について
  • インストール
  • はじめよう
  • クイックリファレンス
  • コンテント管理
  • テンプレート
  • 関数
  • メソッド
  • レンダーフック
  • Hugo モジュール
  • Hugo パイプ
  • CLI
  • トラブルシューティング
  • 開発ツール
  • ホスティングと開発
  • 貢献
  • メンテナンス