--- /dev/null
- hugo serve
+# Hugo Docs
+
+Documentation site for [Hugo](https://github.com/gohugoio/hugo), the very fast and flexible static site generator built with love in GoLang.
+
+## Contributing
+
+We welcome contributions to Hugo of any kind including documentation, suggestions, bug reports, pull requests etc. Also check out our [contribution guide](https://gohugo.io/contribute/documentation/). We would love to hear from you.
+
+Note that this repository contains solely the documentation for Hugo. For contributions that aren't documentation-related please refer to the [hugo](https://github.com/gohugoio/hugo) repository.
+
+*Pull requests shall **only** contain changes to the actual documentation. However, changes on the code base of Hugo **and** the documentation shall be a single, atomic pull request in the [hugo](https://github.com/gohugoio/hugo) repository.*
+
+
+## Build
+
+To view the documentation site locally, you need to clone this repository with submodules:
+
+```bash
+git clone --recursive https://github.com/gohugoio/hugoDocs.git
+```
+
+Or if you already have a clone locally:
+
+```bash
+git submodule update --init
+```
+Also note that the documentation version for a given version of Hugo can also be found in the `/docs` sub-folder of the [Hugo source repository](https://github.com/gohugoio/hugo).
+
+Then to view the docs in your browser, run Hugo and open up the link:
++
+```bash
++▶ hugo server
++
+Started building sites ...
+.
+.
+Serving pages from memory
+Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
+Press Ctrl+C to stop
+```
--- /dev/null
- linktitle: ""
+---
- godocref: ""
- publishdate: ""
- lastmod: ""
++title: "{{ replace .TranslationBaseName "-" " " | title }}"
++date: {{ .Date }}
+description: ""
- tags: []
- weight: 00
+categories: []
++#tags: []
+slug: ""
+aliases: []
+toc: false
++draft: true
+---
--- /dev/null
- title = "Hugo: A Fast and Flexible Website Generator"
+baseURL = "https://gohugo.io/"
+paginate = 100
+defaultContentLanguage = "en"
+enableEmoji = true
+# Set the unicode character used for the "return" link in page footnotes.
+footnotereturnlinkcontents = "↩"
+languageCode = "en-us"
+metaDataFormat = "yaml"
- home = [ "HTML", "RSS", "REDIR" ]
++title = "Hugo"
+theme = "gohugoioTheme"
+
+googleAnalytics = "UA-7131036-4"
+
+pluralizeListTitles = false
+
+# We do redirects via Netlify's _redirects file, generated by Hugo (see "outputs" below).
+disableAliases = true
+
+
+# Highlighting config (Pygments)
+# It is (currently) not in use, but you can do ```go in a content file if you want to.
+pygmentsCodeFences = true
+
+# See https://help.farbox.com/pygments.html
+pygmentsStyle = "friendly"
+
+[outputs]
-
++home = [ "HTML", "RSS", "REDIR", "HEADERS" ]
+section = [ "HTML", "RSS"]
+
+[mediaTypes]
+[mediaTypes."text/netlify"]
+suffix = ""
+delimiter = ""
+
+[outputFormats]
+[outputFormats.REDIR]
+mediatype = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
++[outputFormats.HEADERS]
++mediatype = "text/netlify"
++baseName = "_headers"
++isPlainText = true
++notAlternative = true
+
+[social]
+twitter = "GoHugoIO"
+
+#CUSTOM PARAMS
+[params]
+ description = "The world’s fastest framework for building websites"
+ ## Used for views in rendered HTML (i.e., rather than using the .Hugo variable)
+ release = "Hugo-Next"
+ ## Setting this to true will add a "noindex" to *EVERY* page on the site
+ removefromexternalsearch = false
+ ## Gh repo for site footer (include trailing slash)
+ ghrepo = "https://github.com/gohugoio/hugoDocs/"
+ ### Edit content repo (set to automatically enter "edit" mode; this is good for "improve this page" links)
+ ghdocsrepo = "https://github.com/gohugoio/hugoDocs/tree/master/docs"
+ ## Gitter URL
+ gitter = "https://gitter.im/spf13/hugo"
+ ## Discuss Forum URL
+ forum = "https://discourse.gohugo.io/"
+ ## Google Tag Manager
+ gtmid = ""
+
+ # First one is picked as the Twitter card image if not set on page.
+ images = ["images/gohugoio-card.png"]
+
+ flex_box_interior_classes = "flex-auto w-100 w-40-l mr3 mb3 bg-white ba b--moon-gray nested-copy-line-height"
+
+ #sidebar_direction = "sidebar_left"
+
+# MARKDOWN
+## Configuration for BlackFriday markdown parser: https://github.com/russross/blackfriday
+[blackfriday]
+ plainIDAnchors = true
+ hrefTargetBlank = true
+ angledQuotes = false
+ latexDashes = true
+
+## As of v0.20, all content files include a default "categories" value that's the same as the section. This was a cheap future-proofing method and should/could be changed accordingly.
+[taxonomies]
+ category = "categories"
+
+# High level items
+
+[[menu.docs]]
+ name = "About Hugo"
+ weight = 1
+ identifier = "about"
+ url = "/about/"
+
+[[menu.docs]]
+ name = "Getting Started"
+ weight = 5
+ identifier = "getting-started"
+ url = "/getting-started/"
+
+
+[[menu.docs]]
+ name = "Themes"
+ weight = 15
+ identifier = "themes"
+ post = "break"
+ url = "/themes/"
+
+# Core Menus
+
+[[menu.docs]]
+ name = "Content Management"
+ weight = 20
+ identifier = "content-management"
+ post = "expanded"
+ url = "/content-management/"
+
+[[menu.docs]]
+ name = "Templates"
+ weight = 25
+ identifier = "templates"
+
+ url = "/templates/"
+
+[[menu.docs]]
+ name = "Functions"
+ weight = 30
+ identifier = "functions"
+ url = "/functions/"
+
+[[menu.docs]]
+ name = "Variables"
+ weight = 35
+ identifier = "variables"
+ url = "/variables/"
+
+[[menu.docs]]
+ name = "CLI"
+ weight = 40
+ post = "break"
+ identifier = "commands"
+ url = "/commands/"
+
+
+
+# LOW LEVEL ITEMS
+
+
+[[menu.docs]]
+ name = "Troubleshooting"
+ weight = 60
+ identifier = "troubleshooting"
+ url = "/troubleshooting/"
+
+[[menu.docs]]
+ name = "Tools"
+ weight = 70
+ identifier = "tools"
+ url = "/tools/"
+
+[[menu.docs]]
+ name = "Hosting & Deployment"
+ weight = 80
+ identifier = "hosting-and-deployment"
+ url = "/hosting-and-deployment/"
+
+[[menu.docs]]
+ name = "Contribute"
+ weight = 100
+ post = "break"
+ identifier = "contribute"
+ url = "/contribute/"
+
+#[[menu.docs]]
+# name = "Tags"
+# weight = 120
+# identifier = "tags"
+# url = "/tags/"
+
+
+# [[menu.docs]]
+# name = "Categories"
+# weight = 140
+# identifier = "categories"
+# url = "/categories/"
+
+######## QUICKLINKS
+
+ [[menu.quicklinks]]
+ name = "Fundamentals"
+ weight = 1
+ identifier = "fundamentals"
+ url = "/tags/fundamentals/"
+
+
+
+
+######## GLOBAL ITEMS TO BE SHARED WITH THE HUGO SITES
+
+[[menu.global]]
+ name = "News"
+ weight = 1
+ identifier = "news"
+ url = "/news/"
+
+ [[menu.global]]
+ name = "Docs"
+ weight = 5
+ identifier = "docs"
+ url = "/documentation/"
+
+ [[menu.global]]
+ name = "Themes"
+ weight = 10
+ identifier = "themes"
+ url = "https://themes.gohugo.io/"
+
+ # Anything with a weight > 100 gets an external icon
+ [[menu.global]]
+ name = "Community"
+ weight = 150
+ icon = true
+ identifier = "community"
+ post = "external"
+ url = "https://discourse.gohugo.io/"
+
+
+ [[menu.global]]
+ name = "GitHub"
+ weight = 200
+ identifier = "github"
+ post = "external"
+ url = "https://github.com/gohugoio/hugo"
--- /dev/null
- title: "Hugo: A Fast and Flexible Website Generator"
+---
++title: "A Fast and Flexible Website Generator"
+date: 2017-03-02T12:00:00-05:00
+features:
+ - heading: Blistering Speed
+ image_path: /images/icon-fast.svg
+ tagline: What's modern about waiting for your site to build?
+ copy: Hugo is the fastest tool of its kind. At <1 ms per page, the average site builds in less than a second.
+
+ - heading: Robust Content Management
+ image_path: /images/icon-content-management.svg
+ tagline: Flexibility rules. Hugo is a content strategist's dream.
+ copy: Hugo supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins.
+
+ - heading: Shortcodes
+ image_path: /images/icon-shortcodes.svg
+ tagline: Hugo's shortcodes are Markdown's hidden superpower.
+ copy: We love the beautiful simplicity of markdown’s syntax, but there are times when we want more flexibility. Hugo shortcodes allow for both beauty and flexibility.
+
+ - heading: Built-in Templates
+ image_path: /images/icon-built-in-templates.svg
+ tagline: Hugo has common patterns to get your work done quickly.
+ copy: Hugo ships with pre-made templates to make quick work of SEO, commenting, analytics and other functions. One line of code, and you're done.
+
+ - heading: Multilingual and i18n
+ image_path: /images/icon-multilingual2.svg
+ tagline: Polyglot baked in.
+ copy: Hugo provides full i18n support for multi-language sites with the same straightforward development experience Hugo users love in single-language sites.
+
+ - heading: Custom Outputs
+ image_path: /images/icon-custom-outputs.svg
+ tagline: HTML not enough?
+ copy: Hugo allows you to output your content in multiple formats, including JSON or AMP, and makes it easy to create your own.
+sections:
+ - heading: "100s of Themes"
+ cta: Check out the Hugo's themes.
+ link: http://themes.gohugo.io/
+ color_classes: bg-accent-color white
+ image: /images/homepage-screenshot-hugo-themes.jpg
+ copy: "Hugo provides a robust theming system that is easy to implement but capable of producing even the most complicated websites."
+ - heading: "Capable Templating"
+ cta: Get Started.
+ link: templates/
+ color_classes: bg-primary-color-light black
+ image: /images/home-page-templating-example.png
+ copy: "Hugo's Go-based templating provides just the right amount of logic to build anything from the simple to complex. If you prefer Jade/Pug-like syntax, you can also use Amber, Ace, or any combination of the three."
+---
+
+Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
--- /dev/null
- [related forum thread]: https://disourse.gohugo.io/t/web-based-editor/155
+---
+title: Roadmap
+linktitle: Roadmap
+description: Take a look at what's in the pipeline for future versions of the Hugo project.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [about hugo]
+#tags: [about,contribute,roadmap]
+menu:
+ docs:
+ parent: "about"
+ weight: 50
+weight: 50
+sections_weight: 50
+draft: false
+aliases: [/meta/roadmap]
+toc: false
+---
+
+To track Hugo's progress, see our [GitHub Milestones][milestones].
+
+In no particular order, here are some other features currently being worked on:
+
+* Even easier deployment to S3, SSH, GitHub, rsync. Give the [hosting and deployment][] section a shot.
+* Import from other website systems. There are already [existing migration tools][migrate], but they don’t cover all major platforms.
+* An interactive web-based editor (See the [related forum thread][])
+* Additional [themes][], which are always ongoing and [contributions are welcome][themescontrib]!
+* Dynamic image resizing via shortcodes ({{< gh 1014 >}})
+* Native support for additional content formats (AsciiDoc {{< gh 1435>}}, reST {{< gh 1436 >}})
+* And, last but not least, [***your*** best ideas!][]
+
+## Contributions Welcome
+
+Feel free to [contribute to Hugo's development][devcontribute], [improve Hugo's documentation][doccontribute], or [open a new issue][newissue] if you have an idea for a new feature.
+
+[#98]: https://github.com/gohugoio/hugo/issues/98
+[#1014]: https://github.com/gohugoio/hugo/issues/1014
+[#1435]: https://github.com/gohugoio/hugo/issues/1435
+[#1436]: https://github.com/gohugoio/hugo/issues/1436
+[devcontribute]: /contribute/development/
+[doccontribute]: /contribute/documentation/
+[hosting and deployment]: /hosting-and-deployment/
+[migrate]: /tools/migrations/
+[milestones]: https://github.com/gohugoio/hugo/milestone/14
+[newissue]: https://github.com/gohugoio/hugo/issues/
++[related forum thread]: https://discourse.gohugo.io/t/web-based-editor/155
+[themes]: /themes/
+[themescontrib]: /contribute/themes/
+[tutorials]: /tutorials
+[***your*** best ideas!]: /contribute/
--- /dev/null
- {{% output file="content/posts/my-first-post.md" %}}
- ```
+---
+title: Archetypes
+linktitle: Archetypes
+description: Archetypes allow you to create new instances of content types and set default parameters from the command line.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+#tags: [archetypes,generators,metadata,front matter]
+categories: ["content management"]
+menu:
+ docs:
+ parent: "content-management"
+ weight: 70
+ quicklinks:
+weight: 70 #rem
+draft: false
+aliases: [/content/archetypes/]
+toc: true
+---
+
+{{% note %}}
+This section is outdated, see https://github.com/gohugoio/hugoDocs/issues/11
+{{% /note %}}
+{{% todo %}}
+See above
+{{% /todo %}}
+
+## What are Archetypes?
+
+**Archetypes** are content files in the [archetypes directory][] of your project that contain preconfigured [front matter][] for your website's [content types][]. Archetypes facilitate consistent metadata across your website content and allow content authors to quickly generate instances of a content type via the `hugo new` command.
+
++{{< youtube S3Tj3UcTFz8 >}}
++
+The `hugo new` generator for archetypes assumes your working directory is the content folder at the root of your project. Hugo is able to infer the appropriate archetype by assuming the content type from the content section passed to the CLI command:
+
+```
+hugo new <content-section>/<file-name.md>
+```
+
+We can use this pattern to create a new `.md` file in the `posts` section:
+
+{{< code file="archetype-example.sh" >}}
+hugo new posts/my-first-post.md
+{{< /code >}}
+
+{{% note "Override Content Type in a New File" %}}
+To override the content type Hugo infers from `[content-section]`, add the `--kind` flag to the end of the `hugo new` command.
+{{% /note %}}
+
+Running this command in a new site that does not have default or custom archetypes will create the following file:
+
- ```
- {{% /output %}}
++{{< output file="content/posts/my-first-post.md" >}}
++++
+date = "2017-02-01T19:20:04-07:00"
+title = "my first post"
+draft = true
++++
- {{% output file="content/posts/my-new-post.md" %}}
- ```
++{{< /output >}}
+
+{{% note %}}
+In this example, if you do not already have a `content/posts` directory, Hugo will create both `content/posts/` and `content/posts/my-first-post.md` for you.
+{{% /note %}}
+
+The auto-populated fields are worth examining:
+
+* `title` is generated from the new content's filename (i.e. in this case, `my-first-post` becomes `"my first post"`)
+* `date` and `title` are the variables that ship with Hugo and are therefore included in *all* content files created with the Hugo CLI. `date` is generated in [RFC 3339 format][] by way of Go's [`now()`][] function, which returns the current time.
+* The third variable, `draft = true`, is *not* inherited by your default or custom archetypes but is included in Hugo's automatically scaffolded `default.md` archetype for convenience.
+
+Three variables per content file are often not enough for effective content management of larger websites. Luckily, Hugo provides a simple mechanism for extending the number of variables through custom archetypes, as well as default archetypes to keep content creation DRY.
+
+## Lookup Order for Archetypes
+
+Similar to the [lookup order for templates][lookup] in your `layouts` directory, Hugo looks for a section- or type-specific archetype, then a default archetype, and finally an internal archetype that ships with Hugo. For example, Hugo will look for an archetype for `content/posts/my-first-post.md` in the following order:
+
+1. `archetypes/posts.md`
+2. `archetypes/default.md`
+3. `themes/<THEME>/archetypes/posts.md`
+4. `themes/<THEME>/archetypes/default.md` (Auto-generated with `hugo new site`)
+
+{{% note "Using a Theme Archetype" %}}
+If you wish to use archetypes that ship with a theme, the `theme` field must be specified in your [configuration file](/getting-started/configuration/).
+{{% /note %}}
+
+## Choose Your Archetype's Front Matter Format
+
+By default, `hugo new` content files include front matter in the TOML format regardless of the format used in `archetypes/*.md`.
+
+You can specify a different default format in your site [configuration file][] file using the `metaDataFormat` directive. Possible values are `toml`, `yaml`, and `json`.
+
+## Default Archetypes
+
+Default archetypes are convenient if your content's front matter stays consistent across multiple [content sections][sections].
+
+### Create the Default Archetype
+
+When you create a new Hugo project using `hugo new site`, you'll notice that Hugo has already scaffolded a file at `archetypes/default.md`.
+
+The following examples are from a site that's using `tags` and `categories` as [taxonomies][]. If we assume that all content files will require these two key-values, we can create a `default.md` archetype that *extends* Hugo's base archetype. In this example, we are including "golang" and "hugo" as tags and "web development" as a category.
+
+{{< code file="archetypes/default.md" >}}
++++
+tags = ["golang", "hugo"]
+categories = ["web development"]
++++
+{{< /code >}}
+
+{{% warning "EOL Characters in Text Editors"%}}
+If you get an `EOF error` when using `hugo new`, add a carriage return after the closing `+++` or `---` for your TOML or YAML front matter, respectively. (See the [troubleshooting article on EOF errors](/troubleshooting/eof-error/) for more information.)
+{{% /warning %}}
+
+### Use the Default Archetype
+
+With an `archetypes/default.md` in place, we can use the CLI to create a new post in the `posts` content section:
+
+{{< code file="new-post-from-default.sh" >}}
+$ hugo new posts/my-new-post.md
+{{< /code >}}
+
+Hugo then creates a new markdown file with the following front matter:
+
- ```
- {{% /output %}}
++{{< output file="content/posts/my-new-post.md" >}}
++++
+categories = ["web development"]
+date = "2017-02-01T19:20:04-07:00"
+tags = ["golang", "hugo"]
+title = "my new post"
++++
- {{% output file="content/posts/post-from-custom-archetype.md" %}}
- ```
++{{< /output >}}
+
+We see that the `title` and `date` key-values have been added in addition to the `tags` and `categories` key-values from `archetypes/default.md`.
+
+{{% note "Ordering of Front Matter" %}}
+You may notice that content files created with `hugo new` do not respect the order of the key-values specified in your archetype files. This is a [known issue](https://github.com/gohugoio/hugo/issues/452).
+{{% /note %}}
+
+## Custom Archetypes
+
+Suppose your site's `posts` section requires more sophisticated front matter than what has been specified in `archetypes/default.md`. You can create a custom archetype for your posts at `archetypes/posts.md` that includes the full set of front matter to be added to the two default archetypes fields.
+
+### Create a Custom Archetype
+
+{{< code file="archetypes/posts.md">}}
++++
+description = ""
+tags = ""
+categories = ""
++++
+{{< /code >}}
+
+### Use a Custom Archetype
+
+With an `archetypes/posts.md` in place, you can use the Hugo CLI to create a new post with your preconfigured front matter in the `posts` content section:
+
+{{< code file="new-post-from-custom.sh" >}}
+$ hugo new posts/post-from-custom.md
+{{< /code >}}
+
+This time, Hugo recognizes our custom `archetypes/posts.md` archetype and uses it instead of `archetypes/default.md`. The generated file will now include the full list of front matter parameters, as well as the base archetype's `title` and `date`:
+
- ```
- {{% /output %}}
++{{< output file="content/posts/post-from-custom-archetype.md" >}}
++++
+categories = ""
+date = 2017-02-13T17:24:43-08:00
+description = ""
+tags = ""
+title = "post from custom archetype"
++++
++{{< /output >}}
+
+### Hugo Docs Custom Archetype
+
+As an example of archetypes in practice, the following is the `functions` archetype from the Hugo docs:
+
+{{< code file="archetypes/functions.md" >}}
+{{< readfile file="/themes/gohugoioTheme/archetypes/functions.md" >}}
+{{< /code >}}
+
+{{% note %}}
+The preceding archetype is kept up to date with every Hugo build by using Hugo's [`readFile` function](/functions/readfile/). For similar examples, see [Local File Templates](/templates/files/).
+{{% /note %}}
+
+[archetypes directory]: /getting-started/directory-structure/
+[`now()`]: http://golang.org/pkg/time/#Now
+[configuration file]: /getting-started/configuration/
+[sections]: /content-management/sections/
+[content types]: /content-management/types/
+[front matter]: /content-management/front-matter/
+[RFC 3339 format]: https://www.ietf.org/rfc/rfc3339.txt
+[taxonomies]: /content-management/taxonomies/
+[lookup]: /templates/lookup/
+[templates]: /templates/
--- /dev/null
- markdown: mmark
+---
+title: Supported Content Formats
+linktitle: Supported Content Formats
+description: Markdown and Emacs Org-Mode have native support, and additional formats (e.g. Asciidoc) come via external helpers.
+date: 2017-01-10
+publishdate: 2017-01-10
+lastmod: 2017-04-06
+categories: [content management]
+#tags: [markdown,asciidoc,mmark,content format]
+menu:
+ docs:
+ parent: "content-management"
+ weight: 20
+weight: 20 #rem
+draft: false
+aliases: [/content/markdown-extras/,/content/supported-formats/,/doc/supported-formats/,/tutorials/mathjax/]
+toc: true
+---
+
+**Markdown is the main content format** and comes in two flavours: The excellent [Blackfriday project][blackfriday] (name your files `*.md` or set `markup = "markdown"` in front matter) or its fork [Mmark][mmark] (name your files `*.mmark` or set `markup = "mmark"` in front matter), both very fast markdown engines written in Go.
+
+For Emacs users, [goorgeous](https://github.com/chaseadamsio/goorgeous) provides built-in native support for Org-mode (name your files `*.org` or set `markup = "org"` in front matter)
+
+{{% note "Deeply Nested Lists" %}}
+Before you begin writing your content in markdown, Blackfriday has a known issue [(#329)](https://github.com/russross/blackfriday/issues/329) with handling deeply nested lists. Luckily, there is an easy workaround. Use 4-spaces (i.e., <kbd>tab</kbd>) rather than 2-space indentations.
+{{% /note %}}
+
+## Configure BlackFriday Markdown Rendering
+
+You can configure multiple aspects of Blackfriday as show in the following list. See the docs on [Configuration][config] for the full list of explicit directions you can give to Hugo when rendering your site.
+
+{{< readfile file="/content/readfiles/bfconfig.md" markdown="true" >}}
+
+## Extend Markdown
+
+Hugo provides some convenient methods for extending markdown.
+
+### Task Lists
+
+Hugo supports [GitHub-styled task lists (i.e., TODO lists)][gfmtasks] for the Blackfriday markdown renderer. If you do not want to use this feature, you can disable it in your configuration.
+
+#### Example Task List Input
+
+{{< code file="content/my-to-do-list.md" >}}
+- [ ] a task list item
+- [ ] list syntax required
+- [ ] incomplete
+- [x] completed
+{{< /code >}}
+
+#### Example Task List Output
+
+The preceding markdown produces the following HTML in your rendered website:
+
+```
+<ul class="task-list">
+ <li><input type="checkbox" disabled="" class="task-list-item"> a task list item</li>
+ <li><input type="checkbox" disabled="" class="task-list-item"> list syntax required</li>
+ <li><input type="checkbox" disabled="" class="task-list-item"> incomplete</li>
+ <li><input type="checkbox" checked="" disabled="" class="task-list-item"> completed</li>
+</ul>
+```
+
+#### Example Task List Display
+
+The following shows how the example task list will look to the end users of your website. Note that visual styling of lists is up to you. This list has been styled according to [the Hugo Docs stylesheet][hugocss].
+
+- [ ] a task list item
+- [ ] list syntax required
+- [ ] incomplete
+- [x] completed
+
+### Emojis
+
+To add emojis directly to content, set `enableEmoji` to `true` in your [site configuration][config]. To use emojis in templates or shortcodes, see [`emojify` function][].
+
+For a full list of emojis, see the [Emoji cheat sheet][emojis].
+
+### Shortcodes
+
+If you write in Markdown and find yourself frequently embedding your content with raw HTML, Hugo provides built-in shortcodes functionality. This is one of the most powerful features in Hugo and allows you to create your own Markdown extensions very quickly.
+
+See [Shortcodes][sc] for usage, particularly for the built-in shortcodes that ship with Hugo, and [Shortcode Templating][sct] to learn how to build your own.
+
+### Code Blocks
+
+Hugo supports GitHub-flavored markdown's use of triple back ticks, as well as provides a special [`highlight` nested shortcode][hlsc] to render syntax highlighting via [Pygments][]. For usage examples and a complete explanation, see the [syntax highlighting documentation][hl] in [developer tools][].
+
+## Mmark
+
+Mmark is a [fork of BlackFriday][mmark] and markdown superset that is well suited for writing [IETF documentation][ietf]. You can see examples of the syntax in the [Mmark GitHub repository][mmarkgh] or the full syntax on [Miek Gieben's website][].
+
+### Use Mmark
+
+As Hugo ships with Mmark, using the syntax is as easy as changing the extension of your content files from `.md` to `.mmark`.
+
+In the event that you want to only use Mmark in specific files, you can also define the Mmark syntax in your content's front matter:
+
+```
+---
+title: My Post
+date: 2017-04-01
++markup: mmark
+---
+```
+
+{{% warning %}}
+Thare are some features not available in Mmark; one example being that shortcodes are not translated when used in an included `.mmark` file ([#3131](https://github.com/gohugoio/hugo/issues/3137)), and `EXTENSION_ABBREVIATION` ([#1970](https://github.com/gohugoio/hugo/issues/1970)) and the aforementioned GFM todo lists ([#2270](https://github.com/gohugoio/hugo/issues/2270)) are not fully supported. Contributions are welcome.
+{{% /warning %}}
+
+## MathJax with Hugo
+
+[MathJax](http://www.mathjax.org/) is a JavaScript library that allows the display of mathematical expressions described via a LaTeX-style syntax in the HTML (or Markdown) source of a web page. As it is a pure a JavaScript library, getting it to work within Hugo is fairly straightforward, but does have some oddities that will be discussed here.
+
+This is not an introduction into actually using MathJax to render typeset mathematics on your website. Instead, this page is a collection of tips and hints for one way to get MathJax working on a website built with Hugo.
+
+### Enable MathJax
+
+The first step is to enable MathJax on pages that you would like to have typeset math. There are multiple ways to do this (adventurous readers can consult the [Loading and Configuring](http://docs.mathjax.org/en/latest/configuration.html) section of the MathJax documentation for additional methods of including MathJax), but the easiest way is to use the secure MathJax CDN by include a `<script>` tag for the officially recommended secure CDN ([cdn.js.com](https://cdnjs.com)):
+
+{{< code file="add-mathjax-to-page.html" >}}
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+</script>
+{{< /code >}}
+
+One way to ensure that this code is included in all pages is to put it in one of the templates that live in the `layouts/partials/` directory. For example, I have included this in the bottom of my template `footer.html` because I know that the footer will be included in every page of my website.
+
+### Options and Features
+
+MathJax is a stable open-source library with many features. I encourage the interested reader to view the [MathJax Documentation](http://docs.mathjax.org/en/latest/index.html), specifically the sections on [Basic Usage](http://docs.mathjax.org/en/latest/index.html#basic-usage) and [MathJax Configuration Options](http://docs.mathjax.org/en/latest/index.html#mathjax-configuration-options).
+
+### Issues with Markdown
+
+{{% note %}}
+The following issues with Markdown assume you are using `.md` for content and BlackFriday for parsing. Using [Mmark](#mmark) as your content format will obviate the need for the following workarounds.
+
+When using Mmark with MathJax, use `displayMath: [['$$','$$'], ['\\[','\\]']]`. See the [Mmark `README.md`](https://github.com/miekg/mmark/wiki/Syntax#math-blocks) for more information. In addition to MathJax, Mmark has been shown to work well with [KaTeX](https://github.com/Khan/KaTeX). See this [related blog post from a Hugo user](http://nosubstance.me/post/a-great-toolset-for-static-blogging/).
+{{% /note %}}
+
+After enabling MathJax, any math entered between proper markers (see the [MathJax documentation][mathjaxdocs]) will be processed and typeset in the web page. One issue that comes up, however, with Markdown is that the underscore character (`_`) is interpreted by Markdown as a way to wrap text in `emph` blocks while LaTeX (MathJax) interprets the underscore as a way to create a subscript. This "double speak" of the underscore can result in some unexpected and unwanted behavior.
+
+### Solution
+
+There are multiple ways to remedy this problem. One solution is to simply escape each underscore in your math code by entering `\_` instead of `_`. This can become quite tedious if the equations you are entering are full of subscripts.
+
+Another option is to tell Markdown to treat the MathJax code as verbatim code and not process it. One way to do this is to wrap the math expression inside a `<div>` `</div>` block. Markdown would ignore these sections and they would get passed directly on to MathJax and processed correctly. This works great for display style mathematics, but for inline math expressions the line break induced by the `<div>` is not acceptable. The syntax for instructing Markdown to treat inline text as verbatim is by wrapping it in backticks (`` ` ``). You might have noticed, however, that the text included in between backticks is rendered differently than standard text (on this site these are items highlighted in red). To get around this problem, we could create a new CSS entry that would apply standard styling to all inline verbatim text that includes MathJax code. Below I will show the HTML and CSS source that would accomplish this (note this solution was adapted from [this blog post](http://doswa.com/2011/07/20/mathjax-in-markdown.html)---all credit goes to the original author).
+
+{{< code file="mathjax-markdown-solution.html" >}}
+<script type="text/x-mathjax-config">
+MathJax.Hub.Config({
+ tex2jax: {
+ inlineMath: [['$','$'], ['\\(','\\)']],
+ displayMath: [['$$','$$'], ['\[','\]']],
+ processEscapes: true,
+ processEnvironments: true,
+ skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
+ TeX: { equationNumbers: { autoNumber: "AMS" },
+ extensions: ["AMSmath.js", "AMSsymbols.js"] }
+ }
+});
+</script>
+
+<script type="text/x-mathjax-config">
+ MathJax.Hub.Queue(function() {
+ // Fix <code> tags after MathJax finishes running. This is a
+ // hack to overcome a shortcoming of Markdown. Discussion at
+ // https://github.com/mojombo/jekyll/issues/199
+ var all = MathJax.Hub.getAllJax(), i;
+ for(i = 0; i < all.length; i += 1) {
+ all[i].SourceElement().parentNode.className += ' has-jax';
+ }
+});
+</script>
+{{< /code >}}
+
+
+
+As before, this content should be included in the HTML source of each page that will be using MathJax. The next code snippet contains the CSS that is used to have verbatim MathJax blocks render with the same font style as the body of the page.
+
+{{< code file="mathjax-style.css" >}}
+code.has-jax {
+ font: inherit;
+ font-size: 100%;
+ background: inherit;
+ border: inherit;
+ color: #515151;
+}
+{{< /code >}}
+
+In the CSS snippet, notice the line `color: #515151;`. `#515151` is the value assigned to the `color` attribute of the `body` class in my CSS. In order for the equations to fit in with the body of a web page, this value should be the same as the color of the body.
+
+### Usage
+
+With this setup, everything is in place for a natural usage of MathJax on pages generated using Hugo. In order to include inline mathematics, just put LaTeX code in between `` `$ TeX Code $` `` or `` `\( TeX Code \)` ``. To include display style mathematics, just put LaTeX code in between `<div>$$TeX Code$$</div>`. All the math will be properly typeset and displayed within your Hugo generated web page!
+
+## Additional Formats Through External Helpers
+
+Hugo has new concept called _external helpers_. It means that you can write your content using [Asciidoc][ascii], [reStructuredText][rest]. If you have files with associated extensions, Hugo will call external commands to generate the content. ([See the Hugo source code for external helpers][helperssource].)
+
+For example, for Asciidoc files, Hugo will try to call the `asciidoctor` or `asciidoc` command. This means that you will have to install the associated tool on your machine to be able to use these formats. ([See the Asciidoctor docs for installation instructions](http://asciidoctor.org/docs/install-toolchain/)).
+
+To use these formats, just use the standard extension and the front matter exactly as you would do with natively supported `.md` files.
+
+{{% warning "Performance of External Helpers" %}}
+Because additional formats are external commands generation performance will rely heavily on the performance of the external tool you are using. As this feature is still in its infancy, feedback is welcome.
+{{% /warning %}}
+
+## Learn Markdown
+
+Markdown syntax is simple enough to learn in a single sitting. The following are excellent resources to get you up and running:
+
+* [Daring Fireball: Markdown, John Gruber (Creator of Markdown)][fireball]
+* [Markdown Cheatsheet, Adam Pritchard][mdcheatsheet]
+* [Markdown Tutorial (Interactive), Garen Torikian][mdtutorial]
+
+[`emojify` function]: /functions/emojify/
+[ascii]: http://asciidoc.org/
+[bfconfig]: /getting-started/configuration/#configuring-blackfriday-rendering
+[blackfriday]: https://github.com/russross/blackfriday
+[mmark]: https://github.com/miekg/mmark
+[config]: /getting-started/configuration/
+[developer tools]: /tools/
+[emojis]: https://www.webpagefx.com/tools/emoji-cheat-sheet/
+[fireball]: https://daringfireball.net/projects/markdown/
+[gfmtasks]: https://guides.github.com/features/mastering-markdown/#syntax
+[helperssource]: https://github.com/gohugoio/hugo/blob/77c60a3440806067109347d04eb5368b65ea0fe8/helpers/general.go#L65
+[hl]: /tools/syntax-highlighting/
+[hlsc]: /content-management/shortcodes/#highlight
+[hugocss]: /css/style.css
+[ietf]: https://tools.ietf.org/html/
+[mathjaxdocs]: https://docs.mathjax.org/en/latest/
+[mdcheatsheet]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
+[mdtutorial]: http://www.markdowntutorial.com/
+[Miek Gieben's website]: https://miek.nl/2016/March/05/mmark-syntax-document/
+[mmark]: https://github.com/miekg/mmark
+[mmarkgh]: https://github.com/miekg/mmark/wiki/Syntax
+[org]: http://orgmode.org/
+[Pygments]: http://pygments.org/
+[rest]: http://docutils.sourceforge.net/rst.html
+[sc]: /content-management/shortcodes/
+[sct]: /templates/shortcode-templates/
--- /dev/null
- In this eample, the `about.md` will be assigned the configured `defaultContentLanguage`.
+---
+title: Multilingual Mode
+linktitle: Multilingual and i18n
+description: Hugo supports the creation of websites with multiple languages side by side.
+date: 2017-01-10
+publishdate: 2017-01-10
+lastmod: 2017-01-10
+categories: [content management]
+#tags: [multilingual,i18n, internationalization]
+menu:
+ docs:
+ parent: "content-management"
+ weight: 150
+weight: 150 #rem
+draft: false
+aliases: [/content/multilingual/,/content-management/multilingual/]
+toc: true
+---
+
+You should define the available languages in a `Languages` section in your site configuration.
+
+## Configure Languages
+
+The following is an example of a TOML site configuration for a multilingual Hugo project:
+
+{{< code file="config.toml" download="config.toml" >}}
+DefaultContentLanguage = "en"
+copyright = "Everything is mine"
+
+[params.navigation]
+help = "Help"
+
+[Languages]
+[Languages.en]
+title = "My blog"
+weight = 1
+[Languages.en.params]
+linkedin = "english-link"
+
+[Languages.fr]
+copyright = "Tout est à moi"
+title = "Mon blog"
+weight = 2
+[Languages.fr.params]
+linkedin = "lien-francais"
+[Languages.fr.navigation]
+help = "Aide"
+{{< /code >}}
+
+Anything not defined in a `[Languages]` block will fall back to the global
+value for that key (e.g., `copyright` for the English [`en`] language).
+
+With the configuration above, all content, sitemap, RSS feeds, paginations,
+and taxonomy pages will be rendered below `/` in English (your default content language) and then below `/fr` in French.
+
+When working with front matter `Params` in [single page templates][singles], omit the `params` in the key for the translation.
+
+If you want all of the languages to be put below their respective language code, enable `defaultContentLanguageInSubdir: true`.
+
+Only the obvious non-global options can be overridden per language. Examples of global options are `baseURL`, `buildDrafts`, etc.
+
+## Taxonomies and Blackfriday
+
+Taxonomies and [Blackfriday configuration][config] can also be set per language:
+
+
+{{< code file="bf-config.toml" >}}
+[Taxonomies]
+tag = "tags"
+
+[blackfriday]
+angledQuotes = true
+hrefTargetBlank = true
+
+[Languages]
+[Languages.en]
+weight = 1
+title = "English"
+[Languages.en.blackfriday]
+angledQuotes = false
+
+[Languages.fr]
+weight = 2
+title = "Français"
+[Languages.fr.Taxonomies]
+plaque = "plaques"
+{{< /code >}}
+
+## Translate Your Content
+
+Translated articles are identified by the name of the content file.
+
+### Examples of Translated Articles
+
+1. `/content/about.en.md`
+2. `/content/about.fr.md`
+
++In this example, the `about.md` will be assigned the configured `defaultContentLanguage`.
+
+1. `/content/about.md`
+2. `/content/about.fr.md`
+
+This way, you can slowly start to translate your current content without having to rename everything. If left unspecified, the default value for `defaultContentLanguage` is `en`.
+
+By having the same *base filename*, the content pieces are linked together as translated pieces.
+
+If you need distinct URLs per language, you can set the slug in the non-default language file. For example, you can define a custom slug for a French translation in the front matter of `content/about.fr.md` as follows:
+
+```
+slug: "a-propos"
+
+```
+
+At render, Hugo will build both `/about/` and `/a-propos/` as properly linked translated pages.
+
+{{%note %}}
+Hugo currently uses the base filename as the translation key, which can be an issue with identical filenames in different sections.
+We will fix this in https://github.com/gohugoio/hugo/issues/2699
+{{% /note %}}
+{{< todo >}}Rewrite/remove the above one issue is fixed.{{< /todo >}}
+
+## Link to Translated Content
+
+To create a list of links to translated content, use a template similar to the following:
+
+{{< code file="layouts/partials/i18nlist.html" >}}
+{{ if .IsTranslated }}
+<h4>{{ i18n "translations" }}</h4>
+<ul>
+ {{ range .Translations }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Lang }}: {{ .Title }}{{ if .IsPage }} ({{ i18n "wordCount" . }}){{ end }}</a>
+ </li>
+ {{ end}}
+</ul>
+{{ end }}
+{{< /code >}}
+
+The above can be put in a `partial` (i.e., inside `layouts/partials/`) and included in any template, be it for a [single content page][contenttemplate] or the [homepage][]. It will not print anything if there are no translations for a given page, or if there are translations---in the case of the homepage, section listing, etc.---a site with only render one language.
+
+The above also uses the [`i18n` function][i18func] described in the next section.
+
+## Translation of Strings
+
+Hugo uses [go-i18n][] to support string translations. [See the project's source repository][go-i18n-source] to find tools that will help you manage your translation workflows.
+
+Translations are collected from the `themes/<THEME>/i18n/` folder (built into the theme), as well as translations present in `i18n/` at the root of your project. In the `i18n`, the translations will be merged and take precedence over what is in the theme folder. Language files should be named according to [RFC 5646][] with names such as `en-US.toml`, `fr.toml`, etc.
+
+From within your templates, use the `i18n` function like this:
+
+```
+{{ i18n "home" }}
+```
+
+This uses a definition like this one in `i18n/en-US.toml`:
+
+```
+[home]
+other = "Home"
+```
+
+Often you will want to use to the page variables in the translations strings. To do that, pass on the "." context when calling `i18n`:
+
+```
+{{ i18n "wordCount" . }}
+```
+
+This uses a definition like this one in `i18n/en-US.toml`:
+
+```
+[wordCount]
+other = "This article has {{ .WordCount }} words."
+```
+An example of singular and plural form:
+
+```
+[readingTime]
+one = "One minute read"
+other = "{{.Count}} minutes read"
+```
+And then in the template:
+
+```
+{{ i18n "readingTime" .ReadingTime }}
+```
+To track down missing translation strings, run Hugo with the `--i18n-warnings` flag:
+
+```
+ hugo --i18n-warnings | grep i18n
+i18n|MISSING_TRANSLATION|en|wordCount
+```
+
+## Customize Dates
+
+At the time of this writing, Golang does not yet have support for internationalized locales, but if you do some work, you can simulate it. For example, if you want to use French month names, you can add a data file like ``data/mois.yaml`` with this content:
+
+~~~yaml
+1: "janvier"
+2: "février"
+3: "mars"
+4: "avril"
+5: "mai"
+6: "juin"
+7: "juillet"
+8: "août"
+9: "septembre"
+10: "octobre"
+11: "novembre"
+12: "décembre"
+~~~
+
+... then index the non-English date names in your templates like so:
+
+~~~html
+<time class="post-date" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+ Article publié le {{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }} (dernière modification le {{ .Lastmod.Day }} {{ index $.Site.Data.mois (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }})
+</time>
+~~~
+
+This technique extracts the day, month and year by specifying ``.Date.Day``, ``.Date.Month``, and ``.Date.Year``, and uses the month number as a key, when indexing the month name data file.
+
+## Menus
+
+You can define your menus for each language independently. The [creation of a menu][menus] works analogous to earlier versions of Hugo, except that they have to be defined in their language-specific block in the configuration file:
+
+```
+defaultContentLanguage = "en"
+
+[languages.en]
+weight = 0
+languageName = "English"
+
+[[languages.en.menu.main]]
+url = "/"
+name = "Home"
+weight = 0
+
+
+[languages.de]
+weight = 10
+languageName = "Deutsch"
+
+[[languages.de.menu.main]]
+url = "/"
+name = "Startseite"
+weight = 0
+```
+
+The rendering of the main navigation works as usual. `.Site.Menus` will just contain the menu of the current language. Pay attention to the generation of the menu links. `absLangURL` takes care that you link to the correct locale of your website. Otherwise, both menu entries would link to the English version as the default content language that resides in the root directory.
+
+```
+<ul>
+ {{- $currentPage := . -}}
+ {{ range .Site.Menus.main -}}
+ <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+ <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
+ </li>
+ {{- end }}
+</ul>
+
+```
+
+## Missing translations
+
+If a string does not have a translation for the current language, Hugo will use the value from the default language. If no default value is set, an empty string will be shown.
+
+While translating a Hugo website, it can be handy to have a visual indicator of missing translations. The [`enableMissingTranslationPlaceholders` configuration option][config] will flag all untranslated strings with the placeholder `[i18n] identifier`, where `identifier` is the id of the missing translation.
+
+{{% note %}}
+Hugo will generate your website with these missing translation placeholders. It might not be suited for production environments.
+{{% /note %}}
+
+## Multilingual Themes support
+
+To support Multilingual mode in your themes, some considerations must be taken for the URLs in the templates. If there is more than one language, URLs must meet the following criteria:
+
+* Come from the built-in `.Permalink` or `.URL`
+* Be constructed with
+ * The [`relLangURL` template function][rellangurl] or the [`absLangURL` template function][abslangurl] **OR**
+ * Prefixed with `{{ .LanguagePrefix }}`
+
+If there is more than one language defined, the `LanguagePrefix` variable will equal `/en` (or whatever your `CurrentLanguage` is). If not enabled, it will be an empty string and is therefore harmless for single-language Hugo websites.
+
+[abslangurl]: /functions/abslangurl
+[config]: /getting-started/configuration/
+[contenttemplate]: /templates/single-page-templates/
+[go-i18n-source]: https://github.com/nicksnyder/go-i18n
+[go-i18n]: https://github.com/nicksnyder/go-i18n
+[homepage]: /templates/homepage/
+[i18func]: /functions/i18n/
+[menus]: /content-management/menus/
+[rellangurl]: /functions/rellangurl
+[RFC 5646]: https://tools.ietf.org/html/rfc5646
+[singles]: /templates/single-page-templates/
--- /dev/null
- {{% output file="figure-output-example.html" %}}
- ```
+---
+title: Shortcodes
+linktitle:
+description: Shortcodes are simple snippets inside your content files calling built-in or custom templates.
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-03-31
+menu:
+ docs:
+ parent: "content-management"
+ weight: 35
+weight: 35 #rem
+categories: [content management]
+#tags: [markdown,content,shortcodes]
+draft: false
+aliases: [/extras/shortcodes/]
+toc: true
+---
+
+## What a Shortcode is
+
+Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video `<iframes>`) to Markdown content. We think this contradicts the beautiful simplicity of Markdown's syntax.
+
+Hugo created **shortcodes** to circumvent these limitations.
+
+A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.
+
+In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.
+
+## Use Shortcodes
+
+In your content files, a shortcode can be called by calling `{{%/* shortcodename parameters */%}}`. Shortcode parameters are space delimited, and parameters with internal spaces can be quoted.
+
+The first word in the shortcode declaration is always the name of the shortcode. Parameters follow the name. Depending upon how the shortcode is defined, the parameters may be named, positional, or both, although you can't mix parameter types in a single call. The format for named parameters models that of HTML with the format `name="value"`.
+
+Some shortcodes use or require closing shortcodes. Again like HTML, the opening and closing shortcodes match (name only) with the closing declaration, which is prepended with a slash.
+
+Here are two examples of paired shortcodes:
+
+```
+{{%/* mdshortcode */%}}Stuff to `process` in the *center*.{{%/* /mdshortcode */%}}
+```
+
+```
+{{</* highlight go */>}} A bunch of code here {{</* /highlight */>}}
+```
+
+The examples above use two different delimiters, the difference being the `%` character in the first and the `<>` characters in the second.
+
+### Shortcodes with Markdown
+
+The `%` character indicates that the shortcode's inner content---called in the [shortcode template][sctemps] with the [`.Inner` variable][scvars]---needs further processing by the page's rendering processor (i.e. markdown via Blackfriday). In the following example, Blackfriday would convert `**World**` to `<strong>World</strong>`:
+
+```
+{{%/* myshortcode */%}}Hello **World!**{{%/* /myshortcode */%}}
+```
+
+### Shortcodes Without Markdown
+
+The `<` character indicates that the shortcode's inner content does *not* need further rendering. Often shortcodes without markdown include internal HTML:
+
+```
+{{</* myshortcode */>}}<p>Hello <strong>World!</strong></p>{{</* /myshortcode */>}}
+```
+
+### Nested Shortcodes
+
+You can call shortcodes within other shortcodes by creating your own templates that leverage the `.Parent` variable. `.Parent` allows you to check the context in which the shortcode is being called. See [Shortcode templates][sctemps].
+
+## Use Hugo's Built-in Shortcodes
+
+Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
+
+### `figure`
+
+`figure` is an extension of the image syntax in markdown, which does not provide a shorthand for the more semantic [HTML5 `<figure>` element][figureelement].
+
+The `figure` shortcode can use the following named parameters:
+
+* `src`
+* `link`
+* `title`
+* `caption`
+* `class`
+* `attr` (i.e., attribution)
+* `attrlink`
+* `alt`
+
+#### Example `figure` Input
+
+{{< code file="figure-input-example.md" >}}
+{{</* figure src="/media/spf13.jpg" title="Steve Francia" */>}}
+{{< /code >}}
+
+#### Example `figure` Output
+
- ```
- {{% /output %}}
++{{< output file="figure-output-example.html" >}}
+<figure>
+ <img src="/media/spf13.jpg" />
+ <figcaption>
+ <h4>Steve Francia</h4>
+ </figcaption>
+</figure>
- {{% output file="gist-output.html" %}}
- ```
++{{< /output >}}
+
+### `gist`
+
+Bloggers often want to include GitHub gists when writing posts. Let's suppose we want to use the [gist at the following url][examplegist]:
+
+```
+https://gist.github.com/spf13/7896402
+```
+
+We can embed the gist in our content via username and gist ID pulled from the URL:
+
+```
+{{</* gist spf13 7896402 */>}}
+```
+
+#### Example `gist` Input
+
+If the gist contains several files and you want to quote just one of them, you can pass the filename (quoted) as an optional third argument:
+
+{{< code file="gist-input.md" >}}
+{{</* gist spf13 7896402 "img.html" */>}}
+{{< /code >}}
+
+#### Example `gist` Output
+
- ```
- {{% /output %}}
++{{< output file="gist-output.html" >}}
+{{< gist spf13 7896402 >}}
- {{% output file="tutorials/learn-html/index.html" %}}
- ```
++{{< /output >}}
+
+#### Example `gist` Display
+
+To demonstrate the remarkably efficiency of Hugo's shortcode feature, we have embedded the `spf13` `gist` example in this page. The following simulates the experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.
+
+{{< gist spf13 7896402 >}}
+
+### `highlight`
+
+This shortcode will convert the source code provided into syntax-highlighted HTML. Read more on [highlighting](/tools/syntax-highlighting/). `highlight` takes exactly one required `language` parameter and requires a closing shortcode.
+
+#### Example `highlight` Input
+
+{{< code file="content/tutorials/learn-html.md" >}}
+{{</* highlight html */>}}
+<section id="main">
+ <div>
+ <h1 id="title">{{ .Title }}</h1>
+ {{ range .Data.Pages }}
+ {{ .Render "summary"}}
+ {{ end }}
+ </div>
+</section>
+{{</* /highlight */>}}
+{{< /code >}}
+
+#### Example `highlight` Output
+
+The `highlight` shortcode example above would produce the following HTML when the site is rendered:
+
- ```
- {{% /output %}}
++{{< output file="tutorials/learn-html/index.html" >}}
+<span style="color: #f92672"><section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">"main"</span><span style="color: #f92672">></span>
+ <span style="color: #f92672"><div></span>
+ <span style="color: #f92672"><h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">"title"</span><span style="color: #f92672">></span>{{ .Title }}<span style="color: #f92672"></h1></span>
+ {{ range .Data.Pages }}
+ {{ .Render "summary"}}
+ {{ end }}
+ <span style="color: #f92672"></div></span>
+<span style="color: #f92672"></section></span>
- {{% output file="instagram-hide-caption-output.html" %}}
- ```
++{{< /output >}}
+
+{{% note "More on Syntax Highlighting" %}}
+To see even more options for adding syntax-highlighted code blocks to your website, see [Syntax Highlighting in Developer Tools](/tools/syntax-highlighting/).
+{{% /note %}}
+
+### `instagram`
+
+If you'd like to embed a photo from [Instagram][], you only need the photo's ID. You can discern an Instagram photo ID from the URL:
+
+```
+https://www.instagram.com/p/BWNjjyYFxVx/
+```
+
+#### Example `instagram` Input
+
+{{< code file="instagram-input.md" >}}
+{{</* instagram BWNjjyYFxVx */>}}
+{{< /code >}}
+
+You also have the option to hide the caption:
+
+{{< code file="instagram-input-hide-caption.md" >}}
+{{</* instagram BWNjjyYFxVx hidecaption */>}}
+{{< /code >}}
+
+#### Example `instagram` Output
+
+By adding the preceding `hidecaption` example, the following HTML will be added to your rendered website's markup:
+
- ```
- {{% /output %}}
++{{< output file="instagram-hide-caption-output.html" >}}
+{{< instagram BWNjjyYFxVx hidecaption >}}
- {{% output file="speakerdeck-example-input.md" %}}
- ```
++{{< /output >}}
+
+#### Example `instagram` Display
+
+Using the preceding `instagram` with hidecaption` example above, the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.
+
+{{< instagram BWNjjyYFxVx hidecaption >}}
+
+
+### `ref` and `relref`
+
+These shortcodes will look up the pages by their relative path (e.g., `blog/post.md`) or their logical name (`post.md`) and return the permalink (`ref`) or relative permalink (`relref`) for the found page.
+
+`ref` and `relref` also make it possible to make fragmentary links that work for the header links generated by Hugo.
+
+{{% note "More on Cross References" %}}
+Read a more extensive description of `ref` and `relref` in the [cross references](/content-management/cross-references/) documentation.
+{{% /note %}}
+
+`ref` and `relref` take exactly one required parameter of _reference_, quoted and in position `0`.
+
+#### Example `ref` and `relref` Input
+
+```
+[Neat]({{</* ref "blog/neat.md" */>}})
+[Who]({{</* relref "about.md#who" */>}})
+```
+
+#### Example `ref` and `relref` Output
+
+Assuming that standard Hugo pretty URLs are turned on.
+
+```
+<a href="/blog/neat">Neat</a>
+<a href="/about/#who:c28654c202e73453784cfd2c5ab356c0">Who</a>
+```
+
+### `speakerdeck`
+
+To embed slides from [Speaker Deck][], click on "< /> Embed" (under Share right next to the template on Speaker Deck) and copy the URL:
+
+```
+<script async class="speakerdeck-embed" data-id="4e8126e72d853c0060001f97" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+```
+
+#### `speakerdeck` Example Input
+
+Extract the value from the field `data-id` and pass it to the shortcode:
+
+{{< code file="speakerdeck-example-input.md" >}}
+{{</* speakerdeck 4e8126e72d853c0060001f97 */>}}
+{{< /code >}}
+
+#### `speakerdeck` Example Output
+
- ```
- {{% /output %}}
++{{< output file="speakerdeck-example-input.md" >}}
+{{< speakerdeck 4e8126e72d853c0060001f97 >}}
- {{% output file="example-tweet-output.html" %}}
- ```
++{{< /output >}}
+
+#### `speakerdeck` Example Display
+
+For the preceding `speakerdeck` example, the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.
+
+{{< speakerdeck 4e8126e72d853c0060001f97 >}}
+
+### `tweet`
+
+You want to include a single tweet into your blog post? Everything you need is the URL of the tweet:
+
+```
+https://twitter.com/spf13/status/877500564405444608
+```
+
+#### Example `tweet` Input
+
+Pass the tweet's ID from the URL as a parameter to the `tweet` shortcode:
+
+{{< code file="example-tweet-input.md" >}}
+{{</* tweet 877500564405444608 */>}}
+{{< /code >}}
+
+#### Example `tweet` Output
+
+Using the preceding `tweet` example, the following HTML will be added to your rendered website's markup:
+
- ```
- {{% /output %}}
++{{< output file="example-tweet-output.html" >}}
+{{< tweet 877500564405444608 >}}
- {{% output file="example-vimeo-output.html" %}}
- ```
++{{< /output >}}
+
+#### Example `tweet` Display
+
+Using the preceding `tweet` example, the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.
+
+{{< tweet 877500564405444608 >}}
+
+### `vimeo`
+
+Adding a video from [Vimeo][] is equivalent to the YouTube shortcode above.
+
+```
+https://vimeo.com/channels/staffpicks/146022717
+```
+
+#### Example `vimeo` Input
+
+Extract the ID from the video's URL and pass it to the `vimeo` shortcode:
+
+{{< code file="example-vimeo-input.md" >}}
+{{</* vimeo 146022717 */>}}
+{{< /code >}}
+
+#### Example `vimeo` Output
+
+Using the preceding `vimeo` example, the following HTML will be added to your rendered website's markup:
+
- ```
- {{% /output %}}
++{{< output file="example-vimeo-output.html" >}}
+{{< vimeo 146022717 >}}
++{{< /output >}}
+
+{{% tip %}}
+If you want to further customize the visual styling of the YouTube or Vimeo output, add a `class` named parameter when calling the shortcode. The new `class` will be added to the `<div>` that wraps the `<iframe>` *and* will remove the inline styles. Note that you will need to call the `id` as a named parameter as well.
+
+```
+{{</* vimeo id="146022717" class="my-vimeo-wrapper-class" */>}}
+```
+{{% /tip %}}
+
+#### Example `vimeo` Display
+
+Using the preceding `vimeo` example, the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup.
+
+{{< vimeo 146022717 >}}
+
+### `youtube`
+
+The `youtube` shortcode embeds a responsive video player for [YouTube videos][]. Only the ID of the video is required, e.g.:
+
+```
+https://www.youtube.com/watch?v=w7Ft2ymGmfc
+```
+
+
+#### Example `youtube` Input
+
+Copy the YouTube video ID that follows `v=` in the video's URL and pass it to the `youtube` shortcode:
+
+{{< code file="example-youtube-input.md" >}}
+{{</* youtube w7Ft2ymGmfc */>}}
+{{< /code >}}
+
+Furthermore, you can automatically start playback of the embedded video by setting the `autoplay` parameter to `true`. Remember that you can't mix named an unnamed parameters, so you'll need to assign the yet unnamed video id to the parameter `id`:
+
+
+{{< code file="example-youtube-input-with-autoplay.md" >}}
+{{</* youtube id="w7Ft2ymGmfc" autoplay="true" */>}}
+{{< /code >}}
+
+#### Example `youtube` Output
+
+Using the preceding `youtube` example, the following HTML will be added to your rendered website's markup:
+
+{{< code file="example-youtube-output.html" >}}
+{{< youtube id="w7Ft2ymGmfc" autoplay="true" >}}
+{{< /code >}}
+
+#### Example `youtube` Display
+
+Using the preceding `youtube` example (without `autoplay="true"`), the following simulates the displayed experience for visitors to your website. Naturally, the final display will be contingent on your stylesheets and surrounding markup. The video is also include in the [Quick Start of the Hugo documentation][quickstart].
+
+{{< youtube w7Ft2ymGmfc >}}
+
+## Create Custom Shortcodes
+
+To learn more about creating custom shortcodes, see the [shortcode template documentation][].
+
+[`figure` shortcode]: #figure
+[contentmanagementsection]: /content-management/formats/
+[examplegist]: https://gist.github.com/spf13/7896402
+[figureelement]: http://html5doctor.com/the-figure-figcaption-elements/ "An article from HTML5 doctor discussing the fig and figcaption elements."
+[Instagram]: https://www.instagram.com/
+[pagevariables]: /variables/page/
+[partials]: /templates/partials/
+[Pygments]: http://pygments.org/
+[quickstart]: /getting-started/quick-start/
+[sctemps]: /templates/shortcode-templates/
+[scvars]: /variables/shortcodes/
+[shortcode template documentation]: /templates/shortcode-templates/
+[Speaker Deck]: https://speakerdeck.com/
+[templatessection]: /templates/
+[Vimeo]: https://vimeo.com/
+[YouTube Videos]: https://www.youtube.com/
--- /dev/null
- When taxonomies are used---and [taxonomy templates][] are provided---Hugo will automatically create both a page listing all the taxonomy's terms and individual pages with lists of content associated with each term. For example, a `categories` taxonomy declared in your your configuration and used in your content front matter will create the following pages:
+---
+title: Taxonomies
+linktitle:
+description: Hugo includes support for user-defined taxonomies to help you demonstrate logical relationships between content for the end users of your website.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+#tags: [taxonomies,metadata,front matter,terms]
+categories: [content management]
+menu:
+ docs:
+ parent: "content-management"
+ weight: 80
+weight: 80 #rem
+draft: false
+aliases: [/taxonomies/overview/,/taxonomies/usage/,/indexes/overview/,/doc/indexes/,/extras/indexes]
+toc: true
+---
+
+## What is a Taxonomy?
+
+Hugo includes support for user-defined groupings of content called **taxonomies**. Taxonomies are classifications of logical relationships between content.
+
+### Definitions
+
+Taxonomy
+: a categorization that can be used to classify content
+
+Term
+: a key within the taxonomy
+
+Value
+: a piece of content assigned to a term
+
++{{< youtube "-np9GX6cL38" >}}
++
+## Example Taxonomy: Movie Website
+
+Let's assume you are making a website about movies. You may want to include the following taxonomies:
+
+* Actors
+* Directors
+* Studios
+* Genre
+* Year
+* Awards
+
+Then, in each of the movies, you would specify terms for each of these taxonomies (i.e., in the [front matter][] of each of your movie content files). From these terms, Hugo would automatically create pages for each Actor, Director, Studio, Genre, Year, and Award, with each listing all of the Movies that matched that specific Actor, Director, Studio, Genre, Year, and Award.
+
+### Movie Taxonomy Organization
+
+To continue with the example of a movie site, the following demonstrates content relationships from the perspective of the taxonomy:
+
+```
+Actor <- Taxonomy
+ Bruce Willis <- Term
+ The Sixth Sense <- Content
+ Unbreakable <- Content
+ Moonrise Kingdom <- Content
+ Samuel L. Jackson <- Term
+ Unbreakable <- Content
+ The Avengers <- Content
+ xXx <- Content
+```
+
+From the perspective of the content, the relationships would appear differently, although the data and labels used are the same:
+
+```
+Unbreakable <- Content
+ Actors <- Taxonomy
+ Bruce Willis <- Term
+ Samuel L. Jackson <- Term
+ Director <- Taxonomy
+ M. Night Shyamalan <- Term
+ ...
+Moonrise Kingdom <- Content
+ Actors <- Taxonomy
+ Bruce Willis <- Term
+ Bill Murray <- Term
+ Director <- Taxonomy
+ Wes Anderson <- Term
+ ...
+```
+
+## Hugo Taxonomy Defaults
+
+Hugo natively supports taxonomies.
+
+Without adding a single line to your site's configuration file, Hugo will automatically create taxonomies for `tags` and `categories`. If you do not want Hugo to create any taxonomies, set `disableKinds` in your site's configuration to the following:
+
+```
+disableKinds = ["taxonomy","taxonomyTerm"]
+```
+
+### Default Destinations
+
- categories: ["Go Web Dev"]
++When taxonomies are used---and [taxonomy templates][] are provided---Hugo will automatically create both a page listing all the taxonomy's terms and individual pages with lists of content associated with each term. For example, a `categories` taxonomy declared in your configuration and used in your content front matter will create the following pages:
+
+* A single page at `example.com/categories/` that lists all the [terms within the taxonomy][]
+* [Individual taxonomy list pages][taxonomy templates] (e.g., `/categories/development/`) for each of the terms that shows a listing of all pages marked as part of that taxonomy within any content file's [front matter][]
+
+## Configure Taxonomies
+
+Taxonomies must be defined in your [website configuration][config] before they can be used throughout the site. You need to provide both the plural and singular labels for each taxonomy. For example, `singular key = "plural value"` for TOML and `singular key: "plural value"` for YAML.
+
+### Example: TOML Taxonomy Configuration
+
+```
+[taxonomies]
+ tag = "tags"
+ category = "categories"
+ series = "series"
+```
+
+### Example: YAML Taxonomy Configuration
+
+```
+taxonomies:
+ tag: "tags"
+ category: "categories"
+ series: "series"
+```
+
+### Preserve Taxonomy Values
+
+By default, taxonomy names are normalized.
+
+Therefore, if you want to have a taxonomy term with special characters such as `Gérard Depardieu` instead of `Gerard Depardieu`, set the value for `preserveTaxonomyNames` to `true` in your [site configuration][config]. Hugo will then preserve special characters in taxonomy values but will still title-ize the values for titles and normalize them in URLs.
+
+Note that if you use `preserveTaxonomyNames` and intend to manually construct URLs to the archive pages, you will need to pass the taxonomy values through the [`urlize` template function][].
+
+{{% note %}}
+You can add content and front matter to your taxonomy list and taxonomy terms pages. See [Content Organization](/content-management/organization/) for more information on how to add an `_index.md` for this purpose.
+
+Note also that taxonomy [permalinks](/content-management/urls/) are *not* configurable.
+{{% /note %}}
+
+## Add Taxonomies to Content
+
+Once a taxonomy is defined at the site level, any piece of content can be assigned to it, regardless of [content type][] or [content section][].
+
+Assigning content to a taxonomy is done in the [front matter][]. Simply create a variable with the *plural* name of the taxonomy and assign all terms you want to apply to the instance of the content type.
+
+{{% note %}}
+If you would like the ability to quickly generate content files with preconfigured taxonomies or terms, read the docs on [Hugo archetypes](/content-management/archetypes/).
+{{% /note %}}
+
+### Example: TOML Front Matter with Taxonomies
+
+```
++++
+title = "Hugo: A fast and flexible static site generator"
+tags = [ "Development", "Go", "fast", "Blogging" ]
+categories = [ "Development" ]
+series = [ "Go Web Dev" ]
+slug = "hugo"
+project_url = "https://github.com/gohugoio/hugo"
++++
+```
+
+### Example: YAML Front Matter with Taxonomies
+
+```
+---
+title: "Hugo: A fast and flexible static site generator"
+#tags: ["Development", "Go", "fast", "Blogging"]
+categories: ["Development"]
++series: ["Go Web Dev"]
+slug: "hugo"
+project_url: "https://github.com/gohugoio/hugo"
+---
+```
+
+### Example: JSON Front Matter with Taxonomies
+
+```
+{
+ "title": "Hugo: A fast and flexible static site generator",
+ "tags": [
+ "Development",
+ "Go",
+ "fast",
+ "Blogging"
+ ],
+ "categories" : [
+ "Development"
+ ],
+ "series" : [
+ "Go Web Dev"
+ ],
+ "slug": "hugo",
+ "project_url": "https://github.com/gohugoio/hugo"
+}
+```
+
+## Order Taxonomies
+
+A content file can assign weight for each of its associate taxonomies. Taxonomic weight can be used for sorting or ordering content in [taxonomy list templates][] and is declared in a content file's [front matter][]. The convention for declaring taxonomic weight is `taxonomyname_weight`.
+
+The following TOML and YAML examples show a piece of content that has a weight of 22, which can be used for ordering purposes when rendering the pages assigned to the "a", "b" and "c" values of the `tags` taxonomy. It has also been assigned the weight of 44 when rendering the "d" category page.
+
+### Example: TOML Taxonomic `weight`
+
+```
++++
+title = "foo"
+tags = [ "a", "b", "c" ]
+tags_weight = 22
+categories = ["d"]
+categories_weight = 44
++++
+```
+
+### Example: YAML Taxonomic `weight`
+
+```
+---
+title: foo
+#tags: [ "a", "b", "c" ]
+tags_weight: 22
+categories: ["d"]
+categories_weight: 44
+---
+```
+
+By using taxonomic weight, the same piece of content can appear in different positions in different taxonomies.
+
+{{% note "Limits to Ordering Taxonomies" %}}
+Currently taxonomies only support the [default `weight => date` ordering of list content](/templates/lists/#default-weight-date). For more information, see the documentation on [taxonomy templates](/templates/taxonomy-templates/).
+{{% /note %}}
+
+[`urlize` template function]: /functions/urlize/
+[content section]: /content-management/sections/
+[content type]: /content-management/types/
+[documentation on archetypes]: /content-management/archetypes/
+[front matter]: /content-management/front-matter/
+[taxonomy list templates]: /templates/taxonomy-templates/#taxonomy-page-templates
+[taxonomy templates]: /templates/taxonomy-templates/
+[terms within the taxonomy]: /templates/taxonomy-templates/#taxonomy-terms-templates "See how to order terms associated with a taxonomy"
+[config]: /getting-started/configuration/
--- /dev/null
- {{% note "`title:`, `date:`, and Field Order" %}}
- `title` and `date` fields are added automatically when using archetypes via `hugo new`. Do not be worried if the order of the new file's front matter fields on your local machine is different than that of the examples provided in the Hugo docs. This is a known issue [(#452)](https://github.com/gohugoio/hugo/issues/452).
- {{% /note %}}
-
+---
+title: Contribute to the Hugo Docs
+linktitle: Documentation
+description: Documentation is an integral part of any open source project. The Hugo docs are as much a work in progress as the source it attempts to cover.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [contribute]
+#tags: [docs,documentation,community, contribute]
+menu:
+ docs:
+ parent: "contribute"
+ weight: 20
+weight: 20
+sections_weight: 20
+draft: false
+aliases: [/contribute/docs/]
+toc: true
+---
+
+## Create Your Fork
+
+It's best to make changes to the Hugo docs on your local machine to check for consistent visual styling. Make sure you've created a fork of [hugoDocs](https://github.com/gohugoio/hugoDocs) on GitHub and cloned the repository locally on your machine. For more information, you can see [GitHub's documentation on "forking"][ghforking] or follow along with [Hugo's development contribution guide][hugodev].
+
+You can then create a separate branch for your additions. Be sure to choose a descriptive branch name that best fits the type of content. The following is an example of a branch name you might use for adding a new website to the showcase:
+
+```
+git checkout -b jon-doe-showcase-addition
+```
+
+## Add New Content
+
+The Hugo docs make heavy use of Hugo's [archetypes][] feature. All content sections in Hugo documentation have an assigned archetype.
+
+Adding new content to the Hugo docs follows the same pattern, regardless of the content section:
+
+```
+hugo new <DOCS-SECTION>/<new-content-lowercase>.md
+```
+
- ### Add a New Tutorial
-
- Once you have cloned the Hugo repository, you can create a new tutorial via the following command. Name the markdown file accordingly:
-
- ```
- hugo new tutorials/my-new-tutorial.md
- ```
-
- The archetype for the `tutorials` content type is as follows:
-
- {{< code file="archetypes/tutorials.md" >}}
- {{< readfile file="/themes/gohugoioTheme/archetypes/tutorials.md">}}
- {{< /code >}}
-
+### Add a New Function
+
+Once you have cloned the Hugo repository, you can create a new function via the following command. Keep the file name lowercase.
+
+```
+hugo new functions/newfunction.md
+```
+
+The archetype for `functions` according to the Hugo theme is as follows:
+
+{{< code file="archetypes/functions.md" >}}
+{{< readfile file="/themes/gohugoioTheme/archetypes/functions.md">}}
+{{< /code >}}
+
+#### New Function Required Fields
+
+Here is a review of the front matter fields automatically generated for you using `hugo new functions/*`:
+
+***`title`***
+: this will be auto-populated in all lowercase when you use `hugo new` generator.
+
+***`linktitle`***
+: the function's actual casing (e.g., `replaceRE` rather than `replacere`).
+
+***`description`***
+: a brief description used to populate the [Functions Quick Reference](/functions/).
+
+`categories`
+: currently auto-populated with 'functions` for future-proofing and portability reasons only; ignore this field.
+
+`tags`
+: only if you think it will help end users find other related functions
+
+`signature`
+: this is a signature/syntax definition for calling the function (e.g., `apply SEQUENCE FUNCTION [PARAM...]`).
+
+`workson`
+: acceptable values include `lists`,`taxonomies`, `terms`, `groups`, and `files`.
+
+`hugoversion`
+: the version of Hugo that will ship with this new function.
+
+`relatedfuncs`
+: other [templating functions][] you feel are related to your new function to help fellow Hugo users.
+
+`{{.Content}}`
+: an extended description of the new function; examples are not only welcomed but encouraged.
+
+In the body of your function, expand the short description used in the front matter. Include as many examples as possible, and leverage the Hugo docs [`code` shortcode](#adding-code-blocks). If you are unable to add examples but would like to solicit help from the Hugo community, add `needsexample: true` to your front matter.
+
- {{% output file="post/my-first-post/index.html" %}}
- ```
+## Add Code Blocks
+
+Code blocks are crucial for providing examples of Hugo's new features to end users of the Hugo docs. Whenever possible, create examples that you think Hugo users will be able to implement in their own projects.
+
+### Standard Syntax
+
+Across all pages on the Hugo docs, the typical triple-back-tick markdown syntax is used. If you do not want to take the extra time to implement the following code block shortcodes, please use standard GitHub-flavored markdown. The Hugo docs use a version of [highlight.js](https://highlightjs.org/) with a specific set of languages.
+
+Your options for languages are `xml`/`html`, `go`/`golang`, `md`/`markdown`/`mkd`, `handlebars`, `apache`, `toml`, `yaml`, `json`, `css`, `asciidoc`, `ruby`, `powershell`/`ps`, `scss`, `sh`/`zsh`/`bash`/`git`, `http`/`https`, and `javascript`/`js`.
+
+```
+```
+<h1>Hello world!</h1>
+```
+```
+
+### Code Block Shortcode
+
+The Hugo documentation comes with a very robust shortcode for adding interactive code blocks.
+
+{{% note %}}
+With the `code` shortcodes, *you must include triple back ticks and a language declaration*. This was done by design so that the shortcode wrappers were easily added to legacy documentation and will be that much easier to remove if needed in future versions of the Hugo docs.
+{{% /note %}}
+
+### `code`
+
+`code` is the Hugo docs shortcode you'll use most often. `code` requires has only one named parameter: `file`. Here is the pattern:
+
+```
+{{%/* code file="smart/file/name/with/path.html" download="download.html" copy="true" */%}}
+```
+A whole bunch of coding going on up in here!
+```
+{{%/* /code */%}}
+```
+
+The following are the arguments passed into `code`:
+
+***`file`***
+: the only *required* argument. `file` is needed for styling but also plays an important role in helping users create a mental model around Hugo's directory structure. Visually, this will be displayed as text in the top left of the code block.
+
+`download`
+: if omitted, this will have no effect on the rendered shortcode. When a value is added to `download`, it's used as the filename for a downloadable version of the code block.
+
+`copy`
+: a copy button is added automatically to all `code` shortcodes. If you want to keep the filename and styling of `code` but don't want to encourage readers to copy the code (e.g., a "Do not do" snippet in a tutorial), use `copy="false"`.
+
+#### Example `code` Input
+
+This example HTML code block tells Hugo users the following:
+
+1. This file *could* live in `layouts/_default`, as demonstrated by `layouts/_default/single.html` as the value for `file`.
+2. This snippet is complete enough to be downloaded and implemented in a Hugo project, as demonstrated by `download="single.html"`.
+
+```
+{{%/* code file="layouts/_default/single.html" download="single.html" */%}}
+```
+{{ define "main" }}
+<main>
+ <article>
+ <header>
+ <h1>{{.Title}}</h1>
+ {{with .Params.subtitle}}
+ <span>{{.}}</span>
+ </header>
+ <div>
+ {{.Content}}
+ </div>
+ <aside>
+ {{.TableOfContents}}
+ </aside>
+ </article>
+</main>
+{{ end }}
+```
+{{%/* /code */%}}
+```
+
+##### Example 'code' Display
+
+The output of this example will render to the Hugo docs as follows:
+
+{{< code file="layouts/_default/single.html" download="single.html" >}}
+{{ define "main" }}
+<main>
+ <article>
+ <header>
+ <h1>{{.Title}}</h1>
+ {{with .Params.subtitle}}
+ <span>{{.}}</span>
+ </header>
+ <div>
+ {{.Content}}
+ </div>
+ <aside>
+ {{.TableOfContents}}
+ </aside>
+ </article>
+</main>
+{{ end }}
+{{< /code >}}
+
+<!-- #### Output Code Block
+
+The `output` shortcode is almost identical to the `code` shortcode but only takes and requires `file`. The purpose of `output` is to show *rendered* HTML and therefore almost always follows another basic code block *or* and instance of the `code` shortcode:
+
+```
+{{%/* output file="post/my-first-post/index.html" */%}}
+```
+<h1>This is my First Hugo Blog Post</h1>
+<p>I am excited to be using Hugo.</p>
+```
+{{%/* /output */%}}
+```
+
+The preceding `output` example will render as follows to the Hugo docs:
+
- ```
- {{% /output %}} -->
++{{< output file="post/my-first-post/index.html" >}}
+<h1>This is my First Hugo Blog Post</h1>
+<p>I am excited to be using Hugo.</p>
- {{% output file="note-with-heading.html" %}}
- ```
++{{< /output >}} -->
+
+## Blockquotes
+
+Blockquotes can be added to the Hugo documentation using [typical Markdown blockquote syntax][bqsyntax]:
+
+```
+> Without the threat of punishment, there is no joy in flight.
+```
+
+The preceding blockquote will render as follows in the Hugo docs:
+
+> Without the threat of punishment, there is no joy in flight.
+
+However, you can add a quick and easy `<cite>` element (added on the client via JavaScript) by separating your main blockquote and the citation with a hyphen with a single space on each side:
+
+```
+> Without the threat of punishment, there is no joy in flight. - [Kobo Abe](https://en.wikipedia.org/wiki/Kobo_Abe)
+```
+
+Which will render as follows in the Hugo docs:
+
+> Without the threat of punishment, there is no joy in flight. - [Kobo Abe][abe]
+
+{{% note "Blockquotes `!=` Admonitions" %}}
+Previous versions of Hugo documentation used blockquotes to draw attention to text. This is *not* the [intended semantic use of `<blockquote>`](http://html5doctor.com/cite-and-blockquote-reloaded/). Use blockquotes when quoting. To note or warn your user of specific information, use the admonition shortcodes that follow.
+{{% /note %}}
+
+## Admonitions
+
+**Admonitions** are common in technical documentation. The most popular is that seen in [reStructuredText Directives][sourceforge]. From the SourceForge documentation:
+
+> Admonitions are specially marked "topics" that can appear anywhere an ordinary body element can. They contain arbitrary body elements. Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type. - [SourceForge][sourceforge]
+
+The Hugo docs contain three admonitions: `note`, `tip`, and `warning`.
+
+### `note` Admonition
+
+Use the `note` shortcode when you want to draw attention to information subtly. `note` is intended to be less of an interruption in content than is `warning`.
+
+#### Example `note` Input
+
+{{< code file="note-with-heading.md" >}}
+{{%/* note */%}}
+Here is a piece of information I would like to draw your **attention** to.
+{{%/* /note */%}}
+{{< /code >}}
+
+#### Example `note` Output
+
- ```
- {{% /output %}}
++{{< output file="note-with-heading.html" >}}
+{{% note %}}
+Here is a piece of information I would like to draw your **attention** to.
+{{% /note %}}
- {{% output file="tip-output.html" %}}
- ```
++{{< /output >}}
+
+#### Example `note` Display
+
+{{% note %}}
+Here is a piece of information I would like to draw your **attention** to.
+{{% /note %}}
+
+### `tip` Admonition
+
+Use the `tip` shortcode when you want to give the reader advice. `tip`, like `note`, is intended to be less of an interruption in content than is `warning`.
+
+#### Example `tip` Input
+
+{{< code file="using-tip.md" >}}
+{{%/* tip */%}}
+Here's a bit of advice to improve your productivity with Hugo.
+{{%/* /tip */%}}
+{{< /code >}}
+
+#### Example `tip` Output
+
- ```
- {{% /output %}}
++{{< output file="tip-output.html" >}}
+{{% tip %}}
+Here's a bit of advice to improve your productivity with Hugo.
+{{% /tip %}}
- {{% output file="warning-admonition-output.html" %}}
- ```
++{{< /output >}}
+
+#### Example `tip` Display
+
+{{% tip %}}
+Here's a bit of advice to improve your productivity with Hugo.
+{{% /tip %}}
+
+### `warning` Admonition
+
+Use the `warning` shortcode when you want to draw the user's attention to something important. A good usage example is for articulating breaking changes in Hugo versions, known bugs, or templating "gotchas."
+
+#### Example `warning` Input
+
+{{< code file="warning-admonition-input.md" >}}
+{{%/* warning */%}}
+This is a warning, which should be reserved for *important* information like breaking changes.
+{{%/* /warning */%}}
+{{< /code >}}
+
+#### Example `warning` Output
+
- ```
- {{% /output %}}
++{{< output file="warning-admonition-output.html" >}}
+{{% warning %}}
+This is a warning, which should be reserved for *important* information like breaking changes.
+{{% /warning %}}
++{{< /output >}}
+
+#### Example `warning` Display
+
+{{% warning %}}
+This is a warning, which should be reserved for *important* information like breaking changes.
+{{% /warning %}}
+
+{{% note "Pull Requests and Branches" %}}
+Similar to [contributing to Hugo development](/contribute/development/), the Hugo team expects you to create a separate branch/fork when you make your contributions to the Hugo docs.
+{{% /note %}}
+
+[abe]: https://en.wikipedia.org/wiki/Kobo_Abe
+[archetypes]: /content-management/archetypes/
+[bqsyntax]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#blockquotes
+[charcount]: http://www.lettercount.com/
+[`docs/static/images/showcase/`]: https://github.com/gohugoio/hugo/tree/master/docs/static/images/showcase/
+[ghforking]: https://help.github.com/articles/fork-a-repo/
+[hugodev]: /contribute/development/
+[shortcodeparams]: content-management/shortcodes/#shortcodes-without-markdown
+[sourceforge]: http://docutils.sourceforge.net/docs/ref/rst/directives.html#admonitions
+[templating function]: /functions/
--- /dev/null
- {{% output file="base-64-output.html" %}}
- ```
+---
+title: base64
+description: "`base64Encode` and `base64Decode` let you easily decode content with a base64 encoding and vice versa through pipes."
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+#tags: []
+relatedfuncs: []
+signature: ["base64Decode INPUT", "base64Encode INPUT"]
+workson: []
+hugoversion:
+deprecated: false
+draft: false
+aliases: []
+---
+
+An example:
+
+{{< code file="base64-input.html" >}}
+<p>Hello world = {{ "Hello world" | base64Encode }}</p>
+<p>SGVsbG8gd29ybGQ = {{ "SGVsbG8gd29ybGQ=" | base64Decode }}</p>
+{{< /code >}}
+
- ```
- {{% /output %}}
++{{< output file="base-64-output.html" >}}
+<p>Hello world = SGVsbG8gd29ybGQ=</p>
+<p>SGVsbG8gd29ybGQ = Hello world</p>
++{{< /output >}}
+
+You can also pass other data types as arguments to the template function which tries to convert them. The following will convert *42* from an integer to a string because both `base64Encode` and `base64Decode` always return a string.
+
+```
+{{ 42 | base64Encode | base64Decode }}
+=> "42" rather than 42
+```
+
+## `base64` with APIs
+
+Using base64 to decode and encode becomes really powerful if we have to handle
+responses from APIs.
+
+```
+{{ $resp := getJSON "https://api.github.com/repos/gohugoio/hugo/readme" }}
+{{ $resp.content | base64Decode | markdownify }}
+```
+
+The response of the GitHub API contains the base64-encoded version of the [README.md](https://github.com/gohugoio/hugo/blob/master/README.md) in the Hugo repository. Now we can decode it and parse the Markdown. The final output will look similar to the rendered version on GitHub.
--- /dev/null
- {{% output file="dot-notation-default-return-value.html" %}}
- ```
+---
+title: default
+description: Allows setting a default value that can be returned if a first value is not set.
+qref: "Returns a default value if a value is not set when checked."
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+#tags: [defaults]
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+toc:
+signature: ["default DEFAULT INPUT"]
+workson: []
+hugoversion:
+relatedfuncs: []
+deprecated: false
+draft: false
+aliases: [/functions/default/]
+needsexamples: false
+---
+
+`default` checks whether a given value is set and returns a default value if it is not. *Set* in this context means different things depending on date type:
+
+* non-zero for numeric types and times
+* non-zero length for strings, arrays, slices, and maps
+* any boolean or struct value
+* non-nil for any other types
+
+`default` function examples reference the following content page:
+
+{{< code file="content/posts/default-function-example.md" >}}
+---
+title: Sane Defaults
+seo_title:
+date: 2017-02-18
+font:
+oldparam: The default function helps make your templating DRYer.
+newparam:
+---
+{{< /code >}}
+
+`default` can be written in more than one way:
+
+```
+{{ index .Params "font" | default "Roboto" }}
+{{ default "Roboto" (index .Params "font") }}
+```
+
+Both of the above `default` function calls return `Roboto`.
+
+A `default` value, however, does not need to be hard coded like the previous example. The `default` value can be a variable or pulled directly from the front matter using dot notation:
+
+{{< code file="variable-as-default-value.html" nocopy="true" >}}
+{{$old := .Params.oldparam }}
+<p>{{ .Params.newparam | default $old }}</p>
+{{< /code >}}
+
+Which would return:
+
+```
+<p>The default function helps make your templating DRYer.</p>
+```
+
+And then using dot notation
+
+{{< code file="dot-notation-default-value.html" >}}
+<title>{{ .Params.seo_title | default .Title }}</title>
+{{< /code >}}
+
+Which would return
+
- ```
- {{% /output %}}
++{{< output file="dot-notation-default-return-value.html" >}}
+<title>Sane Defaults</title>
++{{< /output >}}
+
+The following have equivalent return values but are far less terse. This demonstrates the utility of `default`:
+
+Using `if`:
+
+{{< code file="if-instead-of-default.html" nocopy="true" >}}
+<title>{{if .Params.seo_title}}{{.Params.seo_title}}{{else}}{{.Title}}{{end}}</title>
+=> Sane Defaults
+{{< /code >}}
+
+Using `with`:
+
+{{< code file="with-instead-of-default.html" nocopy="true" >}}
+<title>{{with .Params.seo_title}}{{.}}{{else}}{{.Title}}{{end}}</title>
+=> Sane Defaults
+{{< /code >}}
--- /dev/null
- {{% output file="delimit-page-tags-output.html" %}}
- ```
+---
+title: delimit
+description: Loops through any array, slice, or map and returns a string of all the values separated by a delimiter.
+godocref:
+workson: []
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+#tags: [iteration]
+toc: false
+signature: ["delimit COLLECTION DELIMIT LAST"]
+workson: [lists,taxonomies,terms]
+hugoversion:
+relatedfuncs: []
+deprecated: false
+draft: false
+aliases: []
+---
+
+`delimit` called in your template takes the form of
+
+```
+{{ delimit array/slice/map delimiter optionallastdelimiter}}
+```
+
+`delimit` loops through any array, slice, or map and returns a string of all the values separated by a delimiter, the second argument in the function call. There is an optional third parameter that lets you choose a different delimiter to go between the last two values in the loop.
+
+To maintain a consistent output order, maps will be sorted by keys and only a slice of the values will be returned.
+
+The examples of `delimit` that follow all use the same front matter:
+
+{{< code file="delimit-example-front-matter.toml" nocopy="true" >}}
++++
+title: I love Delimit
+#tags: [ "tag1", "tag2", "tag3" ]
++++
+{{< /code >}}
+
+{{< code file="delimit-page-tags-input.html" >}}
+<p>Tags: {{ delimit .Params.tags ", " }}</p>
+{{< /code >}}
+
- ```
- {{% /output %}}
++{{< output file="delimit-page-tags-output.html" >}}
+<p>Tags: tag1, tag2, tag3</p>
- {{% output file="delimit-page-tags-final-and-output.html" %}}
- ```
++{{< /output >}}
+
+Here is the same example but with the optional "last" delimiter:
+
+{{< code file="delimit-page-tags-final-and-input.html" >}}
+Tags: {{ delimit .Params.tags ", " ", and " }}
+{{< /code >}}
+
- ```
- {{% /output %}}
++{{< output file="delimit-page-tags-final-and-output.html" >}}
+<p>Tags: tag1, tag2, and tag3</p>
++{{< /output >}}
+
+
+[lists]: /templates/lists/
+[taxonomies]: /templates/taxonomy-templates/#taxonomy-list-templates
+[terms]: /templates/taxonomy-templates/#terms-list-templates
--- /dev/null
- description: Returns true if the parameters are equal.
+---
+title: eq
+linktitle: eq
++description: Returns the boolean truth of arg1 == arg2.
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+#tags: [operators,logic]
+signature: ["eq ARG1 ARG2"]
+workson: []
+hugoversion:
+relatedfuncs: []
+deprecated: false
+aliases: []
+---
+
+
+```
+{{ if eq .Section "blog" }}current{{ end }}
+```
--- /dev/null
--- /dev/null
++---
++title: ge
++linktitle: ge
++description: Returns the boolean truth of arg1 >= arg2.
++godocref:
++date: 2017-07-26
++publishdate: 2017-07-26
++lastmod: 2017-07-26
++categories: [functions]
++menu:
++ docs:
++ parent: "functions"
++#tags: [operators,logic]
++signature: ["ge ARG1 ARG2"]
++workson: []
++hugoversion:
++relatedfuncs: []
++deprecated: false
++aliases: []
++---
++
++
++```
++{{ if ge 10 5 }}true{{ end }}
++```
--- /dev/null
--- /dev/null
++---
++title: gt
++linktitle: gt
++description: Returns the boolean truth of arg1 > arg2.
++godocref:
++date: 2017-07-26
++publishdate: 2017-07-26
++lastmod: 2017-07-26
++categories: [functions]
++menu:
++ docs:
++ parent: "functions"
++#tags: [operators,logic]
++signature: ["gt ARG1 ARG2"]
++workson: []
++hugoversion:
++relatedfuncs: []
++deprecated: false
++aliases: []
++---
++
++
++```
++{{ if gt 10 5 }}true{{ end }}
++```
--- /dev/null
--- /dev/null
++---
++title: le
++linktitle: le
++description: Returns the boolean truth of arg1 <= arg2.
++godocref:
++date: 2017-07-26
++publishdate: 2017-07-26
++lastmod: 2017-07-26
++categories: [functions]
++menu:
++ docs:
++ parent: "functions"
++#tags: [operators,logic]
++signature: ["le ARG1 ARG2"]
++workson: []
++hugoversion:
++relatedfuncs: []
++deprecated: false
++aliases: []
++---
++
++
++```
++{{ if le 5 10 }}true{{ end }}
++```
--- /dev/null
--- /dev/null
++---
++title: lt
++linktitle: lt
++description: Returns the boolean truth of arg1 < arg2.
++godocref:
++date: 2017-07-26
++publishdate: 2017-07-26
++lastmod: 2017-07-26
++categories: [functions]
++menu:
++ docs:
++ parent: "functions"
++#tags: [operators,logic]
++signature: ["lt ARG1 ARG2"]
++workson: []
++hugoversion:
++relatedfuncs: []
++deprecated: false
++aliases: []
++---
++
++
++```
++{{ if lt 5 10 }}true{{ end }}
++```
--- /dev/null
--- /dev/null
++---
++title: ne
++linktitle: ne
++description: Returns the boolean truth of arg1 != arg2.
++godocref:
++date: 2017-07-26
++publishdate: 2017-07-26
++lastmod: 2017-07-26
++categories: [functions]
++menu:
++ docs:
++ parent: "functions"
++#tags: [operators,logic]
++signature: ["ne ARG1 ARG2"]
++workson: []
++hugoversion:
++relatedfuncs: []
++deprecated: false
++aliases: []
++---
++
++
++```
++{{ if ne .Section "blog" }}current{{ end }}
++```
--- /dev/null
- title: replacere
+---
++title: replaceRE
+# linktitle: replaceRE
+description: Replaces all occurrences of a regular expression with the replacement pattern.
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-04-30
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+#tags: [regex]
+signature: ["replaceRE PATTERN REPLACEMENT INPUT"]
+workson: []
+hugoversion:
+relatedfuncs: []
+deprecated: false
+aliases: []
+---
+
+```
+{{ replaceRE "^https?://([^/]+).*" "$1" "http://gohugo.io/docs" }}` → "gohugo.io"
+{{ "http://gohugo.io/docs" | replaceRE "^https?://([^/]+).*" "$1" }}` → "gohugo.io"
+```
+
+{{% note %}}
+Hugo uses Golang's [Regular Expression package](https://golang.org/pkg/regexp/), which is the same general syntax used by Perl, Python, and other languages but with a few minor differences for those coming from a background in PCRE. For a full syntax listing, see the [GitHub wiki for re2](https://github.com/google/re2/wiki/Syntax).
+
+If you are just learning RegEx, or at least Golang's flavor, you can practice pattern matching in the browser at <https://regex101.com/>.
+{{% /note %}}
--- /dev/null
- {{% output file="bad-url-sidebar-menu-output.html" %}}
- ```
+---
+title: safeURL
+description: Declares the provided string as a safe URL or URL substring.
+godocref: https://golang.org/pkg/html/template/#HTMLEscape
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+#tags: [strings,urls]
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+signature: ["safeURL INPUT"]
+workson: []
+hugoversion:
+relatedfuncs: []
+deprecated: false
+aliases: []
+---
+
+`safeURL` declares the provided string as a "safe" URL or URL substring (see [RFC 3986][]). A URL like `javascript:checkThatFormNotEditedBeforeLeavingPage()` from a trusted source should go in the page, but by default dynamic `javascript:` URLs are filtered out since they are a frequently exploited injection vector.
+
+Without `safeURL`, only the URI schemes `http:`, `https:` and `mailto:` are considered safe by Go templates. If any other URI schemes (e.g., `irc:` and `javascript:`) are detected, the whole URL will be replaced with `#ZgotmplZ`. This is to "defang" any potential attack in the URL by rendering it useless.
+
+The following examples use a [site `config.toml`][configuration] with the following [menu entry][menus]:
+
+{{< code file="config.toml" copy="false" >}}
+[[menu.main]]
+ name = "IRC: #golang at freenode"
+ url = "irc://irc.freenode.net/#golang"
+{{< /code >}}
+
+The following is an example of a sidebar partial that may be used in conjunction with the preceding front matter example:
+
+{{< code file="layouts/partials/bad-url-sidebar-menu.html" copy="false" >}}
+<!-- This unordered list may be part of a sidebar menu -->
+<ul>
+ {{ range .Site.Menus.main }}
+ <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+This partial would produce the following HTML output:
+
- ```
- {{% /output %}}
++{{< output file="bad-url-sidebar-menu-output.html" >}}
+<!-- This unordered list may be part of a sidebar menu -->
+<ul>
+ <li><a href="#ZgotmplZ">IRC: #golang at freenode</a></li>
+</ul>
- {{% output file="correct-url-sidebar-menu-output.html" %}}
- ```
++{{< /output >}}
+
+The odd output can be remedied by adding ` | safeURL` to our `.Title` page variable:
+
+{{< code file="layouts/partials/correct-url-sidebar-menu.html" copy="false" >}}
+<!-- This unordered list may be part of a sidebar menu -->
+<ul>
+ <li><a href="{{ .URL | safeURL }}">{{ .Name }}</a></li>
+</ul>
+{{< /code >}}
+
+With the `.URL` page variable piped through `safeURL`, we get the desired output:
+
- ```
- {{% /output %}}
++{{< output file="correct-url-sidebar-menu-output.html" >}}
+<ul class="sidebar-menu">
+ <li><a href="irc://irc.freenode.net/#golang">IRC: #golang at freenode</a></li>
+</ul>
++{{< /output >}}
+
+[configuration]: /getting-started/configuration/
+[menus]: /content-management/menus/
+[RFC 3986]: http://tools.ietf.org/html/rfc3986
--- /dev/null
- {{% output file="shuffle-output.html" %}}
- ```
+---
+title: shuffle
+# linktitle:
+description: Returns a random permutation of a given array or slice.
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-04-30
+#tags: [ordering]
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+signature: ["shuffle COLLECTION"]
+workson: []
+hugoversion:
+relatedfuncs: [seq]
+deprecated: false
+draft: false
+aliases: []
+---
+
+{{< code file="shuffle-input.html" >}}
+<!-- Shuffled sequence = -->
+<div>{{ shuffle (seq 1 5) }}</div>
+<!-- Shuffled slice = -->
+<div>{{ shuffle (slice "foo" "bar" "buzz") }}</div>
+{{< /code >}}
+
+This example would return the following:
+
- ```
- {{% /output %}}
++{{< output file="shuffle-output.html" >}}
+<!-- Shuffled sequence = -->
+<div>2 5 3 1 4</div>
+<!-- Shuffled slice = -->
+<div>buzz foo bar</div>
++{{< /output >}}
+
+This example also makes use of the [slice](/functions/slice/) and [seq](/functions/seq/) functions.
--- /dev/null
- description: Creates a alice (array) of all passed arguments.
+---
+title: slice
+# linktitle: slice
++description: Creates a slice (array) of all passed arguments.
+godocref:
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+#tags: [slice, array, interface]
+signature: ["slice ITEM..."]
+workson: []
+hugoversion:
+relatedfuncs: []
+deprecated: false
+draft: false
+aliases: []
+toc: false
+---
+
+One use case is the concatenation of elements in combination with the [`delimit` function][]:
+
+{{< code file="slice.html" >}}
+{{ delimit (slice "foo" "bar" "buzz") ", " }}
+<!-- returns the string "foo, bar, buzz" -->
+{{< /code >}}
+
+
+[`delimit` function]: /functions/delimit/
--- /dev/null
- {{% output file="/blog/greatest-city/index.html" %}}
- ```
+---
+title: urlize
+# linktitle: urlize
+description: Takes a string, sanitizes it for usage in URLs, and converts spaces to hyphens.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [functions]
+menu:
+ docs:
+ parent: "functions"
+#tags: [urls,strings]
+godocref:
+signature: ["urlize INPUT"]
+hugoversion:
+deprecated: false
+workson: []
+relatedfuncs: []
+---
+
+The following examples pull from a content file with the following front matter:
+
+{{< code file="content/blog/greatest-city.md" copy="false">}}
++++
+title = "The World's Greatest City"
+location = "Chicago IL"
+tags = ["pizza","beer","hot dogs"]
++++
+{{< /code >}}
+
+The following might be used as a partial within a [single page template][singletemplate]:
+
+{{< code file="layouts/partials/content-header.html" download="content-header.html" >}}
+<header>
+ <h1>{{.Title}}</h1>
+ {{ with .Params.location }}
+ <div><a href="/locations/{{ . | urlize}}">{{.}}</a></div>
+ {{ end }}
+ <!-- Creates a list of tags for the content and links to each of their pages -->
+ {{ with .Params.tags }}
+ <ul>
+ {{range .}}
+ <li>
+ <a href="/tags/{{ . | urlize }}">{{ . }}</a>
+ </li>
+ {{end}}
+ </ul>
+ {{ end }}
+</header>
+{{< /code >}}
+
+The preceding partial would then output to the rendered page as follows, assuming the page is being built with Hugo's default pretty URLs.
+
- ```
- {{% /output %}}
++{{< output file="/blog/greatest-city/index.html" >}}
+<header>
+ <h1>The World's Greatest City</h1>
+ <div><a href="/locations/chicago-il/">Chicago IL</a></div>
+ <ul>
+ <li>
+ <a href="/tags/pizza">pizza</a>
+ </li>
+ <li>
+ <a href="/tags/beer">beer</a>
+ </li>
+ <li>
+ <a href="/tags/hot-dogs">hot dogs</a>
+ </li>
+ </ul>
+</header>
++{{< /output >}}
+
+
+[singletemplate]: /templates/single-page-templates/
--- /dev/null
- * <i class="icon-apple"></i> macOS (Darwin) for x64, i386, and ARM architectures
- * <i class="icon-windows"></i> Windows
- * <i class="icon-linux"></i> Linux
- * <i class="icon-freebsd"></i> FreeBSD
+---
+title: Install Hugo
+linktitle: Install Hugo
+description: Install Hugo on macOS, Windows, Linux, FreeBSD, and on any machine where the Go compiler tool chain can run.
+date: 2016-11-01
+publishdate: 2016-11-01
+lastmod: 2017-02-20
+categories: [getting started,fundamentals]
+authors: ["Michael Henderson"]
+#tags: [install,pc,windows,linux,macos,binary,tarball]
+menu:
+ docs:
+ parent: "getting-started"
+ weight: 30
+weight: 30
+sections_weight: 30
+draft: false
+aliases: [/tutorials/installing-on-windows/,/tutorials/installing-on-mac/,/overview/installing/,/getting-started/install,/install/]
+toc: true
+---
+
+
+{{% note %}}
+There is lots of talk about "Hugo being written in Go", but you don't need to install Go to enjoy Hugo. Just grab a precompiled binary!
+{{% /note %}}
+
+Hugo is written in [Go](https://golang.org/) with support for multiple platforms. The latest release can be found at [Hugo Releases][releases].
+
+Hugo currently provides pre-built binaries for the following:
+
- ## <i class="icon-apple"></i>macOS
++* macOS (Darwin) for x64, i386, and ARM architectures
++* Windows
++* Linux
++* FreeBSD
+
+Hugo may also be compiled from source wherever the Go compiler tool chain can run; e.g., on other operating systems such as DragonFly BSD, OpenBSD, Plan 9, Solaris, and others. See <https://golang.org/doc/install/source> for the full set of supported combinations of target operating systems and compilation architectures.
+
+## Quick Install
+
+### Binary (Cross-platform)
+
+Download the appropriate version for your platform from [Hugo Releases][releases]. Once downloaded, the binary can be run from anywhere. You don't need to install it into a global location. This works well for shared hosts and other systems where you don't have a privileged account.
+
+Ideally, you should install it somewhere in your `PATH` for easy use. `/usr/local/bin` is the most probable location.
+
+### Homebrew (macOS)
+
+If you are on macOS and using [Homebrew][brew], you can install Hugo with the following one-liner:
+
+{{< code file="install-with-homebrew.sh" >}}
+brew install hugo
+{{< /code >}}
+
+For more detailed explanations, read the installation guides that follow for installing on macOS and Windows.
+
+### Chocolatey (Windows)
+
+If you are on a Windows machine and use [Chocolatey][] for package management, you can install Hugo with the following one-liner:
+
+{{< code file="install-with-chocolatey.ps1" >}}
+choco install hugo -confirm
+{{< /code >}}
+
+### Source
+
+#### Prerequisite Tools
+
+* [Git][installgit]
+* [Go 1.5+][installgo]
+* [govendor][]
+
+#### Vendored Dependencies
+
+Hugo uses [govendor][] to vendor dependencies, but we don't commit the vendored packages themselves to the Hugo git repository. Therefore, a simple `go get` is *not* supported because the command is not vendor aware. *You must use `govendor` to fetch Hugo's dependencies.*
+
+#### Fetch from GitHub
+
+{{< code file="from-gh.sh" >}}
+go get github.com/kardianos/govendor
+govendor get github.com/gohugoio/hugo
+go install github.com/gohugoio/hugo
+{{< /code >}}
+
+`govendor get` will fetch Hugo and all its dependent libraries to `$GOPATH/src/github.com/gohugoio/hugo`, and `go install` compiles everything into a final `hugo` (or `hugo.exe`) executable inside `$GOPATH/bin/`.
+
+{{% note %}}
+If you are a Windows user, substitute the `$HOME` environment variable above with `%USERPROFILE%`.
+{{% /note %}}
+
- ## <i class="icon-windows"></i>Windows
++## macOS
+
+### Assumptions
+
+1. You know how to open the macOS terminal.
+2. You're running a modern 64-bit Mac.
+3. You will use `~/Sites` as the starting point for your site. (`~/Sites` is used for example purposes. If you are familiar enough with the command line and file system, you should have no issues following along with the instructions.)
+
+### Pick Your Method
+
+There are three ways to install Hugo on your Mac
+
+1. The [Homebrew][brew] `brew` utility
+2. Distribution (i.e., tarball)
+3. Building from Source
+
+There is no "best" way to install Hugo on your Mac. You should use the method that works best for your use case.
+
+#### Pros and Cons
+
+There are pros and cons to each of the aforementioned methods:
+
+1. **Homebrew.** Homebrew is the simplest method and will require the least amount of work to maintain. The drawbacks aren't severe. The default package will be for the most recent release, so it will not have bug fixes until the next release (i.e., unless you install it with the `--HEAD` option). Hugo `brew` releases may lag a few days behind because it has to be coordinated with another team. Nevertheless, `brew` is the recommended installation method if you want to work from a stable, widely used source. Brew works well and is easy to update.
+
+2. **Tarball.** Downloading and installing from the tarball is also easy, although it requires a few more command line skills than does Homebrew. Updates are easy as well: you just repeat the process with the new binary. This gives you the flexibility to have multiple versions on your computer. If you don't want to use `brew`, then the tarball/binary is a good choice.
+
+3. **Building from Source.** Building from source is the most work. The advantage of building from source is that you don't have to wait for a release to add features or bug fixes. The disadvantage is that you need to spend more time managing the setup, which is manageable but requires more time than the preceding two options.
+
+{{% note %}}
+Since building from source is appealing to more seasoned command line users, this guide will focus more on installing Hugo via Homebrew and Tarball.
+{{% /note %}}
+
+### Install Hugo with Brew
+
+#### Step 1: Install `brew` if you haven't already
+
+Go to the `brew` website, <https://brew.sh/>, and follow the directions there. The most important step is the installation from the command line:
+
+{{< code file="install-brew.sh" >}}
+ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+{{< /code >}}
+
+#### Step 2: Run the `brew` Command to Install `hugo`
+
+Installing Hugo using `brew` is as easy as the following:
+
+{{< code file="install-brew.sh" >}}
+brew install hugo
+{{< /code >}}
+
+If Homebrew is working properly, you should see something similar to the following:
+
+```
+==> Downloading https://homebrew.bintray.com/bottles/hugo-0.21.sierra.bottle.tar.gz
+######################################################################### 100.0%
+==> Pouring hugo-0.21.sierra.bottle.tar.gz
+🍺 /usr/local/Cellar/hugo/0.21: 32 files, 17.4MB
+```
+
+{{% note "Installing the Latest Hugo with Brew" %}}
+Replace `brew install hugo` with `brew install hugo --HEAD` if you want the absolute latest in-development version.
+{{% /note %}}
+
+`brew` should have updated your path to include Hugo. You can confirm by opening a new terminal window and running a few commands:
+
+```
+$ # show the location of the hugo executable
+which hugo
+/usr/local/bin/hugo
+
+# show the installed version
+ls -l $( which hugo )
+lrwxr-xr-x 1 mdhender admin 30 Mar 28 22:19 /usr/local/bin/hugo -> ../Cellar/hugo/0.13_1/bin/hugo
+
+# verify that hugo runs correctly
+hugo version
+Hugo Static Site Generator v0.13 BuildDate: 2015-03-09T21:34:47-05:00
+```
+
+### Install Hugo from Tarball
+
+#### Step 1: Decide on the location
+
+When installing from the tarball, you have to decide if you're going to install the binary in `/usr/local/bin` or in your home directory. There are three camps on this:
+
+1. Install it in `/usr/local/bin` so that all the users on your system have access to it. This is a good idea because it's a fairly standard place for executables. The downside is that you may need elevated privileges to put software into that location. Also, if there are multiple users on your system, they will all run the same version. Sometimes this can be an issue if you want to try out a new release.
+
+2. Install it in `~/bin` so that only you can execute it. This is a good idea because it's easy to do, easy to maintain, and doesn't require elevated privileges. The downside is that only you can run Hugo. If there are other users on your site, they have to maintain their own copies. That can lead to people running different versions. Of course, this does make it easier for you to experiment with different releases.
+
+3. Install it in your `Sites` directory. This is not a bad idea if you have only one site that you're building. It keeps every thing in a single place. If you want to try out new releases, you can make a copy of the entire site and update the Hugo executable.
+
+All three locations will work for you. In the interest of brevity, this guide focuses on option #2.
+
+#### Step 2: Download the Tarball
+
+1. Open <https://github.com/gohugoio/hugo/releases> in your browser.
+
+2. Find the current release by scrolling down and looking for the green tag that reads "Latest Release."
+
+3. Download the current tarball for the Mac. The name will be something like `hugo_X.Y_osx-64bit.tgz`, where `X.YY` is the release number.
+
+4. By default, the tarball will be saved to your `~/Downloads` directory. If you choose to use a different location, you'll need to change that in the following steps.
+
+#### Step 3: Confirm your download
+
+Verify that the tarball wasn't corrupted during the download:
+
+```
+tar tvf ~/Downloads/hugo_X.Y_osx-64bit.tgz
+-rwxrwxrwx 0 0 0 0 Feb 22 04:02 hugo_X.Y_osx-64bit/hugo_X.Y_osx-64bit.tgz
+-rwxrwxrwx 0 0 0 0 Feb 22 03:24 hugo_X.Y_osx-64bit/README.md
+-rwxrwxrwx 0 0 0 0 Jan 30 18:48 hugo_X.Y_osx-64bit/LICENSE.md
+```
+
+The `.md` files are documentation for Hugo. The other file is the executable.
+
+#### Step 4: Install Into Your `bin` Directory
+
+```
+# create the directory if needed
+mkdir -p ~/bin
+
+# make it the working directory
+cd ~/bin
+
+# extract the tarball
+tar -xvzf ~/Downloads/hugo_X.Y_osx-64bit.tgz
+Archive: hugo_X.Y_osx-64bit.tgz
+ x ./
+ x ./hugo
+ x ./LICENSE.md
+ x ./README.md
+
+# verify that it runs
+./hugo version
+Hugo Static Site Generator v0.13 BuildDate: 2015-02-22T04:02:30-06:00
+```
+
+You may need to add your bin directory to your `PATH` variable. The `which` command will check for us. If it can find `hugo`, it will print the full path to it. Otherwise, it will not print anything.
+
+```
+# check if hugo is in the path
+which hugo
+/Users/USERNAME/bin/hugo
+```
+
+If `hugo` is not in your `PATH`, add it by updating your `~/.bash_profile` file. First, start up an editor:
+
+```
+nano ~/.bash_profile
+```
+
+Add a line to update your `PATH` variable:
+
+```
+export PATH=$PATH:$HOME/bin
+```
+
+Then save the file by pressing Control-X, then Y to save the file and return to the prompt.
+
+Close the terminal and open a new terminal to pick up the changes to your profile. Verify your success by running the `which hugo` command again.
+
+You've successfully installed Hugo.
+
+### Build from Source on Mac
+
+If you want to compile Hugo yourself, you'll need to install Go (aka Golang). You can [install Go directly from the Go website](https://golang.org/dl/) or via Homebrew using the following command:
+
+```
+brew install go
+```
+
+#### Step 1: Get the Source
+
+If you want to compile a specific version of Hugo, go to <https://github.com/gohugoio/hugo/releases> and download the source code for the version of your choice. If you want to compile Hugo with all the latest changes (which might include bugs), clone the Hugo repository:
+
+```
+git clone https://github.com/gohugoio/hugo
+```
+
+{{% warning "Sometimes \"Latest\" = \"Bugs\""%}}
+Cloning the Hugo repository directly means taking the good with the bad. By using the bleeding-edge version of Hugo, you make your development susceptible to the latest features, as well as the latest bugs. Your feedback is appreciated. If you find a bug in the latest release, [please create an issue on GitHub](https://github.com/gohugoio/hugo/issues/new).
+{{% /warning %}}
+
+#### Step 2: Compiling
+
+Make the directory containing the source your working directory and then fetch Hugo's dependencies:
+
+```
+mkdir -p src/github.com/gohugoio
+ln -sf $(pwd) src/github.com/gohugoio/hugo
+
+# set the build path for Go
+export GOPATH=$(pwd)
+
+go get
+```
+
+This will fetch the absolute latest version of the dependencies. If Hugo fails to build, it may be the result of a dependency's author introducing a breaking change.
+
+Once you have properly configured your directory, you can compile Hugo using the following command:
+
+```
+go build -o hugo main.go
+```
+
+Then place the `hugo` executable somewhere in your `$PATH`. You're now ready to start using Hugo.
+
- ## <i class="icon-linux"></i>Linux
++## Windows
+
+The following aims to be a complete guide to installing Hugo on your Windows PC.
+
+### Assumptions
+
+1. You will use `C:\Hugo\Sites` as the starting point for your new project.
+2. You will use `C:\Hugo\bin` to store executable files.
+
+### Set up Your Directories
+
+You'll need a place to store the Hugo executable, your [content][], and the generated Hugo website:
+
+1. Open Windows Explorer.
+2. Create a new folder: `C:\Hugo`, assuming you want Hugo on your C drive, although this can go anywhere
+3. Create a subfolder in the Hugo folder: `C:\Hugo\bin`
+4. Create another subfolder in Hugo: `C:\Hugo\Sites`
+
+### Technical Users
+
+1. Download the latest zipped Hugo executable from [Hugo Releases][releases].
+2. Extract all contents to your `..\Hugo\bin` folder.
+3. The `hugo` executable will be named as `hugo_hugo-version_platform_arch.exe`. Rename the executable to `hugo.exe` for ease of use.
+4. In PowerShell or your preferred CLI, add the `hugo.exe` executable to your PATH by navigating to `C:\Hugo\bin` (or the location of your hugo.exe file) and use the command `set PATH=%PATH%;C:\Hugo\bin`. If the `hugo` command does not work after a reboot, you may have to run the command prompt as administrator.
+
+### Less-technical Users
+
+1. Go to the [Hugo Releases][releases] page.
+2. The latest release is announced on top. Scroll to the bottom of the release announcement to see the downloads. They're all ZIP files.
+3. Find the Windows files near the bottom (they're in alphabetical order, so Windows is last) – download either the 32-bit or 64-bit file depending on whether you have 32-bit or 64-bit Windows. (If you don't know, [see here](https://esupport.trendmicro.com/en-us/home/pages/technical-support/1038680.aspx).)
+4. Move the ZIP file into your `C:\Hugo\bin` folder.
+5. Double-click on the ZIP file and extract its contents. Be sure to extract the contents into the same `C:\Hugo\bin` folder – Windows will do this by default unless you tell it to extract somewhere else.
+6. You should now have three new files: hugo executable (e.g. `hugo_0.18_windows_amd64.exe`), `license.md`, and `readme.md`. (You can delete the ZIP download now.) Rename that hugo executable (`hugo_hugo-version_platform_arch.exe`) to `hugo.exe` for ease of use.
+
+Now you need to add Hugo to your Windows PATH settings:
+
+#### For Windows 10 Users:
+
+* Right click on the **Start** button.
+* Click on **System**.
+* Click on **Advanced System Settings** on the left.
+* Click on the **Environment Variables...** button on the bottom.
+* In the User variables section, find the row that starts with PATH (PATH will be all caps).
+* Double-click on **PATH**.
+* Click the **New...** button.
+* Type in the folder where `hugo.exe` was extracted, which is `C:\Hugo\bin` if you went by the instructions above. *The PATH entry should be the folder where Hugo lives and not the binary.* Press <kbd>Enter</kbd> when you're done typing.
+* Click OK at every window to exit.
+
+{{% note "Path Editor in Windows 10"%}}
+The path editor in Windows 10 was added in the large [November 2015 Update](https://blogs.windows.com/windowsexperience/2015/11/12/first-major-update-for-windows-10-available-today/). You'll need to have that or a later update installed for the above steps to work. You can see what Windows 10 build you have by clicking on the <i class="fa fa-windows"></i> Start button → Settings → System → About. See [here](https://www.howtogeek.com/236195/how-to-find-out-which-build-and-version-of-windows-10-you-have/) for more.)
+{{% /note %}}
+
+#### For Windows 7 and 8.x users:
+
+Windows 7 and 8.1 do not include the easy path editor included in Windows 10, so non-technical users on those platforms are advised to install a free third-party path editor like [Windows Environment Variables Editor][Windows Environment Variables Editor] or [Path Editor](https://patheditor2.codeplex.com/).
+
+### Verify the Executable
+
+Run a few commands to verify that the executable is ready to run, and then build a sample site to get started.
+
+#### 1. Open a Command Prompt
+
+At the prompt, type `hugo help` and press the <kbd>Enter</kbd> key. You should see output that starts with:
+
+```
+hugo is the main command, used to build your Hugo site.
+
+Hugo is a Fast and Flexible Static Site Generator
+built with love by spf13 and friends in Go.
+
+Complete documentation is available at https://gohugo.io/.
+```
+
+If you do, then the installation is complete. If you don't, double-check the path that you placed the `hugo.exe` file in and that you typed that path correctly when you added it to your `PATH` variable. If you're still not getting the output, search the [Hugo discussion forum][forum] to see if others have already figured out our problem. If not, add a note---in the "Support" category---and be sure to include your command and the output.
+
+At the prompt, change your directory to the `Sites` directory.
+
+```
+C:\Program Files> cd C:\Hugo\Sites
+C:\Hugo\Sites>
+```
+
+#### 2. Run the Command
+
+Run the command to generate a new site. I'm using `example.com` as the name of the site.
+
+```
+C:\Hugo\Sites> hugo new site example.com
+```
+
+You should now have a directory at `C:\Hugo\Sites\example.com`. Change into that directory and list the contents. You should get output similar to the following:
+
+```
+C:\Hugo\Sites>cd example.com
+C:\Hugo\Sites\example.com>dir
+ Directory of C:\hugo\sites\example.com
+
+04/13/2015 10:44 PM <DIR> .
+04/13/2015 10:44 PM <DIR> ..
+04/13/2015 10:44 PM <DIR> archetypes
+04/13/2015 10:44 PM 83 config.toml
+04/13/2015 10:44 PM <DIR> content
+04/13/2015 10:44 PM <DIR> data
+04/13/2015 10:44 PM <DIR> layouts
+04/13/2015 10:44 PM <DIR> static
+ 1 File(s) 83 bytes
+ 7 Dir(s) 6,273,331,200 bytes free
+```
+
+### Troubleshoot Windows Installation
+
+[@dhersam][] has created a nice video on common issues:
+
+{{< youtube c8fJIRNChmU >}}
+
- In any of the [Linux distributions that support snaps](https://snapcraft.io/docs/core/install):
++## Linux
++
++### Snap Package
++
++In any of the [Linux distributions that support snaps][snaps]:
++
++```
++snap install hugo
++```
++
++{{% note %}}
++Hugo-as-a-snap can write only inside the user’s `$HOME` directory---and gvfs-mounted directories owned by the user---because of Snaps’ confinement and security model. More information is also available [in this related GitHub issue](https://github.com/gohugoio/hugo/issues/3143).
++{{% /note %}}
+
+### Debian and Ubuntu
+
- sudo apt install hugo
++Debian and Ubuntu provide a `hugo` version via `apt-get`:
+
+```
- * Might not be the latest version, especially if you are using an older, stable version (e.g., Ubuntu 16.04 LTS). Until backports and PPA are available, you may consider installing the Hugo snap package to get the latest version of Hugo, as described below.
++sudo apt-get install hugo
+```
+
+#### Pros
+
+* Native Debian/Ubuntu package maintained by Debian Developers
+* Pre-installed bash completion script and `man` pages
+
+#### Cons
+
- ### Snap Package
-
- In any of the [Linux distributions that support snaps][snaps]:
-
- ```
- snap install hugo
- ```
-
- {{% note %}}
- Hugo-as-a-snap can write only inside the user’s `$HOME` directory---and gvfs-mounted directories owned by the user---because of Snaps’ confinement and security model. More information is also available [in this related GitHub issue](https://github.com/gohugoio/hugo/issues/3143).
- {{% /note %}}
++* Might not be the latest version, especially if you are using an older, stable version (e.g., Ubuntu 16.04 LTS). Until backports and PPA are available, you may consider installing the Hugo snap package to get the latest version of Hugo.
+
+### Arch
+
+You can also install Hugo from the [Arch user repository](https://aur.archlinux.org/) on Arch Linux or derivatives such as Manjaro.
+
+Be aware that Hugo is built from source. This means that additional tools like [Git](https://git-scm.com) and [Go](https://golang.org/doc/install) will be installed as well.
+
+```
+sudo pacman -S yaourt
+yaourt -S hugo
+```
+
+### Fedora, CentOS, and Red Hat
+
+* <https://copr.fedorainfracloud.org/coprs/spf13/Hugo/> (updated to Hugo v0.16)
+* <https://copr.fedorainfracloud.org/coprs/daftaupe/hugo/> (updated to Hugo v0.22); usually released a few days after the official Hugo release.
+
+See the [related discussion in the Hugo forums][redhatforum].
+
+
+## Upgrade Hugo
+
+Upgrading Hugo is as easy as downloading and replacing the executable you’ve placed in your `PATH`.
+
+## Install Pygments (Optional)
+
+The Hugo executable has one *optional* external dependency for source code highlighting ([Pygments][pygments]).
+
+If you want to have source code highlighting using the [highlight shortcode][], you need to install the Python-based Pygments program. The procedure is outlined on the [Pygments homepage][pygments].
+
+## Next Steps
+
+Now that you've installed Hugo, read the [Quick Start guide][quickstart] and explore the rest of the documentation. If you have questions, ask the Hugo community directly by visiting the [Hugo Discussion Forum][forum].
+
+[brew]: https://brew.sh/
+[Chocolatey]: https://chocolatey.org/
+[content]: /content-management/
+[@dhersam]: https://github.com/dhersam
+[forum]: https://discourse.gohugo.io
+[govendor]: https://github.com/kardianos/govendor
+[highlight shortcode]: /content-management/shortcodes/#highlight
+[installgit]: http://git-scm.com/
+[installgo]: https://golang.org/dl/
+[Path Editor]: https://patheditor2.codeplex.com/
+[pygments]: https://pygments.org
+[quickstart]: /getting-started/quick-start/
+[redhatforum]: https://discourse.gohugo.io/t/solved-fedora-copr-repository-out-of-service/2491
+[releases]: https://github.com/gohugoio/hugo/releases
+[snaps]: http://snapcraft.io/docs/core/install
+[windowsarch]: https://esupport.trendmicro.com/en-us/home/pages/technical-support/1038680.aspx
+[Windows Environment Variables Editor]: http://eveditor.com/
--- /dev/null
- description: Build an online bookshelf that taps into Hugo's CLI, directory structure, configuration, and theming.
+---
+title: Quick Start
+linktitle: Quick Start
- lastmod: 2017-06-22
++description: Create a Hugo site using the beautiful Ananke theme.
+date: 2013-07-01
+publishdate: 2013-07-01
- aliases: [/overview/quickstart/]
+categories: [getting started]
+#tags: [quick start,usage]
+authors: [Shekhar Gulati, Ryan Watters]
+menu:
+ docs:
+ parent: "getting-started"
+ weight: 10
+weight: 10
+sections_weight: 10
+draft: false
- wip: true
++aliases: [/quickstart/,/overview/quickstart/]
+toc: true
- This Quick Start was originally written by [Shekhar Gulati](https://twitter.com/shekhargulati) in his [52 Technologies in 2016](https://github.com/shekhargulati/52-technologies-in-2016) blog series but has been heavily modified to represent additional features and other changes to Hugo.
- {{% /note %}}
-
- In this Quick Start, we will build an online bookshelf that lists books and their reviews.
-
- ## Step 1. Install Hugo
+---
+
+{{% note %}}
- [Install Hugo][install]. If installing from [Hugo releases][releases], you'll need to save the main executable as `hugo` (or `hugo.exe` on Windows) somewhere in your `PATH`. You will need the `hugo` command in the following steps.
-
- {{% note "Windows Users and Git Bash" %}}
- If you're on Windows, this Quick Start will assume you're using [Git Bash](https://git-for-windows.github.io/) (aka Git for Windows).
++This quick start uses `macOS` in the examples. For instructions about how to install Hugo on other operating systems, see [install](/getting-started/installing).
+
- Once `hugo` is installed, make sure to run the `help` command to verify `hugo` installation. The following is an abridged version of what will write to the console when entering the command:
++You also need [Git installed](https://git-scm.com/downloads) to run this tutorial.
+{{% /note %}}
+
- ```
- hugo help
+
- hugo is the main command, used to build your Hugo site.
+
- Hugo is a Fast and Flexible Static Site Generator
- built with love by spf13 and friends in Go.
++## Step 1: Install Hugo
+
- Complete documentation is available at http://gohugo.io/.
++{{% note %}}
++`Homebrew`, a package manager for `macOS`, can be installed from [brew.sh](https://brew.sh/). See [install](/getting-started/installing) if you are running Windows etc.
++{{% /note %}}
+
- You can check the version of Hugo you're currently using with the `hugo version` command:
++```bash
++brew install hugo
+```
+
- ```
++To verify your new install:
+
- ```
- Hugo Static Site Generator v0.18.1 BuildDate: 2016-12-30T05:02:43-05:00
- ```
++```bash
+hugo version
+```
+
- ## Step 2. Scaffold Your Hugo Bookshelf Website
+
- Hugo's CLI has commands that allow you to quickly scaffold a new website. Navigate to your preferred location on your file system and create a new Hugo site `bookshelf` by executing the `hugo new` command:
++{{< asciicast HDlKrUrbfT7yiWsbd6QoxzRTN >}}
+
- ```
- hugo new site bookshelf
- ```
-
- Change into the newly created `bookshelf` directory. Listing the new directory's content will show the following:
+
- ```
- .
- ├── archetypes
- ├── config.toml
- ├── content
- ├── data
- ├── layouts
- ├── static
- └── themes
-
- 6 directories, 1 file
++## Step 2: Create a New Site
+
- You'll see the `bookshelf` directory has 6 subdirectories and 1 file. Let's look at each of them quickly. (See [Directory Structure][hugodirectories].)
++```bash
++hugo new site quickstart
+```
+
- * `archetypes`: [Archetypes][archetypes] allow you to preconfigure [front matter][fm] for content files for easier scaffolding of content from the command line using `hugo new`.
- * `config.toml`: Hugo uses `.toml` as its default configuration format but also accepts `.yml` and `.json`. The configuration settings mentioned in the `config.toml` are applied to the full website an include important global variables such as the `baseURL` and `title` of your website. (See [Configuration][configuration].)
- * `content`: This single directory houses all of the content for your website. Each subdirectory in content is considered a [section][]. If your website has sections for posts, events, and tutorials, you would create `content/posts`, `content/events`, and `content/tutorials`.
- * `data`: This directory is used to store files of serialized data (YAML, TOML, or JSON) that can be used in [data templates][datatemplates] and your [website's menu][sitemenu].
- * `layouts`: This is the hub for all your [templating][templating], including [list and section templates](/templates/lists/) and [shortcodes](/templates/shortcode-templates/).
- * `static`: This houses all your static content; i.e., images, JavaScript, and CSS. Everything in `/static` is copied over *as is* to your finished website.
- * `themes`: This is where you will download themes for Hugo. You can see a showcase of all themes at <http://themes.gohugo.io>.
++The above will create a new Hugo site in a folder named `quickstart`.
+
- ## Step 3. Add Content
++{{< asciicast 1PH9A2fs14Dnyarx5v8OMYQer >}}
+
- Let's now add a post to our "bookshelf." We will use the `hugo new` command to add a post. This first post will be on the book [*Good To Great*][bookurl]. Make sure you are inside the `bookshelf` directory.
+
- {{< code file="create-new-book-review-post.sh" >}}
- hugo new post/good-to-great.md
- {{< /code >}}
++## Step 3: Add a Theme
+
- You should then see the following output:
++See [themes.gohugo.io](https://themes.gohugo.io/) for a list of themes to consider. This quickstart uses the beautiful [Ananke theme](https://themes.gohugo.io/gohugo-theme-ananke/).
+
- ```
- /Users/yourusername/bookshelf/content/post/good-to-great.md created
++```bash
++cd quickstart;\
++git init;\
++git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
+
- The above command will create a new directory `post` inside the `content` directory and create `content/post/good-to-great.md`. The directory for your Hugo project will now look like the following:
++# Edit your config.toml configuration file
++# and add the Ananke theme.
++echo 'theme = "ananke"' >> config.toml
+```
+
- ```
- .
- ├── archetypes
- ├── config.toml
- ├── content
- │ └── post
- │ └── good-to-great.md
- ├── data
- ├── layouts
- ├── static
- └── themes
- ```
+
- Open `good-to-great.md` in your preferred text editor:
++{{< asciicast WJM2LEZQs8VRhNeuZ5NiGPp9I >}}
+
- +++
- date = "2017-02-19T21:09:05-06:00"
- title = "good to great"
- draft = true
-
- +++
++## Step 4: Add Some Content
+
+```
- The text bracketed by `+++` is the TOML [front matter][fm] for the content. Front matter enables you to define embedded metadata that travels with the content file. Since we have not configured any [archetypes][archetypes] for our project, Hugo has used its built-in base archetype, which includes the following three values in the front matter:
-
- * `date` specifies the date and time at which post was created from the command line
- * `title` specifies the title for the post, which Hugo will infer from the file name
- * `draft`, when set to `true`, tells Hugo the content is not yet ready to be published
-
- Let's update `good-to-great.md` with a short review of *Good to Great*:
-
- {{< code file="good-to-great-start.md" >}}
- +++
- date = "2016-02-14T16:11:58+05:30"
- draft = true
- title = "Good to Great Book Review"
- +++
++hugo new posts/my-first-post.md
+```
+
- I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great. Although this book is about how companies became great but we could apply a lot of the learnings on ourselves. Concepts like level 5 leader, hedgehog concept, the stockdale paradox are equally applicable to individuals.
- {{< /code >}}
+
- ## Step 4. Serve Content
-
- Hugo has a built-in server that can serve your website locally for easy previewing and development. To serve content, execute the following command inside the `bookshelf` directory:
-
- ```
- hugo server
++Edit the newly created content file if you want. Now, start the Hugo server with [drafts](/getting-started/usage/#draft-future-and-expired-content) enabled:
+
- You should see something similar to the following output:
-
- ```
- Built site for language en:
- 0 of 1 draft rendered
- 0 future content
- 0 expired content
- 0 regular pages created
- 1 other pages created
- 0 non-page files copied
- 0 paginator pages created
- 0 tags created
- 0 categories created
- total in 1 ms
- Watching for changes in /Users/yourusername/bookshelf/{data,content,layouts,static}
- Serving pages from memory
- Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
- Press Ctrl+C to stop
- ```
-
- This will start the server on port `1313`. You can view your blog at <http://localhost:1313/>. However, when you go to the link, you will see nothing. This is for a couple reasons:
-
- 1. As you can see in the `hugo server` command output, Hugo did *not* render the draft. Hugo will only render drafts if you pass the `buildDrafts` flag to the `hugo server` command.
- 2. We have not specified how Markdown content should be rendered. We need to create our own layouts via templates or specify a theme, the latter of which we will do in the next step.
-
- Kill the server using <kbd>Ctrl</kbd> + <kbd>C</kbd> and then rerun the server with the `--buildDrafts` flag appended to the command:
-
- ```
- hugo server --buildDrafts
- ```
-
- You should now see something similar to the following:
-
- ```
+```
++▶ hugo server -D
+
- 2 other pages created
++Started building sites ...
+Built site for language en:
+1 of 1 draft rendered
+0 future content
+0 expired content
+1 regular pages created
- 0 paginator pages created
- 0 tags created
++8 other pages created
+0 non-page files copied
- total in 2 ms
- Watching for changes in /Users/yourusername/bookshelf/{data,content,layouts,static}
- Serving pages from memory
- Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
- Press Ctrl+C to stop
- ```
-
- Okay, so we now have our single page "built," but we're not seeing anything in the browser at <http://localhost:1313>. This was only to demonstrate the utility of the `--buildDrafts` flag.
-
- While we are getting closer, we still need to specific a theme for Hugo to use when building our site.
-
- ## Step 5. Add A Theme
-
- [Themes][themessection] provide Hugo with layout and templates to render your website. You can see the full selection of open-source themes at <http://themes.gohugo.io>.
-
- {{% note "No Default Hugo Theme" %}}
- Hugo currently doesn’t ship with a default theme, thus allowing end users to pick whichever theme best suits their projects.
- {{% /note %}}
-
- Themes should be added in the `themes` directory, one of the directories scaffolded with the `hugo new site` command we used to start our Hugo project. To install our themes, first change into the `themes` directory:
-
- ```
- cd themes
- ```
-
- You can clone one or more themes from within the `themes` directory. We will use the [Robust theme][robusttheme] but at the most recent commit as of this Quick Start's last update.
-
- Once inside the `themes` directory, you can use the following one-liner to clone Robust, check out the specific commit, and then return to your project's root directory:
-
- {{< code file="clone-robust-theme" >}}
- git clone https://github.com/dim0627/hugo_theme_robust.git && cd hugo_theme_robust && git checkout 3baae29 && cd ../..
- {{< /code >}}
-
- Now let's start Hugo's server again but with the addition of the `-theme` flag for Robust:
-
- {{< code file="hugo-server-with-theme.sh" >}}
- hugo server --theme=hugo_theme_robust --buildDrafts
- {{< /code >}}
-
- You should see an output to the console similar to the following:
-
- ```
- Built site for language en:
- 1 of 1 draft rendered
- 0 future content
- 0 expired content
- 1 regular pages created
- 2 other pages created
- 0 non-page files copied
- 2 paginator pages created
++1 paginator pages created
+0 categories created
- 0 categories created
- total in 8 ms
- Watching for changes in /Users/yourusername/bookshelf/{data,content,layouts,static,themes}
+0 tags created
- If Hugo doesn't find the specified theme in the `themes` directory,
- it will throw an exception:
-
- ```
- FATAL: 2016/02/14 Unable to find theme Directory: /Users/yourusername/bookshelf/themes/robust
- ```
-
- To view your website, you can go to <http://localhost:1313/>. You should see something similar to the following image:
-
- 
++total in 18 ms
++Watching for changes in /Users/bep/sites/quickstart/{data,content,layouts,static,themes}
+Serving pages from memory
+Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
+Press Ctrl+C to stop
+```
+
- Similar to the way we looked at the scaffolding for our new Hugo website, let's take a look at what comprises a typical Hugo theme. The following is only a selection of what you would see if you were to list out the contents of the Robust theme directory. These are also some of the default files created by Hugo as of v0.23. (See [Creating a Theme][createtheme])
+
- ```
- .
- ├── LICENSE.md
- ├── archetypes
- │ └── default.md
- ├── layouts
- │ ├── 404.html
- │ ├── _default
- │ │ ├── list.html
- │ │ └── single.html
- │ ├── index.html
- │ └── partials
- │ ├── footer.html
- │ └── header.html
- ├── static
- │ ├── css
- │ └── js
- └── theme.toml
- ```
++**Navigate to your new site at [http://localhost:1313/](http://localhost:1313/).**
+
- * `theme.toml` is the theme configuration file that provides information about the theme; e.g., theme name, theme description, theme author, theme license, and minimum Hugo version, which will default to your locally installed version of Hugo.
- * `layouts` contains different views (i.e., [templates][templating]) for different content types. In this quick start, we see that each content type has a `single.html` and `list.html`. `single.html` is used for rendering a single piece of content. `list.html` is used to view a list of content items. For example, you will use `list.html` to view `*.md` in the posts [section][listsectiontemplates]. Think of `list.html` as `example.com/posts` and `single.html` as `example.com/posts/my-single-post/`.
- * `static` has the same purpose as that of the `static` in our original scaffolding. This directory stores all the static assets used by the theme and is copied over *as is* at build time.
+
- ## Step 6. Use Multiple Themes
+
- You can very easily switch between different themes in Hugo. Let's suppose we want to try out the [`bleak` theme][bleaktheme]. Kill the Hugo server if you are still running it from the command line.
++## Step 5: Customize the Theme
+
- From your project root, you can use this one-liner to change into `themes`, clone Bleak, and go back to your project's root directory:
++Your new site already looks great, but you will want to tweak it a little before you release it to the public.
+
- {{< code file="clone-bleak-theme.sh" >}}
- cd themes && git clone https://github.com/Zenithar/hugo-theme-bleak.git && cd ..
- {{< /code >}}
++### Site Configuration
+
- Now restart the server with our new theme flag:
-
- {{< code file="run-server-with-bleak.sh" >}}
- hugo server --theme=hugo-theme-bleak --buildDrafts
- {{< /code >}}
-
- Our website is now using the `bleak` theme at <http://localhost:1313>, which should look similar to the following screenshot:
-
- 
-
- ## Step 7. Update Your Configuration
-
- Kill the Hugo server if you are still running it with the Bleak theme, and then restart the server with the `robust` theme. We will use Robust for the duration of this Quick Start:
-
- {{< code file="restart-with-robust-sh" >}}
- hugo server --theme=hugo_theme_robust --buildDrafts
- {{< /code >}}
-
- ### Update Our `config.toml`
-
- Our website is currently using the dummy values specified in `bookshelf/config.toml`, which were auto-generated with `hugo new site bookshelf`. Let's update the configuration:
-
- {{< code file="updated-config.toml" >}}
++Open up `config.toml` in a text editor:
+
- title = "Shekhar Gulati Book Reviews"
-
- [Params]
- Author = "Shekhar Gulati"
- {{< /code >}}
-
- ### Watch Your Site Reload Instantly
-
- Hugo has built-in support for LiveReload. This means that Hugo will rebuild and reload your site every time you save a change to content, templates, static assets, and even your configuration. You should see something similar to the following screenshot at <http://localhost:1313> once you save the above changes to your `config.toml`:
-
- 
-
- The change is also reflected in the console. As soon as you changed the configuration file, Hugo applied those changes to the affected pages and rebuilt the site:
-
- ```
- Config file changed: /Users/yourusername/bookshelf/config.toml
- Started building sites ...
- Built site for language en:
- 1 of 1 draft rendered
- 0 future content
- 0 expired content
- 1 regular pages created
- 2 other pages created
- 0 non-page files copied
- 2 paginator pages created
- 0 tags created
- 0 categories created
- total in 20 ms
- ```
-
- ## Step 8. Customize the Robust Theme
-
- The `robust` theme is a good start towards our online bookshelf, but we want to customize it a bit to meet our desired look and feel. Hugo makes it very easy to [customize existing themes or create your own][themes] themes as well. For the purpose of the Quick Start, we will focus on customization.
-
- The first change that we have to make is to use a different default image instead of the one used in the theme. The theme's default image used in both the `list.html` and `single.html` views resides inside `themes/hugo_theme_robust/static/images/default.jpg`. We can easily override it by creating a simple directory structure inside our repository's `static` directory.
-
- Create an images directory inside of `bookshelf/static` and copy an image with name `default.jpg` inside of it. We will use the default image shown below.
-
- 
-
- Hugo will sync the changes and reload the website to use the new image:
-
- 
-
- Now we need to change the layout of the index page so that only images are shown instead of the text. The file at `themes/hugo_theme_robust/layouts/index.html` refers to a partial `li.html` template that renders the following list view:
-
- ```
- <article class="li">
- <a href="{{ .Permalink }}" class="clearfix">
- <div class="image" style="background-image: url({{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}default.jpg{{ end }});"></div>
- <div class="detail">
- <time>{{ with .Site.Params.DateForm }}{{ $.Date.Format . }}{{ else }}{{ $.Date.Format "Mon, Jan 2, 2006" }}{{ end }}</time>
- <h2 class="title">{{ .Title }}</h2>
- <div class="summary">{{ .Summary }}</div>
- </div>
- </a>
- </article>
- ```
-
- Create a new file for `li.html` inside the `bookshelf/layouts/_default` directory. If you are in your project root, you can use the following one-liner to both create the file and return to the project root:
-
- {{< code file="create-new-li-html.sh" >}}
- cd layouts && mkdir _default && cd _default && touch li.html && cd ../..
- {{< /code >}}
-
- Copy the content shown below into the new `li.html`. When contrasting this with the `li.html` that ships with the Robust theme, you'll notice we have removed details of the book so that only the image is shown:
-
- {{< code file="layouts/_default/li.html" >}}
- <article class="li">
- <a href="{{ .Permalink }}" class="clearfix">
- <div class="image" style="background-image: url({{ $.Site.BaseURL }}images/{{ with .Params.image }}{{ . }}{{ else }}default.jpg{{ end }});"></div>
- </a>
- </article>
- {{< /code >}}
-
- Now, the website should render similar to the following screenshot:
-
- 
-
- Next, we want to remove information related to the theme from the footer. Let's create a new directory at `bookshelf/layouts/partials`. This will hold our new file called `default_foot.html`.
-
- This is a new [partial template][partials]. If you are still in the project's root directory, you can use the following one-liner to create the partial before returning to the project root:
-
- {{< code file="create-new-default-foot.sh" >}}
- cd layouts && mkdir partials && cd partials && touch default_foot.html && cd ../..
- {{< /code >}}
-
- Now add the following to our new `default_foot.html` partial template:
-
- {{< code file="layouts/partials/default_foot.html" >}}
- <footer class="site">
- <p>{{ with .Site.Copyright | safeHTML }}{{ . }}{{ else }}© {{ $.Site.LastChange.Year }} {{ if isset $.Site.Params "Author" }}{{ $.Site.Params.Author }}{{ else }}{{ .Site.Title }}{{ end }}{{ end }}</p>
- <p>Powered by <a href="http://gohugo.io" target="_blank">Hugo</a>,</p>
- </footer>
- {{< /code >}}
-
- So far we are using the default image, but we would like to use the book image so that we can relate to the book. Every book review will define a configuration setting in its front matter. Update the content and front matter of `good-to-great.md` as shown below.
-
- {{< code file="content/post/good-to-great.md" >}}
- +++
- date = "2017-02-19T21:09:05-06:00"
- draft = true
- title = "Good to Great Book Review"
- image = "good-to-great.jpg"
- +++
-
- I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great. Although this book is about how companies became great but we could apply a lot of the learnings on ourselves. Concepts like level 5 leader, hedgehog concept, the stockdale paradox are equally applicable to individuals.
- {{< /code >}}
-
- Grab a (legal) image from somewhere, name it `good-to-great.jpg`, and place it in the `bookshelf/static/images` directory.
-
- After adding a few more books to our shelf, the shelf appears as shown below.
-
- 
-
-
- ## Step 9. Make Your Posts Public
-
- So far, all the posts that we have written are in draft status (i.e., `draft = true`). To make a draft public, you can run a Hugo CLI command or manually change the draft status in the post's front matter to `false`. Hugo provides a handy command line argument called `undraft` to do this for us:
-
- ```
- hugo undraft content/post/good-to-great.md
++```
+baseURL = "http://example.org/"
+languageCode = "en-us"
- If we check the front matter of `good-to-great.md` after running this command, we'll notice that Hugo has written the change of draft status to the file:
++title = "My New Hugo Site"
++theme = "ananke"
+```
+
- ```
- +++
- date = "2017-02-19T22:42:53-06:00"
- draft = false
- title = "Good to Great Book Review"
- image = "good-to-great.jpg"
- +++
- ```
-
- Now, we can start the server *without* the `buildDrafts` option.
-
- ```
- hugo server --theme=hugo_theme_robust
- ```
-
- <!-- ## Step 10. Integrate Disqus Comments
-
- {{% note "Adding Disqus to Your Website" %}}
- To implement Disqus comments as part of the Quick Start, you'll need to set up a Disqus account. Follow the [Disqus documentation for adding their service to websites](https://help.disqus.com/customer/portal/articles/1257441-adding-disqus-to-your-site).
++Replace the `title` above with something more personal. Also, if you already have a domain ready, set the `baseURL`. Note that this value is not needed when running the local development server.
+
- To enable Disqus on our new site, we only need to update the `disqusShortname` in the config.toml as shown below.
-
- ```
- [Params]
- Author = "Shekhar Gulati"
- disqusShortname = <your disqus shortname>
- ```
-
- Now, commenting will be enabled in your blog.
-
- 
- -->
- ## Step 10. Build Your Website
-
- To generate a website that can be deployed to GitHub pages, we first need to change the `baseURL` in our configuration as follows:
++{{% note %}}
++**Tip:** Make the changes to the site configuration or any other file in your site while the Hugo server is running, and you will see the changes in the browser right away.
+{{% /note %}}
+
- ```
- baseURL = "https://<yourgithubusername>.github.io/bookshelf/"
- ```
+
- Then type the following command while in the root directory of your Hugo project:
++For theme specific configuration options, see the [theme site](https://github.com/budparr/gohugo-theme-ananke).
+
- ```
- hugo --theme=hugo_theme_robust
- 0 draft content
- 0 future content
- 5 pages created
- 2 paginator pages created
- 0 tags created
- 0 categories created
- in 17 ms
- ```
++**For further theme customization, see [Customize a Theme](/themes/customizing/).**
+
- After you run the `hugo` command, a `bookshelf/public` directory will be created containing the generated website source.
-
- ## Step 11. What Next?
-
- **Congratulations!** Your new `bookshelf`/public directory is a fully generated, deployable Hugo website. Since all your files are *static*, you have innumerable options for hosting, and your new directory structure and simple content format are going to make scaling your website a breeze.
-
- Here's what you should look into next:
-
- 1. [See hosting and deployment options][hostinganddeploy] for sharing your newly created Hugo website with the world.
- 2. [Learn more about Hugo's powerful templating][templating] to tailor your new Hugo website to your specific needs and keep it scaling accordingly.
- 3. [Visit the Hugo Discussion Forum][forum] to ask questions, answer questions, and become an active member of the Hugo community.
-
- [archetypes]: /content-management/archetypes/
- [bookurl]: https://www.amazon.com/Good-Great-Some-Companies-Others/dp/0066620996/
- [bleaktheme]: http://themes.gohugo.io/bleak/
- [configuration]: /getting-started/configuration/
- [createtheme]: /themes/creating/
- [datatemplates]: /templates/data-templates/
- [forum]: https://discourse.gohugo.io
- [fm]: /content-management/front-matter/
- [hostinganddeploy]: /hosting-and-deployment/
- [hugodirectories]: /getting-started/directory-structure/
- [install]: /getting-started/installing/
- [lists]: /templating/lists/
- [partials]: /templates/partials/
- [quickinstall]: /getting-started/installing/#quick-install
- [releases]: https://github.com/gohugoio/hugo/releases
- [robusttheme]: https://github.com/dim0627/hugo_theme_robust
- [section]: /content-management/sections/
- [sectiontemplates]: /templates/section-templates/
- [shortcodetemplates]: /templates/shortcode-templates/
- [sitemenu]: /content-management/menus/
- [templating]: /templates/introduction/
- [themessection]: /themes/
- [themes]: /themes/
++## Recapitulation
+
++{{< asciicast pWp4uvyAkdWgQllD9RCfeBL5k >}}
--- /dev/null
- The following is a description of the most command commands you will use while developing your Hugo project. See the [Command Line Reference][commands] for a comprehensive view of Hugo's CLI.
+---
+title: Basic Usage
+linktitle: Basic Usage
+description: Hugo's CLI is fully featured but simple to use, even for those who have very limited experience working from the command line.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [getting started]
+#tags: [usage,livereload,command line,flags]
+menu:
+ docs:
+ parent: "getting-started"
+ weight: 40
+weight: 40
+sections_weight: 40
+draft: false
+aliases: [/overview/usage/,/extras/livereload/,/doc/usage/,/usage/]
+toc: true
+---
+
++The following is a description of the most common commands you will use while developing your Hugo project. See the [Command Line Reference][commands] for a comprehensive view of Hugo's CLI.
+
+## Test Installation
+
+Once you have [installed Hugo][install], make sure it is in your `PATH`. You can test that Hugo has been installed correctly via the `help` command:
+
+```
+hugo help
+```
+
+The output you see in your console should be similar to the following:
+
+```
+hugo is the main command, used to build your Hugo site.
+
+Hugo is a Fast and Flexible Static Site Generator
+built with love by spf13 and friends in Go.
+
+Complete documentation is available at http://gohugo.io/.
+
+Usage:
+ hugo [flags]
+ hugo [command]
+
+Available Commands:
+ benchmark Benchmark Hugo by building a site a number of times.
+ check Contains some verification checks
+ config Print the site configuration
+ convert Convert your content to different formats
+ env Print Hugo version and environment info
+ gen A collection of several useful generators.
+ help Help about any command
+ import Import your site from others.
+ list Listing out various types of content
+ new Create new content for your site
+ server A high performance webserver
+ undraft Undraft changes the content's draft status from 'True' to 'False'
+ version Print the version number of Hugo
+
+Flags:
+ -b, --baseURL string hostname (and path) to the root, e.g. http://spf13.com/
+ -D, --buildDrafts include content marked as draft
+ -E, --buildExpired include expired content
+ -F, --buildFuture include content with publishdate in the future
+ --cacheDir string filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
+ --canonifyURLs if true, all relative URLs will be canonicalized using baseURL
+ --cleanDestinationDir remove files from destination not found in static directories
+ --config string config file (default is path/config.yaml|json|toml)
+ -c, --contentDir string filesystem path to content directory
+ -d, --destination string filesystem path to write files to
+ --disable404 do not render 404 page
+ --disableKinds stringSlice disable different kind of pages (home, RSS etc.)
+ --disableRSS do not build RSS files
+ --disableSitemap do not build Sitemap file
+ --enableGitInfo add Git revision, date and author info to the pages
+ --forceSyncStatic copy all files when static is changed.
+ -h, --help help for hugo
+ --i18n-warnings print missing translations
+ --ignoreCache ignores the cache directory
+ -l, --layoutDir string filesystem path to layout directory
+ --log enable Logging
+ --logFile string log File path (if set, logging enabled automatically)
+ --noChmod don't sync permission mode of files
+ --noTimes don't sync modification time of files
+ --pluralizeListTitles pluralize titles in lists using inflect (default true)
+ --preserveTaxonomyNames preserve taxonomy names as written ("Gérard Depardieu" vs "gerard-depardieu")
+ --quiet build in quiet mode
+ --renderToMemory render to memory (only useful for benchmark testing)
+ -s, --source string filesystem path to read files relative from
+ --stepAnalysis display memory and timing of different steps of the program
+ -t, --theme string theme to use (located in /themes/THEMENAME/)
+ --themesDir string filesystem path to themes directory
+ --uglyURLs if true, use /filename.html instead of /filename/
+ -v, --verbose verbose output
+ --verboseLog verbose logging
+ -w, --watch watch filesystem for changes and recreate as needed
+```
+
+## The `hugo` Command
+
+The most common usage is probably to run `hugo` with your current directory being the input directory.
+
+This generates your website to the `public/` directory by default, although you can customize the output directory in your [site configuration][config] by changing the `publishDir` field.
+
+The site Hugo renders into `public/` is ready to be deployed to your web server:
+
+```
+hugo
+0 draft content
+0 future content
+99 pages created
+0 paginator pages created
+16 tags created
+0 groups created
+in 90 ms
+```
+
+## Draft, Future, and Expired Content
+
+Hugo allows you to set `draft`, `publishdate`, and even `expirydate` in your content's [front matter][]. By default, Hugo will not publish:
+
+1. Content with a future `publishdate` value
+2. Content with `draft: true` status
+3. Content with a past `expirydate` value
+
+All three of these can be overridden during both local development *and* deployment by adding the following flags to `hugo` and `hugo server`, respectively, or by changing the boolean values assigned to the fields of the same name (without `--`) in your [configuration][config]:
+
+1. `--buildFuture`
+2. `--buildDrafts`
+3. `--buildExpired`
+
+## LiveReload
+
+Hugo comes with [LiveReload](https://github.com/livereload/livereload-js) built in. There are no additional packages to install. A common way to use Hugo while developing a site is to have Hugo run a server with the `hugo server` command and watch for changes:
+
+```
+hugo server
+0 draft content
+0 future content
+99 pages created
+0 paginator pages created
+16 tags created
+0 groups created
+in 120 ms
+Watching for changes in /Users/yourname/sites/yourhugosite/{data,content,layouts,static}
+Serving pages from /Users/yourname/sites/yourhugosite/public
+Web Server is available at http://localhost:1313/
+Press Ctrl+C to stop
+```
+
+This will run a fully functioning web server while simultaneously watching your file system for additions, deletions, or changes within the following areas of your [project organization][dirs]:
+
+* `/static/*`
+* `/content/*`
+* `/data/*`
+* `/i18n/*`
+* `/layouts/*`
+* `/themes/<CURRENT-THEME>/*`
+* `config`
+
+Whenever you make changes, Hugo will simultaneously rebuild the site and continue to serve content. As soon as the build is finished, LiveReload tells the browser to silently reload the page.
+
+Most Hugo builds are so fast that you may not notice the change unless looking directly at the site in your browser. This means that keeping the site open on a second monitor (or another half of your current monitor) allows you to see the most up-to-date version of your website without the need to leave your text editor.
+
+{{% note "Closing `</body>` Tag"%}}
+Hugo injects the LiveReload `<script>` before the closing `</body>` in your templates and will therefore not work if this tag is not present..
+{{% /note %}}
+
+### Disable LiveReload
+
+LiveReload works by injecting JavaScript into the pages Hugo generates. The script creates a connection from the browser's web socket client to the Hugo web socket server.
+
+LiveReload is awesome for development. However, some Hugo users may use `hugo server` in production to instantly display updated content. The following methods make it easy to disable LiveReload:
+
+```
+hugo server --watch=false
+```
+
+Or...
+
+```
+hugo server --disableLiveReload
+```
+
+The latter flag can be omitted by adding the following key-value to your `config.toml` or `config.yml` file, respectively:
+
+```
+disableLiveReload = true
+```
+
+```
+disableLiveReload: true
+```
+
+## Deploy Your Website
+
+After running `hugo server` for local web development, you need to do a final `hugo` run *without the `server` part of the command* to rebuild your site. You may then deploy your site by copying the `public/` directory to your production web server.
+
+Since Hugo generates a static website, your site can be hosted *anywhere* using any web server. See [Hosting and Deployment][hosting] for methods for hosting and automating deployments contributed by the Hugo community.
+
+{{% warning "Generated Files are **NOT** Removed on Site Build" %}}
+Running `hugo` *does not* remove generated files before building. This means that you should delete your `public/` directory (or the publish directory you specified via flag or configuration file) before running the `hugo` command. If you do not remove these files, you run the risk of the wrong files (e.g., drafts or future posts) being left in the generated site.
+{{% /warning %}}
+
+### Dev vs Deploy Destinations
+
+Hugo does not remove generated files before building. An easy workaround is to use different directories for development and production.
+
+To start a server that builds draft content (helpful for editing), you can specify a different destination; e.g., a `dev/` directory:
+
+```
+hugo server -wDs ~/Code/hugo/docs -d dev
+```
+
+When the content is ready for publishing, use the default `public/` dir:
+
+```
+hugo -s ~/Code/hugo/docs
+```
+
+This prevents draft content from accidentally becoming available.
+
+[commands]: /commands/
+[config]: /getting-started/configuration/
+[dirs]: /getting-started/directory-structure/
+[front matter]: /content-management/front-matter/
+[hosting]: /hosting-and-deployment/
+[install]: /getting-started/installing/
--- /dev/null
--- /dev/null
++---
++title: "HTTP/2 Server Push in Hugo"
++date: 2017-07-24T18:36:00+02:00
++description: >
++ As every page in Hugo can be output to multiple formats, it is easy to create Netlify's _redirects and _headers files on the fly.
++categories: [blog]
++#tags: []
++slug: "http2-server-push-in-hugo"
++aliases: []
++author: bep
++images:
++- images/gohugoio-card-1.png
++---
++
++**Netlify** recently announced support for [HTTP/2 server push](https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/), and we have now added it to the **gohugo.io** sites for the main `CSS` and `JS` bundles, along with server-side 301 redirect support.
++
++If you navigate to https://gohugo.io and look in the Chrome developer network console, you should now see `Push` as the new source ("Initiator") for the `CSS` and `JSS`:
++
++{{< figure src="/images/blog/hugo-http2-push.png" caption="Network log for https://gohugo.io" >}}
++
++**Setting up this in Hugo was easy:**
++
++## 1. Configure Netlify Output Formats
++
++Add a new custom media type and two new output formats to `config.toml`. For more on output formats in Hugo, see [Custom Output Formats](/templates/output-formats/).
++```bash
++[outputs]
++home = [ "HTML", "RSS", "REDIR", "HEADERS" ]
++
++[mediaTypes]
++[mediaTypes."text/netlify"]
++suffix = ""
++delimiter = ""
++
++[outputFormats]
++[outputFormats.REDIR]
++mediatype = "text/netlify"
++baseName = "_redirects"
++isPlainText = true
++notAlternative = true
++[outputFormats.HEADERS]
++mediatype = "text/netlify"
++baseName = "_headers"
++isPlainText = true
++notAlternative = true
++```
++## 2. Add Template For the _headers File
++
++Add `layouts/index.headers`:
++
++```bash
++/*
++ X-Frame-Options: DENY
++ X-XSS-Protection: 1; mode=block
++ X-Content-Type-Options: nosniff
++ Referrer-Policy: origin-when-cross-origin
++*/
++ Link: <{{ "dist/app.bundle.js" | relURL }}>; rel=preload; as=script
++ Link: <{{ "dist/main.css" | relURL }}>; rel=preload; as=style
++```
++The template above creates both a security header definition and a HTTP/2 server push configuration.
++
++Also note that this is a template for the home page, so the full `Page` with its `Site` and many variables are available. You can also use `partial` to include other templates.
++
++
++
++
++## 3. Add Template For the _redirects File
++Add `layouts/index.redirects`:
++```bash
++# Netlify redirects. See https://www.netlify.com/docs/redirects/
++{{ range $p := .Site.Pages -}}
++{{ range .Aliases }}
++{{ . | printf "%-35s" }} {{ $p.RelPermalink -}}
++{{ end -}}
++{{- end -}}
++```
++The template above creates 301 redirects for your [aliases](/content-management/urls/#aliases), so you will probably want to turn off aliases in your `config.toml`: `disableAliases = true`.
++
--- /dev/null
- These files must be YAML, JSON, or TOML files (using the `.yml`, `.yaml`, `.json`, or `toml` extension). The data will be accessible as a `map` in the `.Site.Data` variable.
+---
+title: Data Templates
+linktitle:
+description: In addition to Hugo's built-in variables, you can specify your own custom data in templates or shortcodes that pull from both local and dynamic sources.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-03-12
+categories: [templates]
+#tags: [data,dynamic,csv,json,toml,yaml]
+menu:
+ docs:
+ parent: "templates"
+ weight: 80
+weight: 80
+sections_weight: 80
+draft: false
+aliases: [/extras/datafiles/,/extras/datadrivencontent/,/doc/datafiles/]
+toc: true
+---
+
+<!-- begin data files -->
+
+Hugo supports loading data from YAML, JSON, and TOML files located in the `data` directory in the root of your Hugo project.
+
+## The Data Folder
+
+The `data` folder is where you can store additional data for Hugo to use when generating your site. Data files aren't used to generate standalone pages; rather, they're meant to be supplemental to content files. This feature can extend the content in case your front matter fields grow out of control. Or perhaps you want to show a larger dataset in a template (see example below). In both cases, it's a good idea to outsource the data in their own files.
+
- [yaml]: http://yaml.org/spec/
++These files must be YAML, JSON, or TOML files (using the `.yml`, `.yaml`, `.json`, or `.toml` extension). The data will be accessible as a `map` in the `.Site.Data` variable.
+
+## Data Files in Themes
+
+Data Files can also be used in [Hugo themes][themes] but note that theme data files follow the same logic as other template files in the [Hugo lookup order][lookup] (i.e., given two files with the same name and relative path, the file in the root project `data` directory will override the file in the `themes/<THEME>/data` directory).
+
+Therefore, theme authors should take care to not include data files that could be easily overwritten by a user who decides to [customize a theme][customize]. For theme-specific data items that shouldn't be overridden, it can be wise to prefix the folder structure with a namespace; e.g. `mytheme/data/<THEME>/somekey/...`. To check if any such duplicate exists, run hugo with the `-v` flag.
+
+The keys in the map created with data templates from data files will be a dot-chained set of `path`, `filename`, and `key` in file (if applicable).
+
+This is best explained with an example:
+
+## Example: Jaco Pastorius' Solo Discography
+
+[Jaco Pastorius](http://en.wikipedia.org/wiki/Jaco_Pastorius_discography) was a great bass player, but his solo discography is short enough to use as an example. [John Patitucci](http://en.wikipedia.org/wiki/John_Patitucci) is another bass giant.
+
+The example below is a bit contrived, but it illustrates the flexibility of data Files. This example uses TOML as its file format with the two following data files:
+
+* `data/jazz/bass/jacopastorius.toml`
+* `data/jazz/bass/johnpatitucci.toml`
+
+`jacopastorius.toml` contains the content below. `johnpatitucci.toml` contains a similar list:
+
+```
+discography = [
+"1974 – Modern American Music … Period! The Criteria Sessions",
+"1974 – Jaco",
+"1976 - Jaco Pastorius",
+"1981 - Word of Mouth",
+"1981 - The Birthday Concert (released in 1995)",
+"1982 - Twins I & II (released in 1999)",
+"1983 - Invitation",
+"1986 - Broadway Blues (released in 1998)",
+"1986 - Honestly Solo Live (released in 1990)",
+"1986 - Live In Italy (released in 1991)",
+"1986 - Heavy'n Jazz (released in 1992)",
+"1991 - Live In New York City, Volumes 1-7.",
+"1999 - Rare Collection (compilation)",
+"2003 - Punk Jazz: The Jaco Pastorius Anthology (compilation)",
+"2007 - The Essential Jaco Pastorius (compilation)"
+]
+```
+
+The list of bass players can be accessed via `.Site.Data.jazz.bass`, a single bass player by adding the filename without the suffix, e.g. `.Site.Data.jazz.bass.jacopastorius`.
+
+You can now render the list of recordings for all the bass players in a template:
+
+```
+{{ range $.Site.Data.jazz.bass }}
+ {{ partial "artist.html" . }}
+{{ end }}
+```
+
+And then in the `partial/artist.html`:
+
+```
+<ul>
+{{ range .discography }}
+ <li>{{ . }}</li>
+{{ end }}
+</ul>
+```
+
+Discover a new favorite bass player? Just add another `.toml` file in the same directory.
+
+## Example: Accessing Named Values in a Data File
+
+Assume you have the following YAML structure in your `User0123.yml` data file located directly in `data/`:
+
+```
+Name: User0123
+"Short Description": "He is a **jolly good** fellow."
+Achievements:
+ - "Can create a Key, Value list from Data File"
+ - "Learns Hugo"
+ - "Reads documentation"
+```
+
+You can use the following code to render the `Short Description` in your layout::
+
+```
+<div>Short Description of {{.Site.Data.User0123.Name}}: <p>{{ index .Site.Data.User0123 "Short Description" | markdownify }}</p></div>
+```
+
+Note the use of the [`markdownify` template function][markdownify]. This will send the description through the Blackfriday Markdown rendering engine.
+
+<!-- begin "Data-drive Content" page -->
+
+## Data-Driven Content
+
+In addition to the [data files](/extras/datafiles/) feature, Hugo also a "data-driven content" feature, which lets you load any [JSON](http://www.json.org/) or [CSV](http://en.wikipedia.org/wiki/Comma-separated_values) file from nearly any resource.
+
+Data-driven content currently consists of two functions, `getJSON` and `getCSV`, which are available in all template files.
+
+## Implementation details
+
+### Call the Functions with a URL
+
+In your template, call the functions like this:
+
+```
+{{ $dataJ := getJSON "url" }}
+{{ $dataC := getCSV "separator" "url" }}
+```
+
+If you use a prefix or postfix for the URL, the functions accept [variadic arguments][variadic]:
+
+```
+{{ $dataJ := getJSON "url prefix" "arg1" "arg2" "arg n" }}
+{{ $dataC := getCSV "separator" "url prefix" "arg1" "arg2" "arg n" }}
+```
+
+The separator for `getCSV` must be put in the first position and can only be one character long.
+
+All passed arguments will be joined to the final URL:
+
+```
+{{ $urlPre := "https://api.github.com" }}
+{{ $gistJ := getJSON $urlPre "/users/GITHUB_USERNAME/gists" }}
+```
+
+This will resolve internally to the following:
+
+```
+{{ $gistJ := getJSON "https://api.github.com/users/GITHUB_USERNAME/gists" }}
+```
+
+Finally, you can range over an array. This example will output the
+first 5 gists for a GitHub user:
+
+```
+<ul>
+ {{ $urlPre := "https://api.github.com" }}
+ {{ $gistJ := getJSON $urlPre "/users/GITHUB_USERNAME/gists" }}
+ {{ range first 5 $gistJ }}
+ {{ if .public }}
+ <li><a href="{{ .html_url }}" target="_blank">{{ .description }}</a></li>
+ {{ end }}
+ {{ end }}
+</ul>
+```
+
+### Example for CSV files
+
+For `getCSV`, the one-character-long separator must be placed in the first position followed by the URL. The following is an example of creating an HTML table in a [partial template][partials] from a published CSV:
+
+{{< code file="layouts/partials/get-csv.html" >}}
+ <table>
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Position</th>
+ <th>Salary</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{ $url := "http://a-big-corp.com/finance/employee-salaries.csv" }}
+ {{ $sep := "," }}
+ {{ range $i, $r := getCSV $sep $url }}
+ <tr>
+ <td>{{ index $r 0 }}</td>
+ <td>{{ index $r 1 }}</td>
+ <td>{{ index $r 2 }}</td>
+ </tr>
+ {{ end }}
+ </tbody>
+ </table>
+{{< /code >}}
+
+The expression `{{index $r number}}` must be used to output the nth-column from the current row.
+
+### Cache URLs
+
+Each downloaded URL will be cached in the default folder `$TMPDIR/hugo_cache/`. The variable `$TMPDIR` will be resolved to your system-dependent temporary directory.
+
+With the command-line flag `--cacheDir`, you can specify any folder on your system as a caching directory.
+
+You can also set `cacheDir` in the [main configuration file][config].
+
+If you don't like caching at all, you can fully disable caching with the command line flag `--ignoreCache`.
+
+### Authentication When Using REST URLs
+
+Currently, you can only use those authentication methods that can be put into an URL. [OAuth][] and other authentication methods are not implemented.
+
+### Load Local files
+
+To load local files with `getJSON` and `getCSV`, the source files must reside within Hugo's working directory. The file extension does not matter, but the content does.
+
+It applies the same output logic as above in [Calling the Functions with a URL](#calling-the-functions-with-a-url).
+
+## LiveReload with Data Files
+
+There is no chance to trigger a [LiveReload][] when the content of a URL changes. However, when a *local* file changes (i.e., `data/*` and `themes/<THEME>/data/*`), a LiveReload will be triggered. Symlinks are not supported. Note too that because downloading of data takes a while, Hugo stops processing your Markdown files until the data download has completed.
+
+{{% warning "URL Data and LiveReload" %}}
+If you change any local file and the LiveReload is triggered, Hugo will read the data-driven (URL) content from the cache. If you have disabled the cache (i.e., by running the server with `hugo server --ignoreCache`), Hugo will re-download the content every time LiveReload triggers. This can create *huge* traffic. You may reach API limits quickly.
+{{% /warning %}}
+
+## Examples of Data-driven Content
+
+- Photo gallery JSON powered: [https://github.com/pcdummy/hugo-lightslider-example](https://github.com/pcdummy/hugo-lightslider-example)
+- GitHub Starred Repositories [in a post](https://github.com/SchumacherFM/blog-cs/blob/master/content%2Fposts%2Fgithub-starred.md) using data-driven content in a [custom short code](https://github.com/SchumacherFM/blog-cs/blob/master/layouts%2Fshortcodes%2FghStarred.html).
+
+## Specs for Data Formats
+
+* [TOML Spec][toml]
+* [YAML Spec][yaml]
+* [JSON Spec][json]
+* [CSV Spec][csv]
+
+[config]: /getting-started/configuration/
+[csv]: https://tools.ietf.org/html/rfc4180
+[customize]: /themes/customizing/
+[json]: /documents/ecma-404-json-spec.pdf
+[LiveReload]: /getting-started/usage/#livereload
+[lookup]: /templates/lookup-order/
+[markdownify]: /functions/markdownify/
+[OAuth]: http://en.wikipedia.org/wiki/OAuth
+[partials]: /templates/partials/
+[themes]: /themes/
+[toml]: https://github.com/toml-lang/toml
+[variadic]: http://en.wikipedia.org/wiki/Variadic_function
+[vars]: /variables/
++[yaml]: http://yaml.org/spec/
--- /dev/null
- <!-- "{{.Content}}" pulls from the markdown content of the corresponding _inde.xmd -->
+---
+title: Lists of Content in Hugo
+linktitle: List Page Templates
+description: Lists have a specific meaning and usage in Hugo when it comes to rendering your site homepage, section page, taxonomy list, or taxonomy terms list.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [templates]
+#tags: [lists,sections,rss,taxonomies,terms]
+menu:
+ docs:
+ parent: "templates"
+ weight: 22
+weight: 22
+sections_weight: 22
+draft: false
+aliases: [/templates/list/,/layout/indexes/]
+toc: true
+---
+
+## What is a List Page Template?
+
+A list page template is a template used to render multiple pieces of content in a single HTML page. The exception to this rule is the homepage, which is still a list but has its own [dedicated template][homepage].
+
+Hugo uses the term *list* in its truest sense; i.e. a sequential arrangement of material, especially in alphabetical or numerical order. Hugo uses list templates on any output HTML page where content is traditionally listed:
+
+* [Taxonomy terms pages][taxterms]
+* [Taxonomy list pages][taxlists]
+* [Section list pages][sectiontemps]
+* [RSS][rss]
+
+The idea of a list page comes from the [hierarchical mental model of the web][mentalmodel] and is best demonstrated visually:
+
+
+
+## List Defaults
+
+### Default Templates
+
+Since section lists and taxonomy lists (N.B., *not* [taxonomy terms lists][taxterms]) are both *lists* with regards to their templates, both have the same terminating default of `_default/list.html` or `themes/<THEME>/layouts/_default/list.html` in their lookup order. In addition, both [section lists][sectiontemps] and [taxonomy lists][taxlists] have their own default list templates in `_default`:
+
+#### Default Section Templates
+
+1. `layouts/_default/section.html`
+2. `layouts/_default/list.html`
+
+#### Default Taxonomy List Templates
+
+1. `layouts/_default/taxonomy.html`
+2. `themes/<THEME>/layouts/_default/taxonomy.html`
+
+## Add Content and Front Matter to List Pages
+
+Since v0.18, [everything in Hugo is a `Page`][bepsays]. This means list pages and the homepage can have associated content files (i.e. `_index.md`) that contain page metadata (i.e., front matter) and content.
+
+This new model allows you to include list-specific front matter via `.Params` and also means that list templates (e.g., `layouts/_default/list.html`) have access to all [page variables][pagevars].
+
+{{% note %}}
+It is important to note that all `_index.md` content files will render according to a *list* template and not according to a [single page template](/templates/single-page-templates/).
+{{% /note %}}
+
+### Example Project Directory
+
+The following is an example of a typical Hugo project directory's content:
+
+```
+.
+...
+├── content
+| ├── post
+| | ├── _index.md
+| | ├── post-01.md
+| | └── post-02.md
+| └── quote
+| | ├── quote-01.md
+| | └── quote-02.md
+...
+```
+
+Using the above example, let's assume you have the following in `content/post/_index.md`:
+
+{{< code file="content/post/_index.md" >}}
+---
+title: My Golang Journey
+date: 2017-03-23
+publishdate: 2017-03-24
+---
+
+I decided to start learning Golang in March 2017.
+
+Follow my journey through this new blog.
+{{< /code >}}
+
+You can now access this `_index.md`'s' content in your list template:
+
+{{< code file="layouts/_default/list.html" download="list.html" >}}
+{{ define "main" }}
+<main>
+ <article>
+ <header>
+ <h1>{{.Title}}</h1>
+ </header>
- <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a
++ <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
+ {{.Content}}
+ </article>
+ <ul>
+ <!-- Ranges through content/post/*.md -->
+ {{ range .Data.Pages }}
+ <li>
++ <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
+ </li>
+ {{ end }}
+ </ul>
+</main>
+{{ end }}
+{{< /code >}}
+
+This above will output the following HTML:
+
+{{< code file="example.com/post/index.html" copy="false" >}}
+<!--top of your baseof code-->
+<main>
+ <article>
+ <header>
+ <h1>My Golang Journey</h1>
+ </header>
+ <p>I decided to start learning Golang in March 2017.</p>
+ <p>Follow my journey through this new blog.</p>
+ </article>
+ <ul>
+ <li><a href="/post/post-01/">Post 1</a></li>
+ <li><a href="/post/post-02/">Post 2</a></li>
+ </ul>
+</main>
+<!--bottom of your baseof-->
+{{< /code >}}
+
+### List Pages Without `_index.md`
+
+You do *not* have to create an `_index.md` file for every list page (i.e. section, taxonomy, taxonomy terms, etc) or the homepage. If Hugo does not find an `_index.md` within the respective content section when rendering a list template, the page will be created but with no `{{.Content}}` and only the default values for `.Title` etc.
+
+Using this same `layouts/_default/list.html` template and applying it to the the `quotes` section above will render the following output. Note that `quotes` does not have an `_index.md` file to pull from:
+
+{{< code file="example.com/quote/index.html" copy="false" >}}
+<!--baseof-->
+<main>
+ <article>
+ <header>
+ <!-- Hugo assumes that .Title is the name of the section since there is no _index.md content file from which to pull a "title:" field -->
+ <h1>Quotes</h1>
+ </header>
+ </article>
+ <ul>
+ <li><a href="https://example.com/quote/quotes-01/">Quote 1</a></li>
+ <li><a href="https://example.com/quote/quotes-02/">Quote 2</a></li>
+ </ul>
+</main>
+<!--baseof-->
+{{< /code >}}
+
+{{% note %}}
+The default behavior of Hugo is to pluralize list titles; hence the inflection of the `quote` section to "Quotes" when called with the `.Title` [page variable](/variables/page/). You can change this via the `pluralizeListTitles` directive in your [site configuration](/getting-started/configuration/).
+{{% /note %}}
+
+## Example List Templates
+
+### Section Template
+
+This list template has been modified slightly from a template originally used in [spf13.com](http://spf13.com/). It makes use of [partial templates][partials] for the chrome of the rendered page rather than using a [base template][base] The examples that follow also use the [content view templates][views] `li.html` or `summary.html`.
+
+{{< code file="layouts/section/post.html" >}}
+{{ partial "header.html" . }}
+{{ partial "subheader.html" . }}
+<main>
+ <div>
+ <h1>{{ .Title }}</h1>
+ <ul>
+ <!-- Renders the li.html content view for each content/post/*.md -->
+ {{ range .Data.Pages }}
+ {{ .Render "li"}}
+ {{ end }}
+ </ul>
+ </div>
+</main>
+{{ partial "footer.html" . }}
+{{< /code >}}
+
+### Taxonomy Template
+
+{{< code file="layouts/_default/taxonomies.html" download="taxonomies.html" >}}
+{{ define "main" }}
+<main>
+ <div>
+ <h1>{{ .Title }}</h1>
+ <!-- ranges through each of the content files associated with a particular taxonomy term and renders the summary.html content view -->
+ {{ range .Data.Pages }}
+ {{ .Render "summary"}}
+ {{ end }}
+ </div>
+</main>
+{{ end }}
+{{< /code >}}
+
+## Order Content
+
+Hugo lists render the content based on metadata you provide in [front matter][]. In addition to sane defaults, Hugo also ships with multiple methods to make quick work of ordering content inside list templates:
+
+### Default: Weight > Date > LinkTitle > FilePath
+
+{{< code file="layouts/partials/default-order.html" >}}
+<ul>
+ {{ range .Data.Pages }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Weight
+
+{{< code file="layouts/partials/by-weight.html" >}}
+<ul>
+ {{ range .Data.Pages.ByWeight }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Date
+
+{{< code file="layouts/partials/by-date.html" >}}
+<ul>
+ <!-- orders content according to the "date" field in front matter -->
+ {{ range .Data.Pages.ByDate }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Publish Date
+
+{{< code file="layouts/partials/by-publish-date.html" >}}
+<ul>
+ <!-- orders content according to the "publishdate" field in front matter -->
+ {{ range .Data.Pages.ByPublishDate }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Expiration Date
+
+{{< code file="layouts/partials/by-expiry-date.html" >}}
+<ul>
+ {{ range .Data.Pages.ByExpiryDate }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Last Modified Date
+
+{{< code file="layouts/partials/by-last-mod.html" >}}
+<ul>
+ <!-- orders content according to the "lastmod" field in front matter -->
+ {{ range .Data.Pages.ByLastmod }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Length
+
+{{< code file="layouts/partials/by-length.html" >}}
+<ul>
+ <!-- orders content according to content length in ascending order (i.e., the shortest content will be listed first) -->
+ {{ range .Data.Pages.ByLength }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Title
+
+{{< code file="layouts/partials/by-title.html" >}}
+<ul>
+ <!-- ranges through content in ascending order according to the "title" field set in front matter -->
+ {{ range .Data.Pages.ByTitle }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Link Title
+
+{{< code file="layouts/partials/by-link-title.html" >}}
+<ul>
+ <!-- ranges through content in ascending order according to the "linktitle" field in front matter. If a "linktitle" field is not set, the range will start with content that only has a "title" field and use that value for .LinkTitle -->
+ {{ range .Data.Pages.ByLinkTitle }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+### By Parameter
+
+Order based on the specified front matter parameter. Content that does not have the specified front matter field will use the site's `.Site.Params` default. If the parameter is not found at all in some entries, those entries will appear together at the end of the ordering.
+
+{{< code file="layouts/partials/by-rating.html" >}}
+<!-- Ranges through content according to the "rating" field set in front matter -->
+{{ range (.Data.Pages.ByParam "rating") }}
+ <!-- ... -->
+{{ end }}
+{{< /code >}}
+
+If the targeted front matter field is nested beneath another field, you can access the field using dot notation.
+
+{{< code file="layouts/partials/by-nested-param.html" >}}
+{{ range (.Data.Pages.ByParam "author.last_name") }}
+ <!-- ... -->
+{{ end }}
+{{< /code >}}
+
+### Reverse Order
+
+Reversing order can be applied to any of the above methods. The following uses `ByDate` as an example:
+
+{{< code file="layouts/partials/by-date-reverse.html" >}}
+<ul>
+ {{ range .Data.Pages.ByDate.Reverse }}
+ <li>
+ <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+ <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
+ </li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+## Group Content
+
+Hugo provides some functions for grouping pages by Section, Type, Date, etc.
+
+### By Page Field
+
+{{< code file="layouts/partials/by-page-field.html" >}}
+<!-- Groups content according to content section. The ".Key" in this instance will be the section's title. -->
+{{ range .Data.Pages.GroupBy "Section" }}
+<h3>{{ .Key }}</h3>
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+In the above example, you may want `{{.Title}}` to point the `title` field you have added to your `_index.md` file instead. You can access this value using the [`.GetPage` function][getpage]:
+
+{{< code file="layouts/partials/by-page-field.html" >}}
+<!-- Groups content according to content section.-->
+{{ range .Data.Pages.GroupBy "Section" }}
+<!-- Checks for existence of _index.md for a section; if available, pulls from "title" in front matter -->
+{{ with $.Site.GetPage "section" .Key }}
+<h3>{{.Title}}</h3>
+{{ else }}
+<!-- If no _index.md is available, ".Key" defaults to the section title and filters to title casing -->
+<h3>{{ .Key | title }}</h3>
+{{ end }}
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+### By Date
+
+{{< code file="layouts/partials/by-page-date.html" >}}
+<!-- Groups content by month according to the "date" field in front matter -->
+{{ range .Data.Pages.GroupByDate "2006-01" }}
+<h3>{{ .Key }}</h3>
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+### By Publish Date
+
+{{< code file="layouts/partials/by-page-publish-date.html" >}}
+<!-- Groups content by month according to the "publishdate" field in front matter -->
+{{ range .Data.Pages.GroupByPublishDate "2006-01" }}
+<h3>{{ .Key }}</h3>
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .PublishDate.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+### By Page Parameter
+
+{{< code file="layouts/partials/by-page-param.html" >}}
+<!-- Groups content according to the "param_key" field in front matter -->
+{{ range .Data.Pages.GroupByParam "param_key" }}
+<h3>{{ .Key }}</h3>
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+### By Page Parameter in Date Format
+
+The following template takes grouping by `date` a step further and uses Golang's layout string. See the [`Format` function][] for more examples of how to use Golang's layout string to format dates in Hugo.
+
+{{< code file="layouts/partials/by-page-param-as-date.html" >}}
+<!-- Groups content by month according to the "param_key" field in front matter -->
+{{ range .Data.Pages.GroupByParamDate "param_key" "2006-01" }}
+<h3>{{ .Key }}</h3>
+<ul>
+ {{ range .Pages }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+### Reverse Key Order
+
+Ordering of groups is performed by keys in alphanumeric order (A–Z, 1–100) and in reverse chronological order (i.e., with the newest first) for dates.
+
+While these are logical defaults, they are not always the desired order. There are two different syntaxes to change Hugo's default ordering for groups, both of which work the same way.
+
+#### 1. Adding the Reverse Method
+
+```
+{{ range (.Data.Pages.GroupBy "Section").Reverse }}
+```
+
+```
+{{ range (.Data.Pages.GroupByDate "2006-01").Reverse }}
+```
+
+#### 2. Providing the Alternate Direction
+
+```
+{{ range .Data.Pages.GroupByDate "2006-01" "asc" }}
+```
+
+```
+{{ range .Data.Pages.GroupBy "Section" "desc" }}
+```
+
+### Order Within Groups
+
+Because Grouping returns a `{{.Key}}` and a slice of pages, all of the ordering methods listed above are available.
+
+Here is the ordering for the example that follows:
+
+1. Content is grouped by month according to the `date` field in front matter.
+2. Groups are listed in ascending order (i.e., the oldest groups first)
+3. Pages within each respective group are ordered alphabetically according to the `title`.
+
+{{< code file="layouts/partials/by-group-by-page.html" >}}
+{{ range .Data.Pages.GroupByDate "2006-01" "asc" }}
+<h3>{{ .Key }}</h3>
+<ul>
+ {{ range .Pages.ByTitle }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Title }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+## Filter and Limiting Lists
+
+Sometimes you only want to list a subset of the available content. A common is to only display “Posts” on blog's homepage. You can accomplish this with the `where` function.
+
+### `where`
+
+`where` works in a similar manner to the [`where` keyword in SQL][wherekeyword]. It selects all elements of the array or slice that match the provided field and value. `where` takes three arguments:
+
+1. `array` *or* `slice of maps or structs`
+2. `key` *or* `field name`
+3. `match value`
+
+{{< code file="layouts/_default/.html" >}}
+{{ range where .Data.Pages "Section" "post" }}
+ {{ .Content }}
+{{ end }}
+{{< /code >}}
+
+You can see more examples in the [functions documentation for `where`][wherefunction].
+
+### `first`
+
+`first` works in a similar manner to the [`limit` keyword in SQL][limitkeyword]. It reduces the array to only the `first N` elements. It takes the array and number of elements as input. `first` takes two arguments:
+
+1. `array` *or* `slice of maps or structs`
+2. `number of elements`
+
+{{< code file="layout/_default/section.html" >}}
+{{ range first 10 .Data.Pages }}
+ {{ .Render "summary" }}
+{{ end }}
+{{< /code >}}
+
+### `first` and `where` Together
+
+Using `first` and `where` together can be very powerful:
+
+{{< code file="first-and-where-together.html" >}}
+<!-- Orders the content inside the "posts" section by the "title" field and then ranges through only the first 5 posts -->
+{{ range first 5 (where .Data.Pages "Section" "post").ByTitle }}
+ {{ .Content }}
+{{ end }}
+{{< /code >}}
+
+[base]: /templates/base/
+[bepsays]: http://bepsays.com/en/2016/12/19/hugo-018/
+[directorystructure]: /getting-started/directory-structure/
+[`Format` function]: /functions/format/
+[front matter]: /content-management/front-matter/
+[getpage]: /functions/getpage/
+[homepage]: /templates/homepage/
+[homepage]: /templates/homepage/
+[limitkeyword]: https://www.techonthenet.com/sql/select_limit.php
+[mentalmodel]: http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html
+[pagevars]: /variables/page/
+[partials]: /templates/partials/
+[RSS 2.0]: http://cyber.law.harvard.edu/rss/rss.html "RSS 2.0 Specification"
+[rss]: /templates/rss/
+[sections]: /content-management/sections/
+[sectiontemps]: /templates/section-templates/
+[sitevars]: /variables/site/
+[taxlists]: /templates/taxonomy-templates/#taxonomy-list-templates/
+[taxterms]: /templates/taxonomy-templates/#taxonomy-terms-templates/
+[taxvars]: /variables/taxonomy/
+[views]: /templates/views/
+[wherefunction]: /functions/where/
+[wherekeyword]: https://www.techonthenet.com/sql/where.php
--- /dev/null
- To enable this menu, add the following to your site `config`:
+---
+title: Menu Templates
+linktitle: Menu Templates
+description: Menus are a powerful but simple feature for content management but can be easily manipulated in your templates to meet your design needs.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [templates]
+#tags: [lists,sections,menus]
+menu:
+ docs:
+ parent: "templates"
+ weight: 130
+weight: 130
+sections_weight: 130
+draft: false
+aliases: [/templates/menus/]
+toc: false
+---
+
+Hugo makes no assumptions about how your rendered HTML will be
+structured. Instead, it provides all of the functions you will need to be
+able to build your menu however you want.
+
+The following is an example:
+
+{{< code file="layouts/partials/sidebar.html" download="sidebar.html" >}}
+<!-- sidebar start -->
+<aside>
+ <div id="sidebar" class="nav-collapse">
+ <!-- sidebar menu start-->
+ <ul class="sidebar-menu">
+ {{ $currentPage := . }}
+ {{ range .Site.Menus.main }}
+ {{ if .HasChildren }}
+
+ <li class="sub-menu{{if $currentPage.HasMenuCurrent "main" . }} active{{end}}">
+ <a href="javascript:;" class="">
+ {{ .Pre }}
+ <span>{{ .Name }}</span>
+ <span class="menu-arrow arrow_carrot-right"></span>
+ </a>
+ <ul class="sub">
+ {{ range .Children }}
+ <li{{if $currentPage.IsMenuCurrent "main" . }} class="active"{{end}}><a href="{{.URL}}"> {{ .Name }} </a> </li>
+ {{ end }}
+ </ul>
+ {{else}}
+ <li>
+ <a href="{{.URL}}">
+ {{ .Pre }}
+ <span>{{ .Name }}</span>
+ </a>
+ {{end}}
+ </li>
+ {{end}}
+ <li> <a href="https://github.com/gohugoio/hugo/issues" target="blank">Questions and Issues</a> </li>
+ <li> <a href="#" target="blank">Edit this Page</a> </li>
+ </ul>
+ <!-- sidebar menu end-->
+ </div>
+</aside>
+<!--sidebar end-->
+{{< /code >}}
+
+{{% note "`absLangURL` and `relLangURL`" %}}
+Use the [`absLangUrl`](/functions/abslangurl) or [`relLangUrl`](/functions/rellangurl) functions if your theme makes use of the [multilingual feature](/content-management/multilingual/). In contrast to `absURL` and `relURL`, these two functions add the correct language prefix to the url.
+{{% /note %}}
+
+## Section Menu for Lazy Bloggers
+
- SectionPagesMenu = "main"
++To enable this menu, configure `sectionPagesMenu` in your site `config`:
+
+```
++sectionPagesMenu = "main"
+```
+
+The menu name can be anything, but take a note of what it is.
+
+This will create a menu with all the sections as menu items and all the sections' pages as "shadow-members". The _shadow_ implies that the pages isn't represented by a menu-item themselves, but this enables you to create a top-level menu like this:
+
+```
+<nav class="sidebar-nav">
+ {{ $currentPage := . }}
+ {{ range .Site.Menus.main }}
+ <a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{.URL}}">{{ .Name }}</a>
+ {{ end }}
+</nav>
+```
+
+In the above, the menu item is marked as active if on the current section's list page or on a page in that section.
+
+The above is all that's needed. But if you want custom menu items, e.g. changing weight or name, you can define them manually in the site config, i.e. `config.toml`:
+
+```
+[[menu.main]]
+ name = "This is the blog section"
+ weight = -110
+ identifier = "blog"
+ url = "/blog/"
+```
+
+{{% note %}}
+The `identifier` *must* match the section name.
+{{% /note %}}
--- /dev/null
- * Order the way the terms for a taxonomy are displayed in a [taxonomy terms template](#taxonomy-terms-template)
+---
+title: Taxonomy Templates
+# linktitle:
+description: Taxonomy templating includes taxonomy list pages, taxonomy terms pages, and using taxonomies in your single page templates.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [templates]
+#tags: [taxonomies,metadata,front matter,terms]
+menu:
+ docs:
+ parent: "templates"
+ weight: 50
+weight: 50
+sections_weight: 50
+draft: false
+aliases: [/taxonomies/displaying/,/templates/terms/,/indexes/displaying/,/taxonomies/templates/,/indexes/ordering/, /templates/taxonomies/, /templates/taxonomy/]
+toc: true
+---
+
+<!-- NOTE! Check on https://github.com/gohugoio/hugo/issues/2826 for shifting of terms' pages to .Data.Pages AND
+https://discourse.gohugo.io/t/how-to-specify-category-slug/4856/15 for original discussion.-->
+
+Hugo includes support for user-defined groupings of content called **taxonomies**. Taxonomies are classifications that demonstrate logical relationships between content. See [Taxonomies under Content Management](/content-management/taxonomies) if you are unfamiliar with how Hugo leverages this powerful feature.
+
+Hugo provides multiple ways to use taxonomies throughout your project templates:
+
+* Order the way content associated with a taxonomy term is displayed in a [taxonomy list template](#taxonomy-list-template)
++* Order the way the terms for a taxonomy are displayed in a [taxonomy terms template](#taxonomy-terms-template)
+* List a single content's taxonomy terms within a [single page template][]
+
+## Taxonomy List Templates
+
+Taxonomy list page templates are lists and therefore have all the variables and methods available to [list pages][lists].
+
+### Taxonomy List Template Lookup Order
+
+A taxonomy will be rendered at /`PLURAL`/`TERM`/ (e.g., http://spf13.com/topics/golang/) according to the following lookup order:
+
+1. `/layouts/taxonomy/<SINGULAR>.html`
+2. `/layouts/_default/taxonomy.html`
+3. `/layouts/_default/list.html`
+4. `/themes/<THEME>/layouts/taxonomy/<SINGULAR>.html`
+5. `/themes/<THEME>/layouts/_default/taxonomy.html`
+6. `/themes/<THEME>/layouts/_default/list.html`
+
+## Taxonomy Terms Template
+
+### Taxonomy Terms Templates Lookup Order
+
+A taxonomy terms page will be rendered at `example.com/<PLURALTAXONOMYNAME>`/ (e.g., http://spf13.com/topics/) according to the following lookup order:
+
+1. `/layouts/taxonomy/<SINGULAR>.terms.html`
+2. `/layouts/_default/terms.html`
+3. `/themes/<THEME>/layouts/taxonomy/<SINGULAR>.terms.html`
+4. `/themes/<THEME>/layouts/_default/terms.html`
+
+{{% warning "The Taxonomy Terms Template has a Unique Lookup Order" %}}
+If Hugo does not find a terms template in `layout/` or `/themes/<THEME>/layouts/`, Hugo will *not* render a taxonomy terms page.
+{{% /warning %}}
+
+<!-- Begin /taxonomies/methods/ -->
+Hugo makes a set of values and methods available on the various Taxonomy structures.
+
+### Taxonomy Methods
+
+A Taxonomy is a `map[string]WeightedPages`.
+
+.Get(term)
+: Returns the WeightedPages for a term.
+
+.Count(term)
+: The number of pieces of content assigned to this term.
+
+.Alphabetical
+: Returns an OrderedTaxonomy (slice) ordered by Term.
+
+.ByCount
+: Returns an OrderedTaxonomy (slice) ordered by number of entries.
+
+### OrderedTaxonomy
+
+Since Maps are unordered, an OrderedTaxonomy is a special structure that has a defined order.
+
+```
+[]struct {
+ Name string
+ WeightedPages WeightedPages
+}
+```
+
+Each element of the slice has:
+
+.Term
+: The Term used.
+
+.WeightedPages
+: A slice of Weighted Pages.
+
+.Count
+: The number of pieces of content assigned to this term.
+
+.Pages
+: All Pages assigned to this term. All [list methods][renderlists] are available to this.
+
+## WeightedPages
+
+WeightedPages is simply a slice of WeightedPage.
+
+```
+type WeightedPages []WeightedPage
+```
+
+.Count(term)
+: The number of pieces of content assigned to this term.
+
+.Pages
+: Returns a slice of pages, which then can be ordered using any of the [list methods][renderlists].
+
+<!-- Begin /taxonomies/ordering/ -->
+
+## Order Taxonomies
+
+Taxonomies can be ordered by either alphabetical key or by the number of content pieces assigned to that key.
+
+### Order Alphabetically Example
+
+```
+<ul>
+ {{ $data := .Data }}
+ {{ range $key, $value := .Data.Taxonomy.Alphabetical }}
+ <li><a href="{{ $.Site.LanguagePrefix }}/{{ $data.Plural }}/{{ $value.Name | urlize }}"> {{ $value.Name }} </a> {{ $value.Count }} </li>
+ {{ end }}
+</ul>
+```
+
+### Order by Popularity Example
+
+```
+<ul>
+ {{ $data := .Data }}
+ {{ range $key, $value := .Data.Taxonomy.ByCount }}
+ <li><a href="{{ $.Site.LanguagePrefix }}/{{ $data.Plural }}/{{ $value.Name | urlize }}"> {{ $value.Name }} </a> {{ $value.Count }} </li>
+ {{ end }}
+</ul>
+```
+
+<!-- [See Also Taxonomy Lists](/templates/list/) -->
+
+## Order Content within Taxonomies
+
+Hugo uses both `date` and `weight` to order content within taxonomies.
+
+Each piece of content in Hugo can optionally be assigned a date. It can also be assigned a weight for each taxonomy it is assigned to.
+
+When iterating over content within taxonomies, the default sort is the same as that used for [section and list pages]() first by weight then by date. This means that if the weights for two pieces of content are the same, than the more recent content will be displayed first. The default weight for any piece of content is 0.
+
+### Assign Weight
+
+Content can be assigned weight for each taxonomy that it's assigned to.
+
+```
++++
+tags = [ "a", "b", "c" ]
+tags_weight = 22
+categories = ["d"]
+title = "foo"
+categories_weight = 44
++++
+Front Matter with weighted tags and categories
+```
+
+The convention is `taxonomyname_weight`.
+
+In the above example, this piece of content has a weight of 22 which applies to the sorting when rendering the pages assigned to the "a", "b" and "c" values of the 'tag' taxonomy.
+
+It has also been assigned the weight of 44 when rendering the 'd' category.
+
+With this the same piece of content can appear in different positions in different taxonomies.
+
+Currently taxonomies only support the default ordering of content which is weight -> date.
+
+<!-- Begin /taxonomies/templates/ -->
+
+There are two different templates that the use of taxonomies will require you to provide.
+
+Both templates are covered in detail in the templates section.
+
+A [list template](/templates/list/) is any template that will be used to render multiple pieces of content in a single html page. This template will be used to generate all the automatically created taxonomy pages.
+
+A [taxonomy terms template](/templates/terms/) is a template used to
+generate the list of terms for a given template.
+
+<!-- Begin /taxonomies/displaying/ -->
+
+There are four common ways you can display the data in your
+taxonomies in addition to the automatic taxonomy pages created by hugo
+using the [list templates](/templates/list/):
+
+1. For a given piece of content, you can list the terms attached
+2. For a given piece of content, you can list other content with the same
+ term
+3. You can list all terms for a taxonomy
+4. You can list all taxonomies (with their terms)
+
+## Display a Single Piece of Content's Taxonomies
+
+Within your content templates, you may wish to display the taxonomies that piece of content is assigned to.
+
+Because we are leveraging the front matter system to define taxonomies for content, the taxonomies assigned to each content piece are located in the usual place (i.e., `.Params.<TAXONOMYPLURAL>`).
+
+### Example: List Tags in a Single Page Template
+
+```
+<ul id="tags">
+ {{ range .Params.tags }}
+ <li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
+ {{ end }}
+</ul>
+```
+
+If you want to list taxonomies inline, you will have to take care of optional plural endings in the title (if multiple taxonomies), as well as commas. Let's say we have a taxonomy "directors" such as `directors: [ "Joel Coen", "Ethan Coen" ]` in the TOML-format front matter.
+
+To list such taxonomies, use the following:
+
+### Example: Comma-delimit Tags in a Single Page Template
+
+```
+{{ if .Params.directors }}
+ <strong>Director{{ if gt (len .Params.directors) 1 }}s{{ end }}:</strong>
+ {{ range $index, $director := .Params.directors }}{{ if gt $index 0 }}, {{ end }}<a href="{{ "directors/" | relURL }}{{ . | urlize }}">{{ . }}</a>{{ end }}
+{{ end }}
+```
+
+Alternatively, you may use the [delimit template function][delimit] as a shortcut if the taxonomies should just be listed with a separator. See {{< gh 2143 >}} on GitHub for discussion.
+
+## List Content with the Same Taxonomy Term
+
+If you are using a taxonomy for something like a series of posts, you can list individual pages associated with the same taxonomy. This is also a quick and dirty method for showing related content:
+
+### Example: Showing Content in Same Series
+
+```
+<ul>
+ {{ range .Site.Taxonomies.series.golang }}
+ <li><a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a></li>
+ {{ end }}
+</ul>
+```
+
+## List All content in a Given taxonomy
+
+This would be very useful in a sidebar as “featured content”. You could even have different sections of “featured content” by assigning different terms to the content.
+
+### Example: Grouping "Featured" Content
+
+```
+<section id="menu">
+ <ul>
+ {{ range $key, $taxonomy := .Site.Taxonomies.featured }}
+ <li> {{ $key }} </li>
+ <ul>
+ {{ range $taxonomy.Pages }}
+ <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
+ {{ end }}
+ </ul>
+ {{ end }}
+ </ul>
+</section>
+```
+
+## Render a Site's Taxonomies
+
+If you wish to display the list of all keys for your site's taxonomy, you can retrieve them from the [`.Site` variable][sitevars] available on every page.
+
+This may take the form of a tag cloud, a menu, or simply a list.
+
+The following example displays all terms in a site's tags taxonomy:
+
+### Example: List All Site Tags
+
+```
+<ul id="all-tags">
+ {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+ <li><a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">{{ $name }}</a></li>
+ {{ end }}
+</ul>
+```
+
+### Example: List All Taxonomies, Terms, and Assigned Content
+
+This example will list all taxonomies and their terms, as well as all the content assigned to each of the terms.
+
+{{< code file="layouts/partials/all-taxonomies.html" download="all-taxonomies.html" download="all-taxonomies.html" >}}
+<section>
+ <ul id="all-taxonomies">
+ {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
+ <li><a href="{{ "/" | relLangURL}}{{ $taxonomyname | urlize }}">{{ $taxonomyname }}</a>
+ <ul>
+ {{ range $key, $value := $taxonomy }}
+ <li> {{ $key }} </li>
+ <ul>
+ {{ range $value.Pages }}
+ <li hugo-nav="{{ .RelPermalink}}"><a href="{{ .Permalink}}"> {{ .LinkTitle }} </a> </li>
+ {{ end }}
+ </ul>
+ {{ end }}
+ </ul>
+ </li>
+ {{ end }}
+ </ul>
+</section>
+{{< /code >}}
+
+## `.Site.GetPage` for Taxonomies
+
+Because taxonomies are lists, the [`.GetPage` function][getpage] can be used to get all the pages associated with a particular taxonomy term using a terse syntax. The following ranges over the full list of tags on your site and links to each of the individual taxonomy pages for each term without having to use the more fragile URL construction of the "List All Site Tags" example above:
+
+{{< code file="links-to-all-tags" >}}
+<ul class="tags">
+ {{ range ($.Site.GetPage "taxonomyTerm" "tags").Pages }}
+ <li><a href="{{ .Permalink }}">{{ .Title}}</a></li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+<!--### `.Site.GetPage` Taxonomy List Example
+
+### `.Site.GetPage` Taxonomy Terms Example -->
+
+
+[delimit]: /functions/delimit/
+[getpage]: /functions/getpage/
+[lists]: /templates/lists/
+[renderlists]: /templates/lists/
+[single page template]: /templates/single-page-templates/
+[sitevars]: /variables/site/
--- /dev/null
- A theme consists of templates and static assets such as javascript and css files. Themes can also provide [archetypes][], which are archetypal content types used by the `hugo new` command to scaffold new conte files with preconfigured front matter.
+---
+title: Create a Theme
+linktitle: Create a Theme
+description: The `hugo new theme` command will scaffold the beginnings of a new theme for you to get you on your way.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [themes]
+#tags: [themes, source, organization, directories]
+menu:
+ docs:
+ parent: "themes"
+ weight: 30
+weight: 30
+sections_weight: 30
+draft: false
+aliases: [/themes/creation/,/tutorials/creating-a-new-theme/]
+toc: true
+wip: true
+---
+
+{{% warning "Use Relative Links" %}}
+If you're creating a theme with plans to share it with the community, use relative URLs since users of your theme may not publish from the root of their website. See [relURL](/functions/relurl) and [absURL](/functions/absurl).
+{{% /warning %}}
+
+Hugo can initialize a new blank theme directory within your existing `themes` using the `hugo new` command:
+
+```
+hugo new theme [name]
+```
+
+## Theme Components
+
++A theme consists of templates and static assets such as javascript and css files. Themes can also provide [archetypes][], which are archetypal content types used by the `hugo new` command to scaffold new content files with preconfigured front matter.
+
+
+{{% note "Use the Hugo Generator Tag" %}}
+The [`.Hugo.Generator`](/variables/hugo/) tag is included in all themes featured in the [Hugo Themes Showcase](http://themes.gohugo.io). We ask that you include the generator tag in all sites and themes you create with Hugo to help the core team track Hugo's usage and popularity.
+{{% /note %}}
+
+## Layouts
+
+Hugo is built around the concept that things should be as simple as possible.
+Fundamentally, website content is displayed in two different ways, a single
+piece of content and a list of content items. With Hugo, a theme layout starts
+with the defaults. As additional layouts are defined, they are used for the
+content type or section they apply to. This keeps layouts simple, but permits
+a large amount of flexibility.
+
+## Single Content
+
+The default single file layout is located at `layouts/_default/single.html`.
+
+## List of Contents
+
+The default list file layout is located at `layouts/_default/list.html`.
+
+## Partial Templates
+
+Theme creators should liberally use [partial templates](/templates/partials/)
+throughout their theme files. Not only is a good DRY practice to include shared
+code, but partials are a special template type that enables the themes end user
+to be able to overwrite just a small piece of a file or inject code into the
+theme from their local /layouts. These partial templates are perfect for easy
+injection into the theme with minimal maintenance to ensure future
+compatibility.
+
+## Static
+
+Everything in the static directory will be copied directly into the final site
+when rendered. No structure is provided here to enable complete freedom. It is
+common to organize the static content into:
+
+```
+/css
+/js
+/img
+```
+
+The actual structure is entirely up to you, the theme creator, on how you would like to organize your files.
+
+## Archetypes
+
+If your theme makes use of specific keys in the front matter, it is a good idea
+to provide an archetype for each content type you have. [Read more about archetypes][archetypes].
+
+[archetypes]: /content-management/archetypes/
--- /dev/null
- {{% output file="example-highlight-shortcode-output.html" %}}
- ```
+---
+title: Syntax Highlighting
+linktitle:
+description: Hugo provides server-side syntax highlighting via Pygments and, like most static site generators, works very well with client-side (JavaScript) syntax highlighting libraries as well.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+#tags: [highlighting,pygments,code blocks,syntax]
+categories: [developer tools]
+menu:
+ docs:
+ parent: "tools"
+ weight: 20
+weight: 20
+sections_weight: 20
+draft: false
+aliases: [/extras/highlighting/,/extras/highlight/]
+toc: true
+---
+
+Hugo can highlight source code in _two different ways_—either pre-processed server side from your content or to defer the processing to the client side, using a JavaScript library.
+
+## Server-side
+
+For the pre-processed approach, highlighting is performed by an external Python-based program called [Pygments](http://pygments.org/) and is triggered via an embedded Hugo shortcode (see [example](#example-highlight-shortcode-input) below). If Pygments is absent from the path, it will silently simply pass the content along without highlighting.
+
+### Server-side Advantages
+
+The advantages of server-side syntax highlighting are that it doesn’t depend on a JavaScript library and, consequently, works very well when read from an RSS feed.
+
+### Pygments
+
+If you have never worked with Pygments before, here is a brief primer:
+
++ Install Python from [python.org](https://www.python.org/downloads/). Version 2.7.x is already sufficient.
++ Run `pip install Pygments` in order to install Pygments. Once installed, Pygments gives you a command `pygmentize`. Make sure it sits in your PATH; otherwise, Hugo will not be able to find and use it.
+
+On Debian and Ubuntu systems, you may also install Pygments by running `sudo apt-get install python3-pygments`.
+
+Hugo gives you two options that you can set with the variable `pygmentsuseclasses` (default `false`) in your [site configuration](/getting-started/configuration/).
+
+1. Color codes for highlighting keywords are directly inserted if `pygmentsuseclasses = false` (default). The color codes depend on your choice of the `pygmentsstyle` (default = `"monokai"`). You can explore the different color styles on [pygments.org](http://pygments.org/) after inserting some example code.
+2. If you choose `pygmentsuseclasses = true`, Hugo includes class names in your code instead of color codes. For class-names to be meaningful, you need to include a `.css` file in your website representing your color scheme. You can either generate this `.css` files according to the [description from the Pygments documentation](http://pygments.org/docs/cmdline/) or download the one of the many pre-built color schemes from [Pygment's GitHub css repository](https://github.com/richleland/pygments-css).
+
+### Server-side Usage
+
+Highlighting is carried out via the [built-in shortcode](/content-management/shortcodes/) `highlight`. `highlight` takes exactly one required parameter for the programming language to be highlighted and requires a closing shortcode. Note that `highlight` is *not* used for client-side javascript highlighting.
+
+### Example `highlight` Shortcode Input
+
+{{< code file="example-highlight-shortcode-input.md" >}}
+{{</* highlight html */>}}
+<section id="main">
+ <div>
+ <h1 id="title">{{ .Title }}</h1>
+ {{ range .Data.Pages }}
+ {{ .Render "summary"}}
+ {{ end }}
+ </div>
+</section>
+{{</* /highlight */>}}
+{{< /code >}}
+
+### Example `highlight` Shortcode Output
+
- ```
- {{% /output %}}
++{{< output file="example-highlight-shortcode-output.html" >}}
+<span style="color: #f92672"><section</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">"main"</span><span style="color: #f92672">></span>
+ <span style="color: #f92672"><div></span>
+ <span style="color: #f92672"><h1</span> <span style="color: #a6e22e">id=</span><span style="color: #e6db74">"title"</span><span style="color: #f92672">></span>{{ .Title }}<span style="color: #f92672"></h1></span>
+ {{ range .Data.Pages }}
+ {{ .Render "summary"}}
+ {{ end }}
+ <span style="color: #f92672"></div></span>
+<span style="color: #f92672"></section></span>
++{{< /output >}}
+
+### Options
+
+Options for controlling highlighting can be added in the second argument as a quoted, comma-separated key-value list. The example below will syntax highlight in `go` with inline line numbers and line numbers 2 and 3 highlighted.
+
+```
+{{</* highlight go "linenos=inline,hl_lines=2 3" */>}}
+var a string
+var b string
+var c string
+var d string
+{{</* / highlight */>}}
+```
+
+The `highlight` shortcode includes the following supported keywords:
+
+* `style`
+* `encoding`
+* `noclasses`
+* `hl_lines`
+* `linenos`
+
+Note that `style` and `noclasses` will override the similar setting in the [global config](/getting-started/configuration/).
+
+The keywords in the `highlight` shortcode mirror those of Pygments from the command line. See the [Pygments documentation](http://pygments.org/docs/) for more information.
+
+### Code Fences
+
+It is also possible to add syntax highlighting with GitHub flavored code fences. To enable this, set the `PygmentsCodeFences` to `true` in Hugo's [configuration file](/getting-started/configuration/);
+
+```
+```
+<section id="main">
+ <div>
+ <h1 id="title">{{ .Title }}</h1>
+ {{ range .Data.Pages }}
+ {{ .Render "summary"}}
+ {{ end }}
+ </div>
+</section>
+```
+```
+
+{{% note "Disclaimers on Pygments" %}}
+* Pygments is relatively slow and _causes a performance hit when building your site_, but Hugo has been designed to cache the results to disk.
+* The caching can be turned off by setting the `--ignoreCache` flag to `true`.
+* The languages available for highlighting depend on your Pygments installation.
+{{% /note %}}
+
+## Client-side
+
+Alternatively, code highlighting can be applied to your code blocks in client-side JavaScript.
+
+Client-side syntax highlighting is very simple to add. You'll need to pick
+a library and a corresponding theme. Some popular libraries are:
+
+- [Highlight.js]
+- [Prism]
+- [Rainbow]
+- [Syntax Highlighter]
+- [Google Prettify]
+
+### Client-side Advantages
+
+The advantages of client-side syntax highlighting are that it doesn’t cost anything when building your site, and some of the highlighting scripts available cover more languages than Pygments does.
+
+### Highlight.js Example
+
+This example uses the popular [Highlight.js] library, hosted by [Yandex], a popular Russian search engine.
+
+In your `./layouts/partials/` (or `./layouts/chrome/`) folder, depending on your specific theme, there will be a snippet that will be included in every generated HTML page, such as `header.html` or `header.includes.html`. Simply add the css and js to initialize [Highlight.js]:
+
+```
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+```
+
+### Prism example
+
+Prism is another popular highlighter library and is used on some major sites.
+The [download section of the prism.js website][prismdownload] is simple to use and affords you a high degree of customization to pick only the languages you'll be using on your site.
+
+Similar to Highlight.js, you simply load `prism.css` in your `<head>` via whatever Hugo partial template is creating that part of your pages:
+
+```
+...
+<link href="/css/prism.css" rel="stylesheet" />
+...
+```
+
+Add `prism.js` near the bottom of your `<body>` tag in whatever Hugo partial template is appropriate for your site or theme.
+
+```
+...
+<script src="/js/prism.js"></script>
+</body>
+```
+
+In this example, the local paths indicate that your downloaded copy of these files are being added to the site, typically under `./static/css/` and `./static/js/`, respectively.
+
+### Client-side Usage
+
+To use client-side highlighting, most of these javascript libraries expect your code to be wrapped in semantically correct `<code>` elements with language-specific class attributes. For example, a code block for HTML would have `class="language-html"`.
+
+The client-side highlighting script therefore looks for programming language classes according to this convention: `language-go`, `language-html`, `language-css`, `language-bash`, etc. If you look at the page's source, you might see something like the following:
+
+```
+<pre>
+ <code class="language-css">
+ body {
+ font-family: "Noto Sans", sans-serif;
+ }
+ </code>
+</pre>
+```
+
+If you are using markdown, your content pages needs to use the following syntax, with the name of the language to be highlighted entered directly after the first "fence." A fenced code block can be noted by opening and closing triple tilde <kbd>~</kbd> or triple back ticks <kbd>`</kbd>:
+
+{{< nohighlight >}}
+~~~css
+body {
+ font-family: "Noto Sans", sans-serif;
+}
+~~~
+{{< /nohighlight >}}
+
+Here is the same example but with triple back ticks to denote the fenced code block:
+
+{{< nohighlight >}}
+```
+body {
+ font-family: "Noto Sans", sans-serif;
+}
+```
+{{< /nohighlight >}}
+
+Passing the above examples through the highlighter script would yield the following markup:
+
+{{< nohighlight >}}
+<pre><code class="language-css hljs">;<span class="hljs-selector-tag">body</span> {
+ <span class="hljs-attribute">font-family</span>: <span class="hljs-string">"Noto Sans"</span>, sans-serif;
+}
+{{< /nohighlight >}}
+
+In the case of the coding color scheme used by the Hugo docs, the resulting output would then look like the following to the website's end users:
+
+```
+body {
+ font-family: "Noto Sans", sans-serif;
+}
+```
+
+Please see individual libraries' documentation for how to implement each of the JavaScript-based libraries.
+
+[Prism]: http://prismjs.com
+[prismdownload]: http://prismjs.com/download.html
+[Highlight.js]: http://highlightjs.org/
+[Rainbow]: http://craig.is/making/rainbows
+[Syntax Highlighter]: http://alexgorbatchev.com/SyntaxHighlighter/
+[Google Prettify]: https://github.com/google/code-prettify
+[Yandex]: http://yandex.ru/
--- /dev/null
- {{% output file="yourbaseurl/review/book01/index.html" %}}
- ```
+---
+title: Page Variables
+linktitle:
+description: Page-level variables are defined in a content file's front matter, derived from the content's file location, or extracted from the content body itself.
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
+categories: [variables and params]
+#tags: [pages]
+draft: false
+menu:
+ docs:
+ parent: "variables"
+ weight: 20
+weight: 20
+sections_weight: 20
+aliases: [/variables/page/]
+toc: true
+---
+
+The following is a list of page-level variables. Many of these will be defined in the front matter, derived from file location, or extracted from the content itself.
+
+{{% note "`.Scratch`" %}}
+See [`.Scratch`](/functions/scratch/) for page-scoped, writable variables.
+{{% /note %}}
+
+## Page Variables
+
+`.AlternativeOutputFormats`
+: contains all alternative formats for a given page; this variable is especially useful `link rel` list in your site's `<head>`. (See [Output Formats](/templates/output-formats/).)
+
+`.Content`
+: the content itself, defined below the front matter.
+
+`.Data`
+: the data specific to this type of page.
+
+`.Date`
+: the date associated with the page; `.Date` pulls from the `date` field in a content's front matter. See also `.ExpiryDate`, `.PublishDate`, and `.Lastmod`.
+
+`.Description`
+: the description for the page.
+
+`.Draft`
+: a boolean, `true` if the content is marked as a draft in the front matter.
+
+`.ExpiryDate`
+: the date on which the content is scheduled to expire; `.ExpiryDate` pulls from the `expirydate` field in a content's front matter. See also `.PublishDate`, `.Date`, and `.Lastmod`.
+
+`.FuzzyWordCount`
+: the approximate number of words in the content.
+
+`.Hugo`
+: see [Hugo Variables](/variables/hugo/).
+
+`.IsHome`
+: `true` in the context of the [homepage](/templates/homepage/).
+
+`.IsNode`
+: always `false` for regular content pages.
+
+`.IsPage`
+: always `true` for regular content pages.
+
+`.IsTranslated`
+: `true` if there are translations to display.
+
+`.Keywords`
+: the meta keywords for the content.
+
+`.Kind`
+: the page's *kind*. Possible return values are `page`, `home`, `section`, `taxonomy`, or `taxonomyTerm`. Note that there are also `RSS`, `sitemap`, `robotsTXT`, and `404` kinds, but these are only available during the rendering of each of these respective page's kind and therefore *not* available in any of the `Pages` collections.
+
+`.Lang`
+: language taken from the language extension notation.
+
+`.Language`
+: a language object that points to the language's definition in the site
+`config`.
+
+`.Lastmod`
+: the date the content was last modified; `.Lastmod` pulls from the `lastmod` field in a content's front matter. If `lastmod` is not set, Hugo will default to the `date` field. See also `.ExpiryDate`, `.Date`, and `.PublishDate`.
+
+`.LinkTitle`
+: access when creating links to the content. If set, Hugo will use the `linktitle` from the front matter before `title`.
+
+`.Next`
+: pointer to the following content (based on the `publishdate` field in front matter).
+
+`.NextInSection`
+: pointer to the following content within the same section (based on `publishdate` field in front matter).
+
+`.OutputFormats`
+: contains all formats, including the current format, for a given page. Can be combined the with [`.Get` function](/functions/get/) to grab a specific format. (See [Output Formats](/templates/output-formats/).)
+
+`.Pages`
+: a collection of associated pages. This value will be `nil` for regular content pages. `.Pages` is an alias for `.Data.Pages`.
+
+`.Permalink`
+: the Permanent link for this page; see [Permalinks](/content-management/urls/)
+
+`.Plain`
+: the Page content stripped of HTML tags and presented as a string.
+
+`.PlainWords`
+: the Page content stripped of HTML as a `[]string` using Go's [`strings.Fields`](https://golang.org/pkg/strings/#Fields) to split `.Plain` into a slice.
+
+`.Prev`
+: Pointer to the previous content (based on `publishdate` in front matter).
+
+`.PrevInSection`
+: Pointer to the previous content within the same section (based on `publishdate` in front matter). For example, `{{if .PrevInSection}}{{.PrevInSection.Permalink}}{{end}}`.
+
+`.PublishDate`
+: the date on which the content was or will be published; `.Publishdate` pulls from the `publishdate` field in a content's front matter. See also `.ExpiryDate`, `.Date`, and `.Lastmod`.
+
+`.RSSLink`
+: link to the taxonomies' RSS link.
+
+`.RawContent`
+: raw markdown content without the front matter. Useful with [remarkjs.com](
+http://remarkjs.com)
+
+`.ReadingTime`
+: the estimated time, in minutes, it takes to read the content.
+
+`.Ref`
+: returns the permalink for a given reference (e.g., `.Ref "sample.md"`). `.Ref` does *not* handle in-page fragments correctly. See [Cross References](/content-management/cross-references/).
+
+`.RelPermalink`
+: the relative permanent link for this page.
+
+`.RelRef`
+: returns the relative permalink for a given reference (e.g., `RelRef
+"sample.md"`). `.RelRef` does *not* handle in-page fragments correctly. See [Cross References](/content-management/cross-references/).
+
+`.Section`
+: the [section](/content-management/sections/) this content belongs to.
+
+`.Site`
+: see [Site Variables](/variables/site/).
+
+`.Summary`
+: a generated summary of the content for easily showing a snippet in a summary view. The breakpoint can be set manually by inserting <code><!--more--></code> at the appropriate place in the content page. See [Content Summaries](/content-management/summaries/) for more details.
+
+`.TableOfContents`
+: the rendered [table of contents](/content-management/toc/) for the page.
+
+`.Title`
+: the title for this page.
+
+`.Translations`
+: a list of translated versions of the current page. See [Multilingual Mode](/content-management/multilingual/) for more information.
+
+`.Truncated`
+: a boolean, `true` if the `.Summary` is truncated. Useful for showing a "Read more..." link only when necessary. See [Summaries](/content-management/summaries/) for more information.
+
+`.Type`
+: the [content type](/content-management/types/) of the content (e.g., `post`).
+
+`.URL`
+: the URL for the page relative to the web root. Note that a `url` set directly in front matter overrides the default relative URL for the rendered page.
+
+`.UniqueID`
+: the MD5-checksum of the content file's path.
+
+`.Weight`
+: assigned weight (in the front matter) to this content, used in sorting.
+
+`.WordCount`
+: the number of words in the content.
+
+## Page-level Params
+
+Any other value defined in the front matter in a content file, including taxonomies, will be made available as part of the `.Params` variable.
+
+```
+---
+title: My First Post
+date: date: 2017-02-20T15:26:23-06:00
+categories: [one]
+#tags: [two,three,four]
+```
+
+With the above front matter, the `tags` and `categories` taxonomies are accessible via the following:
+
+* `.Params.tags`
+* `.Params.categories`
+
+{{% note "Casing of Params" %}}
+Page-level `.Params` are *only* accessible in lowercase.
+{{% /note %}}
+
+The `.Params` variable is particularly useful for the introduction of user-defined front matter fields in content files. For example, a Hugo website on book reviews could have the following front matter in `/content/review/book01.md`:
+
+```
+---
+...
+affiliatelink: "http://www.my-book-link.here"
+recommendedby: "My Mother"
+...
+---
+```
+
+These fields would then be accessible to the `/themes/yourtheme/layouts/review/single.html` template through `.Params.affiliatelink` and `.Params.recommendedby`, respectively.
+
+Two common situations where this type of front matter field could be introduced is as a value of a certain attribute like `href=""` or by itself to be displayed as text to the website's visitors.
+
+{{< code file="/themes/yourtheme/layouts/review/single.html" >}}
+<h3><a href={{ printf "%s" $.Params.affiliatelink }}>Buy this book</a></h3>
+<p>It was recommended by {{ .Params.recommendedby }}.</p>
+{{< /code >}}
+
+This template would render as follows, assuming you've set [`uglyURLs`](/content-management/urls/) to `false` in your [site `config`](/getting-started/configuration/):
+
- ```
- {{% /output %}}
++{{< output file="yourbaseurl/review/book01/index.html" >}}
+<h3><a href="http://www.my-book-link.here">Buy this book</a></h3>
+<p>It was recommended by my Mother.</p>
++{{< /output >}}
+
+{{% note %}}
+See [Archetypes](/content-management/archetypes/) for consistency of `Params` across pieces of content.
+{{% /note %}}
+
+### The `.Param` Method
+
+In Hugo, you can declare params in individual pages and globally for your entire website. A common use case is to have a general value for the site param and a more specific value for some of the pages (i.e., a header image):
+
+```
+{{ $.Param "header_image" }}
+```
+
+The `.Param` method provides a way to resolve a single value according to it's definition in a page parameter (i.e. in the content's front matter) or a site parameter (i.e., in your `config`).
+
+### Access Nested Fields in Front Matter
+
+When front matter contains nested fields like the following:
+
+```
+---
+author:
+ given_name: John
+ family_name: Feminella
+ display_name: John Feminella
+---
+```
+`.Param` can access these fields by concatenating the field names together with a dot:
+
+```
+{{ $.Param "author.display_name" }}
+```
+
+If your front matter contains a top-level key that is ambiguous with a nested key, as in the following case:
+
+```
+---
+favorites.flavor: vanilla
+favorites:
+ flavor: chocolate
+---
+```
+
+The top-level key will be preferred. Therefore, the following method, when applied to the previous example, will print `vanilla` and not `chocolate`:
+
+```
+{{ $.Param "favorites.flavor" }}
+=> vanilla
+```
--- /dev/null
+{
+ "media": {
+ "types": [
+ {
+ "Type": "application/javascript",
+ "String": "application/javascript+js",
+ "MainType": "application",
+ "SubType": "javascript",
+ "Suffix": "js",
+ "Delimiter": "."
+ },
+ {
+ "Type": "application/json",
+ "String": "application/json+json",
+ "MainType": "application",
+ "SubType": "json",
+ "Suffix": "json",
+ "Delimiter": "."
+ },
+ {
+ "Type": "application/rss",
+ "String": "application/rss+xml",
+ "MainType": "application",
+ "SubType": "rss",
+ "Suffix": "xml",
+ "Delimiter": "."
+ },
+ {
+ "Type": "application/xml",
+ "String": "application/xml+xml",
+ "MainType": "application",
+ "SubType": "xml",
+ "Suffix": "xml",
+ "Delimiter": "."
+ },
+ {
+ "Type": "text/calendar",
+ "String": "text/calendar+ics",
+ "MainType": "text",
+ "SubType": "calendar",
+ "Suffix": "ics",
+ "Delimiter": "."
+ },
+ {
+ "Type": "text/css",
+ "String": "text/css+css",
+ "MainType": "text",
+ "SubType": "css",
+ "Suffix": "css",
+ "Delimiter": "."
+ },
+ {
+ "Type": "text/csv",
+ "String": "text/csv+csv",
+ "MainType": "text",
+ "SubType": "csv",
+ "Suffix": "csv",
+ "Delimiter": "."
+ },
+ {
+ "Type": "text/html",
+ "String": "text/html+html",
+ "MainType": "text",
+ "SubType": "html",
+ "Suffix": "html",
+ "Delimiter": "."
+ },
+ {
+ "Type": "text/plain",
+ "String": "text/plain+txt",
+ "MainType": "text",
+ "SubType": "plain",
+ "Suffix": "txt",
+ "Delimiter": "."
+ }
+ ]
+ },
+ "output": {
+ "formats": [
+ {
+ "MediaType": "text/html+html",
+ "Name": "AMP",
+ "Path": "amp",
+ "BaseName": "index",
+ "Rel": "amphtml",
+ "Protocol": "",
+ "IsPlainText": false,
+ "IsHTML": true,
+ "NoUgly": false,
+ "NotAlternative": false
+ },
+ {
+ "MediaType": "text/css+css",
+ "Name": "CSS",
+ "Path": "",
+ "BaseName": "styles",
+ "Rel": "stylesheet",
+ "Protocol": "",
+ "IsPlainText": true,
+ "IsHTML": false,
+ "NoUgly": false,
+ "NotAlternative": true
+ },
+ {
+ "MediaType": "text/csv+csv",
+ "Name": "CSV",
+ "Path": "",
+ "BaseName": "index",
+ "Rel": "alternate",
+ "Protocol": "",
+ "IsPlainText": true,
+ "IsHTML": false,
+ "NoUgly": false,
+ "NotAlternative": false
+ },
+ {
+ "MediaType": "text/calendar+ics",
+ "Name": "Calendar",
+ "Path": "",
+ "BaseName": "index",
+ "Rel": "alternate",
+ "Protocol": "webcal://",
+ "IsPlainText": true,
+ "IsHTML": false,
+ "NoUgly": false,
+ "NotAlternative": false
+ },
+ {
+ "MediaType": "text/html+html",
+ "Name": "HTML",
+ "Path": "",
+ "BaseName": "index",
+ "Rel": "canonical",
+ "Protocol": "",
+ "IsPlainText": false,
+ "IsHTML": true,
+ "NoUgly": false,
+ "NotAlternative": false
+ },
+ {
+ "MediaType": "application/json+json",
+ "Name": "JSON",
+ "Path": "",
+ "BaseName": "index",
+ "Rel": "alternate",
+ "Protocol": "",
+ "IsPlainText": true,
+ "IsHTML": false,
+ "NoUgly": false,
+ "NotAlternative": false
+ },
+ {
+ "MediaType": "application/rss+xml",
+ "Name": "RSS",
+ "Path": "",
+ "BaseName": "index",
+ "Rel": "alternate",
+ "Protocol": "",
+ "IsPlainText": false,
+ "IsHTML": false,
+ "NoUgly": true,
+ "NotAlternative": false
+ }
+ ],
+ "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": "AMP home, French language\".",
+ "OutputFormat": "AMP",
+ "Suffix": "html",
+ "Template Lookup Order": [
+ "layouts/index.fr.amp.html",
+ "layouts/index.amp.html",
+ "layouts/index.fr.html",
+ "layouts/index.html",
+ "layouts/_default/list.fr.amp.html",
+ "layouts/_default/list.amp.html",
+ "layouts/_default/list.fr.html",
+ "layouts/_default/list.html"
+ ]
+ },
++ {
++ "Example": "RSS home, no theme.",
++ "OutputFormat": "RSS",
++ "Suffix": "xml",
++ "Template Lookup Order": [
++ "layouts/rss.xml",
++ "layouts/_default/rss.xml",
++ "layouts/_internal/_default/rss.xml"
++ ]
++ },
+ {
+ "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": "JSON",
+ "Suffix": "json",
+ "Template Lookup Order": [
+ "layouts/demotype/single.json.json",
+ "layouts/demotype/single.json",
+ "layouts/_default/single.json.json",
+ "layouts/_default/single.json"
+ ]
+ },
+ {
+ "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"
+ ]
+ }
+ ]
+ },
+ "tpl": {
+ "funcs": {
+ "cast": {
+ "ToInt": {
+ "Description": "ToInt converts the given value to an int.",
+ "Args": [
+ "v"
+ ],
+ "Aliases": [
+ "int"
+ ],
+ "Examples": [
+ [
+ "{{ \"1234\" | int | printf \"%T\" }}",
+ "int"
+ ]
+ ]
+ },
+ "ToString": {
+ "Description": "ToString converts the given value to a string.",
+ "Args": [
+ "v"
+ ],
+ "Aliases": [
+ "string"
+ ],
+ "Examples": [
+ [
+ "{{ 1234 | string | printf \"%T\" }}",
+ "string"
+ ]
+ ]
+ }
+ },
+ "compare": {
+ "Default": {
+ "Description": "Default checks whether a given value is set and returns a default value if it\nis not. \"Set\" in this context means non-zero for numeric types and times;\nnon-zero length for strings, arrays, slices, and maps;\nany boolean or struct value; or non-nil for any other types.",
+ "Args": [
+ "dflt",
+ "given"
+ ],
+ "Aliases": [
+ "default"
+ ],
+ "Examples": [
+ [
+ "{{ \"Hugo Rocks!\" | default \"Hugo Rules!\" }}",
+ "Hugo Rocks!"
+ ],
+ [
+ "{{ \"\" | default \"Hugo Rules!\" }}",
+ "Hugo Rules!"
+ ]
+ ]
+ },
+ "Eq": {
+ "Description": "Eq returns the boolean truth of arg1 == arg2.",
+ "Args": [
+ "x",
+ "y"
+ ],
+ "Aliases": [
+ "eq"
+ ],
+ "Examples": [
+ [
+ "{{ if eq .Section \"blog\" }}current{{ end }}",
+ "current"
+ ]
+ ]
+ },
+ "Ge": {
+ "Description": "Ge returns the boolean truth of arg1 \u003e= arg2.",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "ge"
+ ],
+ "Examples": []
+ },
+ "Gt": {
+ "Description": "Gt returns the boolean truth of arg1 \u003e arg2.",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "gt"
+ ],
+ "Examples": []
+ },
+ "Le": {
+ "Description": "Le returns the boolean truth of arg1 \u003c= arg2.",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "le"
+ ],
+ "Examples": []
+ },
+ "Lt": {
+ "Description": "Lt returns the boolean truth of arg1 \u003c arg2.",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "lt"
+ ],
+ "Examples": []
+ },
+ "Ne": {
+ "Description": "Ne returns the boolean truth of arg1 != arg2.",
+ "Args": [
+ "x",
+ "y"
+ ],
+ "Aliases": [
+ "ne"
+ ],
+ "Examples": []
+ }
+ },
+ "collections": {
+ "After": {
+ "Description": "After returns all the items after the first N in a rangeable list.",
+ "Args": [
+ "index",
+ "seq"
+ ],
+ "Aliases": [
+ "after"
+ ],
+ "Examples": []
+ },
+ "Apply": {
+ "Description": "Apply takes a map, array, or slice and returns a new slice with the function fname applied over it.",
+ "Args": [
+ "seq",
+ "fname",
+ "args"
+ ],
+ "Aliases": [
+ "apply"
+ ],
+ "Examples": []
+ },
+ "Delimit": {
+ "Description": "Delimit takes a given sequence and returns a delimited HTML string.\nIf last is passed to the function, it will be used as the final delimiter.",
+ "Args": [
+ "seq",
+ "delimiter",
+ "last"
+ ],
+ "Aliases": [
+ "delimit"
+ ],
+ "Examples": [
+ [
+ "{{ delimit (slice \"A\" \"B\" \"C\") \", \" \" and \" }}",
+ "A, B and C"
+ ]
+ ]
+ },
+ "Dictionary": {
+ "Description": "Dictionary creates a map[string]interface{} from the given parameters by\nwalking the parameters and treating them as key-value pairs. The number\nof parameters must be even.",
+ "Args": [
+ "values"
+ ],
+ "Aliases": [
+ "dict"
+ ],
+ "Examples": []
+ },
+ "EchoParam": {
+ "Description": "EchoParam returns a given value if it is set; otherwise, it returns an\nempty string.",
+ "Args": [
+ "a",
+ "key"
+ ],
+ "Aliases": [
+ "echoParam"
+ ],
+ "Examples": [
+ [
+ "{{ echoParam .Params \"langCode\" }}",
+ "en"
+ ]
+ ]
+ },
+ "First": {
+ "Description": "First returns the first N items in a rangeable list.",
+ "Args": [
+ "limit",
+ "seq"
+ ],
+ "Aliases": [
+ "first"
+ ],
+ "Examples": []
+ },
+ "In": {
+ "Description": "In returns whether v is in the set l. l may be an array or slice.",
+ "Args": [
+ "l",
+ "v"
+ ],
+ "Aliases": [
+ "in"
+ ],
+ "Examples": [
+ [
+ "{{ if in \"this string contains a substring\" \"substring\" }}Substring found!{{ end }}",
+ "Substring found!"
+ ]
+ ]
+ },
+ "Index": {
+ "Description": "Index returns the result of indexing its first argument by the following\narguments. Thus \"index x 1 2 3\" is, in Go syntax, x[1][2][3]. Each\nindexed item must be a map, slice, or array.\n\nCopied from Go stdlib src/text/template/funcs.go.\n\nWe deviate from the stdlib due to https://github.com/golang/go/issues/14751.\n\nTODO(moorereason): merge upstream changes.",
+ "Args": [
+ "item",
+ "indices"
+ ],
+ "Aliases": [
+ "index"
+ ],
+ "Examples": []
+ },
+ "Intersect": {
+ "Description": "Intersect returns the common elements in the given sets, l1 and l2. l1 and\nl2 must be of the same type and may be either arrays or slices.",
+ "Args": [
+ "l1",
+ "l2"
+ ],
+ "Aliases": [
+ "intersect"
+ ],
+ "Examples": []
+ },
+ "IsSet": {
+ "Description": "IsSet returns whether a given array, channel, slice, or map has a key\ndefined.",
+ "Args": [
+ "a",
+ "key"
+ ],
+ "Aliases": [
+ "isSet",
+ "isset"
+ ],
+ "Examples": []
+ },
+ "Last": {
+ "Description": "Last returns the last N items in a rangeable list.",
+ "Args": [
+ "limit",
+ "seq"
+ ],
+ "Aliases": [
+ "last"
+ ],
+ "Examples": []
+ },
+ "Querify": {
+ "Description": "Querify encodes the given parameters in URL-encoded form (\"bar=baz\u0026foo=quux\") sorted by key.",
+ "Args": [
+ "params"
+ ],
+ "Aliases": [
+ "querify"
+ ],
+ "Examples": [
+ [
+ "{{ (querify \"foo\" 1 \"bar\" 2 \"baz\" \"with spaces\" \"qux\" \"this\u0026that=those\") | safeHTML }}",
+ "bar=2\u0026baz=with+spaces\u0026foo=1\u0026qux=this%26that%3Dthose"
+ ],
+ [
+ "\u003ca href=\"https://www.google.com?{{ (querify \"q\" \"test\" \"page\" 3) | safeURL }}\"\u003eSearch\u003c/a\u003e",
+ "\u003ca href=\"https://www.google.com?page=3\u0026amp;q=test\"\u003eSearch\u003c/a\u003e"
+ ]
+ ]
+ },
+ "Seq": {
+ "Description": "Seq creates a sequence of integers. It's named and used as GNU's seq.\n\nExamples:\n 3 =\u003e 1, 2, 3\n 1 2 4 =\u003e 1, 3\n -3 =\u003e -1, -2, -3\n 1 4 =\u003e 1, 2, 3, 4\n 1 -2 =\u003e 1, 0, -1, -2",
+ "Args": [
+ "args"
+ ],
+ "Aliases": [
+ "seq"
+ ],
+ "Examples": [
+ [
+ "{{ seq 3 }}",
+ "[1 2 3]"
+ ]
+ ]
+ },
+ "Shuffle": {
+ "Description": "Shuffle returns the given rangeable list in a randomised order.",
+ "Args": [
+ "seq"
+ ],
+ "Aliases": [
+ "shuffle"
+ ],
+ "Examples": []
+ },
+ "Slice": {
+ "Description": "Slice returns a slice of all passed arguments.",
+ "Args": [
+ "args"
+ ],
+ "Aliases": [
+ "slice"
+ ],
+ "Examples": [
+ [
+ "{{ slice \"B\" \"C\" \"A\" | sort }}",
+ "[A B C]"
+ ]
+ ]
+ },
+ "Sort": {
+ "Description": "Sort returns a sorted sequence.",
+ "Args": [
+ "seq",
+ "args"
+ ],
+ "Aliases": [
+ "sort"
+ ],
+ "Examples": []
+ },
+ "Union": {
+ "Description": "Union returns the union of the given sets, l1 and l2. l1 and\nl2 must be of the same type and may be either arrays or slices.\nIf l1 and l2 aren't of the same type then l1 will be returned.\nIf either l1 or l2 is nil then the non-nil list will be returned.",
+ "Args": [
+ "l1",
+ "l2"
+ ],
+ "Aliases": [
+ "union"
+ ],
+ "Examples": [
+ [
+ "{{ union (slice 1 2 3) (slice 3 4 5) }}",
+ "[1 2 3 4 5]"
+ ]
+ ]
+ },
+ "Uniq": {
+ "Description": "Uniq takes in a slice or array and returns a slice with subsequent\nduplicate elements removed.",
+ "Args": [
+ "l"
+ ],
+ "Aliases": [
+ "uniq"
+ ],
+ "Examples": [
+ [
+ "{{ slice 1 2 3 2 | uniq }}",
+ "[1 2 3]"
+ ]
+ ]
+ },
+ "Where": {
+ "Description": "Where returns a filtered subset of a given data type.",
+ "Args": [
+ "seq",
+ "key",
+ "args"
+ ],
+ "Aliases": [
+ "where"
+ ],
+ "Examples": []
+ }
+ },
+ "crypto": {
+ "MD5": {
+ "Description": "MD5 hashes the given input and returns its MD5 checksum.",
+ "Args": [
+ "in"
+ ],
+ "Aliases": [
+ "md5"
+ ],
+ "Examples": [
+ [
+ "{{ md5 \"Hello world, gophers!\" }}",
+ "b3029f756f98f79e7f1b7f1d1f0dd53b"
+ ],
+ [
+ "{{ crypto.MD5 \"Hello world, gophers!\" }}",
+ "b3029f756f98f79e7f1b7f1d1f0dd53b"
+ ]
+ ]
+ },
+ "SHA1": {
+ "Description": "SHA1 hashes the given input and returns its SHA1 checksum.",
+ "Args": [
+ "in"
+ ],
+ "Aliases": [
+ "sha1"
+ ],
+ "Examples": [
+ [
+ "{{ sha1 \"Hello world, gophers!\" }}",
+ "c8b5b0e33d408246e30f53e32b8f7627a7a649d4"
+ ]
+ ]
+ },
+ "SHA256": {
+ "Description": "SHA256 hashes the given input and returns its SHA256 checksum.",
+ "Args": [
+ "in"
+ ],
+ "Aliases": [
+ "sha256"
+ ],
+ "Examples": [
+ [
+ "{{ sha256 \"Hello world, gophers!\" }}",
+ "6ec43b78da9669f50e4e422575c54bf87536954ccd58280219c393f2ce352b46"
+ ]
+ ]
+ }
+ },
+ "data": {
+ "GetCSV": {
+ "Description": "GetCSV expects a data separator and one or n-parts of a URL to a resource which\ncan either be a local or a remote one.\nThe data separator can be a comma, semi-colon, pipe, etc, but only one character.\nIf you provide multiple parts for the URL they will be joined together to the final URL.\nGetCSV returns nil or a slice slice to use in a short code.",
+ "Args": [
+ "sep",
+ "urlParts"
+ ],
+ "Aliases": [
+ "getCSV"
+ ],
+ "Examples": []
+ },
+ "GetJSON": {
+ "Description": "GetJSON expects one or n-parts of a URL to a resource which can either be a local or a remote one.\nIf you provide multiple parts they will be joined together to the final URL.\nGetJSON returns nil or parsed JSON to use in a short code.",
+ "Args": [
+ "urlParts"
+ ],
+ "Aliases": [
+ "getJSON"
+ ],
+ "Examples": []
+ }
+ },
+ "encoding": {
+ "Base64Decode": {
+ "Description": "Base64Decode returns the base64 decoding of the given content.",
+ "Args": [
+ "content"
+ ],
+ "Aliases": [
+ "base64Decode"
+ ],
+ "Examples": [
+ [
+ "{{ \"SGVsbG8gd29ybGQ=\" | base64Decode }}",
+ "Hello world"
+ ],
+ [
+ "{{ 42 | base64Encode | base64Decode }}",
+ "42"
+ ]
+ ]
+ },
+ "Base64Encode": {
+ "Description": "Base64Encode returns the base64 encoding of the given content.",
+ "Args": [
+ "content"
+ ],
+ "Aliases": [
+ "base64Encode"
+ ],
+ "Examples": [
+ [
+ "{{ \"Hello world\" | base64Encode }}",
+ "SGVsbG8gd29ybGQ="
+ ]
+ ]
+ },
+ "Jsonify": {
+ "Description": "Jsonify encodes a given object to JSON.",
+ "Args": [
+ "v"
+ ],
+ "Aliases": [
+ "jsonify"
+ ],
+ "Examples": [
+ [
+ "{{ (slice \"A\" \"B\" \"C\") | jsonify }}",
+ "[\"A\",\"B\",\"C\"]"
+ ]
+ ]
+ }
+ },
+ "fmt": {
+ "Print": {
+ "Description": "",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "print"
+ ],
+ "Examples": [
+ [
+ "{{ print \"works!\" }}",
+ "works!"
+ ]
+ ]
+ },
+ "Printf": {
+ "Description": "",
+ "Args": [
+ "format",
+ "a"
+ ],
+ "Aliases": [
+ "printf"
+ ],
+ "Examples": [
+ [
+ "{{ printf \"%s!\" \"works\" }}",
+ "works!"
+ ]
+ ]
+ },
+ "Println": {
+ "Description": "",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "println"
+ ],
+ "Examples": [
+ [
+ "{{ println \"works!\" }}",
+ "works!\n"
+ ]
+ ]
+ }
+ },
+ "images": {
+ "Config": {
+ "Description": "Config returns the image.Config for the specified path relative to the\nworking directory.",
+ "Args": [
+ "path"
+ ],
+ "Aliases": [
+ "imageConfig"
+ ],
+ "Examples": []
+ }
+ },
+ "inflect": {
+ "Humanize": {
+ "Description": "Humanize returns the humanized form of a single parameter.\n\nIf the parameter is either an integer or a string containing an integer\nvalue, the behavior is to add the appropriate ordinal.\n\n Example: \"my-first-post\" -\u003e \"My first post\"\n Example: \"103\" -\u003e \"103rd\"\n Example: 52 -\u003e \"52nd\"",
+ "Args": [
+ "in"
+ ],
+ "Aliases": [
+ "humanize"
+ ],
+ "Examples": [
+ [
+ "{{ humanize \"my-first-post\" }}",
+ "My first post"
+ ],
+ [
+ "{{ humanize \"myCamelPost\" }}",
+ "My camel post"
+ ],
+ [
+ "{{ humanize \"52\" }}",
+ "52nd"
+ ],
+ [
+ "{{ humanize 103 }}",
+ "103rd"
+ ]
+ ]
+ },
+ "Pluralize": {
+ "Description": "Pluralize returns the plural form of a single word.",
+ "Args": [
+ "in"
+ ],
+ "Aliases": [
+ "pluralize"
+ ],
+ "Examples": [
+ [
+ "{{ \"cat\" | pluralize }}",
+ "cats"
+ ]
+ ]
+ },
+ "Singularize": {
+ "Description": "Singularize returns the singular form of a single word.",
+ "Args": [
+ "in"
+ ],
+ "Aliases": [
+ "singularize"
+ ],
+ "Examples": [
+ [
+ "{{ \"cats\" | singularize }}",
+ "cat"
+ ]
+ ]
+ }
+ },
+ "lang": {
+ "NumFmt": {
+ "Description": "NumFmt formats a number with the given precision using the\nnegative, decimal, and grouping options. The `options`\nparameter is a string consisting of `\u003cnegative\u003e \u003cdecimal\u003e \u003cgrouping\u003e`. The\ndefault `options` value is `- . ,`.\n\nNote that numbers are rounded up at 5 or greater.\nSo, with precision set to 0, 1.5 becomes `2`, and 1.4 becomes `1`.",
+ "Args": [
+ "precision",
+ "number",
+ "options"
+ ],
+ "Aliases": null,
+ "Examples": [
+ [
+ "{{ lang.NumFmt 2 12345.6789 }}",
+ "12,345.68"
+ ],
+ [
+ "{{ lang.NumFmt 2 12345.6789 \"- , .\" }}",
+ "12.345,68"
+ ],
+ [
+ "{{ lang.NumFmt 6 -12345.6789 \"- .\" }}",
+ "-12345.678900"
+ ],
+ [
+ "{{ lang.NumFmt 0 -12345.6789 \"- . ,\" }}",
+ "-12,346"
+ ],
+ [
+ "{{ -98765.4321 | lang.NumFmt 2 }}",
+ "-98,765.43"
+ ]
+ ]
+ },
+ "Translate": {
+ "Description": "Translate ...",
+ "Args": [
+ "id",
+ "args"
+ ],
+ "Aliases": [
+ "i18n",
+ "T"
+ ],
+ "Examples": []
+ }
+ },
+ "math": {
+ "Add": {
+ "Description": "",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "add"
+ ],
+ "Examples": [
+ [
+ "{{add 1 2}}",
+ "3"
+ ]
+ ]
+ },
+ "Div": {
+ "Description": "",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "div"
+ ],
+ "Examples": [
+ [
+ "{{div 6 3}}",
+ "2"
+ ]
+ ]
+ },
+ "Log": {
+ "Description": "",
+ "Args": [
+ "a"
+ ],
+ "Aliases": null,
+ "Examples": [
+ [
+ "{{math.Log 1}}",
+ "0"
+ ]
+ ]
+ },
+ "Mod": {
+ "Description": "Mod returns a % b.",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "mod"
+ ],
+ "Examples": [
+ [
+ "{{mod 15 3}}",
+ "0"
+ ]
+ ]
+ },
+ "ModBool": {
+ "Description": "ModBool returns the boolean of a % b. If a % b == 0, return true.",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "modBool"
+ ],
+ "Examples": [
+ [
+ "{{modBool 15 3}}",
+ "true"
+ ]
+ ]
+ },
+ "Mul": {
+ "Description": "",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "mul"
+ ],
+ "Examples": [
+ [
+ "{{mul 2 3}}",
+ "6"
+ ]
+ ]
+ },
+ "Sub": {
+ "Description": "",
+ "Args": [
+ "a",
+ "b"
+ ],
+ "Aliases": [
+ "sub"
+ ],
+ "Examples": [
+ [
+ "{{sub 3 2}}",
+ "1"
+ ]
+ ]
+ }
+ },
+ "os": {
+ "Getenv": {
+ "Description": "Getenv retrieves the value of the environment variable named by the key.\nIt returns the value, which will be empty if the variable is not present.",
+ "Args": [
+ "key"
+ ],
+ "Aliases": [
+ "getenv"
+ ],
+ "Examples": []
+ },
+ "ReadDir": {
+ "Description": "ReadDir lists the directory contents relative to the configured WorkingDir.",
+ "Args": [
+ "i"
+ ],
+ "Aliases": [
+ "readDir"
+ ],
+ "Examples": [
+ [
+ "{{ range (readDir \".\") }}{{ .Name }}{{ end }}",
+ "README.txt"
+ ]
+ ]
+ },
+ "ReadFile": {
+ "Description": "ReadFilereads the file named by filename relative to the configured\nWorkingDir. It returns the contents as a string. There is a upper size\nlimit set at 1 megabytes.",
+ "Args": [
+ "i"
+ ],
+ "Aliases": [
+ "readFile"
+ ],
+ "Examples": [
+ [
+ "{{ readFile \"README.txt\" }}",
+ "Hugo Rocks!"
+ ]
+ ]
+ }
+ },
+ "partials": {
+ "Include": {
+ "Description": "Include executes the named partial and returns either a string,\nwhen the partial is a text/template, or template.HTML when html/template.",
+ "Args": [
+ "name",
+ "contextList"
+ ],
+ "Aliases": [
+ "partial"
+ ],
+ "Examples": [
+ [
+ "{{ partial \"header.html\" . }}",
+ "\u003ctitle\u003eHugo Rocks!\u003c/title\u003e"
+ ]
+ ]
+ }
+ },
+ "safe": {
+ "CSS": {
+ "Description": "CSS returns a given string as html/template CSS content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "safeCSS"
+ ],
+ "Examples": [
+ [
+ "{{ \"Bat\u0026Man\" | safeCSS | safeCSS }}",
+ "Bat\u0026amp;Man"
+ ]
+ ]
+ },
+ "HTML": {
+ "Description": "HTML returns a given string as html/template HTML content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "safeHTML"
+ ],
+ "Examples": [
+ [
+ "{{ \"Bat\u0026Man\" | safeHTML | safeHTML }}",
+ "Bat\u0026Man"
+ ],
+ [
+ "{{ \"Bat\u0026Man\" | safeHTML }}",
+ "Bat\u0026Man"
+ ]
+ ]
+ },
+ "HTMLAttr": {
+ "Description": "HTMLAttr returns a given string as html/template HTMLAttr content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "safeHTMLAttr"
+ ],
+ "Examples": []
+ },
+ "JS": {
+ "Description": "JS returns the given string as a html/template JS content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "safeJS"
+ ],
+ "Examples": [
+ [
+ "{{ \"(1*2)\" | safeJS | safeJS }}",
+ "(1*2)"
+ ]
+ ]
+ },
+ "JSStr": {
+ "Description": "JSStr returns the given string as a html/template JSStr content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "safeJSStr"
+ ],
+ "Examples": []
+ },
+ "SanitizeURL": {
+ "Description": "SanitizeURL returns a given string as html/template URL content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "sanitizeURL",
+ "sanitizeurl"
+ ],
+ "Examples": []
+ },
+ "URL": {
+ "Description": "URL returns a given string as html/template URL content.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "safeURL"
+ ],
+ "Examples": [
+ [
+ "{{ \"http://gohugo.io\" | safeURL | safeURL }}",
+ "http://gohugo.io"
+ ]
+ ]
+ }
+ },
+ "strings": {
+ "Chomp": {
+ "Description": "Chomp returns a copy of s with all trailing newline characters removed.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "chomp"
+ ],
+ "Examples": [
+ [
+ "{{chomp \"\u003cp\u003eBlockhead\u003c/p\u003e\\n\" }}",
+ "\u003cp\u003eBlockhead\u003c/p\u003e"
+ ]
+ ]
+ },
+ "Contains": {
+ "Description": "",
+ "Args": null,
+ "Aliases": null,
+ "Examples": null
+ },
+ "ContainsAny": {
+ "Description": "",
+ "Args": null,
+ "Aliases": null,
+ "Examples": null
+ },
+ "CountRunes": {
+ "Description": "CountRunes returns the number of runes in s, excluding whitepace.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "countrunes"
+ ],
+ "Examples": []
+ },
+ "CountWords": {
+ "Description": "CountWords returns the approximate word count in s.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "countwords"
+ ],
+ "Examples": []
+ },
+ "FindRE": {
+ "Description": "FindRE returns a list of strings that match the regular expression. By default all matches\nwill be included. The number of matches can be limited with an optional third parameter.",
+ "Args": [
+ "expr",
+ "content",
+ "limit"
+ ],
+ "Aliases": [
+ "findRE"
+ ],
+ "Examples": [
+ [
+ "{{ findRE \"[G|g]o\" \"Hugo is a static side generator written in Go.\" \"1\" }}",
+ "[go]"
+ ]
+ ]
+ },
+ "HasPrefix": {
+ "Description": "HasPrefix tests whether the input s begins with prefix.",
+ "Args": [
+ "s",
+ "prefix"
+ ],
+ "Aliases": [
+ "hasPrefix"
+ ],
+ "Examples": [
+ [
+ "{{ hasPrefix \"Hugo\" \"Hu\" }}",
+ "true"
+ ],
+ [
+ "{{ hasPrefix \"Hugo\" \"Fu\" }}",
+ "false"
+ ]
+ ]
+ },
+ "HasSuffix": {
+ "Description": "",
+ "Args": null,
+ "Aliases": null,
+ "Examples": null
+ },
+ "Replace": {
+ "Description": "Replace returns a copy of the string s with all occurrences of old replaced\nwith new.",
+ "Args": [
+ "s",
+ "old",
+ "new"
+ ],
+ "Aliases": [
+ "replace"
+ ],
+ "Examples": [
+ [
+ "{{ replace \"Batman and Robin\" \"Robin\" \"Catwoman\" }}",
+ "Batman and Catwoman"
+ ]
+ ]
+ },
+ "ReplaceRE": {
+ "Description": "ReplaceRE returns a copy of s, replacing all matches of the regular\nexpression pattern with the replacement text repl.",
+ "Args": [
+ "pattern",
+ "repl",
+ "s"
+ ],
+ "Aliases": [
+ "replaceRE"
+ ],
+ "Examples": []
+ },
+ "SliceString": {
+ "Description": "SliceString slices a string by specifying a half-open range with\ntwo indices, start and end. 1 and 4 creates a slice including elements 1 through 3.\nThe end index can be omitted, it defaults to the string's length.",
+ "Args": [
+ "a",
+ "startEnd"
+ ],
+ "Aliases": [
+ "slicestr"
+ ],
+ "Examples": [
+ [
+ "{{slicestr \"BatMan\" 0 3}}",
+ "Bat"
+ ],
+ [
+ "{{slicestr \"BatMan\" 3}}",
+ "Man"
+ ]
+ ]
+ },
+ "Split": {
+ "Description": "Split slices an input string into all substrings separated by delimiter.",
+ "Args": [
+ "a",
+ "delimiter"
+ ],
+ "Aliases": [
+ "split"
+ ],
+ "Examples": []
+ },
+ "Substr": {
+ "Description": "Substr extracts parts of a string, beginning at the character at the specified\nposition, and returns the specified number of characters.\n\nIt normally takes two parameters: start and length.\nIt can also take one parameter: start, i.e. length is omitted, in which case\nthe substring starting from start until the end of the string will be returned.\n\nTo extract characters from the end of the string, use a negative start number.\n\nIn addition, borrowing from the extended behavior described at http://php.net/substr,\nif length is given and is negative, then that many characters will be omitted from\nthe end of string.",
+ "Args": [
+ "a",
+ "nums"
+ ],
+ "Aliases": [
+ "substr"
+ ],
+ "Examples": [
+ [
+ "{{substr \"BatMan\" 0 -3}}",
+ "Bat"
+ ],
+ [
+ "{{substr \"BatMan\" 3 3}}",
+ "Man"
+ ]
+ ]
+ },
+ "Title": {
+ "Description": "Title returns a copy of the input s with all Unicode letters that begin words\nmapped to their title case.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "title"
+ ],
+ "Examples": [
+ [
+ "{{title \"Bat man\"}}",
+ "Bat Man"
+ ]
+ ]
+ },
+ "ToLower": {
+ "Description": "ToLower returns a copy of the input s with all Unicode letters mapped to their\nlower case.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "lower"
+ ],
+ "Examples": [
+ [
+ "{{lower \"BatMan\"}}",
+ "batman"
+ ]
+ ]
+ },
+ "ToUpper": {
+ "Description": "ToUpper returns a copy of the input s with all Unicode letters mapped to their\nupper case.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "upper"
+ ],
+ "Examples": [
+ [
+ "{{upper \"BatMan\"}}",
+ "BATMAN"
+ ]
+ ]
+ },
+ "Trim": {
+ "Description": "Trim returns a string with all leading and trailing characters defined\ncontained in cutset removed.",
+ "Args": [
+ "s",
+ "cutset"
+ ],
+ "Aliases": [
+ "trim"
+ ],
+ "Examples": [
+ [
+ "{{ trim \"++Batman--\" \"+-\" }}",
+ "Batman"
+ ]
+ ]
+ },
+ "TrimPrefix": {
+ "Description": "",
+ "Args": null,
+ "Aliases": null,
+ "Examples": null
+ },
+ "TrimSuffix": {
+ "Description": "",
+ "Args": null,
+ "Aliases": null,
+ "Examples": null
+ },
+ "Truncate": {
+ "Description": "",
+ "Args": [
+ "a",
+ "options"
+ ],
+ "Aliases": [
+ "truncate"
+ ],
+ "Examples": [
+ [
+ "{{ \"this is a very long text\" | truncate 10 \" ...\" }}",
+ "this is a ..."
+ ],
+ [
+ "{{ \"With [Markdown](/markdown) inside.\" | markdownify | truncate 14 }}",
+ "With \u003ca href=\"/markdown\"\u003eMarkdown …\u003c/a\u003e"
+ ]
+ ]
+ }
+ },
+ "time": {
+ "AsTime": {
+ "Description": "AsTime converts the textual representation of the datetime string into\na time.Time interface.",
+ "Args": [
+ "v"
+ ],
+ "Aliases": null,
+ "Examples": [
+ [
+ "{{ (time \"2015-01-21\").Year }}",
+ "2015"
+ ]
+ ]
+ },
+ "Format": {
+ "Description": "Format converts the textual representation of the datetime string into\nthe other form or returns it of the time.Time value. These are formatted\nwith the layout string",
+ "Args": [
+ "layout",
+ "v"
+ ],
+ "Aliases": [
+ "dateFormat"
+ ],
+ "Examples": [
+ [
+ "dateFormat: {{ dateFormat \"Monday, Jan 2, 2006\" \"2015-01-21\" }}",
+ "dateFormat: Wednesday, Jan 21, 2015"
+ ]
+ ]
+ },
+ "Now": {
+ "Description": "Now returns the current local time.",
+ "Args": null,
+ "Aliases": [
+ "now"
+ ],
+ "Examples": []
+ }
+ },
+ "transform": {
+ "Emojify": {
+ "Description": "Emojify returns a copy of s with all emoji codes replaced with actual emojis.\n\nSee http://www.emoji-cheat-sheet.com/",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "emojify"
+ ],
+ "Examples": [
+ [
+ "{{ \"I :heart: Hugo\" | emojify }}",
+ "I ❤️ Hugo"
+ ]
+ ]
+ },
+ "HTMLEscape": {
+ "Description": "HTMLEscape returns a copy of s with reserved HTML characters escaped.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "htmlEscape"
+ ],
+ "Examples": [
+ [
+ "{{ htmlEscape \"Cathal Garvey \u0026 The Sunshine Band \u003ccathal@foo.bar\u003e\" | safeHTML}}",
+ "Cathal Garvey \u0026amp; The Sunshine Band \u0026lt;cathal@foo.bar\u0026gt;"
+ ],
+ [
+ "{{ htmlEscape \"Cathal Garvey \u0026 The Sunshine Band \u003ccathal@foo.bar\u003e\"}}",
+ "Cathal Garvey \u0026amp;amp; The Sunshine Band \u0026amp;lt;cathal@foo.bar\u0026amp;gt;"
+ ],
+ [
+ "{{ htmlEscape \"Cathal Garvey \u0026 The Sunshine Band \u003ccathal@foo.bar\u003e\" | htmlUnescape | safeHTML }}",
+ "Cathal Garvey \u0026 The Sunshine Band \u003ccathal@foo.bar\u003e"
+ ]
+ ]
+ },
+ "HTMLUnescape": {
+ "Description": "HTMLUnescape returns a copy of with HTML escape requences converted to plain\ntext.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "htmlUnescape"
+ ],
+ "Examples": [
+ [
+ "{{ htmlUnescape \"Cathal Garvey \u0026amp; The Sunshine Band \u0026lt;cathal@foo.bar\u0026gt;\" | safeHTML}}",
+ "Cathal Garvey \u0026 The Sunshine Band \u003ccathal@foo.bar\u003e"
+ ],
+ [
+ "{{\"Cathal Garvey \u0026amp;amp; The Sunshine Band \u0026amp;lt;cathal@foo.bar\u0026amp;gt;\" | htmlUnescape | htmlUnescape | safeHTML}}",
+ "Cathal Garvey \u0026 The Sunshine Band \u003ccathal@foo.bar\u003e"
+ ],
+ [
+ "{{\"Cathal Garvey \u0026amp;amp; The Sunshine Band \u0026amp;lt;cathal@foo.bar\u0026amp;gt;\" | htmlUnescape | htmlUnescape }}",
+ "Cathal Garvey \u0026amp; The Sunshine Band \u0026lt;cathal@foo.bar\u0026gt;"
+ ],
+ [
+ "{{ htmlUnescape \"Cathal Garvey \u0026amp; The Sunshine Band \u0026lt;cathal@foo.bar\u0026gt;\" | htmlEscape | safeHTML }}",
+ "Cathal Garvey \u0026amp; The Sunshine Band \u0026lt;cathal@foo.bar\u0026gt;"
+ ]
+ ]
+ },
+ "Highlight": {
+ "Description": "Highlight returns a copy of s as an HTML string with syntax\nhighlighting applied.",
+ "Args": [
+ "s",
+ "lang",
+ "opts"
+ ],
+ "Aliases": [
+ "highlight"
+ ],
+ "Examples": []
+ },
+ "Markdownify": {
+ "Description": "Markdownify renders a given input from Markdown to HTML.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "markdownify"
+ ],
+ "Examples": [
+ [
+ "{{ .Title | markdownify}}",
+ "\u003cstrong\u003eBatMan\u003c/strong\u003e"
+ ]
+ ]
+ },
+ "Plainify": {
+ "Description": "Plainify returns a copy of s with all HTML tags removed.",
+ "Args": [
+ "s"
+ ],
+ "Aliases": [
+ "plainify"
+ ],
+ "Examples": [
+ [
+ "{{ plainify \"Hello \u003cstrong\u003eworld\u003c/strong\u003e, gophers!\" }}",
+ "Hello world, gophers!"
+ ]
+ ]
+ }
+ },
+ "urls": {
+ "AbsLangURL": {
+ "Description": "AbsLangURL takes a given string and converts it to an absolute URL according\nto a page's position in the project directory structure and the current\nlanguage.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "absLangURL"
+ ],
+ "Examples": []
+ },
+ "AbsURL": {
+ "Description": "AbsURL takes a given string and converts it to an absolute URL.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "absURL"
+ ],
+ "Examples": []
+ },
+ "Ref": {
+ "Description": "Ref returns the absolute URL path to a given content item.",
+ "Args": [
+ "in",
+ "refs"
+ ],
+ "Aliases": [
+ "ref"
+ ],
+ "Examples": []
+ },
+ "RelLangURL": {
+ "Description": "RelLangURL takes a given string and prepends the relative path according to a\npage's position in the project directory structure and the current language.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "relLangURL"
+ ],
+ "Examples": []
+ },
+ "RelRef": {
+ "Description": "RelRef returns the relative URL path to a given content item.",
+ "Args": [
+ "in",
+ "refs"
+ ],
+ "Aliases": [
+ "relref"
+ ],
+ "Examples": []
+ },
+ "RelURL": {
+ "Description": "RelURL takes a given string and prepends the relative path according to a\npage's position in the project directory structure.",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "relURL"
+ ],
+ "Examples": []
+ },
+ "URLize": {
+ "Description": "",
+ "Args": [
+ "a"
+ ],
+ "Aliases": [
+ "urlize"
+ ],
+ "Examples": []
+ }
+ }
+ }
+ }
+}
--- /dev/null
--- /dev/null
++{{ $id := .Get 0 }}
++<script type="text/javascript" src="https://asciinema.org/a/{{ $id }}.js" id="asciicast-{{ $id }}" data-rows="10" async></script>
--- /dev/null
- <!-- <div class="code-icon">
- <i class="icon-{{$icon}}"></i>
- </div> -->
+{{$file := .Get "file"}}
+{{$icon := index (split $file ".") 1 }}
+<div class="code" id="{{$file | urlize}}">
+ <div class="filename" title="{{$file}}">{{$file}}</div>
- {{- .Inner -}}
+ <div class="code-copy-content output-content">
++ <pre><code>{{- .Inner | string -}}</code></pre>
+ </div>
+</div>
--- /dev/null
- Subproject commit d0445e2ad6bcffcbfa305650dd66e308543bcfdc
++Subproject commit ce4449747bb1867d7d8b0c579be2ddf4a040274c
projects / brevno-suite / hugo / commitdiff
