Page bundles # Hugo 0.32 announced page-relative images and other resources packaged into Page Bundles. These terms are connected, and you also need to read about Page Resources and Image Processing to get the full picture. content/ ├── blog/ │ ├── hugo-is-cool/ │ │ ├── images/ │ │ │ ├── funnier-cat.jpg │ │ │ └── funny-cat.jpg │ │ ├── cats-info.md │ │ └── index.md │ ├── posts/ │ │ ├── post1. ...
Introduction # A page bundle is a directory that encapsulates both content and associated resources. By way of example, this site has an “about” page and a “privacy” page: content/ ├── about/ │ ├── index.md │ └── welcome.jpg └── privacy.md The “about” page is a page bundle. It logically associates a resource with content by bundling them together. Resources within a page bundle are [page resources], accessible with the [Resources] method on the Page object. ...
Introduction # You may mix content formats throughout your site. For example: content/ └── posts/ ├── post-1.md ├── post-2.adoc ├── post-3.org ├── post-4.pandoc ├── post-5.rst └── post-6.html Regardless of content format, all content must have [front matter], preferably including both title and date. Hugo selects the content renderer based on the markup identifier in front matter, falling back to the file extension. See the [classification] table below for a list of markup identifiers and recognized file extensions. ...
Overview # The front matter at the top of each content file is metadata that: Describes the content Augments the content Establishes relationships with other content Controls the published structure of your site Determines template selection Provide front matter using a serialization format, one of [JSON], [TOML], or [YAML]. Hugo determines the front matter format by examining the delimiters that separate the front matter from the page content. See examples of front matter delimiters by toggling between the serialization formats below. ...
Build options are stored in a reserved front matter object named build with these defaults: content/example/index.md yaml toml json --- build: list: always publishResources: true render: always --- +++ [build] list = 'always' publishResources = true render = 'always' +++ { "build": { "list": "always", "publishResources": true, "render": "always" } } list When to include the page within page collections. Specify one of: always Include the page in all page collections. ...
Page resources are only accessible from page bundles, those directories with index.md or _index.md files at their root. Page resources are only available to the page with which they are bundled. In this example, first-post is a page bundle with access to 10 page resources including audio, data, documents, images, and video. Although second-post is also a page bundle, it has no page resources and is unable to directly access the page resources associated with first-post. ...
Image resources # To process an image you must access the file as a page resource, global resource, or remote resource. Page resource # A page resource is a file within a [page bundle]. A page bundle is a directory with an index.md or _index.md file at its root. content/ └── posts/ └── post-1/ <-- page bundle ├── index.md └── sunset.jpg <-- page resource To access an image as a page resource: ...
Introduction # There are three types of shortcodes: embedded, custom, and inline. Embedded # Hugo’s embedded shortcodes are pre-defined templates within the application. Refer to each shortcode’s documentation for specific usage instructions and available arguments. Custom # Create custom shortcodes to simplify and standardize content creation. For example, the following shortcode template generates an audio player using a [global resource]: layouts/shortcodes/audio.html {{ with resources.Get (.Get "src") }} <audio controls preload="auto" src="{{ . ...
Hugo uses a set of factors to identify a page’s related content based on front matter parameters. This can be tuned to the desired set of indices and parameters or left to Hugo’s default Related Content configuration. List related content # To list up to 5 related pages (which share the same date or keyword parameters) is as simple as including something similar to this partial in your template: layouts/partials/related.html {{ $related := . ...
Overview # A section is a top-level content directory, or any content directory with an _index.md file. A content directory with an _index.md file is also known as a [branch bundle]. Section templates receive one or more page [collections] in [context]. Although top-level directories without _index.md files are sections, we recommend creating _index.md files in all sections. A typical site consists of one or more sections. For example: content/ ├── articles/ <-- section (top-level directory) │ ├── 2022/ │ │ ├── article-1/ │ │ │ ├── cover. ...