output-formats.md (10471B)
1 ---
2 title: Custom Output Formats
3 linktitle: Custom Output Formats
4 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.
5 date: 2017-03-22
6 publishdate: 2017-03-22
7 lastmod: 2019-12-11
8 categories: [templates]
9 keywords: ["amp","outputs","rss"]
10 menu:
11 docs:
12 parent: "templates"
13 weight: 18
14 weight: 18
15 sections_weight: 18
16 draft: false
17 aliases: [/templates/outputs/,/extras/output-formats/,/content-management/custom-outputs/]
18 toc: true
19 ---
20
21 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.
22
23 ## Media Types
24
25 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.
26
27 This is the full set of built-in media types in Hugo:
28
29 {{< datatable "media" "types" "type" "suffixes" >}}
30
31 **Note:**
32
33 * 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`.
34 * `Suffixes` are the values that will be used for URLs and filenames for that media type in Hugo.
35 * The `Type` is the identifier that must be used when defining new/custom `Output Formats` (see below).
36 * 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.
37
38 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.
39
40 {{< code-toggle file="config" >}}
41 [mediaTypes]
42 [mediaTypes."text/enriched"]
43 suffixes = ["enr"]
44 [mediaTypes."text/html"]
45 suffixes = ["asp"]
46 {{</ code-toggle >}}
47
48 The above example adds one new media type, `text/enriched`, and changes the suffix for the built-in `text/html` media type.
49
50 **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 media type. So, if you want to change the suffix of the `HTML` output format from `html` (default) to `htm`:
51
52 ```toml
53 [mediaTypes]
54 [mediaTypes."text/html"]
55 suffixes = ["htm"]
56
57 # Redefine HTML to update its media type.
58 [outputFormats]
59 [outputFormats.HTML]
60 mediaType = "text/html"
61 ```
62
63 **Note** that for the above to work, you also need to add an `outputs` definition in your site config.
64
65 ## Output Format Definitions
66
67 Given a media type and some additional configuration, you get an **Output Format**.
68
69 This is the full set of Hugo's built-in output formats:
70
71 {{< datatable "output" "formats" "name" "mediaType" "path" "baseName" "rel" "protocol" "isPlainText" "isHTML" "noUgly" "permalinkable" >}}
72
73 * 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`.
74 * The `MediaType` must match the `Type` of an already defined media type.
75 * 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.
76
77 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.
78
79 {{< code-toggle file="config" >}}
80 [outputFormats.MyEnrichedFormat]
81 mediaType = "text/enriched"
82 baseName = "myindex"
83 isPlainText = true
84 protocol = "bep://"
85 {{</ code-toggle >}}
86
87 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`.
88
89 ### Configure Output Formats
90
91 The following is the full list of configuration options for output formats and their default values:
92
93 `name`
94 : the output format identifier. This is used to define what output format(s) you want for your pages.
95
96 `mediaType`
97 : this must match the `Type` of a defined media type.
98
99 `path`
100 : sub path to save the output files.
101
102 `baseName`
103 : the base filename for the list filenames (homepage, etc.). **Default:** `index`.
104
105 `rel`
106 : can be used to create `rel` values in `link` tags. **Default:** `alternate`.
107
108 `protocol`
109 : will replace the "http://" or "https://" in your `baseURL` for this output format.
110
111 `isPlainText`
112 : use Go's plain text templates parser for the templates. **Default:** `false`.
113
114 `isHTML`
115 : used in situations only relevant for `HTML`-type formats; e.g., page aliases. **Default:** `false`.
116
117 `noUgly`
118 : used to turn off ugly URLs If `uglyURLs` is set to `true` in your site. **Default:** `false`.
119
120 `notAlternative`
121 : 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`.
122
123 `permalinkable`
124 : make `.Permalink` and `.RelPermalink` return the rendering Output Format rather than main ([see below](#link-to-output-formats)). This is enabled by default for `HTML` and `AMP`. **Default:** `false`.
125
126 `weight`
127 : Setting this to a non-zero value will be used as the first sort criteria.
128
129 ## Output Formats for Pages
130
131 A `Page` in Hugo can be rendered to multiple *output formats* on the file
132 system.
133
134 ### Default Output Formats
135 Every `Page` has a [`Kind`][page_kinds] attribute, and the default Output
136 Formats are set based on that.
137
138 | Kind | Default Output Formats |
139 |--------------- |----------------------- |
140 | `page` | HTML |
141 | `home` | HTML, RSS |
142 | `section` | HTML, RSS |
143 | `taxonomy` | HTML, RSS |
144 | `term` | HTML, RSS |
145
146 ### Customizing Output Formats
147
148 This can be changed by defining an `outputs` list of output formats in either
149 the `Page` front matter or in the site configuration (either for all sites or
150 per language).
151
152 Example from site config file:
153
154 {{< code-toggle file="config" >}}
155 [outputs]
156 home = ["HTML", "AMP", "RSS"]
157 page = ["HTML"]
158 {{</ code-toggle >}}
159
160
161 Note that in the above examples, the *output formats* for `section`,
162 `taxonomy` and `term` will stay at their default value `["HTML",
163 "RSS"]`.
164
165 {{< new-in "0.73.0" >}} We have fixed the before confusing page kinds used for taxonomies (see the listing below) to be in line with the terms used when we talk about taxonomies. We have been careful to avoid site breakage, and you should get an ERROR in the console if you need to adjust your `outputs` section.
166
167 {{% page-kinds %}}
168
169 * The `outputs` definition is per [`Page` `Kind`][page_kinds] (`page`, `home`, `section`, `taxonomy`, or `term`).
170 * The names (e.g. `HTML`, `AMP`) used must match the `Name` of a defined *Output Format*.
171 * These names are case insensitive.
172 * These can be overridden per `Page` in the front matter of content files.
173
174 The following is an example of `YAML` front matter in a content file that defines output formats for the rendered `Page`:
175
176 ```yaml
177 ---
178 date: "2016-03-19"
179 outputs:
180 - html
181 - amp
182 - json
183 ---
184 ```
185
186 ## List Output formats
187
188 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>`:
189
190 ```go-html-template
191 {{ range .AlternativeOutputFormats -}}
192 <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
193 {{ end -}}
194 ```
195
196 ## Link to Output Formats
197
198 `.Permalink` and `.RelPermalink` on `Page` will return the first output format defined for that page (usually `HTML` if nothing else is defined). This is regardless of the template file they are being called from.
199
200 __from `single.json.json`:__
201 ```go-html-template
202 {{ .RelPermalink }} > /that-page/
203 {{ with .OutputFormats.Get "json" -}}
204 {{ .RelPermalink }} > /that-page/index.json
205 {{- end }}
206 ```
207
208 In order for them to return the output format of the current template file instead, the given output format should have its `permalinkable` setting set to true.
209
210 __Same template file as above with json output format's `permalinkable` set to true:__
211
212 ```go-html-template
213 {{ .RelPermalink }} > /that-page/index.json
214 {{ with .OutputFormats.Get "html" -}}
215 {{ .RelPermalink }} > /that-page/
216 {{- end }}
217 ```
218
219 From content files, you can use the [`ref` or `relref` shortcodes](/content-management/shortcodes/#ref-and-relref):
220
221 ```go-html-template
222 [Neat]({{</* ref "blog/neat.md" "amp" */>}})
223 [Who]({{</* relref "about.md#who" "amp" */>}})
224 ```
225
226 ## Templates for Your Output Formats
227
228 A new output format needs a corresponding template in order to render anything useful.
229
230 {{% note %}}
231 The key distinction for Hugo versions 0.20 and newer is that Hugo looks at an output format's `Name` and MediaType's `Suffixes` when choosing the template used to render a given `Page`.
232 {{% /note %}}
233
234 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:
235
236 * Use a [base template][base].
237 * Include [partial templates][partials]
238
239 {{< datatable "output" "layouts" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
240
241 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.
242
243 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:
244
245 ```
246 [partial name].[OutputFormat].[suffix]
247 ```
248
249 The partial below is a plain text template (Output 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`):
250
251 ```
252 {{ partial "mytextpartial.csv" . }}
253 ```
254
255 [base]: /templates/base/
256 [config]: /getting-started/configuration/
257 [lookup order]: /templates/lookup/
258 [media type]: https://en.wikipedia.org/wiki/Media_type
259 [partials]: /templates/partials/
260 [page_kinds]: /templates/section-templates/#page-kinds