Add datatable shortcodes and custom outputs draft

Closes rdwatters/hugo-docs-concept#77
This commit is contained in:
Ryan Watters committed 2017-04-07 15:19:28 -05:00
1 parent f9df1ed657
commit bd40c73f29
6 files changed
+463 -149

No files matched your search

+183
View File
@@ -0,0 +1,183 @@
---
title: Custom Outputs
linktitle: Custom Outputs
description: Hugo can output content in multiple formats to make quick work of
date: 2017-03-22
publishdate: 2017-03-22
lastmod: 2017-03-22
categories: [content management]
tags: ["amp","outputs"]
menu:
main:
parent: "Content Management"
weight: 100
weight: 100 #rem
draft: false
aliases: [/extras/output-formats/,/doc/output-formats/,/doc/custom-output/]
toc: true
wip: true
---
Hugo `0.20` introduced the powerful feature **Custom Output Formats**; Hugo isn't just that "static HTML with an added RSS feed" anymore. _Say hello_ to calendars, e-book formats, Google AMP, and JSON search indexes, to name a few.
This page describes how to properly configure your site with the media types and output formats you need.
## Media Types
A [media type](https://en.wikipedia.org/wiki/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 (if you, say, want to change the suffix to `asp` for `text/html`).
* 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 `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 config (either for all sites or for a given language).
Example in `config.toml`:
```toml
[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.
## Output Formats
Given a media type and some additional configuration, you get an `Output Format`.
This is the full set of built-in output formats in Hugo:
{{< datatable "output" "formats" "Name" "MediaType" "Path" "BaseName" "Rel" "Protocol" "IsPlainText" "IsHTML" "NoUgly">}}
**Note:**
* 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 table above, the best example of this is `AMP` vs. `HTML`: We have given `AMP` a value for `Path` so it doesn't overwrite the `HTML` version, i.e. we can now have both `/index.html` and `/amp/index.html`.
* The `MediaType` must match the `Type` of an already defined media type (see above).
* You can define new or redefine built-in output formats (if you, as an example, want to put `AMP` pages in a different path).
To add or modify a media type, define it in a `outputFormats` section in your site config (either for all sites or for a given language).
Example in `config.toml`:
```toml
[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` `http://example.org`, it will produce a plain text homepage with the URL `bep://example.org/myindex.enr`.
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`.
## Output Formats for your pages
A `Page` in Hugo can be rendered to multiple representations on the file system: In its default configuration all will get an `HTML` page and some of them will get an `RSS` page (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`:
```toml
[outputs]
home = ["HTML", "AMP", "RSS"]
page = ["HTML"]
```
Example from site `config.yml`:
```yml
outputs:
home: ["HTML", "AMP", "RSS"]
page: ["HTML"]
```
{{% note %}}
* 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.
{{% /note %}}
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
---
```
## Templates for Your Output Formats
A new output format needs 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 we choose the templates to use to render a given `Page`.**
{{% /note %}}
And with so many possible variations, this is best explained with some examples:
{{< datatable "output" "layouts" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
**Note**
* All of the above examples can use a [base template][base].
* All of the above examples can also include partials.
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 (`[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" . }}
```
Also note that plain text partials can currently only be included in plain text templates, and vice versa. See [this issue](https://github.com/spf13/hugo/issues/3273) for some background.
[base]: /templates/base/
@@ -1,146 +0,0 @@
---
title: Custom Outputs
linktitle: Custom Outputs
description: Hugo can output content in multiple formats to make quick work of
date: 2017-03-22
publishdate: 2017-03-22
lastmod: 2017-03-22
categories: [content management]
tags: ["amp","outputs"]
menu:
main:
parent: "Content Management"
weight: 100
weight: 100 #rem
draft: false
aliases: [/extras/custom-output-types/]
toc: true
wip: true
---
{{% warning %}}
Custom output formats is a major feature being released with v20. The following copy is taken from the original proposal and spec and is therefore far from complete.
{{% /warning %}}
## Media Type
We add a media type (also known as MIME type and content type). This is a two-part identifier for file formats and format contents transmitted on the Internet.
For Hugo's use cases, we use the top-level type name/subtype name + suffix. An example would be `application/json+json`.
Users can define their own media types by using them in an `Output Format` definition (see below).
The full set of media types will be registered in Go's `mime` package, so they will be recognised by Hugo's development server.
## Output Format
A `Page` in Hugo can be rendered to multiple representations on the file system: All will get an HTML page and some of them will get an RSS page (home page, sections etc.).
When we now create a more formal definition for these output representations, the built-ins mentioned above will be the standard set that can be extended.
So an `OutputFormat`:
```
OutputFormat:
Name
MediaType
Path
IsPlainText (default false)
Protocol
# And then some optional options
NoUglyURLs
URI # Turn index.x into somevalue.x (similar to `RSSUri` in Hugo `0.19`)
```
So:
* `Name`: The key.
* `Path` - defaults to "", which is the root. Multiple outputs to the same suffix must be separated with a path, ie. "amp" for AMP output.
* `IsPlainText`: Whether to parse the templates with `text/template` or `html/template`.
* `Protocol`: I.e. `webcal://` for calendar files. Defaults to the `baseURL` protocol.
## Standard Output Formats
So, according to the above, the current Hugo will look like this:
| Name | MediaType | Path | IsPlainText
| -------------:|-------------| -----|-----|
| HTML | text/html+html | "" | false |
| RSS | application/rss+xml | "" | false |
## Layouts
The current situation (slightly simplified):
| Kind | Layouts
| ----------------:|:-------------|
| home | index.html, _default/list.html |
| section | section/SECTION.html, SECTION/list.html, _default/section.html, _default/list.html |
| taxonomy | taxonomy/SINGULAR.html,_default/taxonomy.html, _default/list.html |
| taxonomyTerm |taxonomy/SINGULAR.terms.html, _default/terms.html|
| page | TYPE/LAYOUT.html, _default/LAYOUT.html, _default/single.html|
The above is what the Output Format `HTML` must resolve to.
So, let us make up some other Output Formats and see how that will have to look:
| Name | MediaType | Path | IsPlainText
| -------------:|-------------| -----|-----|
| JSON | application/json+json | "" | true |
| AMP | text/html+html | amp | false |
Both of the above can be handled if we add both `Name` and the `Suffix` to the mix. Let us use the home page as an example:
| Type | Layouts
| -----------:|:-------------|
| JSON | index.json.json, index.json, _default/list.json.json, _default/list.json
| AMP | index.amp.html, index.html, _default/list.amp.html, _default/list.html
* The above adds the lower-case `Name` as a prefix to the lookup path.
* The above also assumes that it makes sense to edit the templates with the same suffix as the end result (.html, .json etc.).
TODO: RSS, 404 etc.
## Examples
`config.toml`:
```
# Add some custom output type definitions:
[[outputFormats]]
name = "Calendar"
mediaType = "text/calendar+ics"
protocol = "webcal://"
isPlainText = true
[[outputFormats]]
name = "JSON"
mediaType = "application/json" # Will get its file suffix from the sub-type, i.e. "json"
isPlainText = true
[[outputFormats]]
name = "AMP"
mediaType = "text/html"
path = "amp"
```
Note that Hugo well hard code a predefined list of the most common output types (not sure what that would be, suggestions welcome) with the obvious identifiers and sensible defaults: So whenever you want them, you can just say "json, yaml, amp ..." etc.
Page front matter:
```
title = "My Home Page"
outputs = ["html", "rss", "json", "calendar", "amp" ]
```
About the `outputs` in the page front matter:
* If none is provided, it defaults to the current behaviour (i.e. HTML for all pages and RSS for the list pages)
* If some are provided, no defaults will be added. So, if you want the plain HTML representation, you must be explicit. This way you can have the home page as JSON only if you want.
* The names used are case-insensitive and must match either a definition in `config.toml` or the standard set.
{{% note %}}
It should also be possible to set a list of default output formats in `config.toml`, avoiding the need to repeat the `outputs` list in thousands of pages, with a way to restrict each type to a set of pages (using `Kind`, probably).
{{% /note %}}
+227
View File
@@ -0,0 +1,227 @@
{
"media": {
"types": [{
"Type": "application/javascript",
"String": "application/javascriptjs",
"MainType": "application",
"SubType": "javascript",
"Suffix": "js"
}, {
"Type": "application/json",
"String": "application/jsonjson",
"MainType": "application",
"SubType": "json",
"Suffix": "json"
}, {
"Type": "application/rss",
"String": "application/rssxml",
"MainType": "application",
"SubType": "rss",
"Suffix": "xml"
}, {
"Type": "application/xml",
"String": "application/xmlxml",
"MainType": "application",
"SubType": "xml",
"Suffix": "xml"
}, {
"Type": "text/calendar",
"String": "text/calendarics",
"MainType": "text",
"SubType": "calendar",
"Suffix": "ics"
}, {
"Type": "text/css",
"String": "text/csscss",
"MainType": "text",
"SubType": "css",
"Suffix": "css"
}, {
"Type": "text/csv",
"String": "text/csvcsv",
"MainType": "text",
"SubType": "csv",
"Suffix": "csv"
}, {
"Type": "text/html",
"String": "text/htmlhtml",
"MainType": "text",
"SubType": "html",
"Suffix": "html"
}, {
"Type": "text/plain",
"String": "text/plaintxt",
"MainType": "text",
"SubType": "plain",
"Suffix": "txt"
}]
},
"output": {
"formats": [{
"MediaType": "text/htmlhtml",
"Name": "AMP",
"Path": "amp",
"BaseName": "index",
"Rel": "amphtml",
"Protocol": "",
"IsPlainText": false,
"IsHTML": true,
"NoUgly": false
}, {
"MediaType": "text/csscss",
"Name": "CSS",
"Path": "",
"BaseName": "styles",
"Rel": "stylesheet",
"Protocol": "",
"IsPlainText": true,
"IsHTML": false,
"NoUgly": false
}, {
"MediaType": "text/csvcsv",
"Name": "CSV",
"Path": "",
"BaseName": "index",
"Rel": "alternate",
"Protocol": "",
"IsPlainText": true,
"IsHTML": false,
"NoUgly": false
}, {
"MediaType": "text/calendarics",
"Name": "Calendar",
"Path": "",
"BaseName": "index",
"Rel": "alternate",
"Protocol": "webcal://",
"IsPlainText": true,
"IsHTML": false,
"NoUgly": false
}, {
"MediaType": "text/htmlhtml",
"Name": "HTML",
"Path": "",
"BaseName": "index",
"Rel": "canonical",
"Protocol": "",
"IsPlainText": false,
"IsHTML": true,
"NoUgly": false
}, {
"MediaType": "application/jsonjson",
"Name": "JSON",
"Path": "",
"BaseName": "index",
"Rel": "alternate",
"Protocol": "",
"IsPlainText": true,
"IsHTML": false,
"NoUgly": false
}, {
"MediaType": "application/rssxml",
"Name": "RSS",
"Path": "",
"BaseName": "index",
"Rel": "alternate",
"Protocol": "",
"IsPlainText": false,
"IsHTML": false,
"NoUgly": true
}],
"layouts": [{
"Example": "AMP home, with theme \"demoTheme\".",
"OutputFormat": "AMP",
"Suffix": "html",
"Template Lookup Order": [
"layouts/index.amp.html",
"layouts/index.html",
"layouts/_default/list.amp.html",
"layouts/_default/list.html",
"demoTheme/layouts/index.amp.html",
"demoTheme/layouts/index.html",
"demoTheme/layouts/_default/list.amp.html",
"demoTheme/layouts/_default/list.html"
]
}, {
"Example": "JSON home, no theme.",
"OutputFormat": "JSON",
"Suffix": "json",
"Template Lookup Order": [
"layouts/index.json.json",
"layouts/index.json",
"layouts/_default/list.json.json",
"layouts/_default/list.json"
]
}, {
"Example": "CSV regular, \"layout: demolayout\" in front matter.",
"OutputFormat": "CSV",
"Suffix": "csv",
"Template Lookup Order": [
"layouts/_default/demolayout.csv.csv",
"layouts/_default/demolayout.csv"
]
}, {
"Example": "JSON regular, \"type: demotype\" in front matter.",
"OutputFormat": "CSV",
"Suffix": "csv",
"Template Lookup Order": [
"layouts/demotype/single.csv.csv",
"layouts/demotype/single.csv",
"layouts/_default/single.csv.csv",
"layouts/_default/single.csv"
]
}, {
"Example": "HTML regular.",
"OutputFormat": "HTML",
"Suffix": "html",
"Template Lookup Order": [
"layouts/_default/single.html.html",
"layouts/_default/single.html"
]
}, {
"Example": "AMP regular.",
"OutputFormat": "AMP",
"Suffix": "html",
"Template Lookup Order": [
"layouts/_default/single.amp.html",
"layouts/_default/single.html"
]
}, {
"Example": "Calendar blog section.",
"OutputFormat": "Calendar",
"Suffix": "ics",
"Template Lookup Order": [
"layouts/section/blog.calendar.ics",
"layouts/section/blog.ics",
"layouts/blog/list.calendar.ics",
"layouts/blog/list.ics",
"layouts/_default/section.calendar.ics",
"layouts/_default/section.ics",
"layouts/_default/list.calendar.ics",
"layouts/_default/list.ics"
]
}, {
"Example": "Calendar taxonomy list.",
"OutputFormat": "Calendar",
"Suffix": "ics",
"Template Lookup Order": [
"layouts/taxonomy/tag.calendar.ics",
"layouts/taxonomy/tag.ics",
"layouts/_default/taxonomy.calendar.ics",
"layouts/_default/taxonomy.ics",
"layouts/_default/list.calendar.ics",
"layouts/_default/list.ics"
]
}, {
"Example": "Calendar taxonomy term.",
"OutputFormat": "Calendar",
"Suffix": "ics",
"Template Lookup Order": [
"layouts/taxonomy/tag.terms.calendar.ics",
"layouts/taxonomy/tag.terms.ics",
"layouts/_default/terms.calendar.ics",
"layouts/_default/terms.ics"
]
}]
}
}
@@ -1,9 +1,9 @@
<table class="utils-table"> <table class="utils-table">
<thead> <thead>
<tr> <tr>
<td class="col-title">Title</td> <th class="col-title">Title</td>
<td class="col-author">Author</td> <th class="col-author">Author</td>
<td class="col-date">Date</td> <th class="col-date">Date</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -0,0 +1,25 @@
{{ $package := (index .Params 0) }}
{{ $listname := (index .Params 1) }}
{{ $list := (index (index .Site.Data.docs $package) $listname) }}
{{ $fields := after 2 .Params }}
<table class="utils-table">
<thead>
<tr>
{{ range $fields }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range $list }}
<tr>
{{ range $k, $v := . }}
{{ $.Scratch.Set $k $v }}
{{ end }}
{{ range $fields }}
<td>{{ $.Scratch.Get . }}</td>
{{ end }}
</tr>
{{ end }}
</tbody>
</table>
@@ -0,0 +1,25 @@
{{ $package := (index .Params 0) }}
{{ $listname := (index .Params 1) }}
{{ $list := (index (index .Site.Data.docs $package) $listname) }}
{{ $fields := after 2 .Params }}
<table class="utils-table">
<thead>
<tr>
{{ range $fields }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range $list }}
<tr>
{{ range $k, $v := . }}
{{ $.Scratch.Set $k $v }}
{{ end }}
{{ range $fields }}
<td>{{ $.Scratch.Get . }}</td>
{{ end }}
</tr>
{{ end }}
</tbody>
</table>