Cleanup shortcode calls

This commit is contained in:
Joe Mooring
2023-11-07 16:33:39 -08:00
committed by Joe Mooring
parent c9247e98d6
commit 903b42ebc9
75 changed files with 196 additions and 196 deletions
+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).
{{< 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:
+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:
{{< code-toggle file="archetypes/default.md" fm=true >}}
{{< code-toggle file=archetypes/default.md fm=true >}}
title = '{{ replace .File.ContentBaseName `-` ` ` | title }}'
date = '{{ .Date }}'
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:
{{< 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'
date = '2023-08-24T11:49:46-07:00'
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.
{{< code file="archetypes/functions.md" >}}
{{< code file=archetypes/functions.md >}}
---
date: '{{ .Date }}'
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:
{{< code-toggle file="content/example/index.md" fm=true >}}
{{< code-toggle file=content/example/index.md fm=true >}}
[_build]
list = 'always'
publishResources = true
@@ -93,7 +93,7 @@ title = 'Headless 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" }}
{{ .Content }}
{{ 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:
{{< code file="layouts/_default/home.html" lang=go-html-template >}}
{{< code file=layouts/_default/home.html lang=go-html-template >}}
{{ with .Site.GetPage "/headless" }}
{{ range .Pages }}
{{ .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.
{{< code-toggle file="content/glossary/_index.md" fm=true >}}
{{< code-toggle file=content/glossary/_index.md fm=true >}}
title = 'Glossary'
[_build]
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:
{{< 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:
@@ -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).
{{< code-toggle config="imaging" />}}
{{< code-toggle config=imaging />}}
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:
{{< code-toggle file="content/about.md" fm=true >}}
{{< code-toggle file=content/about.md fm=true >}}
title = 'About'
menu = 'main'
{{< /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:
{{< code-toggle file="content/contact.md" fm=true >}}
{{< code-toggle file=content/contact.md fm=true >}}
title = 'Contact'
menu = ['main','footer']
{{< /code-toggle >}}
@@ -94,7 +94,7 @@ weight
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'
[menu.main]
parent = 'Products'
+10 -10
View File
@@ -21,7 +21,7 @@ Also See [Hugo Multilingual Part 1: Content translation].
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.
@@ -277,7 +277,7 @@ To localize URLs:
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
slug: "a-propos"
{{< /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:
{{< code file="layouts/partials/i18nlist.html" >}}
{{< code file=layouts/partials/i18nlist.html >}}
{{ if .IsTranslated }}
<h4>{{ i18n "translations" }}</h4>
<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:
{{< code file="layouts/partials/allLanguages.html" >}}
{{< code file=layouts/partials/allLanguages.html >}}
<ul>
{{ range $.Site.Home.AllTranslations }}
<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:
{{< code-toggle file="i18n/en-US" >}}
{{< code-toggle file=i18n/en-US >}}
[home]
other = "Home"
{{< /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:
{{< code-toggle file="i18n/en-US" >}}
{{< code-toggle file=i18n/en-US >}}
[wordCount]
other = "This article has {{ .WordCount }} words."
{{< /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:
{{< code-toggle file="i18n/en-US" >}}
{{< code-toggle file=i18n/en-US >}}
[readingTime]
one = "One minute to read"
other = "{{ .Count }} minutes to read"
@@ -585,7 +585,7 @@ config/
└── hugo.toml
```
{{< code-toggle file="config/_default/menus/menu.de" >}}
{{< code-toggle file=config/_default/menus/menu.de >}}
[[main]]
name = 'Produkte'
pageRef = '/products'
@@ -596,7 +596,7 @@ pageRef = '/services'
weight = 20
{{< /code-toggle >}}
{{< code-toggle file="config/_default/menus/menu.en" >}}
{{< code-toggle file=config/_default/menus/menu.en >}}
[[main]]
name = 'Products'
pageRef = '/products'
@@ -641,7 +641,7 @@ For example, if you define menu entries in site configuration:
Create corresponding entries in the translation tables:
{{< code-toggle file="i18n/de" >}}
{{< code-toggle file=i18n/de >}}
products = 'Produkte'
services = 'Leistungen'
{{< / 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
(in the `index.md`):
{{< code-toggle file="content/headless/index.md" fm=true >}}
{{< code-toggle file=content/headless/index.md fm=true >}}
headless = true
{{< /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:
{{< code-toggle file="content/inspections/engine/index.md" fm=true >}}
{{< code-toggle file=content/inspections/engine/index.md fm=true >}}
title = 'Engine inspections'
[[resources]]
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:
{{< code file="layouts/partials/related.html" >}}
{{< code file=layouts/partials/related.html >}}
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<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.
{{< code-toggle config="related" />}}
{{< code-toggle config=related />}}
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.
{{< code file="layouts/partials/breadcrumb.html" >}}
{{< code file=layouts/partials/breadcrumb.html >}}
<nav aria-label="breadcrumb" class="breadcrumb">
<ol>
{{ range .Ancestors.Reverse }}
+5 -5
View File
@@ -121,7 +121,7 @@ attrlink
#### Example `figure` input
{{< code file="figure-input-example.md" >}}
{{< code file=figure-input-example.md >}}
{{</* figure src="elephant.jpg" title="An elephant at sunset" */>}}
{{< /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:
{{< code file="example-youtube-input.md" >}}
{{< code file=example-youtube-input.md >}}
{{</* youtube w7Ft2ymGmfc */>}}
{{< /code >}}
Furthermore, you can automatically start playback of the embedded video by setting the `autoplay` parameter to `true`. Remember that you can't mix named 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" */>}}
{{< /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.
{{< 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" */>}}
{{< /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:
{{< code file="example-youtube-output.html" >}}
{{< code file=example-youtube-output.html >}}
{{< youtube id="w7Ft2ymGmfc" autoplay="true" >}}
{{< /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].
{{< code file="page-list-with-summaries.html" >}}
{{< code file=page-list-with-summaries.html >}}
{{ range first 10 .Pages }}
<article>
<!-- 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:
{{< 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:
@@ -142,7 +142,7 @@ If you would like the ability to quickly generate content files with preconfigur
### 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"
tags = [ "Development", "Go", "fast", "Blogging" ]
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:
{{< 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"
wikipedia: "https://en.wikipedia.org/wiki/Bruce_Willis"
{{< /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]:
{{< code file="layout/_default/single.html" >}}
{{< code file=layout/_default/single.html >}}
{{ define "main" }}
<main>
<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:
{{< code file="layouts/partials/toc.html" >}}
{{< code file=layouts/partials/toc.html >}}
{{ if and (gt .WordCount 400 ) (.Params.toc) }}
<aside>
<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.
{{< code-toggle file="content/posts/post-1.md" fm=true >}}
{{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'My First Post'
slug = 'my-first-post'
{{< /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:
{{< code-toggle file="content/posts/post-1.md" fm=true >}}
{{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'My First Article'
url = '/articles/my-first-article'
{{< /code-toggle >}}
@@ -58,7 +58,7 @@ https://example.org/articles/my-first-article/
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'
url = '/articles/my-first-article.html'
{{< /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:
{{< code-toggle file="content/posts/new-file-name.md" >}}
{{< code-toggle file=content/posts/new-file-name.md >}}
aliases = ['/posts/previous-file-name']
{{< /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:
{{< 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']
{{< /code-toggle >}}
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']
{{< /code-toggle >}}
@@ -400,7 +400,7 @@ public/
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>
<html lang="en-us">
<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:
{{< code file="install-go.sh" >}}
{{< code file=install-go.sh >}}
brew install go
{{< /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).
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" }}
<section class="row featured-article">
<h2>Featured Article</h2>
@@ -53,7 +53,7 @@ The partial below creates an SVG and expects `fill`, `height` and `width` from t
### 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"
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>
@@ -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:
{{< code file="layouts/_default/list.html" >}}
{{< code file=layouts/_default/list.html >}}
{{ partial "svgs/external-links.svg" (dict "fill" "#01589B" "width" 10 "height" 20 ) }}
{{< /code >}}
@@ -60,7 +60,7 @@ data/
Here is an example:
{{< code-toggle file="data/locations/oslo" >}}
{{< code-toggle file=data/locations/oslo >}}
website = "https://www.oslo.kommune.no"
pop_city = 658390
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/`:
{{< code-toggle file="content/articles/oslo.md" fm=true >}}
{{< code-toggle file=content/articles/oslo.md fm=true >}}
title = "My Norwegian Vacation"
location = "oslo"
{{< /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.
{{< code-toggle file="content/example.md" fm=true >}}
{{< code-toggle file=content/example.md fm=true >}}
title: Example
series: golang
{{< /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.
{{< code file="layouts/_default/baseof.html" >}}
{{< code file=layouts/_default/baseof.html >}}
<body>
<main>
{{ block "main" . }}
@@ -35,14 +35,14 @@ The typical use is to define a set of root templates that are then customized by
</body>
{{< /code >}}
{{< code file="layouts/_default/single.html" >}}
{{< code file=layouts/_default/single.html >}}
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}
{{< /code >}}
{{< code file="layouts/_default/list.html" >}}
{{< code file=layouts/_default/list.html >}}
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .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:
{{< code file="partial-cached-example.html" >}}
{{< code file=partial-cached-example.html >}}
{{ partialCached "footer.html" . .Section }}
{{< /code >}}
@@ -48,7 +48,7 @@ The example above:
The result is:
{{< code file="public/css/main.css" >}}
{{< code file=public/css/main.css >}}
body {
background-color: #fefefe;
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:
{{< 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 -->
<ul>
{{ 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:
{{< 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 -->
<ul>
<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:
{{< 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"
location = "Chicago IL"
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]:
{{< code file="layouts/partials/content-header.html" >}}
{{< code file=layouts/partials/content-header.html >}}
<header>
<h1>{{ .Title }}</h1>
{{ 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:
{{< 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
@@ -125,7 +125,7 @@ autoHeadingIDType ("github")
This is the default configuration for the AsciiDoc markdown renderer:
{{< code-toggle config="markup.asciidocExt" />}}
{{< code-toggle config=markup.asciidocExt />}}
attributes
: (`map`) Variables to be referenced in your AsciiDoc file. This is a list of variable name/value maps. See Asciidoctors [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/).
{{< code-toggle config="markup.highlight" />}}
{{< code-toggle config=markup.highlight />}}
For `style`, see these galleries:
@@ -200,7 +200,7 @@ For CSS, see [Generate Syntax Highlighter CSS](/content-management/syntax-highli
## Table of contents
{{< code-toggle config="markup.tableOfContents" />}}
{{< code-toggle config=markup.tableOfContents />}}
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"
{{< /code-toggle >}}
{{< code-toggle file="params" >}}
{{< code-toggle file=params >}}
foo = "bar"
{{< /code-toggle >}}
@@ -521,7 +521,7 @@ enableemoji: true
The `build` configuration section contains global build-related configuration options.
{{< code-toggle config="build" />}}
{{< code-toggle config=build />}}
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.
@@ -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:
{{< code-toggle file="config/development/server">}}
{{< code-toggle file=config/development/server >}}
[[headers]]
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:
{{< code-toggle file="config/development/server">}}
{{< code-toggle file=config/development/server >}}
[[redirects]]
from = "/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:
{{< code-toggle file="config/development/server" >}}
{{< code-toggle file=config/development/server >}}
[[redirects]]
from = "/**"
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:
{{< 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`:
@@ -799,13 +799,13 @@ Hugo v0.20 introduced the ability to render your content to multiple output form
Default configuration:
{{< code-toggle config="minify" />}}
{{< code-toggle config=minify />}}
## Configure file caches
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`.
@@ -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:
{{< code file="install-openssh.sh" >}}
{{< code file=install-openssh.sh >}}
sudo apt-get install openssh-client
{{< /code >}}
@@ -64,7 +64,7 @@ Step 5
Step 6
: 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
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.
{{< code file=".gitlab-ci.yml" copy=true >}}
{{< code file=.gitlab-ci.yml copy=true >}}
variables:
DART_SASS_VERSION: 1.64.1
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:
{{< code file="netlify.toml" >}}
{{< code file=netlify.toml >}}
[context.production.environment]
HUGO_VERSION = "0.115.4"
{{< /code >}}
For testing:
{{< code file="netlify.toml" >}}
{{< code file=netlify.toml >}}
[context.deploy-preview.environment]
HUGO_VERSION = "0.115.4"
{{< /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`:
{{< readfile file="netlify.toml" highlight="toml" >}}
{{< readfile file=netlify.toml highlight=toml >}}
## 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
{{< code file="postcss.config.js" >}}
{{< code file=postcss.config.js >}}
module.exports = {
plugins: [
require('autoprefixer')
@@ -52,7 +52,7 @@ Step 4
Step 5
: 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 }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}
@@ -60,7 +60,7 @@ Step 5
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 }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{ 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" >}}
: (`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 }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
@@ -108,7 +108,7 @@ stringifier
syntax
: (`string`) Custom postcss syntax.
{{< code file="layouts/partials/css.html" >}}
{{< code file=layouts/partials/css.html >}}
{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
<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:
{{< code file="postcss.config.js" >}}
{{< code file=postcss.config.js >}}
module.exports = {
plugins: [
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.'
{{< /code-toggle >}}
{{< code file="layouts/baseof.html" lang=go-html-template >}}
{{< code file=layouts/baseof.html lang=go-html-template >}}
<head>
...
<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/
{{< code file="contents/physics/lesson-1.md" lang=markdown >}}
{{< code file=contents/physics/lesson-1.md lang=markdown >}}
Albert Einsteins theory of special relativity expresses
the fact that mass and energy are the same physical entity
and can be changed into each other.
@@ -31,14 +31,14 @@ the kinetic energy (E) of that body.
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" }}
{{< /code >}}
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>
...
{{ 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.
{{< code file="layouts/shortcodes/foo.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/foo.html lang=go-html-template >}}
{{ partial "my-partial.html" . }}
{{< /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`.
{{< code file="layouts/_default/single.html" lang=go-html-template >}}
{{< code file=layouts/_default/single.html lang=go-html-template >}}
{{ partial "my-partial.html" . }}
{{< /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.
{{< 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 }}
{{< /code >}}
+1 -1
View File
@@ -25,7 +25,7 @@ display_toc = true
Content:
{{< code-toggle file="content/example.md" fm=true >}}
{{< code-toggle file=content/example.md fm=true >}}
title = 'Example'
date = 2023-01-01
draft = false
+1 -1
View File
@@ -14,7 +14,7 @@ action:
With this front matter:
{{< code-toggle file="content/news/annual-conference.md" >}}
{{< code-toggle file=content/news/annual-conference.md >}}
title = 'Annual conference'
date = 2023-10-17T15:11:37-07:00
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:
{{< code file="layouts/shortcodes/include.html" >}}
{{< code file=layouts/shortcodes/include.html >}}
{{ $p := site.GetPage (.Get 0) }}
{{ $p.RenderShortcodes }}
{{< /code >}}
Then in your markdown:
{{< code file="content/about.md" lang=md >}}
{{< code file=content/about.md lang=md >}}
{{%/* include "/snippets/services.md" */%}}
{{%/* include "/snippets/values.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
{{< code file="content/about.md" lang=text >}}
{{< code file=content/about.md lang=text >}}
+++
title = 'About'
date = 2023-10-07T12:28:33-07:00
+2 -2
View File
@@ -51,12 +51,12 @@ content/
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'
translationKey = 'foo'
{{< /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'
translationKey = 'foo'
{{< /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:
{{< 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 }}
<p>Related pages:</p>
<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:
{{< code file="layouts/_default/single.html" lang=go-html-template >}}
{{< code file=layouts/_default/single.html lang=go-html-template >}}
{{ $opts := dict
"document" .
"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
{{< code file="assets/quotations/kipling.txt" >}}
{{< code file=assets/quotations/kipling.txt >}}
He travels the fastest who travels alone.
{{< /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:
{{< code-toggle file="content/posts/post-1.md" fm=true >}}
{{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'Post 1'
[[resources]]
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:
{{< code file="layouts/lessons/single.html" lang=go-html-template >}}
{{< code file=layouts/lessons/single.html lang=go-html-template >}}
{{ range .Resources.ByType "page" }}
{{ .Content }}
{{ 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:
{{< code-toggle file="content/posts/post-1.md" fm=true >}}
{{< code-toggle file=content/posts/post-1.md fm=true >}}
title = 'Post 1'
[[resources]]
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:
{{< code file="content/about.md" lang=md >}}
{{< code file=content/about.md lang=md >}}
{{</* myshortcode "Hello" "world" */>}}
{{< /code >}}
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.
{{< /code >}}
@@ -36,13 +36,13 @@ To retrieve parameters by position:
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" */>}}
{{< /code >}}
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.
{{< /code >}}
+5 -5
View File
@@ -15,7 +15,7 @@ action:
This content:
{{< code file="content/services.md" lang=md >}}
{{< code file=content/services.md lang=md >}}
{{</* card title="Product Design" */>}}
We design the **best** widgets in the world.
{{</* /card */>}}
@@ -23,7 +23,7 @@ We design the **best** widgets in the world.
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">
{{ with .Get "title" }}
<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
{{< code file="layouts/shortcodes/card.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/card.html lang=go-html-template >}}
<div class="card">
{{ with .Get "title" }}
<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:
{{< code file="content/services.md" lang=md >}}
{{< code file=content/services.md lang=md >}}
{{%/* card title="Product Design" */%}}
We design the **best** widgets in the world.
{{%/* /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.
{{< code file="layouts/shortcodes/card.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/card.html lang=go-html-template >}}
<div class="card">
{{ with .Get "title" }}
<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:
{{< code file="content/about.md" lang=md >}}
{{< code file=content/about.md lang=md >}}
- Gallery one
{{</* 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`:
{{< code file="layouts/shortcodes/gallery.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/gallery.html lang=go-html-template >}}
<div class="gallery">
{{ trim .Inner "\r\n" | .Page.RenderString }}
</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:
{{< code file="layouts/shortcodes/gallery.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/gallery.html lang=go-html-template >}}
<div class="gallery">
{{ trim .InnerDeindent "\r\n" | .Page.RenderString }}
</div>
@@ -14,7 +14,7 @@ To support both positional and named parameters when calling a shortcode, use th
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 }}
{{ printf "%s %s." (.Get "greeting") (.Get "firstName") }}
{{ else }}
@@ -24,7 +24,7 @@ With this shortcode template:
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 "Hello" "world" */>}}
{{< /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:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ $greeting := "" }}
{{ with .Get "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:
{{< code file="content/about.md" lang=md >}}
{{< code file=content/about.md lang=md >}}
{{</* img src="images/a.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:
{{< code file="layouts/shortcodes/img.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/img.html lang=go-html-template >}}
{{ $src := "" }}
{{ with .Get "src" }}
{{ $src = . }}
+1 -1
View File
@@ -26,7 +26,7 @@ Calling this shortcode:
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>
<li>Title: {{ .Page.Title }}</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.
{{< code file="content/about.md" lang=md >}}
{{< code file=content/about.md lang=md >}}
{{</* myshortcode "Hello" "world" */>}}
{{< /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 1 }} → world
{{< /code >}}
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" */>}}
{{< /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.name }} → world
{{< /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.
{{< code file="content/welcome.md" lang=md >}}
{{< code file=content/welcome.md lang=md >}}
{{</* greeting dateFormat="Jan 2, 2006" */>}}
Welcome. Today is {{</* now */>}}.
{{</* /greeting */>}}
{{< /code >}}
{{< code file="layouts/shortcodes/greeting.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/greeting.html lang=go-html-template >}}
<div class="greeting">
{{ trim .Inner "\r\n" | .Page.RenderString }}
</div>
{{< /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" }}
{{- 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:
{{< code file="layouts/shortcodes/myshortcode.html" lang=go-html-template >}}
{{< code file=layouts/shortcodes/myshortcode.html lang=go-html-template >}}
{{ $greeting := "" }}
{{ with .Get "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.
{{< 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]:
@@ -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:
{{< code-toggle config="privacy" />}}
{{< code-toggle config=privacy />}}
For example, to disable usage of the built-in YouTube shortcode:
+2 -2
View File
@@ -37,7 +37,7 @@ data/
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
author: Victor Hugo
isbn: 978-0140443530
@@ -46,7 +46,7 @@ And these data files:
isbn: 978-0451419439
{{< /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
author: Alexis de Tocqueville
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:
{{< code file="layouts/_default/taxonomy.html" lang=go-html-template >}}
{{< code file=layouts/_default/taxonomy.html lang=go-html-template >}}
{{ $taxonomyObject := .Data.Terms }}
{{< /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:
{{< code file="layouts/404.html" >}}
{{< code file=layouts/404.html >}}
{{ define "main" }}
<main id="main">
<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.
{{< code file="layouts/_default/baseof.html" >}}
{{< code file=layouts/_default/baseof.html >}}
<!DOCTYPE html>
<html>
<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:
{{< code file="layouts/_default/list.html" >}}
{{< code file=layouts/_default/list.html >}}
{{ define "main" }}
<h1>Posts</h1>
{{ 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]:
{{< code file="layouts/_default/single.html" >}}
{{< code file=layouts/_default/single.html >}}
{{ define "title" }}
<!-- This will override the default value set in baseof.html; i.e., "{{ .Site.Title }}" in the original example-->
{{ .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:
{{< code-toggle file="jacopastorius" >}}
{{< code-toggle file=data/jazz/bass/jacopastorius >}}
discography = [
"1974 - Modern American Music … Period! The Criteria Sessions",
"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
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
"Short Description": "He is a **jolly good** fellow."
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].
{{< code file="layouts/index.html" >}}
{{< code file=layouts/index.html >}}
{{ define "main" }}
<main aria-role="main">
<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`:
{{< code file="layouts/partials/disqus.html" >}}
{{< code file=layouts/partials/disqus.html >}}
<div id="disqus_thread"></div>
<script type="text/javascript">
@@ -127,7 +127,7 @@ Hugo's Open Graph template is configured using a mix of configuration variables
series = "series"
{{</ code-toggle >}}
{{< code-toggle file="content/blog/my-post" >}}
{{< code-toggle file=content/blog/my-post.md >}}
title = "Post title"
description = "Text about this post"
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"
{{</ code-toggle >}}
{{< code-toggle file="content/blog/my-post" >}}
{{< code-toggle file=content/blog/my-post.md >}}
title = "Post title"
description = "Text about this post"
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.
{{< code file="tags-range-with-page-variable.html" >}}
{{< code file=tags-range-with-page-variable.html >}}
{{ $title := .Site.Title }}
<ul>
{{ 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:
{{< code file="range-through-tags-w-global.html" >}}
{{< code file=range-through-tags-w-global.html >}}
<ul>
{{ range .Params.tags }}
<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:
{{< code-toggle file="content/example.md" fm=true >}}
{{< code-toggle file=content/example.md fm=true >}}
title: Example
notoc: true
{{< /code-toggle >}}
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 }}
<aside>
<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:
{{< code file="layouts/partials/twitter.html" >}}
{{< code file=layouts/partials/twitter.html >}}
{{ with .Site.Params.twitteruser }}
<div>
<a href="https://twitter.com/{{ . }}" rel="author">
@@ -614,7 +614,7 @@ content/
└── event-3.md
```
{{< code-toggle file="content/events/event-1.md" >}}
{{< code-toggle file=content/events/event-1.md >}}
title = 'Event 1'
date = 2021-12-06T10:37:16-08:00
draft = false
@@ -624,7 +624,7 @@ end_date = 2021-12-05T11:00:00-08:00
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>
<ul>
{{ 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.
{{< code file="layouts/partials/future-events.html" >}}
{{< code file=layouts/partials/future-events.html >}}
<h2>Future Events</h2>
<ul>
{{ 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`:
{{< code file="content/posts/_index.md" >}}
{{< code file=content/posts/_index.md >}}
---
title: My Go Journey
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:
{{< code file="layouts/_default/list.html" >}}
{{< code file=layouts/_default/list.html >}}
{{ define "main" }}
<main>
<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:
{{< code file="example.com/posts/index.html" >}}
{{< code file=example.com/posts/index.html >}}
<!--top of your baseof code-->
<main>
<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:
{{< code file="example.com/quote/index.html" >}}
{{< code file=example.com/quote/index.html >}}
<!--baseof-->
<main>
<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`.
{{< code file="layouts/section/posts.html" >}}
{{< code file=layouts/section/posts.html >}}
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
<main>
@@ -180,7 +180,7 @@ This list template has been modified slightly from a template originally used in
### Taxonomy template
{{< code file="layouts/_default/taxonomy.html" >}}
{{< code file=layouts/_default/taxonomy.html >}}
{{ define "main" }}
<main>
<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.
{{< code file="layouts/partials/menu.html" copy=true >}}
{{< code file=layouts/partials/menu.html copy=true >}}
{{- $page := .page }}
{{- $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.
{{< code file="layouts/_default/single.html" >}}
{{< code file=layouts/_default/single.html >}}
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
{{ partial "menu.html" (dict "menuID" "footer" "page" .) }}
{{< /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.
{{< code file="layouts/_default/single.html" >}}
{{< code file=layouts/_default/single.html >}}
{{- range site.Menus.main }}
<a href="{{ .URL }}">
{{ .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.
{{< code file="layouts/partials/menu.html" >}}
{{< code file=layouts/partials/menu.html >}}
{{- range site.Menus.main }}
<a {{ with .Params.class -}} class="{{ . }}" {{ end -}} href="{{ .URL }}">
{{ .Name }}
+2 -2
View File
@@ -131,7 +131,7 @@ system.
Every `Page` has a [`Kind`][page_kinds] attribute, and the default Output
Formats are set based on that.
{{< code-toggle config="outputs" />}}
{{< code-toggle config=outputs />}}
### 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`:
{{< code-toggle file="content/example.md" fm=true >}}
{{< code-toggle file=content/example.md fm=true >}}
title: Example
outputs:
- 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/):
{{< code file="layouts/partials/header.html" >}}
{{< code file=layouts/partials/header.html >}}
<!DOCTYPE html>
<html class="no-js" lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<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/):
{{< code file="layouts/partials/footer.html" >}}
{{< code file=layouts/partials/footer.html >}}
<footer>
<div>
<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:
{{< 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>
{{< /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:
{{< code file="layouts/_default/_markup/render-image.html" >}}
{{< code file=layouts/_default/_markup/render-image.html >}}
<p class="md__image">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
</p>
@@ -127,7 +127,7 @@ Here is a code example for how the render-image.html template could look:
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 }}>
{{< /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
{{< code file="layouts/robots.txt" >}}
{{< code file=layouts/robots.txt >}}
User-agent: *
{{ range .Pages }}
Disallow: {{ .RelPermalink }}
+1 -1
View File
@@ -43,7 +43,7 @@ Examples:
## Example: creating a default section template
{{< code file="layouts/_default/section.html" >}}
{{< code file=layouts/_default/section.html >}}
{{ define "main" }}
<main>
{{ .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 */>}}
```
{{< code file="/layouts/shortcodes/year.html" >}}
{{< code file=layouts/shortcodes/year.html >}}
{{ now.Format "2006" }}
{{< /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`:
{{< code file="/layouts/shortcodes/youtube.html" >}}
{{< code file=layouts/shortcodes/youtube.html >}}
<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>
</div>
{{< /code >}}
{{< code file="youtube-embed.html" >}}
{{< code file=youtube-embed.html >}}
<div class="embed video-player">
<iframe class="youtube-player" type="text/html"
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:
{{< code file="content-image.md" >}}
{{< code file=content-image.md >}}
{{</* img src="/media/spf13.jpg" title="Steve Francia" */>}}
{{< /code >}}
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 -->
<figure {{ with .Get "class" }}class="{{ . }}"{{ 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:
{{< code file="img-output.html" >}}
{{< code file=img-output.html >}}
<figure>
<img src="/media/spf13.jpg" />
<figcaption>
@@ -255,7 +255,7 @@ Would be rendered as:
Would load the template found at `/layouts/shortcodes/vimeo.html`:
{{< code file="/layouts/shortcodes/vimeo.html" >}}
{{< code file=layouts/shortcodes/vimeo.html >}}
{{ if .IsNamedParams }}
<div class="{{ if .Get "class" }}{{ .Get "class" }}{{ else }}vimeo-container{{ end }}">
<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:
{{< code file="vimeo-iframes.html" >}}
{{< code file=vimeo-iframes.html >}}
<div class="vimeo-container">
<iframe src="https://player.vimeo.com/video/49718712" allowfullscreen></iframe>
</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.
{{< code file="highlight-example.md" >}}
{{< code file=highlight-example.md >}}
{{</* highlight html */>}}
<html>
<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:
{{< 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>
<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>
@@ -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:
{{< code file="layouts/shortcodes/gallery.html" >}}
{{< code file=layouts/shortcodes/gallery.html >}}
<div class="{{ .Get "class" }}">
{{ .Inner }}
</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`:
{{< code file="layouts/shortcodes/img.html" >}}
{{< code file=layouts/shortcodes/img.html >}}
{{- $src := .Get "src" -}}
{{- with .Parent -}}
<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.
{{< code file="layouts/posts/single.html" >}}
{{< code file=layouts/posts/single.html >}}
{{ define "main" }}
<section id="main">
<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.
{{< code-toggle config="sitemap" />}}
{{< code-toggle config=sitemap />}}
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).
@@ -42,7 +42,7 @@ priority
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'
[sitemap]
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.
{{< code-toggle file="content/example.md" fm=true >}}
{{< code-toggle file=content/example.md fm=true >}}
tags = [ "a", "b", "c" ]
tags_weight = 22
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.
{{< code file="layouts/partials/all-taxonomies.html" >}}
{{< code file=layouts/partials/all-taxonomies.html >}}
<ul>
{{ range $taxonomy, $terms := site.Taxonomies }}
<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):
{{< code file="links-to-all-tags.html" >}}
{{< code file=links-to-all-tags.html >}}
{{ $taxo := "tags" }}
<ul class="{{ $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:
{{< code file="layouts/_default/list.html" >}}
{{< code file=layouts/_default/list.html >}}
<main id="main">
<div>
<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.)
{{< code file="layouts/_default/summary.html" >}}
{{< code file=layouts/_default/summary.html >}}
<article class="post">
<header>
<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" }}`).
{{< code file="layouts/_default/li.html" >}}
{{< code file=layouts/_default/li.html >}}
<li>
<a href="{{ .Permalink }}">{{ .Title }}</a>
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>