hugo/content/templates/output-formats.md

225 lines
8.5 KiB
Markdown
Raw Normal View History

---
title: Custom Output Formats
linktitle: Custom Output Formats
description: Hugo can output content in multiple formats, including calendar events, e-book formats, Google AMP, and JSON search indexes, or any custom text format.
date: 2017-03-22
publishdate: 2017-03-22
lastmod: 2017-03-22
categories: [templates]
keywords: ["amp","outputs","rss"]
menu:
docs:
parent: "templates"
weight: 18
weight: 18
sections_weight: 18
draft: false
aliases: [/templates/outputs/,/extras/output-formats/,/content-management/custom-outputs/]
toc: true
---
This page describes how to properly configure your site with the media types and output formats, as well as where to create your templates for your custom outputs.
## Media Types
A [media type][] (also known as *MIME type* and *content type*) is a two-part identifier for file formats and format contents transmitted on the Internet.
This is the full set of built-in media types in Hugo:
{{< datatable "media" "types" "type" "suffix" >}}
**Note:**
* It is possible to add custom media types or change the defaults; e.g., if you want to change the suffix for `text/html` to `asp`.
* The `Suffix` is the value that will be used for URLs and filenames for that media type in Hugo.
* The `Type` is the identifier that must be used when defining new/custom `Output Formats` (see below).
* The full set of media types will be registered in Hugo's built-in development server to make sure they are recognized by the browser.
To add or modify a media type, define it in a `mediaTypes` section in your [site configuration][config], either for all sites or for a given language.
```
[mediaTypes]
[mediaTypes."text/enriched"]
suffix = "enr"
[mediaTypes."text/html"]
suffix = "asp"
```
The above example adds one new media type, `text/enriched`, and changes the suffix for the built-in `text/html` media type.
Squashed 'docs/' changes from 3e663efb2..fc61378a3 fc61378a3 Add Hugo 0.32 related docs 77edf7fd7 commands: Regenerate af9d25458 Fix Blackfriday's Markdown extension name 1223dd63a Remove roadmap b8bcb2fb8 Include note to allow hugo write permissions outside home dir 7dbccb936 Fix typo in roadmap 3a38da6f5 Fix spelling 94ebe50ff Merge branch 'master' of github.com:gohugoio/hugoDocs 89376e21d Clarify Hugo Roadmap 03d191fec Mention Reverse function in taxonomy tpl page. a4ea3402d Fix ref and relref function pages. b36632b31 Remove non-existing source variable a638160dc Update Content Organization to match the world 47eb431ca Correct one link in templates/output-formats.md 8bf933629 Spell fix ce2d48728 Add docs for .AllTranslations de94b4942 Move sponsor data to theme data 41fe75254 Merge commit 'f463ef99ed2862e4042557e28aece7ca858e1d0a' f463ef99e Squashed 'themes/gohugoioTheme/' changes from bc851da9..75da2f6b 532c65f2a Move sponsor logo to theme 899e2defe Add sponsor logos to home page and footer 3ca53db97 Release 0.31.1 bb9876ce2 Merge branch 'temp0311' c7c3ee7e5 releaser: Prepare repository for 0.32-DEV 4ac554792 releaser: Add release notes to /docs for release of 0.31.1 52bfb5c15 releaser: Bump versions for release of 0.31.1 cfdc2e4ea Fix output formats example 5746c10c2 More on output format de2ee0fe0 Improve suffix redefinition example c9997839e Update gitlab CI submodule management 82d74e306 Add Bootstrap styling to breadcrumb example c8c9601a8 Use the code shortcode for the breadcrumb example 16be43e7d Clean up formatting in variable definition lists 149c2c157 Add nested section docs 783c3d636 Sync theme 60a220bbd Squashed 'themes/gohugoioTheme/' changes from 6b632895..bc851da9 4b33a04d0 Fix typo 94cffc43c Fix little typo a5d4f762f Fix typo 36c5a0b43 Add a note about the 2 in staticDir2 087bd9a9f Add KeyCDN to menu 4ac8aae38 Hugo 0.31 Released 8fdd995e7 releaser: Prepare repository for 0.32-DEV eb0f38fbb releaser: Add release notes to /docs for release of 0.31 60efdfff7 releaser: Bump versions for release of 0.31 44dafb10b Merge commit '30c0d485eaff6d70df1be0353911ddca485d52bf' e6b847b95 Merge commit '05e42bc643f1840ed2ad9c2eff82a269d1381683' 15d86a525 Handle Taxonomy permalinks 5c3c18d7f Add support for height argument to figure shortcode git-subtree-dir: docs git-subtree-split: fc61378a3227c14883a2942d67c806014e7bb6cb
2017-12-30 03:15:31 -05:00
**Note:** these media types are configured for **your output formats**. If you want to redefine one of Hugo's default output formats (e.g. `HTML`), you also need to redefine the output format. So, if you want to change the suffix of the `HTML` output format from `html` (default) to `htm`:
```toml
[mediaTypes]
[mediaTypes."text/html"]
suffix = "htm"
# Redefine HTML to update its media type.
[outputFormats]
[outputFormats.HTML]
mediaType = "text/html"
```
**Note** that for the above to work, you also need to add an`outputs` definition in your site config.
## Output Formats
Given a media type and some additional configuration, you get an `Output Format`:
This is the full set of Hugo's built-in output formats:
{{< datatable "output" "formats" "name" "mediaType" "path" "baseName" "rel" "protocol" "isPlainText" "isHTML" "noUgly">}}
* A page can be output in as many output formats as you want, and you can have an infinite amount of output formats defined **as long as they resolve to a unique path on the file system**. In the above table, the best example of this is `AMP` vs. `HTML`. `AMP` has the value `amp` for `Path` so it doesn't overwrite the `HTML` version; e.g. we can now have both `/index.html` and `/amp/index.html`.
* The `MediaType` must match the `Type` of an already defined media type.
* You can define new output formats or redefine built-in output formats; e.g., if you want to put `AMP` pages in a different path.
Squashed 'docs/' changes from 3e663efb2..fc61378a3 fc61378a3 Add Hugo 0.32 related docs 77edf7fd7 commands: Regenerate af9d25458 Fix Blackfriday's Markdown extension name 1223dd63a Remove roadmap b8bcb2fb8 Include note to allow hugo write permissions outside home dir 7dbccb936 Fix typo in roadmap 3a38da6f5 Fix spelling 94ebe50ff Merge branch 'master' of github.com:gohugoio/hugoDocs 89376e21d Clarify Hugo Roadmap 03d191fec Mention Reverse function in taxonomy tpl page. a4ea3402d Fix ref and relref function pages. b36632b31 Remove non-existing source variable a638160dc Update Content Organization to match the world 47eb431ca Correct one link in templates/output-formats.md 8bf933629 Spell fix ce2d48728 Add docs for .AllTranslations de94b4942 Move sponsor data to theme data 41fe75254 Merge commit 'f463ef99ed2862e4042557e28aece7ca858e1d0a' f463ef99e Squashed 'themes/gohugoioTheme/' changes from bc851da9..75da2f6b 532c65f2a Move sponsor logo to theme 899e2defe Add sponsor logos to home page and footer 3ca53db97 Release 0.31.1 bb9876ce2 Merge branch 'temp0311' c7c3ee7e5 releaser: Prepare repository for 0.32-DEV 4ac554792 releaser: Add release notes to /docs for release of 0.31.1 52bfb5c15 releaser: Bump versions for release of 0.31.1 cfdc2e4ea Fix output formats example 5746c10c2 More on output format de2ee0fe0 Improve suffix redefinition example c9997839e Update gitlab CI submodule management 82d74e306 Add Bootstrap styling to breadcrumb example c8c9601a8 Use the code shortcode for the breadcrumb example 16be43e7d Clean up formatting in variable definition lists 149c2c157 Add nested section docs 783c3d636 Sync theme 60a220bbd Squashed 'themes/gohugoioTheme/' changes from 6b632895..bc851da9 4b33a04d0 Fix typo 94cffc43c Fix little typo a5d4f762f Fix typo 36c5a0b43 Add a note about the 2 in staticDir2 087bd9a9f Add KeyCDN to menu 4ac8aae38 Hugo 0.31 Released 8fdd995e7 releaser: Prepare repository for 0.32-DEV eb0f38fbb releaser: Add release notes to /docs for release of 0.31 60efdfff7 releaser: Bump versions for release of 0.31 44dafb10b Merge commit '30c0d485eaff6d70df1be0353911ddca485d52bf' e6b847b95 Merge commit '05e42bc643f1840ed2ad9c2eff82a269d1381683' 15d86a525 Handle Taxonomy permalinks 5c3c18d7f Add support for height argument to figure shortcode git-subtree-dir: docs git-subtree-split: fc61378a3227c14883a2942d67c806014e7bb6cb
2017-12-30 03:15:31 -05:00
To add or modify an output format, define it in an `outputFormats` section in your site's [configuration file](/getting-started/configuration/), either for all sites or for a given language.
```
[outputFormats.MyEnrichedFormat]
mediaType = "text/enriched"
baseName = "myindex"
isPlainText = true
protocol = "bep://"
```
The above example is fictional, but if used for the homepage on a site with `baseURL` `https://example.org`, it will produce a plain text homepage with the URL `bep://example.org/myindex.enr`.
### Configure Output Formats
The following is the full list of configuration options for output formats and their default values:
`name`
: the output format identifier. This is used to define what output format(s) you want for your pages.
`mediaType`
: this must match the `Type` of a defined media type.
`path`
: sub path to save the output files.
`baseName`
: the base filename for the list filenames (homepage, etc.). **Default:** `index`.
`rel`
: can be used to create `rel` values in `link` tags. **Default:** `alternate`.
`protocol`
: will replace the "http://" or "https://" in your `baseURL` for this output format.
`isPlainText`
: use Go's plain text templates parser for the templates. **Default:** `false`.
`isHTML`
: used in situations only relevant for `HTML`-type formats; e.g., page aliases.
`noUgly`
: used to turn off ugly URLs If `uglyURLs` is set to `true` in your site. **Default:** `false`.
`notAlternative`
: enable if it doesn't make sense to include this format in an `AlternativeOutputFormats` format listing on `Page` (e.g., with `CSS`). Note that we use the term *alternative* and not *alternate* here, as it does not necessarily replace the other format. **Default:** `false`.
## Output Formats for Pages
A `Page` in Hugo can be rendered to multiple representations on the file system. By default, all pages will render as `HTML` with some of them also as `RSS` (homepage, sections, etc.).
This can be changed by defining an `outputs` list of output formats in either the `Page` front matter or in the site configuration (either for all sites or per language).
Example from site `config.toml`:
```
[outputs]
home = ["HTML", "AMP", "RSS"]
page = ["HTML"]
```
Example from site `config.yml`:
```
outputs:
home: ["HTML", "AMP", "RSS"]
page: ["HTML"]
```
* The output definition is per `Page` `Kind` (i.e, `page`, `home`, `section`, `taxonomy`, or `taxonomyTerm`).
* The names used must match the `Name` of a defined `Output Format`.
* Any `Kind` without a definition will default to `HTML`.
* These can be overridden per `Page` in the front matter of content files.
* Output formats are case insensitive.
The following is an example of `YAML` front matter in a content file that defines output formats for the rendered `Page`:
```yaml
---
date: "2016-03-19"
outputs:
- html
- amp
- json
---
```
## Link to Output Formats
Each `Page` has both an `.OutputFormats` (all formats, including the current) and an `.AlternativeOutputFormats` variable, the latter of which is useful for creating a `link rel` list in your site's `<head>`:
```html
{{ range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end -}}
```
Note that `.Permalink` and `.RelPermalink` on `Page` will return the first output format defined for that page (usually `HTML` if nothing else is defined).
This is how you link to a given output format:
```html
{{ with .OutputFormats.Get "json" -}}
<a href="{{ .Permalink }}">{{ .Name }}</a>
{{- end }}
```
From content files, you can use the [`ref` or `relref` shortcodes](/content-management/shortcodes/#ref-and-relref):
```html
[Neat]({{</* ref "blog/neat.md" "amp" */>}})
[Who]({{</* relref "about.md#who" "amp" */>}})
```
## Templates for Your Output Formats
A new output format needs a corresponding template in order to render anything useful.
{{% note %}}
The key distinction for Hugo versions 0.20 and newer is that Hugo looks at an output format's `Name` and MediaType's `Suffix` when choosing the template used to render a given `Page`.
{{% /note %}}
The following table shows examples of different output formats, the suffix used, and Hugo's respective template [lookup order][]. All of the examples in the table can:
* Use a [base template][base].
* Include [partial templates][partials]
{{< datatable "output" "layouts" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
Hugo will now also detect the media type and output format of partials, if possible, and use that information to decide if the partial should be parsed as a plain text template or not.
Hugo will look for the name given, so you can name it whatever you want. But if you want it treated as plain text, you should use the file suffix and, if needed, the name of the Output Format. The pattern is as follows:
```
[partial name].[OutputFormat].[suffix]
```
The partial below is a plain text template (Outpuf Format is `CSV`, and since this is the only output format with the suffix `csv`, we don't need to include the Output Format's `Name`):
```
{{ partial "mytextpartial.csv" . }}
```
[base]: /templates/base/
[config]: /getting-started/configuration/
[lookup order]: /templates/lookup/
[media type]: https://en.wikipedia.org/wiki/Media_type
[partials]: /templates/partials/