mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
00c4484c70
32cb8785e Fix page weights in content management section (#1896) 11977b96f Make relURL and related functions consistent (#1895) f12180207 Clarify github deployment (#1894) 958877789 Remove remaining references to Highlight.js (#1893) fc487d263 Minor edit to taxonomy page 3b6a224b2 Update theme b28553b62 Change "flavor" to "edition" when referring to builds (#1892) 660e7581c Replaced sudo in OpenBSD with doas (#1891) e3fcdea10 fix a few minor grammatical issues on Firebase docs (#1889) e4c8b30eb update Static Web Apps docs (#1890) da2197c9e Update hosting-on-firebase.md (#1347) 5f2a0c271 Adding deployment guide for Azure Static Web Apps (#1456) 5aaf570cd add Azure Static Web App config to 404 template 35fc54362 add Azure Static Web App config to 404 template d48f67ba1 Update 01-flavors.md 11debae8d Cleaned Use of ref and relref section, added refs of index.md and _in… (#1744) b77604078 docs: Add link to menu entry variables (#1827) 0fa8a6bf0 Misc copy edits (#1887) c27b545ac Improve explanation of safeHTMLAttr's function (#1503) b04a4b32e Make CLI command summaries meaningful (#1886) dbf00a81f Fix a typo in diagrams documentation (#1885) 11f884327 docs: Clarify how to remove draft/future/expired content (#1831) 6dc9e9860 Improve complement function (#1884) 56448a51a Remove erroneous sourcemap desc (#1883) a0d0d2829 Merge branch 'divinerites-patch-1' 10f20cb5e Add a plausible-hugo theme component 9f1413eb5 Minor edits to showcase example 7d78420db fix broken link to Isso Comments 925cb291f Make directory tree consistent with other examples 300fff092 Add link to security policy from getenv.md (#1746) 7b4c517a6 Fix docs menu weights ce35775e0 Update faq.md (#1763) f3fb791a4 Remove dated new-in flags (#1879) b6c634629 Remove deprecated templating langs (#1880) 1b25ca34f Update the findRE and replaceRE functions (#1881) 28757ec73 Add Alora Labs website to showcase (#1494) e3c4bc4e7 Remove unimplemented "ugly" property 86afd84ff Update editors.md (#1878) 44c093911 Add urlquery function docs (#1633) 16a8c3548 Update links to installation page (#1876) 9e357f078 Add missing sections to BSD installation page (#1875) 1b1291634 Promote "Installation" to a section 9dd51235b Add detail to description of .Plain page variable (#1870) d333d0287 Minor markdown linting fix and URL updates (#1873) d57c8aa50 Remove extraneous apostrophe (#1871) 8c25cfc5c Update index.md 09fea41e0 Add lang to fenced code block 35b904798 Add small documentation about .Site.Social.twitter variable (#1854) 672042f89 Consolidate site configuration dfd4dd873 Add help.ampio.com showcase. (#1863) e8d0e7bdf Include link to internal templates code (#1794) 7db6f0c01 Add example to split function (#1867) be87dba80 Clarify split function docs (#1792) a079193f1 Fix typo on data templates page b234c70ee Fix data templates page (#1855) 074232b45 Update front-matter.md (#1856) 711c8fa80 Added missing default value (#1862) 034762882 Fixed some grammar issues and typos (#1865) 764574a4d Fix spelling error 2698f2d44 update URLs to prevent redirects (#1864) 68f05fdc8 Fenced code blocks should have a language specified (#1861) 24393315b GitHub Workflows security hardening (#1859) 3eeee13bf Markdown formatting: Add Fenced code block languages (#1858) e152cdf1f netlify: Hugo 0.105.0 4c7fc9f7e Merge branch 'tempv0.105.0' d16710afc Change anchor reference to use relref function calls (#1853) f52af8e4a tpl/encoding: Add noHTMLEscape option to jsonify eca0046c4 Update hosting-on-keycdn docs (#1852) ffbe17a48 Add note for rsync deploy command (#1415) c482133f1 docs: Update quick start to clarify the need of extended version (#1828) 1e3b33804 use correct URL for Google Search console verification (#1851) dac034f63 Markdown and formatting fixes (#1850) 43f177e3c Fix LiveReload in quick-start (#1739) f78deaa5f Add link for ''Hugo Shortcode Syntax Highlighting' VS Code extension (#1765) 08087ecd7 Remove some hidden pages (#1848) b6cb5ae48 Markdown linting fixes (#1846) 527ec5941 Update hugo.md (#1742) 83e8f2168 Clarify that a shortcode with .Inner must be closed (#1785) 4193f4445 Add Super Linter GitHub Action (#1845) fd91bfe1a Formatting and grammar fixes (#1844) ab5a49c49 Create codeql-analysis GitHub Action (#1812) 63b3e082e Add tutorial on using fusejs to search examples (#1756) 54c253ab0 Note that Google Universal Analytics are deprecated (#1770) 385fa77c6 Update articles.toml (#1840) 5e336bd26 Replace awkward wording (ESL?) (#1842) 2446ad349 Added Introduction to Hugo tutorial/video series (#1736) 7b21b2e76 Don't use self-closing generator tag ef73712ff Image processing. available methods: add method 'Colors' (#1837) 018f83bbe [comment platform] - add new alternative (#1751) 5636c208b Grammar and spelling fixes (#1836) 3f2e26f77 Change link of repojacking vulnerable link - JekyllToHugo (#1834) 301379fc3 fix: use shorter image URL to make it easier to read (#1835) de5fa7b30 Update search.md to include Pagefind (#1826) e9d72bcda Breadcrumb example: add basic accessibility (#1832) 6cffff87a netlify: Hugo 0.104.3 892360f61 Update output-formats.md 09a7a46ae Remove my defunct and little used migrator (#1824) 347434cca netlify: Hugo 0.104.2 f8c721162 Update postcss.md c2baf7155 netlify: Hugo 0.104.1 05d1192cd Update diagrams.md (#1823) 3c43a8bbe netlify: Hugo 0.104.0 57973b334 Merge branch 'tempv0.104.0' da775a36d docs: Regen docs helper ae48b5901 docs: Regenerate CLI docs af4a823b1 resources/images: Add $image.Colors 8e3f9ca64 Remove outdated IE conditional comments example (#1821) d1a84701b fix typo in template introduction (#1820) c0c7339e0 Update internal.md 17aefc515 Remove the recommendation about where to put the GA tempalte 263297236 Adjust GA template instructions 1cc265d99 Update the GA template usage section e11968338 config/security: Allow proxy variables in subcommands 9218ab993 netlify: Hugo 0.103.1 0b0e890d1 Update markdownify and RenderString documentation (#1818) 50f5d4776 Fix internal link (#1817) 6beb443c5 netlify: Hugo 0.103.0 14b5af248 Merge branch 'tempv0.103.0' 548e7aa62 server: Add 404 support 3a20aa0ba Update theme git-subtree-dir: docs git-subtree-split: 32cb8785ea74d5b82f2e2bea79d059cab497902a
257 lines
9.9 KiB
Markdown
257 lines
9.9 KiB
Markdown
---
|
|
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: 2019-12-11
|
|
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" "suffixes" >}}
|
|
|
|
**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`.
|
|
- `Suffixes` are the values 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.
|
|
|
|
{{< code-toggle file="config" >}}
|
|
[mediaTypes]
|
|
[mediaTypes."text/enriched"]
|
|
suffixes = ["enr"]
|
|
[mediaTypes."text/html"]
|
|
suffixes = ["asp"]
|
|
{{</ code-toggle >}}
|
|
|
|
The above example adds one new media type, `text/enriched`, and changes the suffix for the built-in `text/html` media type.
|
|
|
|
**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`:
|
|
|
|
```toml
|
|
[mediaTypes]
|
|
[mediaTypes."text/html"]
|
|
suffixes = ["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 Format Definitions
|
|
|
|
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" "permalinkable" >}}
|
|
|
|
- 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.
|
|
|
|
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.
|
|
|
|
{{< code-toggle file="config" >}}
|
|
[outputFormats.MyEnrichedFormat]
|
|
mediaType = "text/enriched"
|
|
baseName = "myindex"
|
|
isPlainText = true
|
|
protocol = "bep://"
|
|
{{</ code-toggle >}}
|
|
|
|
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. **Default:** `false`.
|
|
|
|
`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`.
|
|
|
|
`permalinkable`
|
|
: 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`.
|
|
|
|
`weight`
|
|
: Setting this to a non-zero value will be used as the first sort criteria.
|
|
|
|
## Output Formats for Pages
|
|
|
|
A `Page` in Hugo can be rendered to multiple _output formats_ on the file
|
|
system.
|
|
|
|
### Default Output Formats
|
|
|
|
Every `Page` has a [`Kind`][page_kinds] attribute, and the default Output
|
|
Formats are set based on that.
|
|
|
|
| Kind | Default Output Formats |
|
|
| ---------- | ---------------------- |
|
|
| `page` | HTML |
|
|
| `home` | HTML, RSS |
|
|
| `section` | HTML, RSS |
|
|
| `taxonomy` | HTML, RSS |
|
|
| `term` | HTML, RSS |
|
|
|
|
### Customizing Output Formats
|
|
|
|
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 file:
|
|
|
|
{{< code-toggle file="config" >}}
|
|
[outputs]
|
|
home = ["HTML", "AMP", "RSS"]
|
|
page = ["HTML"]
|
|
{{</ code-toggle >}}
|
|
|
|
Note that in the above examples, the _output formats_ for `section`,
|
|
`taxonomy` and `term` will stay at their default value `["HTML", "RSS"]`.
|
|
|
|
{{% page-kinds %}}
|
|
|
|
* The `outputs` definition is per [`Page` `Kind`][page_kinds] (`page`, `home`, `section`, `taxonomy`, or `term`).
|
|
* The names (e.g. `HTML`, `AMP`) used must match the `Name` of a defined *Output Format*.
|
|
* These names are case insensitive.
|
|
* These can be overridden per `Page` in the front matter of content files.
|
|
|
|
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
|
|
---
|
|
```
|
|
|
|
## List 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>`:
|
|
|
|
```go-html-template
|
|
{{ range .AlternativeOutputFormats -}}
|
|
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
|
|
{{ end -}}
|
|
```
|
|
|
|
## Link to Output Formats
|
|
|
|
`.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.
|
|
|
|
__from `single.json.json`:__
|
|
```go-html-template
|
|
{{ .RelPermalink }} > /that-page/
|
|
{{ with .OutputFormats.Get "json" -}}
|
|
{{ .RelPermalink }} > /that-page/index.json
|
|
{{- end }}
|
|
```
|
|
|
|
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.
|
|
|
|
**Same template file as above with json output format's `permalinkable` set to true:**
|
|
|
|
```go-html-template
|
|
{{ .RelPermalink }} > /that-page/index.json
|
|
{{ with .OutputFormats.Get "html" -}}
|
|
{{ .RelPermalink }} > /that-page/
|
|
{{- end }}
|
|
```
|
|
|
|
From content files, you can use the [`ref` or `relref` shortcodes](/content-management/shortcodes/#ref-and-relref):
|
|
|
|
```go-html-template
|
|
[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 `Suffixes` 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 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:
|
|
|
|
```go-html-template
|
|
[partial name].[OutputFormat].[suffix]
|
|
```
|
|
|
|
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`):
|
|
|
|
```go-html-template
|
|
{{ 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/
|
|
[page_kinds]: /templates/section-templates/#page-kinds
|