コンテントの構成
ページバンドル
Hugo 0.32 では、ページに関連するイメージやリソースは ページバンドル (Page Bundle) としてパッケージされることが発表されました。
このあたりの用語は相互に関連づいているので、全体像を把握するためには ページリソース (Page Resource) や イメージ処理 (Image Processing) といった用語について確認する必要があります。
content/
├── blog/
│ ├── hugo-is-cool/
│ │ ├── images/
│ │ │ ├── funnier-cat.jpg
│ │ │ └── funny-cat.jpg
│ │ ├── cats-info.md
│ │ └── index.md
│ ├── posts/
│ │ ├── post1.md
│ │ └── post2.md
│ ├── 1-landscape.jpg
│ ├── 2-sunset.jpg
│ ├── _index.md
│ ├── content-1.md
│ └── content-2.md
├── 1-logo.png
└── _index.md
The file tree above shows three bundles. Note that the home page bundle cannot contain other content pages, although other files (images etc.) are allowed.
コンテントソースの構成
Hugo におけるコンテントは、レンダリングされるウェブサイトを反映する形に構成することが必要です。
Hugo はどの階層レベルであってもコンテントをネストして配置することをサポートしていますが、トップレベル (つまり content/<DIRECTORIES>) だけは特別です。
そのディレクトリ名がレイアウトなどとしてコンテントタイプを決定するものとなります。
セクションに関する詳細、特にそのネスト方法については セクション を参照してください。
追加の設定を行うまでもなく、以下の構成は自動的に解釈されます。
.
└── content
└── about
| └── index.md // <- https://example.org/about/
├── posts
| ├── firstpost.md // <- https://example.org/posts/firstpost/
| ├── happy
| | └── ness.md // <- https://example.org/posts/happy/ness/
| └── secondpost.md // <- https://example.org/posts/secondpost/
└── quote
├── first.md // <- https://example.org/quote/first/
└── second.md // <- https://example.org/quote/second/
Hugo によるパスの解釈
これ以降に例示を行って、Hugo がウェブサイトをレンダリングする際のコンテント構成と出力 URL 構造との関連性を明らかにします。
例示にあたっては プリティー URL (pretty URL) を用いるものとします。
それが Hugo のデフォルト動作であるからです。
また サイトに対する設定ファイル では baseURL = "https://example.org/" といったキーバリューによるペア形式での指定を示すものとします。
インデックスページ _index.md
Hugo において _index.md には特別な役割があります。
It allows you to add front matter and content to home, section, taxonomy, and term pages.
You can create one _index.md for your home page and one in each of your content sections, taxonomies, and terms. The following shows typical placement of an _index.md that would contain content and front matter for a posts section list page on a Hugo website:
. url
. ⊢--^-⊣
. path slug
. ⊢--^-⊣⊢---^---⊣
. file path
. ⊢------^------⊣
content/posts/_index.md
At build, this will output to the following destination with the associated values:
url ("/posts/")
⊢-^-⊣
baseurl section ("posts")
⊢--------^---------⊣⊢-^-⊣
permalink
⊢----------^-------------⊣
https://example.org/posts/index.html
The sections can be nested as deeply as you want. The important thing to understand is that to make the section tree fully navigational, at least the lower-most section must include a content file. (i.e. _index.md).
Single pages in sections
Single content files in each of your sections will be rendered by a single template. Here is an example of a single post within posts:
path ("posts/my-first-hugo-post.md")
. ⊢-----------^------------⊣
. section slug
. ⊢-^-⊣⊢--------^----------⊣
content/posts/my-first-hugo-post.md
When Hugo builds your site, the content will be output to the following destination:
url ("/posts/my-first-hugo-post/")
⊢------------^----------⊣
baseurl section slug
⊢--------^--------⊣⊢-^--⊣⊢-------^---------⊣
permalink
⊢--------------------^---------------------⊣
https://example.org/posts/my-first-hugo-post/index.html
Paths explained
The following concepts provide more insight into the relationship between your project’s organization and the default Hugo behavior when building output for the website.
section
A default content type is determined by the section in which a content item is stored. section is determined by the location within the project’s content directory. section cannot be specified or overridden in front matter.
slug
The slug is the last segment of the URL path, defined by the file name and optionally overridden by a slug value in front matter. See URL Management for details.
path
A content’s path is determined by the section’s path to the file. The file path
- is based on the path to the content’s location AND
- does not include the slug
url
The url is the entire URL path, defined by the file path and optionally overridden by a url value in front matter. See URL Management for details.