Cleanup shortcode calls

This commit is contained in:
Joe Mooring authored and Joe Mooring committed 2023-11-08 17:05:23 -08:00
1 parent c9247e98d6
commit 903b42ebc9
75 files changed
+196 -196

No files matched your search

+1 -1
View File
@@ -31,7 +31,7 @@ Hugo has a built-in security policy that restricts access to [os/exec](https://p
The default configuration is listed below. Any build using features not in the allow list of the security policy will fail with a detailed message about what needs to be done. Most of these settings are allow lists (string or slice, [Regular Expressions](https://pkg.go.dev/regexp) or `none` which matches nothing). The default configuration is listed below. Any build using features not in the allow list of the security policy will fail with a detailed message about what needs to be done. Most of these settings are allow lists (string or slice, [Regular Expressions](https://pkg.go.dev/regexp) or `none` which matches nothing).
{{< code-toggle config="security" />}} {{< code-toggle config=security />}}
Note that these and other configuration settings in Hugo can be overridden by the OS environment. If you want to block all remote HTTP fetching of data: Note that these and other configuration settings in Hugo can be overridden by the OS environment. If you want to block all remote HTTP fetching of data:
+3 -3
View File
@@ -19,7 +19,7 @@ A content file consists of [front matter] and markup. The markup is typically ma
The `hugo new content` command creates a new file in the `content` directory, using an archetype as a template. This is the default archetype: The `hugo new content` command creates a new file in the `content` directory, using an archetype as a template. This is the default archetype:
{{< code-toggle file="archetypes/default.md" fm=true >}} {{< code-toggle file=archetypes/default.md fm=true >}}
title = '{{ replace .File.ContentBaseName `-` ` ` | title }}' title = '{{ replace .File.ContentBaseName `-` ` ` | title }}'
date = '{{ .Date }}' date = '{{ .Date }}'
draft = true draft = true
@@ -33,7 +33,7 @@ hugo new content posts/my-first-post.md
With the default archetype shown above, Hugo creates this content file: With the default archetype shown above, Hugo creates this content file:
{{< code-toggle file="content/posts/my-first-post.md" fm=true >}} {{< code-toggle file=content/posts/my-first-post.md fm=true >}}
title = 'My First Post' title = 'My First Post'
date = '2023-08-24T11:49:46-07:00' date = '2023-08-24T11:49:46-07:00'
draft = true draft = true
@@ -85,7 +85,7 @@ Although typically used as a front matter template, you can also use an archetyp
For example, in a documentation site you might have a section (content type) for functions. Every page within this section should follow the same format: a brief description, the function signature, examples, and notes. We can pre-populate the page to remind content authors of the standard format. For example, in a documentation site you might have a section (content type) for functions. Every page within this section should follow the same format: a brief description, the function signature, examples, and notes. We can pre-populate the page to remind content authors of the standard format.
{{< code file="archetypes/functions.md" >}} {{< code file=archetypes/functions.md >}}
--- ---
date: '{{ .Date }}' date: '{{ .Date }}'
draft: true draft: true
@@ -14,7 +14,7 @@ aliases: [/content/build-options/]
Build options are stored in a reserved front matter object named `_build` with these defaults: Build options are stored in a reserved front matter object named `_build` with these defaults:
{{< code-toggle file="content/example/index.md" fm=true >}} {{< code-toggle file=content/example/index.md fm=true >}}
[_build] [_build]
list = 'always' list = 'always'
publishResources = true publishResources = true
@@ -93,7 +93,7 @@ title = 'Headless page'
To include the content and images on the home page: To include the content and images on the home page:
{{< code file="layouts/_default/home.html" lang=go-html-template >}} {{< code file=layouts/_default/home.html lang=go-html-template >}}
{{ with .Site.GetPage "/headless" }} {{ with .Site.GetPage "/headless" }}
{{ .Content }} {{ .Content }}
{{ range .Resources.ByType "image" }} {{ range .Resources.ByType "image" }}
@@ -153,7 +153,7 @@ In the front matter above, note that we have set `list` to `local` to include th
To include the content and images on the home page: To include the content and images on the home page:
{{< code file="layouts/_default/home.html" lang=go-html-template >}} {{< code file=layouts/_default/home.html lang=go-html-template >}}
{{ with .Site.GetPage "/headless" }} {{ with .Site.GetPage "/headless" }}
{{ range .Pages }} {{ range .Pages }}
{{ .Content }} {{ .Content }}
@@ -199,7 +199,7 @@ content/
Set the build options in front matter, using the `cascade` keyword to "cascade" the values down to descendant pages. Set the build options in front matter, using the `cascade` keyword to "cascade" the values down to descendant pages.
{{< code-toggle file="content/glossary/_index.md" fm=true >}} {{< code-toggle file=content/glossary/_index.md fm=true >}}
title = 'Glossary' title = 'Glossary'
[_build] [_build]
render = 'always' render = 'always'
@@ -415,7 +415,7 @@ _The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pe
This is the shortcode used to generate the examples above: This is the shortcode used to generate the examples above:
{{< readfile file="layouts/shortcodes/imgproc.html" highlight="go-html-template" >}} {{< readfile file=layouts/shortcodes/imgproc.html highlight=go-html-template >}}
Call the shortcode from your Markdown like this: Call the shortcode from your Markdown like this:
@@ -433,7 +433,7 @@ Note the self-closing shortcode syntax above. You may call the `imgproc` shortco
Define an `imaging` section in your site configuration to set the default [image processing options](#image-processing-options). Define an `imaging` section in your site configuration to set the default [image processing options](#image-processing-options).
{{< code-toggle config="imaging" />}} {{< code-toggle config=imaging />}}
anchor anchor
: See image processing options: [anchor](#anchor). : See image processing options: [anchor](#anchor).
+3 -3
View File
@@ -46,7 +46,7 @@ This creates a menu structure that you can access with `site.Menus.main` in your
To add a page to the "main" menu: To add a page to the "main" menu:
{{< code-toggle file="content/about.md" fm=true >}} {{< code-toggle file=content/about.md fm=true >}}
title = 'About' title = 'About'
menu = 'main' menu = 'main'
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -55,7 +55,7 @@ Access the entry with `site.Menus.main` in your templates. See [menu templates]
To add a page to the "main" and "footer" menus: To add a page to the "main" and "footer" menus:
{{< code-toggle file="content/contact.md" fm=true >}} {{< code-toggle file=content/contact.md fm=true >}}
title = 'Contact' title = 'Contact'
menu = ['main','footer'] menu = ['main','footer']
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -94,7 +94,7 @@ weight
This front matter menu entry demonstrates some of the available properties: This front matter menu entry demonstrates some of the available properties:
{{< code-toggle file="content/products/software.md" fm=true >}} {{< code-toggle file=content/products/software.md fm=true >}}
title = 'Software' title = 'Software'
[menu.main] [menu.main]
parent = 'Products' parent = 'Products'
+10 -10
View File
@@ -21,7 +21,7 @@ Also See [Hugo Multilingual Part 1: Content translation].
This is the default language configuration: This is the default language configuration:
{{< code-toggle config="languages" />}} {{< code-toggle config=languages />}}
This is an example of a site configuration for a multilingual project. Any key not defined in a `languages` object will fall back to the global value in the root of your site configuration. This is an example of a site configuration for a multilingual project. Any key not defined in a `languages` object will fall back to the global value in the root of your site configuration.
@@ -277,7 +277,7 @@ To localize URLs:
For example, a French translation can have its own localized slug. For example, a French translation can have its own localized slug.
{{< code-toggle file="content/about.fr.md" fm=true >}} {{< code-toggle file=content/about.fr.md fm=true >}}
title: A Propos title: A Propos
slug: "a-propos" slug: "a-propos"
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -303,7 +303,7 @@ Page Bundle resources follow the same language assignment logic as content files
To create a list of links to translated content, use a template similar to the following: To create a list of links to translated content, use a template similar to the following:
{{< code file="layouts/partials/i18nlist.html" >}} {{< code file=layouts/partials/i18nlist.html >}}
{{ if .IsTranslated }} {{ if .IsTranslated }}
<h4>{{ i18n "translations" }}</h4> <h4>{{ i18n "translations" }}</h4>
<ul> <ul>
@@ -324,7 +324,7 @@ The above also uses the [`i18n` function][i18func] described in the next section
`.AllTranslations` on a `Page` can be used to list all translations, including the page itself. On the home page it can be used to build a language navigator: `.AllTranslations` on a `Page` can be used to list all translations, including the page itself. On the home page it can be used to build a language navigator:
{{< code file="layouts/partials/allLanguages.html" >}} {{< code file=layouts/partials/allLanguages.html >}}
<ul> <ul>
{{ range $.Site.Home.AllTranslations }} {{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li> <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
@@ -359,7 +359,7 @@ From within your templates, use the [`i18n`] function like this:
The function will search for the `"home"` id: The function will search for the `"home"` id:
{{< code-toggle file="i18n/en-US" >}} {{< code-toggle file=i18n/en-US >}}
[home] [home]
other = "Home" other = "Home"
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -380,7 +380,7 @@ Often you will want to use the page variables in the translation strings. To do
The function will pass the `.` context to the `"wordCount"` id: The function will pass the `.` context to the `"wordCount"` id:
{{< code-toggle file="i18n/en-US" >}} {{< code-toggle file=i18n/en-US >}}
[wordCount] [wordCount]
other = "This article has {{ .WordCount }} words." other = "This article has {{ .WordCount }} words."
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -401,7 +401,7 @@ To enable pluralization when translating, pass a map with a numeric `.Count` pro
The function will read `.Count` from `.ReadingTime` and evaluate whether the number is singular (`one`) or plural (`other`). After that, it will pass to `readingTime` id in `i18n/en-US.toml` file: The function will read `.Count` from `.ReadingTime` and evaluate whether the number is singular (`one`) or plural (`other`). After that, it will pass to `readingTime` id in `i18n/en-US.toml` file:
{{< code-toggle file="i18n/en-US" >}} {{< code-toggle file=i18n/en-US >}}
[readingTime] [readingTime]
one = "One minute to read" one = "One minute to read"
other = "{{ .Count }} minutes to read" other = "{{ .Count }} minutes to read"
@@ -585,7 +585,7 @@ config/
└── hugo.toml └── hugo.toml
``` ```
{{< code-toggle file="config/_default/menus/menu.de" >}} {{< code-toggle file=config/_default/menus/menu.de >}}
[[main]] [[main]]
name = 'Produkte' name = 'Produkte'
pageRef = '/products' pageRef = '/products'
@@ -596,7 +596,7 @@ pageRef = '/services'
weight = 20 weight = 20
{{< /code-toggle >}} {{< /code-toggle >}}
{{< code-toggle file="config/_default/menus/menu.en" >}} {{< code-toggle file=config/_default/menus/menu.en >}}
[[main]] [[main]]
name = 'Products' name = 'Products'
pageRef = '/products' pageRef = '/products'
@@ -641,7 +641,7 @@ For example, if you define menu entries in site configuration:
Create corresponding entries in the translation tables: Create corresponding entries in the translation tables:
{{< code-toggle file="i18n/de" >}} {{< code-toggle file=i18n/de >}}
products = 'Produkte' products = 'Produkte'
services = 'Leistungen' services = 'Leistungen'
{{< / code-toggle >}} {{< / code-toggle >}}
@@ -127,7 +127,7 @@ Explanation of the above example:
A leaf bundle can be made headless by adding below in the front matter A leaf bundle can be made headless by adding below in the front matter
(in the `index.md`): (in the `index.md`):
{{< code-toggle file="content/headless/index.md" fm=true >}} {{< code-toggle file=content/headless/index.md fm=true >}}
headless = true headless = true
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -183,7 +183,7 @@ The counter starts at 1 the first time they are used in either `name` or `title`
For example, if a bundle has the resources `photo_specs.pdf`, `other_specs.pdf`, `guide.pdf` and `checklist.pdf`, and the front matter has specified the `resources` as: For example, if a bundle has the resources `photo_specs.pdf`, `other_specs.pdf`, `guide.pdf` and `checklist.pdf`, and the front matter has specified the `resources` as:
{{< code-toggle file="content/inspections/engine/index.md" fm=true >}} {{< code-toggle file=content/inspections/engine/index.md fm=true >}}
title = 'Engine inspections' title = 'Engine inspections'
[[resources]] [[resources]]
src = "*specs.pdf" src = "*specs.pdf"
+2 -2
View File
@@ -18,7 +18,7 @@ Hugo uses a set of factors to identify a page's related content based on front m
To list up to 5 related pages (which share the same _date_ or _keyword_ parameters) is as simple as including something similar to this partial in your single page template: To list up to 5 related pages (which share the same _date_ or _keyword_ parameters) is as simple as including something similar to this partial in your single page template:
{{< code file="layouts/partials/related.html" >}} {{< code file=layouts/partials/related.html >}}
{{ $related := .Site.RegularPages.Related . | first 5 }} {{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }} {{ with $related }}
<h3>See Also</h3> <h3>See Also</h3>
@@ -116,7 +116,7 @@ Hugo provides a sensible default configuration of Related Content, but you can f
Without any `related` configuration set on the project, Hugo's Related Content methods will use the following. Without any `related` configuration set on the project, Hugo's Related Content methods will use the following.
{{< code-toggle config="related" />}} {{< code-toggle config=related />}}
Custom configuration should be set using the same syntax. Custom configuration should be set using the same syntax.
+1 -1
View File
@@ -116,7 +116,7 @@ The content file (benefit-1.md) has four ancestors: benefits, product-1, product
For example, use the `.Ancestors` method to render breadcrumb navigation. For example, use the `.Ancestors` method to render breadcrumb navigation.
{{< code file="layouts/partials/breadcrumb.html" >}} {{< code file=layouts/partials/breadcrumb.html >}}
<nav aria-label="breadcrumb" class="breadcrumb"> <nav aria-label="breadcrumb" class="breadcrumb">
<ol> <ol>
{{ range .Ancestors.Reverse }} {{ range .Ancestors.Reverse }}
+5 -5
View File
@@ -121,7 +121,7 @@ attrlink
#### Example `figure` input #### Example `figure` input
{{< code file="figure-input-example.md" >}} {{< code file=figure-input-example.md >}}
{{</* figure src="elephant.jpg" title="An elephant at sunset" */>}} {{</* figure src="elephant.jpg" title="An elephant at sunset" */>}}
{{< /code >}} {{< /code >}}
@@ -348,19 +348,19 @@ https://www.youtube.com/watch?v=w7Ft2ymGmfc
Copy the YouTube video ID that follows `v=` in the video's URL and pass it to the `youtube` shortcode: 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" >}} {{< code file=example-youtube-input.md >}}
{{</* youtube w7Ft2ymGmfc */>}} {{</* youtube w7Ft2ymGmfc */>}}
{{< /code >}} {{< /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 and unnamed parameters, so you'll need to assign the yet unnamed video ID to the parameter `id`: Furthermore, you can automatically start playback of the embedded video by setting the `autoplay` parameter to `true`. Remember that you can't mix named and 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" >}} {{< code file=example-youtube-input-with-autoplay.md >}}
{{</* youtube id="w7Ft2ymGmfc" autoplay="true" */>}} {{</* youtube id="w7Ft2ymGmfc" autoplay="true" */>}}
{{< /code >}} {{< /code >}}
For [accessibility reasons](https://dequeuniversity.com/tips/provide-iframe-titles), it's best to provide a title for your YouTube video. You can do this using the shortcode by providing a `title` parameter. If no title is provided, a default of "YouTube Video" will be used. For [accessibility reasons](https://dequeuniversity.com/tips/provide-iframe-titles), it's best to provide a title for your YouTube video. You can do this using the shortcode by providing a `title` parameter. If no title is provided, a default of "YouTube Video" will be used.
{{< code file="example-youtube-input-with-title.md" >}} {{< code file=example-youtube-input-with-title.md >}}
{{</* youtube id="w7Ft2ymGmfc" title="A New Hugo Site in Under Two Minutes" */>}} {{</* youtube id="w7Ft2ymGmfc" title="A New Hugo Site in Under Two Minutes" */>}}
{{< /code >}} {{< /code >}}
@@ -368,7 +368,7 @@ For [accessibility reasons](https://dequeuniversity.com/tips/provide-iframe-titl
Using the preceding `youtube` example, the following HTML will be added to your rendered website's markup: Using the preceding `youtube` example, the following HTML will be added to your rendered website's markup:
{{< code file="example-youtube-output.html" >}} {{< code file=example-youtube-output.html >}}
{{< youtube id="w7Ft2ymGmfc" autoplay="true" >}} {{< youtube id="w7Ft2ymGmfc" autoplay="true" >}}
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -83,7 +83,7 @@ Hugo uses the _first_ of the above steps that returns text. So if, for example,
You can show content summaries with the following code. You could use the following snippet, for example, in a [section template]. You can show content summaries with the following code. You could use the following snippet, for example, in a [section template].
{{< code file="page-list-with-summaries.html" >}} {{< code file=page-list-with-summaries.html >}}
{{ range first 10 .Pages }} {{ range first 10 .Pages }}
<article> <article>
<!-- this <div> includes the title summary --> <!-- this <div> includes the title summary -->
+3 -3
View File
@@ -81,7 +81,7 @@ Hugo natively supports taxonomies.
Without adding a single line to your [site configuration] file, Hugo will automatically create taxonomies for `tags` and `categories`. That would be the same as manually [configuring your taxonomies](#configure-taxonomies) as below: Without adding a single line to your [site configuration] file, Hugo will automatically create taxonomies for `tags` and `categories`. That would be the same as manually [configuring your taxonomies](#configure-taxonomies) as below:
{{< code-toggle config="taxonomies" />}} {{< code-toggle config=taxonomies />}}
If you do not want Hugo to create any taxonomies, set `disableKinds` in your [site configuration] to the following: If you do not want Hugo to create any taxonomies, set `disableKinds` in your [site configuration] to the following:
@@ -142,7 +142,7 @@ If you would like the ability to quickly generate content files with preconfigur
### Example: front matter with taxonomies ### Example: front matter with taxonomies
{{< code-toggle file="content/example.md" fm=true >}} {{< code-toggle file=content/example.md fm=true >}}
title = "Hugo: A fast and flexible static site generator" title = "Hugo: A fast and flexible static site generator"
tags = [ "Development", "Go", "fast", "Blogging" ] tags = [ "Development", "Go", "fast", "Blogging" ]
categories = [ "Development" ] categories = [ "Development" ]
@@ -173,7 +173,7 @@ By using taxonomic weight, the same piece of content can appear in different pos
If you need to add custom metadata to your taxonomy terms, you will need to create a page for that term at `/content/<TAXONOMY>/<TERM>/_index.md` and add your metadata in its front matter. Continuing with our 'Actors' example, let's say you want to add a Wikipedia page link to each actor. Your terms pages would be something like this: If you need to add custom metadata to your taxonomy terms, you will need to create a page for that term at `/content/<TAXONOMY>/<TERM>/_index.md` and add your metadata in its front matter. Continuing with our 'Actors' example, let's say you want to add a Wikipedia page link to each actor. Your terms pages would be something like this:
{{< code-toggle file="content/actors/bruce-willis/_index.md" fm=true >}} {{< code-toggle file=content/actors/bruce-willis/_index.md fm=true >}}
title: "Bruce Willis" title: "Bruce Willis"
wikipedia: "https://en.wikipedia.org/wiki/Bruce_Willis" wikipedia: "https://en.wikipedia.org/wiki/Bruce_Willis"
{{< /code-toggle >}} {{< /code-toggle >}}
+2 -2
View File
@@ -48,7 +48,7 @@ The built-in `.TableOfContents` variables outputs a `<nav id="TableOfContents">`
The following is an example of a very basic [single page template]: The following is an example of a very basic [single page template]:
{{< code file="layout/_default/single.html" >}} {{< code file=layout/_default/single.html >}}
{{ define "main" }} {{ define "main" }}
<main> <main>
<article> <article>
@@ -68,7 +68,7 @@ The following is an example of a very basic [single page template]:
The following is a [partial template][partials] that adds slightly more logic for page-level control over your table of contents. It assumes you are using a `toc` field in your content's [front matter] that, unless specifically set to `false`, will add a TOC to any page with a `.WordCount` (see [Page Variables][pagevars]) greater than 400. This example also demonstrates how to use [conditionals] in your templating: The following is a [partial template][partials] that adds slightly more logic for page-level control over your table of contents. It assumes you are using a `toc` field in your content's [front matter] that, unless specifically set to `false`, will add a TOC to any page with a `.WordCount` (see [Page Variables][pagevars]) greater than 400. This example also demonstrates how to use [conditionals] in your templating:
{{< code file="layouts/partials/toc.html" >}} {{< code file=layouts/partials/toc.html >}}
{{ if and (gt .WordCount 400 ) (.Params.toc) }} {{ if and (gt .WordCount 400 ) (.Params.toc) }}
<aside> <aside>
<header> <header>
+7 -7
View File
@@ -28,7 +28,7 @@ You can change the structure and appearance of URLs with front matter values and
Set the `slug` in front matter to override the last segment of the path. The `slug` value does not affect section pages. Set the `slug` in front matter to override the last segment of the path. The `slug` value does not affect section pages.
{{< code-toggle file="content/posts/post-1.md" fm=true >}} {{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'My First Post' title = 'My First Post'
slug = 'my-first-post' slug = 'my-first-post'
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -45,7 +45,7 @@ Set the `url` in front matter to override the entire path. Use this with either
With this front matter: With this front matter:
{{< code-toggle file="content/posts/post-1.md" fm=true >}} {{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'My First Article' title = 'My First Article'
url = '/articles/my-first-article' url = '/articles/my-first-article'
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -58,7 +58,7 @@ https://example.org/articles/my-first-article/
If you include a file extension: If you include a file extension:
{{< code-toggle file="content/posts/post-1.md" fm=true >}} {{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'My First Article' title = 'My First Article'
url = '/articles/my-first-article.html' url = '/articles/my-first-article.html'
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -361,7 +361,7 @@ Create redirects from old URLs to new URLs with aliases:
Change the file name of an existing page, and create an alias from the previous URL to the new URL: Change the file name of an existing page, and create an alias from the previous URL to the new URL:
{{< code-toggle file="content/posts/new-file-name.md" >}} {{< code-toggle file=content/posts/new-file-name.md >}}
aliases = ['/posts/previous-file-name'] aliases = ['/posts/previous-file-name']
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -373,13 +373,13 @@ Each of these directory-relative aliases is equivalent to the site-relative alia
You can create more than one alias to the current page: You can create more than one alias to the current page:
{{< code-toggle file="content/posts/new-file-name.md" >}} {{< code-toggle file=content/posts/new-file-name.md >}}
aliases = ['previous-file-name','original-file-name'] aliases = ['previous-file-name','original-file-name']
{{< /code-toggle >}} {{< /code-toggle >}}
In a multilingual site, use a directory-relative alias, or include the language prefix with a site-relative alias: In a multilingual site, use a directory-relative alias, or include the language prefix with a site-relative alias:
{{< code-toggle file="content/posts/new-file-name.de.md" >}} {{< code-toggle file=content/posts/new-file-name.de.md >}}
aliases = ['/de/posts/previous-file-name'] aliases = ['/de/posts/previous-file-name']
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -400,7 +400,7 @@ public/
The alias from the previous URL to the new URL is a client-side redirect: The alias from the previous URL to the new URL is a client-side redirect:
{{< code file="posts/previous-file-name/index.html" >}} {{< code file=posts/previous-file-name/index.html >}}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us"> <html lang="en-us">
<head> <head>
+1 -1
View File
@@ -61,7 +61,7 @@ You can print the `GOPATH` with `echo $GOPATH`. You should see a non-empty strin
If you are a macOS user and have [Homebrew](https://brew.sh/) installed on your machine, installing Go is as simple as the following command: If you are a macOS user and have [Homebrew](https://brew.sh/) installed on your machine, installing Go is as simple as the following command:
{{< code file="install-go.sh" >}} {{< code file=install-go.sh >}}
brew install go brew install go
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -40,7 +40,7 @@ You can use `after` in combination with the [`first`] function and Hugo's [power
1. The top row is titled "Featured" and shows only the most recently published article (i.e. by `publishdate` in the content files' front matter). 1. The top row is titled "Featured" and shows only the most recently published article (i.e. by `publishdate` in the content files' front matter).
2. The second row is titled "Recent Articles" and shows only the 2nd- to 4th-most recently published articles. 2. The second row is titled "Recent Articles" and shows only the 2nd- to 4th-most recently published articles.
{{< code file="layouts/section/articles.html" >}} {{< code file=layouts/section/articles.html >}}
{{ define "main" }} {{ define "main" }}
<section class="row featured-article"> <section class="row featured-article">
<h2>Featured Article</h2> <h2>Featured Article</h2>
@@ -53,7 +53,7 @@ The partial below creates an SVG and expects `fill`, `height` and `width` from t
### Partial definition ### Partial definition
{{< code file="layouts/partials/svgs/external-links.svg" >}} {{< code file=layouts/partials/svgs/external-links.svg >}}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
fill="{{ .fill }}" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 32 32" aria-label="External Link"> fill="{{ .fill }}" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 32 32" aria-label="External Link">
<path d="M25.152 16.576v5.696q0 2.144-1.504 3.648t-3.648 1.504h-14.848q-2.144 0-3.648-1.504t-1.504-3.648v-14.848q0-2.112 1.504-3.616t3.648-1.536h12.576q0.224 0 0.384 0.16t0.16 0.416v1.152q0 0.256-0.16 0.416t-0.384 0.16h-12.576q-1.184 0-2.016 0.832t-0.864 2.016v14.848q0 1.184 0.864 2.016t2.016 0.864h14.848q1.184 0 2.016-0.864t0.832-2.016v-5.696q0-0.256 0.16-0.416t0.416-0.16h1.152q0.256 0 0.416 0.16t0.16 0.416zM32 1.152v9.12q0 0.48-0.352 0.8t-0.8 0.352-0.8-0.352l-3.136-3.136-11.648 11.648q-0.16 0.192-0.416 0.192t-0.384-0.192l-2.048-2.048q-0.192-0.16-0.192-0.384t0.192-0.416l11.648-11.648-3.136-3.136q-0.352-0.352-0.352-0.8t0.352-0.8 0.8-0.352h9.12q0.48 0 0.8 0.352t0.352 0.8z"></path> <path d="M25.152 16.576v5.696q0 2.144-1.504 3.648t-3.648 1.504h-14.848q-2.144 0-3.648-1.504t-1.504-3.648v-14.848q0-2.112 1.504-3.616t3.648-1.536h12.576q0.224 0 0.384 0.16t0.16 0.416v1.152q0 0.256-0.16 0.416t-0.384 0.16h-12.576q-1.184 0-2.016 0.832t-0.864 2.016v14.848q0 1.184 0.864 2.016t2.016 0.864h14.848q1.184 0 2.016-0.864t0.832-2.016v-5.696q0-0.256 0.16-0.416t0.416-0.16h1.152q0.256 0 0.416 0.16t0.16 0.416zM32 1.152v9.12q0 0.48-0.352 0.8t-0.8 0.352-0.8-0.352l-3.136-3.136-11.648 11.648q-0.16 0.192-0.416 0.192t-0.384-0.192l-2.048-2.048q-0.192-0.16-0.192-0.384t0.192-0.416l11.648-11.648-3.136-3.136q-0.352-0.352-0.352-0.8t0.352-0.8 0.8-0.352h9.12q0.48 0 0.8 0.352t0.352 0.8z"></path>
@@ -64,7 +64,7 @@ fill="{{ .fill }}" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 32 3
The `fill`, `height` and `width` values can be stored in one object with `dict` and passed to the partial: The `fill`, `height` and `width` values can be stored in one object with `dict` and passed to the partial:
{{< code file="layouts/_default/list.html" >}} {{< code file=layouts/_default/list.html >}}
{{ partial "svgs/external-links.svg" (dict "fill" "#01589B" "width" 10 "height" 20 ) }} {{ partial "svgs/external-links.svg" (dict "fill" "#01589B" "width" 10 "height" 20 ) }}
{{< /code >}} {{< /code >}}
@@ -60,7 +60,7 @@ data/
Here is an example: Here is an example:
{{< code-toggle file="data/locations/oslo" >}} {{< code-toggle file=data/locations/oslo >}}
website = "https://www.oslo.kommune.no" website = "https://www.oslo.kommune.no"
pop_city = 658390 pop_city = 658390
pop_metro = 1717900 pop_metro = 1717900
@@ -68,7 +68,7 @@ pop_metro = 1717900
The example we will use will be an article on Oslo, whose front matter should be set to exactly the same name as the corresponding file name in `data/locations/`: The example we will use will be an article on Oslo, whose front matter should be set to exactly the same name as the corresponding file name in `data/locations/`:
{{< code-toggle file="content/articles/oslo.md" fm=true >}} {{< code-toggle file=content/articles/oslo.md fm=true >}}
title = "My Norwegian Vacation" title = "My Norwegian Vacation"
location = "oslo" location = "oslo"
{{< /code-toggle >}} {{< /code-toggle >}}
+1 -1
View File
@@ -27,7 +27,7 @@ The `where` function is similar to the SQL [`where`] keyword.
It can be used by dot-chaining the second argument to refer to a nested element of a value. It can be used by dot-chaining the second argument to refer to a nested element of a value.
{{< code-toggle file="content/example.md" fm=true >}} {{< code-toggle file=content/example.md fm=true >}}
title: Example title: Example
series: golang series: golang
{{< /code-toggle >}} {{< /code-toggle >}}
+3 -3
View File
@@ -25,7 +25,7 @@ and then executing it in place:
``` ```
The typical use is to define a set of root templates that are then customized by redefining the block templates within. The typical use is to define a set of root templates that are then customized by redefining the block templates within.
{{< code file="layouts/_default/baseof.html" >}} {{< code file=layouts/_default/baseof.html >}}
<body> <body>
<main> <main>
{{ block "main" . }} {{ block "main" . }}
@@ -35,14 +35,14 @@ The typical use is to define a set of root templates that are then customized by
</body> </body>
{{< /code >}} {{< /code >}}
{{< code file="layouts/_default/single.html" >}} {{< code file=layouts/_default/single.html >}}
{{ define "main" }} {{ define "main" }}
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}
{{< /code >}} {{< /code >}}
{{< code file="layouts/_default/list.html" >}} {{< code file=layouts/_default/list.html >}}
{{ define "main" }} {{ define "main" }}
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ .Content }} {{ .Content }}
@@ -33,7 +33,7 @@ Here is the simplest usage:
You can also pass additional arguments to `partialCached` to create *variants* of the cached partial. For example, if you have a complex partial that should be identical when rendered for pages within the same section, you could use a variant based upon section so that the partial is only rendered once per section: You can also pass additional arguments to `partialCached` to create *variants* of the cached partial. For example, if you have a complex partial that should be identical when rendered for pages within the same section, you could use a variant based upon section so that the partial is only rendered once per section:
{{< code file="partial-cached-example.html" >}} {{< code file=partial-cached-example.html >}}
{{ partialCached "footer.html" . .Section }} {{ partialCached "footer.html" . .Section }}
{{< /code >}} {{< /code >}}
@@ -48,7 +48,7 @@ The example above:
The result is: The result is:
{{< code file="public/css/main.css" >}} {{< code file=public/css/main.css >}}
body { body {
background-color: #fefefe; background-color: #fefefe;
color: #222; color: #222;
+2 -2
View File
@@ -30,7 +30,7 @@ url = "irc://irc.freenode.net/#golang"
The following is an example of a sidebar partial that may be used in conjunction with the preceding front matter example: 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" >}} {{< code file=layouts/partials/bad-url-sidebar-menu.html >}}
<!-- This unordered list may be part of a sidebar menu --> <!-- This unordered list may be part of a sidebar menu -->
<ul> <ul>
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
@@ -50,7 +50,7 @@ This partial would produce the following HTML output:
The odd output can be remedied by adding ` | safeURL` to our `.URL` page variable: The odd output can be remedied by adding ` | safeURL` to our `.URL` page variable:
{{< code file="layouts/partials/correct-url-sidebar-menu.html" >}} {{< code file=layouts/partials/correct-url-sidebar-menu.html >}}
<!-- This unordered list may be part of a sidebar menu --> <!-- This unordered list may be part of a sidebar menu -->
<ul> <ul>
<li><a href="{{ .URL | safeURL }}">{{ .Name }}</a></li> <li><a href="{{ .URL | safeURL }}">{{ .Name }}</a></li>
+2 -2
View File
@@ -14,7 +14,7 @@ aliases: [/functions/urlize]
The following examples pull from a content file with the following front matter: The following examples pull from a content file with the following front matter:
{{< code-toggle file="content/blog/greatest-city.md" fm=true >}} {{< code-toggle file=content/blog/greatest-city.md fm=true >}}
title = "The World's Greatest City" title = "The World's Greatest City"
location = "Chicago IL" location = "Chicago IL"
tags = ["pizza","beer","hot dogs"] tags = ["pizza","beer","hot dogs"]
@@ -22,7 +22,7 @@ tags = ["pizza","beer","hot dogs"]
The following might be used as a partial within a [single page template][singletemplate]: The following might be used as a partial within a [single page template][singletemplate]:
{{< code file="layouts/partials/content-header.html" >}} {{< code file=layouts/partials/content-header.html >}}
<header> <header>
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ with .Params.location }} {{ with .Params.location }}
@@ -54,7 +54,7 @@ Unless you need a unique capability provided by one of the alternate markdown ha
This is the default configuration for the Goldmark markdown renderer: This is the default configuration for the Goldmark markdown renderer:
{{< code-toggle config="markup.goldmark" />}} {{< code-toggle config=markup.goldmark />}}
For details on the extensions, refer to [this section](https://github.com/yuin/goldmark/#built-in-extensions) of the Goldmark documentation For details on the extensions, refer to [this section](https://github.com/yuin/goldmark/#built-in-extensions) of the Goldmark documentation
@@ -125,7 +125,7 @@ autoHeadingIDType ("github")
This is the default configuration for the AsciiDoc markdown renderer: This is the default configuration for the AsciiDoc markdown renderer:
{{< code-toggle config="markup.asciidocExt" />}} {{< code-toggle config=markup.asciidocExt />}}
attributes attributes
: (`map`) Variables to be referenced in your AsciiDoc file. This is a list of variable name/value maps. See Asciidoctor’s [attributes]. : (`map`) Variables to be referenced in your AsciiDoc file. This is a list of variable name/value maps. See Asciidoctor’s [attributes].
@@ -189,7 +189,7 @@ INFO 2019/12/22 09:08:48 Rendering book-as-pdf.adoc with C:\Ruby26-x64\bin\ascii
This is the default `highlight` configuration. Note that some of these settings can be set per code block, see [Syntax Highlighting](/content-management/syntax-highlighting/). This is the default `highlight` configuration. Note that some of these settings can be set per code block, see [Syntax Highlighting](/content-management/syntax-highlighting/).
{{< code-toggle config="markup.highlight" />}} {{< code-toggle config=markup.highlight />}}
For `style`, see these galleries: For `style`, see these galleries:
@@ -200,7 +200,7 @@ For CSS, see [Generate Syntax Highlighter CSS](/content-management/syntax-highli
## Table of contents ## Table of contents
{{< code-toggle config="markup.tableOfContents" />}} {{< code-toggle config=markup.tableOfContents />}}
These settings only works for the Goldmark renderer: These settings only works for the Goldmark renderer:
+8 -8
View File
@@ -49,7 +49,7 @@ In addition to using a single site configuration file, one can use the `configDi
foo = "bar" foo = "bar"
{{< /code-toggle >}} {{< /code-toggle >}}
{{< code-toggle file="params" >}} {{< code-toggle file=params >}}
foo = "bar" foo = "bar"
{{< /code-toggle >}} {{< /code-toggle >}}
@@ -521,7 +521,7 @@ enableemoji: true
The `build` configuration section contains global build-related configuration options. The `build` configuration section contains global build-related configuration options.
{{< code-toggle config="build" />}} {{< code-toggle config=build />}}
buildStats {{< new-in "0.115.1" >}} buildStats {{< new-in "0.115.1" >}}
: When enabled, creates a `hugo_stats.json` file in the root of your project. This file contains arrays of the `class` attributes, `id` attributes, and tags of every HTML element within your published site. Use this file as data source when [removing unused CSS] from your site. This process is also known as pruning, purging, or tree shaking. : When enabled, creates a `hugo_stats.json` file in the root of your project. This file contains arrays of the `class` attributes, `id` attributes, and tags of every HTML element within your published site. Use this file as data source when [removing unused CSS] from your site. This process is also known as pruning, purging, or tree shaking.
@@ -602,7 +602,7 @@ Content-Security-Policy = "script-src localhost:1313"
Since this is "development only", it may make sense to put it below the `development` environment: Since this is "development only", it may make sense to put it below the `development` environment:
{{< code-toggle file="config/development/server">}} {{< code-toggle file=config/development/server >}}
[[headers]] [[headers]]
for = "/**" for = "/**"
@@ -618,7 +618,7 @@ You can also specify simple redirects rules for the server. The syntax is again
Note that a `status` code of 200 will trigger a [URL rewrite](https://docs.netlify.com/routing/redirects/rewrites-proxies/), which is what you want in SPA situations, e.g: Note that a `status` code of 200 will trigger a [URL rewrite](https://docs.netlify.com/routing/redirects/rewrites-proxies/), which is what you want in SPA situations, e.g:
{{< code-toggle file="config/development/server">}} {{< code-toggle file=config/development/server >}}
[[redirects]] [[redirects]]
from = "/myspa/**" from = "/myspa/**"
to = "/myspa/" to = "/myspa/"
@@ -634,7 +634,7 @@ Setting `force=true` will make a redirect even if there is existing content in t
Hugo will, by default, render all 404 errors when running `hugo server` with the `404.html` template. Note that if you have already added one or more redirects to your [server configuration](#configure-server), you need to add the 404 redirect explicitly, e.g: Hugo will, by default, render all 404 errors when running `hugo server` with the `404.html` template. Note that if you have already added one or more redirects to your [server configuration](#configure-server), you need to add the 404 redirect explicitly, e.g:
{{< code-toggle file="config/development/server" >}} {{< code-toggle file=config/development/server >}}
[[redirects]] [[redirects]]
from = "/**" from = "/**"
to = "/404.html" to = "/404.html"
@@ -749,7 +749,7 @@ Dates are important in Hugo, and you can configure how Hugo assigns dates to you
The default configuration is: The default configuration is:
{{< code-toggle config="frontmatter" />}} {{< code-toggle config=frontmatter />}}
If you, as an example, have a non-standard date parameter in some of your content, you can override the setting for `date`: If you, as an example, have a non-standard date parameter in some of your content, you can override the setting for `date`:
@@ -799,13 +799,13 @@ Hugo v0.20 introduced the ability to render your content to multiple output form
Default configuration: Default configuration:
{{< code-toggle config="minify" />}} {{< code-toggle config=minify />}}
## Configure file caches ## Configure file caches
Since Hugo 0.52 you can configure more than just the `cacheDir`. This is the default configuration: Since Hugo 0.52 you can configure more than just the `cacheDir`. This is the default configuration:
{{< code-toggle config="caches" />}} {{< code-toggle config=caches />}}
You can override any of these cache settings in your own `hugo.toml`. You can override any of these cache settings in your own `hugo.toml`.
@@ -30,7 +30,7 @@ To make logging in to your server more secure and less interactive, you can uplo
First, install the ssh client. On Debian distributions, use the following command: First, install the ssh client. On Debian distributions, use the following command:
{{< code file="install-openssh.sh" >}} {{< code file=install-openssh.sh >}}
sudo apt-get install openssh-client sudo apt-get install openssh-client
{{< /code >}} {{< /code >}}
@@ -64,7 +64,7 @@ Step 5
Step 6 Step 6
: Copy and paste the YAML below into the file you created. Change the branch name and Hugo version as needed. : Copy and paste the YAML below into the file you created. Change the branch name and Hugo version as needed.
{{< code file=".github/workflows/hugo.yaml" copy=true >}} {{< code file=.github/workflows/hugo.yaml copy=true >}}
# Sample workflow for building and deploying a Hugo site to GitHub Pages # Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages name: Deploy Hugo site to Pages
@@ -25,7 +25,7 @@ The `baseURL` in your [site configuration](/getting-started/configuration/) must
Define your [CI/CD](https://docs.gitlab.com/ee/ci/quick_start/) jobs by creating a `.gitlab-ci.yml` file in the root of your project. Define your [CI/CD](https://docs.gitlab.com/ee/ci/quick_start/) jobs by creating a `.gitlab-ci.yml` file in the root of your project.
{{< code file=".gitlab-ci.yml" copy=true >}} {{< code file=.gitlab-ci.yml copy=true >}}
variables: variables:
DART_SASS_VERSION: 1.64.1 DART_SASS_VERSION: 1.64.1
HUGO_VERSION: 0.115.4 HUGO_VERSION: 0.115.4
@@ -55,21 +55,21 @@ You can [set Hugo version](https://www.netlify.com/blog/2017/04/11/netlify-plus-
For production: For production:
{{< code file="netlify.toml" >}} {{< code file=netlify.toml >}}
[context.production.environment] [context.production.environment]
HUGO_VERSION = "0.115.4" HUGO_VERSION = "0.115.4"
{{< /code >}} {{< /code >}}
For testing: For testing:
{{< code file="netlify.toml" >}} {{< code file=netlify.toml >}}
[context.deploy-preview.environment] [context.deploy-preview.environment]
HUGO_VERSION = "0.115.4" HUGO_VERSION = "0.115.4"
{{< /code >}} {{< /code >}}
The Netlify configuration file can be a little hard to understand and get right for the different environment, and you may get some inspiration and tips from this site's `netlify.toml`: The Netlify configuration file can be a little hard to understand and get right for the different environment, and you may get some inspiration and tips from this site's `netlify.toml`:
{{< readfile file="netlify.toml" highlight="toml" >}} {{< readfile file=netlify.toml highlight=toml >}}
## Build and deploy site ## Build and deploy site
+6 -6
View File
@@ -34,7 +34,7 @@ Step 3
[supported file names]: https://github.com/postcss/postcss-load-config#usage [supported file names]: https://github.com/postcss/postcss-load-config#usage
{{< code file="postcss.config.js" >}} {{< code file=postcss.config.js >}}
module.exports = { module.exports = {
plugins: [ plugins: [
require('autoprefixer') require('autoprefixer')
@@ -52,7 +52,7 @@ Step 4
Step 5 Step 5
: Capture the CSS file as a resource and pipe it through `resources.PostCSS` (alias `postCSS`): : Capture the CSS file as a resource and pipe it through `resources.PostCSS` (alias `postCSS`):
{{< code file="layouts/partials/css.html" >}} {{< code file=layouts/partials/css.html >}}
{{ with resources.Get "css/main.css" | postCSS }} {{ with resources.Get "css/main.css" | postCSS }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }} {{ end }}
@@ -60,7 +60,7 @@ Step 5
If starting with a Sass file within the `assets` directory: If starting with a Sass file within the `assets` directory:
{{< code file="layouts/partials/css.html" >}} {{< code file=layouts/partials/css.html >}}
{{ with resources.Get "sass/main.scss" | toCSS | postCSS }} {{ with resources.Get "sass/main.scss" | toCSS | postCSS }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }} {{ end }}
@@ -85,7 +85,7 @@ Hugo will look for imports relative to the module mount and will respect theme o
skipInlineImportsNotFound {{< new-in "0.99.0" >}} skipInlineImportsNotFound {{< new-in "0.99.0" >}}
: (`bool`) Default is `false`. Before Hugo 0.99.0 when `inlineImports` was enabled and we failed to resolve an import, we logged it as a warning. We now fail the build. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set `skipInlineImportsNotFound` to true. : (`bool`) Default is `false`. Before Hugo 0.99.0 when `inlineImports` was enabled and we failed to resolve an import, we logged it as a warning. We now fail the build. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set `skipInlineImportsNotFound` to true.
{{< code file="layouts/partials/css.html" >}} {{< code file=layouts/partials/css.html >}}
{{ $opts := dict "config" "config-directory" "noMap" true }} {{ $opts := dict "config" "config-directory" "noMap" true }}
{{ with resources.Get "css/main.css" | postCSS $opts }} {{ with resources.Get "css/main.css" | postCSS $opts }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
@@ -108,7 +108,7 @@ stringifier
syntax syntax
: (`string`) Custom postcss syntax. : (`string`) Custom postcss syntax.
{{< code file="layouts/partials/css.html" >}} {{< code file=layouts/partials/css.html >}}
{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }} {{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
{{ with resources.Get "css/main.css" | postCSS $opts }} {{ with resources.Get "css/main.css" | postCSS $opts }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}">
@@ -119,7 +119,7 @@ syntax
The current Hugo environment name (set by `--environment` or in configuration or OS environment) is available in the Node context, which allows constructs like this: The current Hugo environment name (set by `--environment` or in configuration or OS environment) is available in the Node context, which allows constructs like this:
{{< code file="postcss.config.js" >}} {{< code file=postcss.config.js >}}
module.exports = { module.exports = {
plugins: [ plugins: [
require('autoprefixer'), require('autoprefixer'),
+1 -1
View File
@@ -17,7 +17,7 @@ title = 'How to make spicy tuna hand rolls'
description = 'Instructions for making spicy tuna hand rolls.' description = 'Instructions for making spicy tuna hand rolls.'
{{< /code-toggle >}} {{< /code-toggle >}}
{{< code file="layouts/baseof.html" lang=go-html-template >}} {{< code file=layouts/baseof.html lang=go-html-template >}}
<head> <head>
... ...
<meta name="description" content="{{ .Description }}"> <meta name="description" content="{{ .Description }}">
+3 -3
View File
@@ -13,7 +13,7 @@ By example, let's use [MathJax] to render a LaTeX mathematical expression:
[MathJax]: https://www.mathjax.org/ [MathJax]: https://www.mathjax.org/
{{< code file="contents/physics/lesson-1.md" lang=markdown >}} {{< code file=contents/physics/lesson-1.md lang=markdown >}}
Albert Einstein’s theory of special relativity expresses Albert Einstein’s theory of special relativity expresses
the fact that mass and energy are the same physical entity the fact that mass and energy are the same physical entity
and can be changed into each other. and can be changed into each other.
@@ -31,14 +31,14 @@ the kinetic energy (E) of that body.
The shortcode is simple: The shortcode is simple:
{{< code file="layouts/shortcodes/math.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/math.html lang=go-html-template >}}
{{ trim .Inner "\r\n" }} {{ trim .Inner "\r\n" }}
{{< /code >}} {{< /code >}}
Now we can selectively load the required CSS and JavaScript on pages that call the "math" shortcode: Now we can selectively load the required CSS and JavaScript on pages that call the "math" shortcode:
{{< code file="layouts/baseof.html" lang=go-html-template >}} {{< code file=layouts/baseof.html lang=go-html-template >}}
<head> <head>
... ...
{{ if .HasShortcode "math" }} {{ if .HasShortcode "math" }}
+3 -3
View File
@@ -11,19 +11,19 @@ action:
This is a convenience method, useful within partial templates that are called from both [shortcodes] and page templates. This is a convenience method, useful within partial templates that are called from both [shortcodes] and page templates.
{{< code file="layouts/shortcodes/foo.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/foo.html lang=go-html-template >}}
{{ partial "my-partial.html" . }} {{ partial "my-partial.html" . }}
{{< /code >}} {{< /code >}}
When the shortcode calls the partial, it passes the current [context] (the dot). The context includes identifiers such as `Page`, `Params`, `Inner`, and `Name`. When the shortcode calls the partial, it passes the current [context] (the dot). The context includes identifiers such as `Page`, `Params`, `Inner`, and `Name`.
{{< code file="layouts/_default/single.html" lang=go-html-template >}} {{< code file=layouts/_default/single.html lang=go-html-template >}}
{{ partial "my-partial.html" . }} {{ partial "my-partial.html" . }}
{{< /code >}} {{< /code >}}
When the page template calls the partial, it also passes the current context (the dot). But in this case, the dot _is_ the `Page` object. When the page template calls the partial, it also passes the current context (the dot). But in this case, the dot _is_ the `Page` object.
{{< code file="layouts/partials/my-partial.html" lang=go-html-template >}} {{< code file=layouts/partials/my-partial.html lang=go-html-template >}}
The page title is: {{ .Page.Title }} The page title is: {{ .Page.Title }}
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -25,7 +25,7 @@ display_toc = true
Content: Content:
{{< code-toggle file="content/example.md" fm=true >}} {{< code-toggle file=content/example.md fm=true >}}
title = 'Example' title = 'Example'
date = 2023-01-01 date = 2023-01-01
draft = false draft = false
+1 -1
View File
@@ -14,7 +14,7 @@ action:
With this front matter: With this front matter:
{{< code-toggle file="content/news/annual-conference.md" >}} {{< code-toggle file=content/news/annual-conference.md >}}
title = 'Annual conference' title = 'Annual conference'
date = 2023-10-17T15:11:37-07:00 date = 2023-10-17T15:11:37-07:00
display_related = true display_related = true
+3 -3
View File
@@ -19,14 +19,14 @@ Use this method in shortcode templates to compose a page from multiple content f
For example: For example:
{{< code file="layouts/shortcodes/include.html" >}} {{< code file=layouts/shortcodes/include.html >}}
{{ $p := site.GetPage (.Get 0) }} {{ $p := site.GetPage (.Get 0) }}
{{ $p.RenderShortcodes }} {{ $p.RenderShortcodes }}
{{< /code >}} {{< /code >}}
Then in your markdown: Then in your markdown:
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{%/* include "/snippets/services.md" */%}} {{%/* include "/snippets/services.md" */%}}
{{%/* include "/snippets/values.md" */%}} {{%/* include "/snippets/values.md" */%}}
{{%/* include "/snippets/leadership.md" */%}} {{%/* include "/snippets/leadership.md" */%}}
@@ -47,7 +47,7 @@ Use the latter for the "include" shortcode described above.
To understand what is returned by the `RenderShortcodes` method, consider this content file To understand what is returned by the `RenderShortcodes` method, consider this content file
{{< code file="content/about.md" lang=text >}} {{< code file=content/about.md lang=text >}}
+++ +++
title = 'About' title = 'About'
date = 2023-10-07T12:28:33-07:00 date = 2023-10-07T12:28:33-07:00
+2 -2
View File
@@ -51,12 +51,12 @@ content/
And this front matter: And this front matter:
{{< code-toggle file="content/en/books/book-1.md" fm=true >}} {{< code-toggle file=content/en/books/book-1.md fm=true >}}
title = 'Book 1' title = 'Book 1'
translationKey = 'foo' translationKey = 'foo'
{{< /code-toggle >}} {{< /code-toggle >}}
{{< code-toggle file="content/de/books/buch-1.md" fm=true >}} {{< code-toggle file=content/de/books/buch-1.md fm=true >}}
title = 'Buch 1' title = 'Buch 1'
translationKey = 'foo' translationKey = 'foo'
{{< /code-toggle >}} {{< /code-toggle >}}
+2 -2
View File
@@ -17,7 +17,7 @@ Based on front matter, Hugo uses several factors to identify content related to
The argument passed to the `Related` method may be a `Page` or an options map. For example, to pass the current page: The argument passed to the `Related` method may be a `Page` or an options map. For example, to pass the current page:
{{< code file="layouts/_default/single.html" lang=go-html-template >}} {{< code file=layouts/_default/single.html lang=go-html-template >}}
{{ with .Site.RegularPages.Related . | first 5 }} {{ with .Site.RegularPages.Related . | first 5 }}
<p>Related pages:</p> <p>Related pages:</p>
<ul> <ul>
@@ -30,7 +30,7 @@ The argument passed to the `Related` method may be a `Page` or an options map. F
To pass an options map: To pass an options map:
{{< code file="layouts/_default/single.html" lang=go-html-template >}} {{< code file=layouts/_default/single.html lang=go-html-template >}}
{{ $opts := dict {{ $opts := dict
"document" . "document" .
"indices" (slice "tags" "keywords") "indices" (slice "tags" "keywords")
+1 -1
View File
@@ -14,7 +14,7 @@ The `Content` method on a `Resource` object returns `template.HTML` when the res
[resource type]: /methods/resource/resourcetype [resource type]: /methods/resource/resourcetype
{{< code file="assets/quotations/kipling.txt" >}} {{< code file=assets/quotations/kipling.txt >}}
He travels the fastest who travels alone. He travels the fastest who travels alone.
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -52,7 +52,7 @@ content/
If you create an element in the `resources` array in front matter, the `Name` method returns the value of the `name` parameter: If you create an element in the `resources` array in front matter, the `Name` method returns the value of the `name` parameter:
{{< code-toggle file="content/posts/post-1.md" fm=true >}} {{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'Post 1' title = 'Post 1'
[[resources]] [[resources]]
src = 'images/a.jpg' src = 'images/a.jpg'
+1 -1
View File
@@ -34,7 +34,7 @@ content/
With the structure above, we can range through page resources of type `page` to build content: With the structure above, we can range through page resources of type `page` to build content:
{{< code file="layouts/lessons/single.html" lang=go-html-template >}} {{< code file=layouts/lessons/single.html lang=go-html-template >}}
{{ range .Resources.ByType "page" }} {{ range .Resources.ByType "page" }}
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}
+1 -1
View File
@@ -52,7 +52,7 @@ content/
If you create an element in the `resources` array in front matter, the `Title` method returns the value of the `title` parameter: If you create an element in the `resources` array in front matter, the `Title` method returns the value of the `title` parameter:
{{< code-toggle file="content/posts/post-1.md" fm=true >}} {{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'Post 1' title = 'Post 1'
[[resources]] [[resources]]
src = 'images/a.jpg' src = 'images/a.jpg'
+4 -4
View File
@@ -22,13 +22,13 @@ Some shortcodes support positional parameters, some support named parameters, an
This shortcode call uses positional parameters: This shortcode call uses positional parameters:
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{</* myshortcode "Hello" "world" */>}} {{</* myshortcode "Hello" "world" */>}}
{{< /code >}} {{< /code >}}
To retrieve parameters by position: To retrieve parameters by position:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ printf "%s %s." (.Get 0) (.Get 1) }} → Hello world. {{ printf "%s %s." (.Get 0) (.Get 1) }} → Hello world.
{{< /code >}} {{< /code >}}
@@ -36,13 +36,13 @@ To retrieve parameters by position:
This shortcode call uses named parameters: This shortcode call uses named parameters:
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{</* myshortcode greeting="Hello" firstName="world" */>}} {{</* myshortcode greeting="Hello" firstName="world" */>}}
{{< /code >}} {{< /code >}}
To retrieve parameters by name: To retrieve parameters by name:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ printf "%s %s." (.Get "greeting") (.Get "firstName") }} → Hello world. {{ printf "%s %s." (.Get "greeting") (.Get "firstName") }} → Hello world.
{{< /code >}} {{< /code >}}
+5 -5
View File
@@ -15,7 +15,7 @@ action:
This content: This content:
{{< code file="content/services.md" lang=md >}} {{< code file=content/services.md lang=md >}}
{{</* card title="Product Design" */>}} {{</* card title="Product Design" */>}}
We design the **best** widgets in the world. We design the **best** widgets in the world.
{{</* /card */>}} {{</* /card */>}}
@@ -23,7 +23,7 @@ We design the **best** widgets in the world.
With this shortcode: With this shortcode:
{{< code file="layouts/shortcodes/card.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/card.html lang=go-html-template >}}
<div class="card"> <div class="card">
{{ with .Get "title" }} {{ with .Get "title" }}
<div class="card-title">{{ . }}</div> <div class="card-title">{{ . }}</div>
@@ -62,7 +62,7 @@ Let's modify the example above to pass the value returned by `Inner` through the
[`RenderString`]: /methods/page/renderstring [`RenderString`]: /methods/page/renderstring
{{< code file="layouts/shortcodes/card.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/card.html lang=go-html-template >}}
<div class="card"> <div class="card">
{{ with .Get "title" }} {{ with .Get "title" }}
<div class="card-title">{{ . }}</div> <div class="card-title">{{ . }}</div>
@@ -93,7 +93,7 @@ You can use the [`markdownify`] function instead of the `RenderString` method, b
Instead of calling the shortcode with the `{{</* */>}}` notation, use the `{{%/* */%}}` notation: Instead of calling the shortcode with the `{{</* */>}}` notation, use the `{{%/* */%}}` notation:
{{< code file="content/services.md" lang=md >}} {{< code file=content/services.md lang=md >}}
{{%/* card title="Product Design" */%}} {{%/* card title="Product Design" */%}}
We design the **best** widgets in the world. We design the **best** widgets in the world.
{{%/* /card */%}} {{%/* /card */%}}
@@ -112,7 +112,7 @@ This configuration is not unsafe if _you_ control the content. Read more about H
Second, because we are rendering the entire shortcode as markdown, we must adhere to the rules governing [indentation] and inclusion of [raw HTML blocks] as provided in the [CommonMark] specification. Second, because we are rendering the entire shortcode as markdown, we must adhere to the rules governing [indentation] and inclusion of [raw HTML blocks] as provided in the [CommonMark] specification.
{{< code file="layouts/shortcodes/card.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/card.html lang=go-html-template >}}
<div class="card"> <div class="card">
{{ with .Get "title" }} {{ with .Get "title" }}
<div class="card-title">{{ . }}</div> <div class="card-title">{{ . }}</div>
@@ -16,7 +16,7 @@ This allows us to effectively bypass the rules governing [indentation] as provid
Consider this markdown, an unordered list with a small gallery of thumbnail images within each list item: Consider this markdown, an unordered list with a small gallery of thumbnail images within each list item:
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
- Gallery one - Gallery one
{{</* gallery */>}} {{</* gallery */>}}
@@ -36,7 +36,7 @@ In the example above, notice that the content between the opening and closing sh
With this shortcode, calling `Inner` instead of `InnerDeindent`: With this shortcode, calling `Inner` instead of `InnerDeindent`:
{{< code file="layouts/shortcodes/gallery.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/gallery.html lang=go-html-template >}}
<div class="gallery"> <div class="gallery">
{{ trim .Inner "\r\n" | .Page.RenderString }} {{ trim .Inner "\r\n" | .Page.RenderString }}
</div> </div>
@@ -67,7 +67,7 @@ Hugo renders the markdown to:
Although technically correct per the CommonMark specification, this is not what we want. If we remove the indentation using the `InnerDeindent` method: Although technically correct per the CommonMark specification, this is not what we want. If we remove the indentation using the `InnerDeindent` method:
{{< code file="layouts/shortcodes/gallery.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/gallery.html lang=go-html-template >}}
<div class="gallery"> <div class="gallery">
{{ trim .InnerDeindent "\r\n" | .Page.RenderString }} {{ trim .InnerDeindent "\r\n" | .Page.RenderString }}
</div> </div>
@@ -14,7 +14,7 @@ To support both positional and named parameters when calling a shortcode, use th
With this shortcode template: With this shortcode template:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ if .IsNamedParams }} {{ if .IsNamedParams }}
{{ printf "%s %s." (.Get "greeting") (.Get "firstName") }} {{ printf "%s %s." (.Get "greeting") (.Get "firstName") }}
{{ else }} {{ else }}
@@ -24,7 +24,7 @@ With this shortcode template:
Both of these calls return the same value: Both of these calls return the same value:
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{</* myshortcode greeting="Hello" firstName="world" */>}} {{</* myshortcode greeting="Hello" firstName="world" */>}}
{{</* myshortcode "Hello" "world" */>}} {{</* myshortcode "Hello" "world" */>}}
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -13,7 +13,7 @@ action:
The `Name` method is useful for error reporting. For example, if your shortcode requires a "greeting" parameter: The `Name` method is useful for error reporting. For example, if your shortcode requires a "greeting" parameter:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ $greeting := "" }} {{ $greeting := "" }}
{{ with .Get "greeting" }} {{ with .Get "greeting" }}
{{ $greeting = . }} {{ $greeting = . }}
+2 -2
View File
@@ -13,7 +13,7 @@ The `Ordinal` method returns the zero-based ordinal of the shortcode in relation
This method is useful for, among other things, assigning unique element IDs when a shortcode is called two or more times from the same page. For example: This method is useful for, among other things, assigning unique element IDs when a shortcode is called two or more times from the same page. For example:
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{</* img src="images/a.jpg" */>}} {{</* img src="images/a.jpg" */>}}
{{</* img src="images/b.jpg" */>}} {{</* img src="images/b.jpg" */>}}
@@ -21,7 +21,7 @@ This method is useful for, among other things, assigning unique element IDs when
This shortcode performs error checking, then renders an HTML `img` element with a unique `id` attribute: This shortcode performs error checking, then renders an HTML `img` element with a unique `id` attribute:
{{< code file="layouts/shortcodes/img.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/img.html lang=go-html-template >}}
{{ $src := "" }} {{ $src := "" }}
{{ with .Get "src" }} {{ with .Get "src" }}
{{ $src = . }} {{ $src = . }}
+1 -1
View File
@@ -26,7 +26,7 @@ Calling this shortcode:
We can access the front matter values using the `Page` method: We can access the front matter values using the `Page` method:
{{< code file="layouts/shortcodes/book-details.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/book-details.html lang=go-html-template >}}
<ul> <ul>
<li>Title: {{ .Page.Title }}</li> <li>Title: {{ .Page.Title }}</li>
<li>Author: {{ .Page.Params.author }}</li> <li>Author: {{ .Page.Params.author }}</li>
+4 -4
View File
@@ -12,22 +12,22 @@ action:
When you call a shortcode using positional parameters, the `Params` method returns a slice. When you call a shortcode using positional parameters, the `Params` method returns a slice.
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{</* myshortcode "Hello" "world" */>}} {{</* myshortcode "Hello" "world" */>}}
{{< /code >}} {{< /code >}}
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ index .Params 0 }} → Hello {{ index .Params 0 }} → Hello
{{ index .Params 1 }} → world {{ index .Params 1 }} → world
{{< /code >}} {{< /code >}}
When you call a shortcode using named parameters, the `Params` method returns a map. When you call a shortcode using named parameters, the `Params` method returns a map.
{{< code file="content/about.md" lang=md >}} {{< code file=content/about.md lang=md >}}
{{</* myshortcode greeting="Hello" name="world" */>}} {{</* myshortcode greeting="Hello" name="world" */>}}
{{< /code >}} {{< /code >}}
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ .Params.greeting }} → Hello {{ .Params.greeting }} → Hello
{{ .Params.name }} → world {{ .Params.name }} → world
{{< /code >}} {{< /code >}}
+3 -3
View File
@@ -13,19 +13,19 @@ This is useful for inheritance of common shortcode parameters from the root.
In this contrived example, the "greeting" shortcode is the parent, and the "now" shortcode is child. In this contrived example, the "greeting" shortcode is the parent, and the "now" shortcode is child.
{{< code file="content/welcome.md" lang=md >}} {{< code file=content/welcome.md lang=md >}}
{{</* greeting dateFormat="Jan 2, 2006" */>}} {{</* greeting dateFormat="Jan 2, 2006" */>}}
Welcome. Today is {{</* now */>}}. Welcome. Today is {{</* now */>}}.
{{</* /greeting */>}} {{</* /greeting */>}}
{{< /code >}} {{< /code >}}
{{< code file="layouts/shortcodes/greeting.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/greeting.html lang=go-html-template >}}
<div class="greeting"> <div class="greeting">
{{ trim .Inner "\r\n" | .Page.RenderString }} {{ trim .Inner "\r\n" | .Page.RenderString }}
</div> </div>
{{< /code >}} {{< /code >}}
{{< code file="layouts/shortcodes/now.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/now.html lang=go-html-template >}}
{{- $dateFormat := "January 2, 2006 15:04:05" }} {{- $dateFormat := "January 2, 2006 15:04:05" }}
{{- with .Params }} {{- with .Params }}
+1 -1
View File
@@ -13,7 +13,7 @@ action:
The `Position` method is useful for error reporting. For example, if your shortcode requires a "greeting" parameter: The `Position` method is useful for error reporting. For example, if your shortcode requires a "greeting" parameter:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}} {{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ $greeting := "" }} {{ $greeting := "" }}
{{ with .Get "greeting" }} {{ with .Get "greeting" }}
{{ $greeting = . }} {{ $greeting = . }}
+2 -2
View File
@@ -16,7 +16,7 @@ The `Config` method on a `Site` object provides access to a subset of the site c
These are the default service settings, typically used by Hugo's built-in templates and shortcodes. These are the default service settings, typically used by Hugo's built-in templates and shortcodes.
{{< code-toggle config="services" />}} {{< code-toggle config=services />}}
For example, to use Hugo's built-in Google Analytics template you must add a [Google tag ID]: For example, to use Hugo's built-in Google Analytics template you must add a [Google tag ID]:
@@ -39,7 +39,7 @@ You must capitalize each identifier as shown above.
These are the default privacy settings, typically used by Hugo's built-in templates and shortcodes: These are the default privacy settings, typically used by Hugo's built-in templates and shortcodes:
{{< code-toggle config="privacy" />}} {{< code-toggle config=privacy />}}
For example, to disable usage of the built-in YouTube shortcode: For example, to disable usage of the built-in YouTube shortcode:
+2 -2
View File
@@ -37,7 +37,7 @@ data/
And these data files: And these data files:
{{< code file="data/books/fiction.yaml" lang=yaml >}} {{< code file=data/books/fiction.yaml lang=yaml >}}
- title: The Hunchback of Notre Dame - title: The Hunchback of Notre Dame
author: Victor Hugo author: Victor Hugo
isbn: 978-0140443530 isbn: 978-0140443530
@@ -46,7 +46,7 @@ And these data files:
isbn: 978-0451419439 isbn: 978-0451419439
{{< /code >}} {{< /code >}}
{{< code file="data/books/nonfiction.yaml" lang=yaml >}} {{< code file=data/books/nonfiction.yaml lang=yaml >}}
- title: The Ancien Régime and the Revolution - title: The Ancien Régime and the Revolution
author: Alexis de Tocqueville author: Alexis de Tocqueville
isbn: 978-0141441641 isbn: 978-0141441641
@@ -34,7 +34,7 @@ To capture the "genres" taxonomy object from within any template, use the [`Taxo
To capture the "genres" taxonomy object when rendering its page with a taxonomy template, use the [`Terms`] method on the page's [`Data`] object: To capture the "genres" taxonomy object when rendering its page with a taxonomy template, use the [`Terms`] method on the page's [`Data`] object:
{{< code file="layouts/_default/taxonomy.html" lang=go-html-template >}} {{< code file=layouts/_default/taxonomy.html lang=go-html-template >}}
{{ $taxonomyObject := .Data.Terms }} {{ $taxonomyObject := .Data.Terms }}
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -26,7 +26,7 @@ In addition to the standard page variables, the 404 page has access to all site
This is a basic example of a 404.html template: This is a basic example of a 404.html template:
{{< code file="layouts/404.html" >}} {{< code file=layouts/404.html >}}
{{ define "main" }} {{ define "main" }}
<main id="main"> <main id="main">
<div> <div>
+3 -3
View File
@@ -26,7 +26,7 @@ See [Template Lookup Order](/templates/lookup-order/) for details and examples.
The following defines a simple base template at `_default/baseof.html`. As a default template, it is the shell from which all your pages will be rendered unless you specify another `*baseof.html` closer to the beginning of the lookup order. The following defines a simple base template at `_default/baseof.html`. As a default template, it is the shell from which all your pages will be rendered unless you specify another `*baseof.html` closer to the beginning of the lookup order.
{{< code file="layouts/_default/baseof.html" >}} {{< code file=layouts/_default/baseof.html >}}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@@ -52,7 +52,7 @@ The following defines a simple base template at `_default/baseof.html`. As a def
From the above base template, you can define a [default list template][hugolists]. The default list template will inherit all of the code defined above and can then implement its own `"main"` block from: From the above base template, you can define a [default list template][hugolists]. The default list template will inherit all of the code defined above and can then implement its own `"main"` block from:
{{< code file="layouts/_default/list.html" >}} {{< code file=layouts/_default/list.html >}}
{{ define "main" }} {{ define "main" }}
<h1>Posts</h1> <h1>Posts</h1>
{{ range .Pages }} {{ range .Pages }}
@@ -80,7 +80,7 @@ Code that you put outside the block definitions *can* break your layout. This ev
The following shows how you can override both the `"main"` and `"title"` block areas from the base template with code unique to your [default single page template][singletemplate]: The following shows how you can override both the `"main"` and `"title"` block areas from the base template with code unique to your [default single page template][singletemplate]:
{{< code file="layouts/_default/single.html" >}} {{< code file=layouts/_default/single.html >}}
{{ define "title" }} {{ define "title" }}
<!-- This will override the default value set in baseof.html; i.e., "{{ .Site.Title }}" in the original example--> <!-- This will override the default value set in baseof.html; i.e., "{{ .Site.Title }}" in the original example-->
{{ .Title }} &ndash; {{ .Site.Title }} {{ .Title }} &ndash; {{ .Site.Title }}
+3 -3
View File
@@ -69,7 +69,7 @@ The example below is a bit contrived, but it illustrates the flexibility of data
`jacopastorius.toml` contains the content below. `johnpatitucci.toml` contains a similar list: `jacopastorius.toml` contains the content below. `johnpatitucci.toml` contains a similar list:
{{< code-toggle file="jacopastorius" >}} {{< code-toggle file=data/jazz/bass/jacopastorius >}}
discography = [ discography = [
"1974 - Modern American Music … Period! The Criteria Sessions", "1974 - Modern American Music … Period! The Criteria Sessions",
"1974 - Jaco", "1974 - Jaco",
@@ -113,9 +113,9 @@ Discover a new favorite bass player? Just add another `.toml` file in the same d
### Accessing named values in a data file ### Accessing named values in a data file
Assume you have the following data structure in your `User0123.[yml|toml|xml|json]` data file located directly in `data/`: Assume you have the following data structure in your `user0123` data file located directly in `data/`:
{{< code-toggle file="User0123" >}} {{< code-toggle file=data/user0123 >}}
Name: User0123 Name: User0123
"Short Description": "He is a **jolly good** fellow." "Short Description": "He is a **jolly good** fellow."
Achievements: Achievements:
+1 -1
View File
@@ -34,7 +34,7 @@ See the homepage template below or [Content Organization][contentorg] for more i
The following is an example of a homepage template that uses [partial][partials], [base] templates, and a content file at `content/_index.md` to populate the `{{ .Title }}` and `{{ .Content }}` [page variables][pagevars]. The following is an example of a homepage template that uses [partial][partials], [base] templates, and a content file at `content/_index.md` to populate the `{{ .Title }}` and `{{ .Content }}` [page variables][pagevars].
{{< code file="layouts/index.html" >}} {{< code file=layouts/index.html >}}
{{ define "main" }} {{ define "main" }}
<main aria-role="main"> <main aria-role="main">
<header class="homepage-header"> <header class="homepage-header">
+3 -3
View File
@@ -81,7 +81,7 @@ Users have noticed that enabling Disqus comments when running the Hugo web serve
You can create the following `layouts/partials/disqus.html`: You can create the following `layouts/partials/disqus.html`:
{{< code file="layouts/partials/disqus.html" >}} {{< code file=layouts/partials/disqus.html >}}
<div id="disqus_thread"></div> <div id="disqus_thread"></div>
<script type="text/javascript"> <script type="text/javascript">
@@ -127,7 +127,7 @@ Hugo's Open Graph template is configured using a mix of configuration variables
series = "series" series = "series"
{{</ code-toggle >}} {{</ code-toggle >}}
{{< code-toggle file="content/blog/my-post" >}} {{< code-toggle file=content/blog/my-post.md >}}
title = "Post title" title = "Post title"
description = "Text about this post" description = "Text about this post"
date = "2006-01-02" date = "2006-01-02"
@@ -174,7 +174,7 @@ Hugo's Twitter Card template is configured using a mix of configuration variable
description = "Text about my cool site" description = "Text about my cool site"
{{</ code-toggle >}} {{</ code-toggle >}}
{{< code-toggle file="content/blog/my-post" >}} {{< code-toggle file=content/blog/my-post.md >}}
title = "Post title" title = "Post title"
description = "Text about this post" description = "Text about this post"
images = ["post-cover.png"] images = ["post-cover.png"]
+8 -8
View File
@@ -395,7 +395,7 @@ following:
The following shows how to define a variable independent of the context. The following shows how to define a variable independent of the context.
{{< code file="tags-range-with-page-variable.html" >}} {{< code file=tags-range-with-page-variable.html >}}
{{ $title := .Site.Title }} {{ $title := .Site.Title }}
<ul> <ul>
{{ range .Params.tags }} {{ range .Params.tags }}
@@ -415,7 +415,7 @@ Notice how once we have entered the loop (i.e. `range`), the value of `{{ . }}`
`$` has special significance in your templates. `$` is set to the starting value of `.` ("the dot") by default. This is a [documented feature of Go text/template][dotdoc]. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block but now using `$` to grab `.Site.Title` from the global context: `$` has special significance in your templates. `$` is set to the starting value of `.` ("the dot") by default. This is a [documented feature of Go text/template][dotdoc]. This means you have access to the global context from anywhere. Here is an equivalent example of the preceding code block but now using `$` to grab `.Site.Title` from the global context:
{{< code file="range-through-tags-w-global.html" >}} {{< code file=range-through-tags-w-global.html >}}
<ul> <ul>
{{ range .Params.tags }} {{ range .Params.tags }}
<li> <li>
@@ -532,14 +532,14 @@ An example of this is used in the Hugo docs. Most of the pages benefit from havi
Here is the example front matter: Here is the example front matter:
{{< code-toggle file="content/example.md" fm=true >}} {{< code-toggle file=content/example.md fm=true >}}
title: Example title: Example
notoc: true notoc: true
{{< /code-toggle >}} {{< /code-toggle >}}
Here is an example of corresponding code that could be used inside a `toc.html` [partial template][partials]: Here is an example of corresponding code that could be used inside a `toc.html` [partial template][partials]:
{{< code file="layouts/partials/toc.html" >}} {{< code file=layouts/partials/toc.html >}}
{{ if not .Params.notoc }} {{ if not .Params.notoc }}
<aside> <aside>
<header> <header>
@@ -580,7 +580,7 @@ Within a footer layout, you might then declare a `<footer>` that is only rendere
An alternative way of writing the "`if`" and then referencing the same value is to use [`with`] instead. `with` rebinds the context (`.`) within its scope and skips the block if the variable is absent: An alternative way of writing the "`if`" and then referencing the same value is to use [`with`] instead. `with` rebinds the context (`.`) within its scope and skips the block if the variable is absent:
{{< code file="layouts/partials/twitter.html" >}} {{< code file=layouts/partials/twitter.html >}}
{{ with .Site.Params.twitteruser }} {{ with .Site.Params.twitteruser }}
<div> <div>
<a href="https://twitter.com/{{ . }}" rel="author"> <a href="https://twitter.com/{{ . }}" rel="author">
@@ -614,7 +614,7 @@ content/
└── event-3.md └── event-3.md
``` ```
{{< code-toggle file="content/events/event-1.md" >}} {{< code-toggle file=content/events/event-1.md >}}
title = 'Event 1' title = 'Event 1'
date = 2021-12-06T10:37:16-08:00 date = 2021-12-06T10:37:16-08:00
draft = false draft = false
@@ -624,7 +624,7 @@ end_date = 2021-12-05T11:00:00-08:00
This [partial template][partials] renders future events: This [partial template][partials] renders future events:
{{< code file="layouts/partials/future-events.html" >}} {{< code file=layouts/partials/future-events.html >}}
<h2>Future Events</h2> <h2>Future Events</h2>
<ul> <ul>
{{ range where site.RegularPages "Type" "events" }} {{ range where site.RegularPages "Type" "events" }}
@@ -640,7 +640,7 @@ This [partial template][partials] renders future events:
If you restrict front matter to the TOML format, and omit quotation marks surrounding date fields, you can perform date comparisons without casting. If you restrict front matter to the TOML format, and omit quotation marks surrounding date fields, you can perform date comparisons without casting.
{{< code file="layouts/partials/future-events.html" >}} {{< code file=layouts/partials/future-events.html >}}
<h2>Future Events</h2> <h2>Future Events</h2>
<ul> <ul>
{{ range where (where site.RegularPages "Type" "events") "Params.start_date" "gt" now }} {{ range where (where site.RegularPages "Type" "events") "Params.start_date" "gt" now }}
+6 -6
View File
@@ -72,7 +72,7 @@ The following is an example of a typical Hugo project directory's content:
Using the above example, let's assume you have the following in `content/posts/_index.md`: Using the above example, let's assume you have the following in `content/posts/_index.md`:
{{< code file="content/posts/_index.md" >}} {{< code file=content/posts/_index.md >}}
--- ---
title: My Go Journey title: My Go Journey
date: 2017-03-23 date: 2017-03-23
@@ -86,7 +86,7 @@ Follow my journey through this new blog.
You can now access this `_index.md`'s' content in your list template: You can now access this `_index.md`'s' content in your list template:
{{< code file="layouts/_default/list.html" >}} {{< code file=layouts/_default/list.html >}}
{{ define "main" }} {{ define "main" }}
<main> <main>
<article> <article>
@@ -110,7 +110,7 @@ You can now access this `_index.md`'s' content in your list template:
This above will output the following HTML: This above will output the following HTML:
{{< code file="example.com/posts/index.html" >}} {{< code file=example.com/posts/index.html >}}
<!--top of your baseof code--> <!--top of your baseof code-->
<main> <main>
<article> <article>
@@ -134,7 +134,7 @@ You do *not* have to create an `_index.md` file for every list page (i.e. sectio
Using this same `layouts/_default/list.html` template and applying it to the `quotes` section above will render the following output. Note that `quotes` does not have an `_index.md` file to pull from: Using this same `layouts/_default/list.html` template and applying it to 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" >}} {{< code file=example.com/quote/index.html >}}
<!--baseof--> <!--baseof-->
<main> <main>
<article> <article>
@@ -161,7 +161,7 @@ The default behavior of Hugo is to pluralize list titles; hence the inflection o
This list template has been modified slightly from a template originally used in [spf13.com](https://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`. This list template has been modified slightly from a template originally used in [spf13.com](https://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/posts.html" >}} {{< code file=layouts/section/posts.html >}}
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ partial "subheader.html" . }} {{ partial "subheader.html" . }}
<main> <main>
@@ -180,7 +180,7 @@ This list template has been modified slightly from a template originally used in
### Taxonomy template ### Taxonomy template
{{< code file="layouts/_default/taxonomy.html" >}} {{< code file=layouts/_default/taxonomy.html >}}
{{ define "main" }} {{ define "main" }}
<main> <main>
<div> <div>
+4 -4
View File
@@ -28,7 +28,7 @@ The example below handles every combination.
This partial template recursively "walks" a menu structure, rendering a localized, accessible nested list. This partial template recursively "walks" a menu structure, rendering a localized, accessible nested list.
{{< code file="layouts/partials/menu.html" copy=true >}} {{< code file=layouts/partials/menu.html copy=true >}}
{{- $page := .page }} {{- $page := .page }}
{{- $menuID := .menuID }} {{- $menuID := .menuID }}
@@ -75,7 +75,7 @@ This partial template recursively "walks" a menu structure, rendering a localize
Call the partial above, passing a menu ID and the current page in context. Call the partial above, passing a menu ID and the current page in context.
{{< code file="layouts/_default/single.html" >}} {{< code file=layouts/_default/single.html >}}
{{ partial "menu.html" (dict "menuID" "main" "page" .) }} {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }} {{ partial "menu.html" (dict "menuID" "footer" "page" .) }}
{{< /code >}} {{< /code >}}
@@ -86,7 +86,7 @@ Regardless of how you [define menu entries], an entry associated with a page has
This simplistic example renders a page parameter named `version` next to each entry's `name`. Code defensively using `with` or `if` to handle entries where (a) the entry points to an external resource, or (b) the `version` parameter is not defined. This simplistic example renders a page parameter named `version` next to each entry's `name`. Code defensively using `with` or `if` to handle entries where (a) the entry points to an external resource, or (b) the `version` parameter is not defined.
{{< code file="layouts/_default/single.html" >}} {{< code file=layouts/_default/single.html >}}
{{- range site.Menus.main }} {{- range site.Menus.main }}
<a href="{{ .URL }}"> <a href="{{ .URL }}">
{{ .Name }} {{ .Name }}
@@ -108,7 +108,7 @@ When you define menu entries [in site configuration] or [in front matter], you c
This simplistic example renders a `class` attribute for each anchor element. Code defensively using `with` or `if` to handle entries where `params.class` is not defined. This simplistic example renders a `class` attribute for each anchor element. Code defensively using `with` or `if` to handle entries where `params.class` is not defined.
{{< code file="layouts/partials/menu.html" >}} {{< code file=layouts/partials/menu.html >}}
{{- range site.Menus.main }} {{- range site.Menus.main }}
<a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}"> <a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}">
{{ .Name }} {{ .Name }}
+2 -2
View File
@@ -131,7 +131,7 @@ system.
Every `Page` has a [`Kind`][page_kinds] attribute, and the default Output Every `Page` has a [`Kind`][page_kinds] attribute, and the default Output
Formats are set based on that. Formats are set based on that.
{{< code-toggle config="outputs" />}} {{< code-toggle config=outputs />}}
### Customizing output formats ### Customizing output formats
@@ -155,7 +155,7 @@ Note that in the above examples, the _output formats_ for `section`,
The following is an example of front matter in a content file that defines output formats for the rendered `Page`: The following is an example of front matter in a content file that defines output formats for the rendered `Page`:
{{< code-toggle file="content/example.md" fm=true >}} {{< code-toggle file=content/example.md fm=true >}}
title: Example title: Example
outputs: outputs:
- html - html
+2 -2
View File
@@ -136,7 +136,7 @@ The `partialCached` template function provides significant performance gains for
The following `header.html` partial template is used for [spf13.com](https://spf13.com/): The following `header.html` partial template is used for [spf13.com](https://spf13.com/):
{{< code file="layouts/partials/header.html" >}} {{< code file=layouts/partials/header.html >}}
<!DOCTYPE html> <!DOCTYPE html>
<html class="no-js" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <html class="no-js" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head> <head>
@@ -161,7 +161,7 @@ The `header.html` example partial was built before the introduction of block tem
The following `footer.html` partial template is used for [spf13.com](https://spf13.com/): The following `footer.html` partial template is used for [spf13.com](https://spf13.com/):
{{< code file="layouts/partials/footer.html" >}} {{< code file=layouts/partials/footer.html >}}
<footer> <footer>
<div> <div>
<p> <p>
+3 -3
View File
@@ -105,7 +105,7 @@ Ordinal {{< new-in "0.108.0" >}}
Here is a code example for how the render-link.html template could look: Here is a code example for how the render-link.html template could look:
{{< code file="layouts/_default/_markup/render-link.html" >}} {{< code file=layouts/_default/_markup/render-link.html >}}
<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a> <a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
{{< /code >}} {{< /code >}}
@@ -117,7 +117,7 @@ Here is a code example for how the render-link.html template could look:
Here is a code example for how the render-image.html template could look: Here is a code example for how the render-image.html template could look:
{{< code file="layouts/_default/_markup/render-image.html" >}} {{< code file=layouts/_default/_markup/render-image.html >}}
<p class="md__image"> <p class="md__image">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} /> <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
</p> </p>
@@ -127,7 +127,7 @@ Here is a code example for how the render-image.html template could look:
Given this template file Given this template file
{{< code file="layouts/_default/_markup/render-heading.html" >}} {{< code file=layouts/_default/_markup/render-heading.html >}}
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}> <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">¶</a></h{{ .Level }}>
{{< /code >}} {{< /code >}}
+1 -1
View File
@@ -35,7 +35,7 @@ You may overwrite the internal template with a custom template. Hugo selects the
## robots.txt template example ## robots.txt template example
{{< code file="layouts/robots.txt" >}} {{< code file=layouts/robots.txt >}}
User-agent: * User-agent: *
{{ range .Pages }} {{ range .Pages }}
Disallow: {{ .RelPermalink }} Disallow: {{ .RelPermalink }}
+1 -1
View File
@@ -43,7 +43,7 @@ Examples:
## Example: creating a default section template ## Example: creating a default section template
{{< code file="layouts/_default/section.html" >}} {{< code file=layouts/_default/section.html >}}
{{ define "main" }} {{ define "main" }}
<main> <main>
{{ .Content }} {{ .Content }}
+12 -12
View File
@@ -173,7 +173,7 @@ Let's assume you would like to keep mentions of your copyright year current in y
{{</* year */>}} {{</* year */>}}
``` ```
{{< code file="/layouts/shortcodes/year.html" >}} {{< code file=layouts/shortcodes/year.html >}}
{{ now.Format "2006" }} {{ now.Format "2006" }}
{{< /code >}} {{< /code >}}
@@ -187,14 +187,14 @@ Embedded videos are a common addition to Markdown content that can quickly becom
Would load the template at `/layouts/shortcodes/youtube.html`: Would load the template at `/layouts/shortcodes/youtube.html`:
{{< code file="/layouts/shortcodes/youtube.html" >}} {{< code file=layouts/shortcodes/youtube.html >}}
<div class="embed video-player"> <div class="embed video-player">
<iframe class="youtube-player" type="text/html" width="640" height="385" src="https://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0"> <iframe class="youtube-player" type="text/html" width="640" height="385" src="https://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
</iframe> </iframe>
</div> </div>
{{< /code >}} {{< /code >}}
{{< code file="youtube-embed.html" >}} {{< code file=youtube-embed.html >}}
<div class="embed video-player"> <div class="embed video-player">
<iframe class="youtube-player" type="text/html" <iframe class="youtube-player" type="text/html"
width="640" height="385" width="640" height="385"
@@ -208,13 +208,13 @@ Would load the template at `/layouts/shortcodes/youtube.html`:
Let's say you want to create your own `img` shortcode rather than use Hugo's built-in [`figure` shortcode][figure]. Your goal is to be able to call the shortcode as follows in your content files: Let's say you want to create your own `img` shortcode rather than use Hugo's built-in [`figure` shortcode][figure]. Your goal is to be able to call the shortcode as follows in your content files:
{{< code file="content-image.md" >}} {{< code file=content-image.md >}}
{{</* img src="/media/spf13.jpg" title="Steve Francia" */>}} {{</* img src="/media/spf13.jpg" title="Steve Francia" */>}}
{{< /code >}} {{< /code >}}
You have created the shortcode at `/layouts/shortcodes/img.html`, which loads the following shortcode template: You have created the shortcode at `/layouts/shortcodes/img.html`, which loads the following shortcode template:
{{< code file="/layouts/shortcodes/img.html" >}} {{< code file=layouts/shortcodes/img.html >}}
<!-- image --> <!-- image -->
<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}> <figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
{{ with .Get "link" }}<a href="{{ . }}">{{ end }} {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
@@ -237,7 +237,7 @@ You have created the shortcode at `/layouts/shortcodes/img.html`, which loads th
Would be rendered as: Would be rendered as:
{{< code file="img-output.html" >}} {{< code file=img-output.html >}}
<figure> <figure>
<img src="/media/spf13.jpg" /> <img src="/media/spf13.jpg" />
<figcaption> <figcaption>
@@ -255,7 +255,7 @@ Would be rendered as:
Would load the template found at `/layouts/shortcodes/vimeo.html`: Would load the template found at `/layouts/shortcodes/vimeo.html`:
{{< code file="/layouts/shortcodes/vimeo.html" >}} {{< code file=layouts/shortcodes/vimeo.html >}}
{{ if .IsNamedParams }} {{ if .IsNamedParams }}
<div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}vimeo-container{{ end }}"> <div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}vimeo-container{{ end }}">
<iframe src="https://player.vimeo.com/video/{{ .Get "id" }}" allowfullscreen></iframe> <iframe src="https://player.vimeo.com/video/{{ .Get "id" }}" allowfullscreen></iframe>
@@ -269,7 +269,7 @@ Would load the template found at `/layouts/shortcodes/vimeo.html`:
Would be rendered as: Would be rendered as:
{{< code file="vimeo-iframes.html" >}} {{< code file=vimeo-iframes.html >}}
<div class="vimeo-container"> <div class="vimeo-container">
<iframe src="https://player.vimeo.com/video/49718712" allowfullscreen></iframe> <iframe src="https://player.vimeo.com/video/49718712" allowfullscreen></iframe>
</div> </div>
@@ -282,7 +282,7 @@ Would be rendered as:
The following is taken from `highlight`, which is a [built-in shortcode] that ships with Hugo. The following is taken from `highlight`, which is a [built-in shortcode] that ships with Hugo.
{{< code file="highlight-example.md" >}} {{< code file=highlight-example.md >}}
{{</* highlight html */>}} {{</* highlight html */>}}
<html> <html>
<body> This HTML </body> <body> This HTML </body>
@@ -298,7 +298,7 @@ The template for the `highlight` shortcode uses the following code, which is alr
The rendered output of the HTML example code block will be as follows: The rendered output of the HTML example code block will be as follows:
{{< code file="syntax-highlighted.html" >}} {{< code file=syntax-highlighted.html >}}
<div class="highlight" style="background: #272822"><pre style="line-height: 125%"><span style="color: #f92672">&lt;html&gt;</span> <div class="highlight" style="background: #272822"><pre style="line-height: 125%"><span style="color: #f92672">&lt;html&gt;</span>
<span style="color: #f92672">&lt;body&gt;</span> This HTML <span style="color: #f92672">&lt;/body&gt;</span> <span style="color: #f92672">&lt;body&gt;</span> This HTML <span style="color: #f92672">&lt;/body&gt;</span>
<span style="color: #f92672">&lt;/html&gt;</span> <span style="color: #f92672">&lt;/html&gt;</span>
@@ -311,7 +311,7 @@ Hugo's [`.Parent` shortcode variable][parent] provides access to the parent shor
The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` parameter: The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` parameter:
{{< code file="layouts/shortcodes/gallery.html" >}} {{< code file=layouts/shortcodes/gallery.html >}}
<div class="{{ .Get "class" }}"> <div class="{{ .Get "class" }}">
{{ .Inner }} {{ .Inner }}
</div> </div>
@@ -319,7 +319,7 @@ The following example is contrived but demonstrates the concept. Assume you have
You also have an `img` shortcode with a single named `src` parameter that you want to call inside of `gallery` and other shortcodes, so that the parent defines the context of each `img`: You also have an `img` shortcode with a single named `src` parameter that you want to call inside of `gallery` and other shortcodes, so that the parent defines the context of each `img`:
{{< code file="layouts/shortcodes/img.html" >}} {{< code file=layouts/shortcodes/img.html >}}
{{- $src := .Get "src" -}} {{- $src := .Get "src" -}}
{{- with .Parent -}} {{- with .Parent -}}
<img src="{{ $src }}" class="{{ .Get "class" }}-image"> <img src="{{ $src }}" class="{{ .Get "class" }}-image">
@@ -24,7 +24,7 @@ Content pages are of the type `page` and will therefore have all the [page varia
This single page template makes use of Hugo [base templates], the [`.Format` function] for dates, the [`.WordCount` page variable][pagevars], and ranges through the single content's specific [taxonomies][pagetaxonomy]. [`with`] is also used to check whether the taxonomies are set in the front matter. This single page template makes use of Hugo [base templates], the [`.Format` function] for dates, the [`.WordCount` page variable][pagevars], and ranges through the single content's specific [taxonomies][pagetaxonomy]. [`with`] is also used to check whether the taxonomies are set in the front matter.
{{< code file="layouts/posts/single.html" >}} {{< code file=layouts/posts/single.html >}}
{{ define "main" }} {{ define "main" }}
<section id="main"> <section id="main">
<h1 id="title">{{ .Title }}</h1> <h1 id="title">{{ .Title }}</h1>
+2 -2
View File
@@ -27,7 +27,7 @@ With a multilingual project, Hugo generates:
Set the default values for [change frequency] and [priority], and the name of the generated file, in your site configuration. Set the default values for [change frequency] and [priority], and the name of the generated file, in your site configuration.
{{< code-toggle config="sitemap" />}} {{< code-toggle config=sitemap />}}
changefreq changefreq
: How frequently a page is likely to change. Valid values are `always`, `hourly`, `daily`, `weekly`, `monthly`, `yearly`, and `never`. Default is `""` (change frequency omitted from rendered sitemap). : How frequently a page is likely to change. Valid values are `always`, `hourly`, `daily`, `weekly`, `monthly`, `yearly`, and `never`. Default is `""` (change frequency omitted from rendered sitemap).
@@ -42,7 +42,7 @@ priority
Override the default values for a given page in front matter. Override the default values for a given page in front matter.
{{< code-toggle file="news.md" fm=true >}} {{< code-toggle file=news.md fm=true >}}
title = 'News' title = 'News'
[sitemap] [sitemap]
changefreq = 'weekly' changefreq = 'weekly'
+3 -3
View File
@@ -152,7 +152,7 @@ Weights of zero are thus treated specially: if two pages have unequal weights, a
Content can be assigned weight for each taxonomy that it's assigned to. Content can be assigned weight for each taxonomy that it's assigned to.
{{< code-toggle file="content/example.md" fm=true >}} {{< code-toggle file=content/example.md fm=true >}}
tags = [ "a", "b", "c" ] tags = [ "a", "b", "c" ]
tags_weight = 22 tags_weight = 22
categories = ["d"] categories = ["d"]
@@ -283,7 +283,7 @@ The following example displays all terms in a site's tags taxonomy:
This example will list all taxonomies and their terms, as well as all the content assigned to each of the terms. 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" >}} {{< code file=layouts/partials/all-taxonomies.html >}}
<ul> <ul>
{{ range $taxonomy, $terms := site.Taxonomies }} {{ range $taxonomy, $terms := site.Taxonomies }}
<li> <li>
@@ -311,7 +311,7 @@ This example will list all taxonomies and their terms, as well as all the conten
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](#example-list-all-site-tags): 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](#example-list-all-site-tags):
{{< code file="links-to-all-tags.html" >}} {{< code file=links-to-all-tags.html >}}
{{ $taxo := "tags" }} {{ $taxo := "tags" }}
<ul class="{{ $taxo }}"> <ul class="{{ $taxo }}">
{{ with ($.Site.GetPage (printf "/%s" $taxo)) }} {{ with ($.Site.GetPage (printf "/%s" $taxo)) }}
+3 -3
View File
@@ -61,7 +61,7 @@ The following example demonstrates how to use content views inside your [list te
In this example, `.Render` is passed into the template to call the [render function][render]. `.Render` is a special function that instructs content to render itself with the view template provided as the first argument. In this case, the template is going to render the `summary.html` view that follows: In this example, `.Render` is passed into the template to call the [render function][render]. `.Render` is a special function that instructs content to render itself with the view template provided as the first argument. In this case, the template is going to render the `summary.html` view that follows:
{{< code file="layouts/_default/list.html" >}} {{< code file=layouts/_default/list.html >}}
<main id="main"> <main id="main">
<div> <div>
<h1 id="title">{{ .Title }}</h1> <h1 id="title">{{ .Title }}</h1>
@@ -76,7 +76,7 @@ In this example, `.Render` is passed into the template to call the [render funct
Hugo will pass the entire page object to the following `summary.html` view template. (See [Page Variables][pagevars] for a complete list.) Hugo will pass the entire page object to the following `summary.html` view template. (See [Page Variables][pagevars] for a complete list.)
{{< code file="layouts/_default/summary.html" >}} {{< code file=layouts/_default/summary.html >}}
<article class="post"> <article class="post">
<header> <header>
<h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2> <h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
@@ -93,7 +93,7 @@ Hugo will pass the entire page object to the following `summary.html` view templ
Continuing on the previous example, we can change our render function to use a smaller `li.html` view by changing the argument in the call to the `.Render` function (i.e., `{{ .Render "li" }}`). Continuing on the previous example, we can change our render function to use a smaller `li.html` view by changing the argument in the call to the `.Render` function (i.e., `{{ .Render "li" }}`).
{{< code file="layouts/_default/li.html" >}} {{< code file=layouts/_default/li.html >}}
<li> <li>
<a href="{{ .Permalink }}">{{ .Title }}</a> <a href="{{ .Permalink }}">{{ .Title }}</a>
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div> <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>