all: Change shortcode usage and design to prevent invalid HTML

2026-08-24 15:28:54 +00:00 · 2025-02-17 00:38:33 -08:00
parent c41d766137
commit 0fca8ef251
174 changed files with 671 additions and 633 deletions
@@ -34,9 +34,9 @@ Some of these templates include settings to enhance privacy.
 ## Configuration
-{{% note %}}
+{{< note >}}
 These settings affect the behavior of some of Hugo's embedded templates. These settings may or may not affect the behavior of templates provided by third parties in their modules or themes.
-{{% /note %}}
+{{< /note >}}
 These are the default privacy settings for Hugo's embedded templates:
@@ -60,12 +60,12 @@ render
 [`RelPermalink`]: /methods/resource/relpermalink/
 [`Publish`]: /methods/resource/publish/
-{{% note %}}
+{{< note >}}
 Any page, regardless of its build options, will always be available by using the [`.Page.GetPage`] or [`.Site.GetPage`] method.
 [`.Page.GetPage`]: /methods/page/getpage/
 [`.Site.GetPage`]: /methods/site/getpage/
-{{% /note %}}
+{{< /note >}}
 ## Example -- headless page
@@ -91,9 +91,9 @@ Returns the `Site` to which the pages will be added.
 {{ .Site.Title }}
 {{< /code >}}
-{{% note %}}
+{{< note >}}
 Note that the `Site` returned isn't fully built when invoked from the content adapters; if you try to call methods that depends on pages, e.g. `.Site.Pages`, you will get an error saying "this method cannot be called before the site is fully initialized".
-{{% /note %}}
+{{< /note >}}
 ###### Store
@@ -141,11 +141,11 @@ Key|Description|Required
 `path`|The page's [logical path](g) relative to the content adapter. Do not include a leading slash or file extension.|:heavy_check_mark:
 `title`|The page title.|&nbsp;
-{{% note %}}
+{{< note >}}
 While `path` is the only required field, we recommend setting `title` as well.
 When setting the `path`, Hugo transforms the given string to a logical path. For example, setting `path` to `A B C` produces a logical path of `/section/a-b-c`.
-{{% /note %}}
+{{< /note >}}
 ## Resource map
@@ -160,11 +160,11 @@ Key|Description|Required
 `path`|The resources's [logical path](g) relative to the content adapter. Do not include a leading slash.|:heavy_check_mark:
 `title`|The resource title.|&nbsp;
-{{% note %}}
+{{< note >}}
 If the `content.value` is a string Hugo creates a new resource. If the `content.value` is a resource, Hugo obtains the value from the existing resource.
 When setting the `path`, Hugo transforms the given string to a logical path. For example, setting `path` to `A B C/cover.jpg` produces a logical path of `/section/a-b-c/cover.jpg`.
-{{% /note %}}
+{{< /note >}}
 ## Example
@@ -22,9 +22,9 @@ The `data` directory in the root of your project may contain one or more data fi
 Hugo also merges data directories from themes and modules into this single data structure, where the `data` directory in the root of your project takes precedence.
-{{% note %}}
+{{< note >}}
 Hugo reads the combined data structure into memory and keeps it there for the entire build. For data that is infrequently accessed, use global or page resources instead.
-{{% /note %}}
+{{< /note >}}
 Theme and module authors may wish to namespace their data files to prevent collisions. For example:
@@ -35,9 +35,9 @@ project/
        └── foo.json
 ```
-{{% note %}}
+{{< note >}}
 Do not place CSV files in the `data` directory. Access CSV files as page, global, or remote resources.
-{{% /note %}}
+{{< /note >}}
 See the documentation for the [`Data`] method on a `Site` object for details and examples.
@@ -45,11 +45,11 @@ Front matter fields may be [boolean](g), [integer](g), [float](g), [string](g),
 The most common front matter fields are `date`, `draft`, `title`, and `weight`, but you can specify metadata using any of fields below.
-{{% note %}}
+{{< note >}}
 The field names below are reserved. For example, you cannot create a custom field named `type`. Create custom fields under the `params` key. See the [parameters] section for details.
 [parameters]: #parameters
-{{% /note %}}
+{{< /note >}}
 ###### aliases
@@ -382,11 +382,11 @@ Use any combination of these keywords to target a set of pages:
 Any of the above can be omitted.
-{{% note %}}
+{{< note >}}
 With a multilingual site it may be more efficient to define the `cascade` values in your site configuration to avoid duplicating the `cascade` values on the section, taxonomy, or term page for each language.
 With a multilingual site, if you choose to define the `cascade` values in front matter, you must create a section, taxonomy, or term page for each language; the `lang` keyword is ignored.
-{{% /note %}}
+{{< /note >}}
 ### Example
@@ -104,17 +104,17 @@ Example 4: Skips rendering if there's problem accessing a remote resource.
 The `image` resource implements the  [`Process`],  [`Resize`], [`Fit`], [`Fill`], [`Crop`], [`Filter`], [`Colors`] and [`Exif`] methods.
-{{% note %}}
+{{< note >}}
 Metadata (EXIF, IPTC, XMP, etc.) is not preserved during image transformation. Use the `Exif` method with the _original_ image to extract EXIF metadata from JPEG, PNG, TIFF, and WebP images.
-{{% /note %}}
+{{< /note >}}
 ### Process
 {{< new-in 0.119.0 />}}
-{{% note %}}
+{{< note >}}
 The `Process` method is also available as a filter, which is more effective if you need to apply multiple filters to an image. See [Process filter](/functions/images/process).
-{{% /note %}}
+{{< /note >}}
 Process processes the image with the given specification. The specification can contain an optional action, one of `resize`, `crop`, `fit` or `fill`. This means that you can use this method instead of [`Resize`], [`Fit`], [`Fill`], or [`Crop`].
@@ -460,11 +460,11 @@ excludeFields
 includeFields
 : Regular expression matching the EXIF tags to include in the `.Tags` collection. Default is&nbsp;`""`. To include all available tags, set this value to&nbsp;`".*"`.
-  {{% note %}}
+  {{< note >}}
  To improve performance and decrease cache size, Hugo excludes the following tags: `ColorSpace`, `Contrast`, `Exif`, `Exposure[M|P|B]`, `Flash`, `GPS`, `JPEG`, `Metering`, `Resolution`, `Saturation`, `Sensing`, `Sharp`, and `WhiteBalance`.
  To control tag availability, change the `excludeFields` or `includeFields` settings as described above.
-  {{% /note %}}
+  {{< /note >}}
 ## Smart cropping of images
@@ -43,13 +43,13 @@ Equations and expressions can be displayed inline with other text, or as standal
 Whether an equation or expression appears inline, or as a block, depends on the delimiters that surround the mathematical markup. Delimiters are defined in pairs, where each pair consists of an opening and closing delimiter. The opening and closing delimiters may be the same, or different.
-{{% note %}}
+{{< note >}}
 You can configure Hugo to render mathematical markup on the client side using the MathJax or KaTeX display engine, or you can render the markup with the [`transform.ToMath`] function while building your site.
 The first approach is described below.
 [`transform.ToMath`]: /functions/transform/tomath/
-{{% /note %}}
+{{< /note >}}
 ## Setup
@@ -73,11 +73,11 @@ math = true
 The configuration above enables mathematical rendering on every page unless you set the `math` parameter to `false` in front matter. To enable mathematical rendering as needed, set the `math` parameter to `false` in your site configuration, and set the `math` parameter to `true` in front matter. Use this parameter in your base template as shown in [Step 3].
-{{% note %}}
+{{< note >}}
 The configuration above precludes the use of the `$...$` delimiter pair for inline equations. Although you can add this delimiter pair to the configuration and JavaScript, you will need to double-escape the `$` symbol when used outside of math contexts to avoid unintended formatting.
 See the [inline delimiters](#inline-delimiters) section for details.
-{{% /note %}}
+{{< /note >}}
 To disable passthrough of inline snippets, omit the `inline` key from the configuration:
@@ -178,19 +178,19 @@ If you add the `$...$` delimiter pair to your configuration and JavaScript, you
 A \\$5 bill _saved_ is a \\$5 bill _earned_.
 ```
-{{% note %}}
+{{< note >}}
 If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation](https://github.com/KaTeX/KaTeX/issues/437).
-{{% /note %}}
+{{< /note >}}
 ## Engines
 MathJax and KaTeX are open-source JavaScript display engines. Both engines are fast, but at the time of this writing MathJax v3.2.2 is slightly faster than KaTeX v0.16.11.
-{{% note %}}
+{{< note >}}
 If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation](https://github.com/KaTeX/KaTeX/issues/437).
 See the [inline delimiters](#inline-delimiters) section for details.
-{{% /note %}}
+{{< /note >}}
 To use KaTeX instead of MathJax, replace the partial template from [Step 2] with this:
@@ -28,9 +28,9 @@ There are three ways to define menu entries:
 1. In front matter
 1. In site configuration
-{{% note %}}
+{{< note >}}
 Although you can use these methods in combination when defining a menu, the menu will be easier to conceptualize and maintain if you use one method throughout the site.
-{{% /note %}}
+{{< /note >}}
 ## Define automatically
@@ -62,9 +62,9 @@ menus = ['main','footer']
 Access the entry with `site.Menus.main` and `site.Menus.footer` in your templates. See [menu templates] for details.
-{{% note %}}
+{{< note >}}
 The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`.
-{{% /note %}}
+{{< /note >}}
 ### Properties {#properties-front-matter}
@@ -149,17 +149,17 @@ weight = 20
 This creates a menu structure that you can access with `site.Menus.footer` in your templates. See [menu templates] for details.
-{{% note %}}
+{{< note >}}
 The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`.
-{{% /note %}}
+{{< /note >}}
 ### Properties {#properties-site-configuration}
-{{% note %}}
+{{< note >}}
 The [properties available to entries defined in front matter] are also available to entries defined in site configuration.
 [properties available to entries defined in front matter]: /content-management/menus/#properties-front-matter
-{{% /note %}}
+{{< /note >}}
 Each menu entry defined in site configuration requires two or more properties:
@@ -30,9 +30,9 @@ Artificial languages with private use subtags as defined in [RFC 5646 § 2.2.7]
 - `hugolang`
-{{% note %}}
+{{< note >}}
 Private use subtags must not exceed 8 alphanumeric characters.
-{{% /note %}}
+{{< /note >}}
 [RFC 5646]: https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
 [RFC 5646 § 2.2.7]: https://datatracker.ietf.org/doc/html/rfc5646#section-2.2.7
@@ -174,9 +174,9 @@ Note that you cannot disable the default content language.
 Hugo supports multiple languages in a multihost configuration. This means you can configure a `baseURL` per `language`.
-{{% note %}}
+{{< note >}}
 If a `baseURL` is set on the `language` level, then all languages must have one and they must all be different.
-{{% /note %}}
+{{< /note >}}
 Example:
@@ -232,9 +232,9 @@ Their language is __assigned__ according to the language code added as a __suffi
 By having the same **path and base file name**, the content pieces are __linked__ together as translated pages.
-{{% note %}}
+{{< note >}}
 If a file has no language code, it will be assigned the default language.
-{{% /note %}}
+{{< /note >}}
 ### Translation by content directory
@@ -314,9 +314,9 @@ If, across the linked bundles, two or more files share the same basename, only o
 * File from current language bundle, if present.
 * First file found across bundles by order of language `Weight`.
-{{% note %}}
+{{< note >}}
 Page Bundle resources follow the same language assignment logic as content files, both by file name (`image.jpg`, `image.fr.jpg`) and by directory (`english/about/header.jpg`, `french/about/header.jpg`).
-{{%/ note %}}
+{{< /note >}}
 ## Reference translated content
@@ -588,9 +588,9 @@ If a string does not have a translation for the current language, Hugo will use
 While translating a Hugo website, it can be handy to have a visual indicator of missing translations. The [`enableMissingTranslationPlaceholders` configuration option][config] will flag all untranslated strings with the placeholder `[i18n] identifier`, where `identifier` is the id of the missing translation.
-{{% note %}}
+{{< note >}}
 Hugo will generate your website with these missing translation placeholders. It might not be suitable for production environments.
-{{% /note %}}
+{{< /note >}}
 For merging of content from other languages (i.e. missing content translations), see [lang.Merge].
@@ -73,9 +73,9 @@ The following demonstrates the relationships between your content organization a
 `_index.md` has a special role in Hugo. It allows you to add front matter and content to `home`, `section`, `taxonomy`, and `term` pages. 
-{{% note %}}
+{{< note >}}
 **Tip:** You can get a reference to the content and metadata in `_index.md` using the [`.Site.GetPage` function](/methods/page/getpage).
-{{% /note %}}
+{{< /note >}}
 You can create one `_index.md` for your home page and one in each of your content sections, taxonomies, and terms. The following shows typical placement of an `_index.md` that would contain content and front matter for a `posts` section list page on a Hugo website:
@@ -35,9 +35,9 @@ leaf bundle
 branch bundle
 : A _branch bundle_ is a directory that contains an&nbsp;`_index.md`&nbsp;file and zero or more resources. Analogous to a physical branch, a branch bundle may have descendants including leaf bundles and other branch bundles. Top level directories with or without `_index.md`&nbsp;files are also branch bundles. This includes the home page.
-{{% note %}}
+{{< note >}}
 In the definitions above and the examples below, the extension of the index file depends on the [content format](g). For example, use `index.md` for Markdown content, `index.html` for HTML content, `index.adoc` for AsciiDoc content, etc.
-{{% /note %}}
+{{< /note >}}
 ## Comparison
@@ -108,9 +108,9 @@ my-other-post
 another-leaf-bundle
 : This leaf bundle does not contain any page resources.
-{{% note %}}
+{{< note >}}
 Create leaf bundles at any depth within the `content` directory, but a leaf bundle may not contain another bundle. Leaf bundles do not have descendants.
-{{% /note %}}
+{{< /note >}}
 ## Branch bundles
@@ -142,9 +142,9 @@ branch-bundle-1
 branch-bundle-2
 : This branch bundle contains an index file and a leaf bundle.
-{{% note %}}
+{{< note >}}
 Create branch bundles at any depth within the `content` directory. Branch bundles may have descendants.
-{{% /note %}}
+{{< /note >}}
 ## Headless bundles
@@ -120,16 +120,16 @@ List the titles in the data file, and throw an error if the file does not exist.
 The page resources' metadata is managed from the corresponding page's front matter with an array/table parameter named `resources`. You can batch assign values using [wildcards](https://tldp.org/LDP/GNU-Linux-Tools-Summary/html/x11655.htm).
-{{% note %}}
+{{< note >}}
 Resources of type `page` get `Title` etc. from their own front matter.
-{{% /note %}}
+{{< /note >}}
 name
 : (`string`) Sets the value returned in `Name`.
-{{% note %}}
+{{< note >}}
 The methods `Match`, `Get` and `GetMatch` use `Name` to match the resources.
-{{% /note %}}
+{{< /note >}}
 title
 : (`string`) Sets the value returned in `Title`
@@ -173,9 +173,9 @@ From the example above:
 - All `PDF` files will get a new `Name`. The `name` parameter contains a special placeholder [`:counter`](#the-counter-placeholder-in-name-and-title), so the `Name` will be `pdf-file-1`, `pdf-file-2`, `pdf-file-3`.
 - Every docx in the bundle will receive the `word` icon.
-{{% note %}}
+{{< note >}}
 The order matters; only the first set values of the `title`, `name` and `params` keys will be used. Consecutive parameters will be set only for the ones not already set. In the above example, `.Params.icon` is first set to `"photo"` in `src = "documents/photo_specs.pdf"`. So that would not get overridden to `"pdf"` by the later set `src = "**.pdf"` rule.
-{{% /note %}}
+{{< /note >}}
 ### The `:counter` placeholder in `name` and `title`
@@ -210,11 +210,11 @@ the `Name` and `Title` will be assigned to the resource files as follows:
 By default, with a multilingual single-host site, Hugo does not duplicate shared page resources when building the site.
-{{% note %}}
+{{< note >}}
 This behavior is limited to Markdown content. Shared page resources for other [content formats] are copied into each language bundle.
 [content formats]: /content-management/formats/
-{{% /note %}}
+{{< /note >}}
 Consider this site configuration:
@@ -289,7 +289,7 @@ public/
 This approach reduces build times, storage requirements, bandwidth consumption, and deployment times, ultimately reducing cost.
-{{% note %}}
+{{< note >}}
 To resolve Markdown link and image destinations to the correct location, you must use link and image render hooks that capture the page resource with the [`Resources.Get`] method, and then invoke its [`RelPermalink`] method.
 By default, with multilingual single-host sites, Hugo enables its [embedded link render hook] and [embedded image render hook] to resolve Markdown link and image destinations.
@@ -300,7 +300,7 @@ You may override the embedded render hooks as needed, provided they capture the
 [embedded image render hook]: /render-hooks/images/#default
 [`Resources.Get`]: /methods/page/resources/#get
 [`RelPermalink`]: /methods/resource/relpermalink/
-{{% /note %}}
+{{< /note >}}
 Although duplicating shared page resources is inefficient, you can enable this feature in your site configuration if desired:
@@ -58,9 +58,9 @@ A fictional example using all of the above options:
 }}
 ```
-{{% note %}}
+{{< note >}}
 We improved and simplified this feature in Hugo 0.111.0. Before this we had 3 different methods: `Related`, `RelatedTo` and `RelatedIndices`. Now we have only one method: `Related`. The old methods are still available but deprecated. Also see [this blog article](https://regisphilibert.com/blog/2018/04/hugo-optmized-relashionships-with-related-content/) for a great explanation of more advanced usage of this feature.
-{{% /note %}}
+{{< /note >}}
 ## Index content headings in related content
@@ -117,9 +117,9 @@ Without any `related` configuration set on the project, Hugo's Related Content m
 Custom configuration should be set using the same syntax.
-{{% note %}}
+{{< note >}}
 If you add a `related` configuration section, you need to add a complete configuration. It is not possible to just set, say, `includeNewer` and use the rest  from the Hugo defaults.
-{{% /note %}}
+{{< /note >}}
 ### Top level configuration options
@@ -17,9 +17,9 @@ aliases: [/content/sections/]
 A section is a top-level content directory, or any content directory with an&nbsp;`_index.md`&nbsp;file. A content directory with an&nbsp;`_index.md`&nbsp;file is also known as a [branch bundle](g). Section templates receive one or more page [collections](g) in [context](g).
-{{% note %}}
+{{< note >}}
 Although top-level directories without `_index.md`&nbsp;files are sections, we recommend creating `_index.md`&nbsp;files in _all_ sections.
-{{% /note %}}
+{{< /note >}}
 A typical site consists of one or more sections. For example:
@@ -81,9 +81,9 @@ Inline shortcodes process their inner content within the same context as regular
 [shortcode method]: /templates/shortcode/#methods
-{{% note %}}
+{{< note >}}
 You cannot [nest](#nesting) inline shortcodes.
-{{% /note %}}
+{{< /note >}}
 Learn more about creating shortcodes in the [shortcode templates] section.
@@ -104,9 +104,9 @@ Custom taxonomies other than the [defaults](#default-taxonomies) must be defined
 ### Example: adding a custom taxonomy named "series"
-{{% note %}}
+{{< note >}}
 While adding custom taxonomies, you need to put in the default taxonomies too, _if you want to keep them_.
-{{% /note %}}
+{{< /note >}}
 {{< code-toggle file=hugo >}}
 [taxonomies]
@@ -126,9 +126,9 @@ If you want to have just the default `tags` taxonomy, and remove the `categories
 If you want to disable all taxonomies altogether, see the use of `disableKinds` in [Hugo Taxonomy Defaults](#default-taxonomies).
-{{% note %}}
+{{< note >}}
 You can add content and front matter to your taxonomy list and taxonomy terms pages. See [Content Organization](/content-management/organization/) for more information on how to add an `_index.md` for this purpose.
-{{% /note %}}
+{{< /note >}}
 ## Assign terms to content
@@ -43,14 +43,14 @@ https://example.org/posts/my-first-post/
 Set the `url` in front matter to override the entire path. Use this with either regular pages or section pages.
-{{% note %}}
+{{< note >}}
 Hugo does not sanitize the `url` front matter field, allowing you to generate:
 - File paths that contain characters reserved by the operating system. For example, file paths on Windows may not contain any of these [reserved characters]. Hugo throws an error if a file path includes a character reserved by the current operating system.
 - URLs that contain disallowed characters. For example, the less than sign (`<`) is not allowed in a URL.
 [reserved characters]: https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file#naming-conventions
-{{% /note %}}
+{{< /note >}}
 If you set both `slug` and `url` in front matter, the `url` value takes precedence.
@@ -355,11 +355,11 @@ Hugo provides two mutually exclusive configuration options to alter URLs _after_
 #### Canonical URLs
-{{% note %}}
+{{< note >}}
 This is a legacy configuration option, superseded by template functions and Markdown render hooks, and will likely be [removed in a future release].
 [removed in a future release]: https://github.com/gohugoio/hugo/issues/4733
-{{% /note %}}
+{{< /note >}}
 If enabled, Hugo performs a search and replace _after_ it renders the page. It searches for site-relative URLs (those with a leading slash) associated with `action`, `href`, `src`, `srcset`, and `url` attributes. It then prepends the `baseURL` to create absolute URLs.
@@ -378,9 +378,9 @@ canonifyURLs = true
 #### Relative URLs
-{{% note %}}
+{{< note >}}
 Do not enable this option unless you are creating a serverless site, navigable via the file system.
-{{% /note %}}
+{{< /note >}}
 If enabled, Hugo performs a search and replace _after_ it renders the page. It searches for site-relative URLs (those with a leading slash) associated with `action`, `href`, `src`, `srcset`, and `url` attributes. It then transforms the URL to be relative to the current page.
@@ -58,15 +58,15 @@ To build the extended or extended/deploy edition from source you must:
 [Go documentation]: https://go.dev/doc/code#Command
 [Go]: https://go.dev/doc/install
-{{% note %}}
+{{< note >}}
 See these [detailed instructions](https://discourse.gohugo.io/t/41370) to install GCC on Windows.
-{{% /note %}}
+{{< /note >}}
 ## GitHub workflow
-{{% note %}}
+{{< note >}}
 This section assumes that you have a working knowledge of Go, Git and GitHub, and are comfortable working on the command line.
-{{% /note %}}
+{{< /note >}}
 Use this workflow to create and submit pull requests.
@@ -111,9 +111,9 @@ Best → Be cautious when deleting files.
 No → Hugo is extremely fast.\
 Yes → Hugo is fast.
-{{% note %}}
+{{< note >}}
 "It's an adverb, Sam. It's a lazy tool of a weak mind." (Outbreak, 1995).
-{{% /note %}}
+{{< /note >}}
 ### Level 6 headings
@@ -305,18 +305,18 @@ draft: false
 Use the `deprecated-in` shortcode to indicate that a feature is deprecated:
 ```text
-{{%/* deprecated-in 0.127.0 */%}}
+{{</* deprecated-in 0.144.0 */>}}
 Use [`hugo.IsServer`] instead.
 [`hugo.IsServer`]: /functions/hugo/isserver/
-{{%/* /deprecated-in */%}}
+{{</* /deprecated-in */>}}
 ```
-{{% deprecated-in 0.127.0 %}}
+{{< deprecated-in 0.144.0 >}}
 Use [`hugo.IsServer`] instead.
 [`hugo.IsServer`]: /functions/hugo/isserver/
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
 ### eturl
@@ -362,21 +362,21 @@ Use the `new-in` shortcode to indicate a new feature:
 ### note
-Use the `note` shortcode with `{{%/* */%}}` delimiters to call attention to important content:
+Use the `note` shortcode to call attention to important content:
 ```text
-{{%/* note */%}}
+{{</* note */>}}
 Use the [`math.Mod`] function to control...
 [`math.Mod`]: /functions/math/mod/
-{{%/* /note */%}}
+{{</* /note */>}}
 ```
-{{% note %}}
+{{< note >}}
 Use the [`math.Mod`] function to control...
 [`math.Mod`]: /functions/math/mod/
-{{% /note %}}
+{{< /note >}}
 ## New features
@@ -393,11 +393,11 @@ The "new in" label will be hidden if the specified version is older than a prede
 Use the "deprecated-in" shortcode to indicate that a feature is deprecated:
 {{< code file=content/something/foo.md >}}
-{{%/* deprecated-in 0.120.0 */%}}
+{{</* deprecated-in 0.144.0 */>}}
 Use [`hugo.IsServer`] instead.
 [`hugo.IsServer`]: /functions/hugo/isserver/
-{{%/* /deprecated-in */%}}
+{{</* /deprecated-in */>}}
 {{< /code >}}
 When deprecating a function or method, add something like this to front matter:
@@ -410,9 +410,9 @@ Set the `expiryDate` to two years from the date of deprecation, and add a brief
 ## GitHub workflow
-{{% note %}}
+{{< note >}}
 This section assumes that you have a working knowledge of Git and GitHub, and are comfortable working on the command line.
-{{% /note %}}
+{{< /note >}}
 Use this workflow to create and submit pull requests.
@@ -11,9 +11,9 @@ codeFences
 guessSyntax
 : (`bool`) Whether to automatically detect the language if the `LANG` argument is blank or set to a language for which there is no corresponding [lexer](g). Falls back to a plain text lexer if unable to automatically detect the language. Default is `false`.
-{{% note %}}
+{{< note >}}
 The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
-{{% /note %}}
+{{< /note >}}
 hl_Lines
 : (`string`) A space-delimited list of lines to emphasize within the highlighted code. To emphasize lines 2, 3, 4, and 7, set this value to `2-4 7`. This option is independent of the `lineNoStart` option.
@@ -48,7 +48,7 @@ wrapperClass
 {{< new-in 0.140.2 />}}
 : (`string`) The class or classes to use for the outermost element of the highlighted code. Default is `highlight`.
-{{% note %}}
+{{< note >}}
 Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
 lineNos=inline
@@ -56,4 +56,4 @@ lineNos=inline
 lineNos=table
 : equivalent to `lineNos=true` and `lineNumbersInTable=true`
-{{% /note %}}
+{{< /note >}}
@@ -2,9 +2,9 @@
 _comment: Do not remove front matter.
 ---
-{{% note %}}
+{{< note >}}
 Localization of dates, currencies, numbers, and percentages is performed by the [gohugoio/locales] package. The language tag of the current site must match one of the listed locales.
 [gohugoio/locales]: https://github.com/gohugoio/locales
-{{% /note %}}
+{{< /note >}}
@@ -46,8 +46,8 @@ With a hexadecimal (base 16) input:
 {{ int "0x11" }} → 17 (int)
 ```
-{{% note %}}
+{{< note >}}
 Values with a leading zero are octal (base 8). When casting a string representation of a decimal (base 10) number, remove leading zeros:
 `{{ strings.TrimLeft "0" "0011" | int }} → 11`
-{{% /note %}}
+{{< /note >}}
@@ -24,11 +24,11 @@ To find the elements within `$c3` that do not exist in `$c1` or `$c2`:
 {{ complement $c1 $c2 $c3 }} → [1 2]
 ```
-{{% note %}}
+{{< note >}}
 Make your code simpler to understand by using a [chained pipeline]:
 [chained pipeline]: https://pkg.go.dev/text/template#hdr-Pipelines
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ $c3 | complement $c1 $c2 }} → [1 2]
@@ -55,11 +55,11 @@ To list everything except blog articles (`blog`) and frequently asked questions
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 Although the example above demonstrates the `complement` function, you could use the [`where`] function as well:
 [`where`]: /functions/collections/where/
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ range where site.RegularPages "Type" "not in" (slice "blog" "faqs") }}
@@ -22,9 +22,9 @@ Delimit a slice:
 Delimit a map:
-{{% note %}}
+{{< note >}}
 The `delimit` function sorts maps by key, returning the values.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ $m := dict "b" 2 "a" 1 "c" 3 }}
@@ -40,6 +40,6 @@ But if the value of `showHeroImage` is `false`, we can't use either `if` or `wit
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 When using the `isset` function you must reference the key using lower case. See the previous example.
-{{% /note %}}
+{{< /note >}}
@@ -64,6 +64,6 @@ Example 4
 {{ $merged.z.a }} → huey
 ```
-{{% note %}}
+{{< note >}}
 Regardless of depth, merging only applies to maps. For slices, use [append](/functions/collections/append).
-{{% /note %}}
+{{< /note >}}
@@ -31,6 +31,6 @@ A contrived example of iterating over a sequence of integers:
 {{ $product }} → 24
 ```
-{{% note %}}
+{{< note >}}
 The slice created by the `seq` function is limited to 2000 elements.
-{{% /note %}}
+{{< /note >}}
@@ -65,9 +65,9 @@ firstName = "Jean"
 lastName  = "Valjean"
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 When sorting maps, the `KEY` argument must be lowercase.
-{{% /note %}}
+{{< /note >}}
 ### Ascending order {#map-ascending-order}
@@ -141,11 +141,11 @@ After sorting:
 ## Sort a page collection
-{{% note %}}
+{{< note >}}
 Although you can use the `sort` function to sort a page collection, Hugo provides [sorting and grouping methods] as well.
 [sorting and grouping methods]: /methods/pages/
-{{% /note %}}
+{{< /note >}}
 In this contrived example, sort the site's regular pages by `.Type` in descending order:
@@ -90,9 +90,9 @@ Use any of the following logical operators:
 `like` {{< new-in 0.116.0 />}}
 : (`bool`) Reports whether the given field value matches the regular expression specified in `VALUE`. Use the `like` operator to compare `string` values. The `like` operator returns `false` when comparing other data types to the regular expression.
-{{% note %}}
+{{< note >}}
 The examples below perform comparisons within a page collection, but the same comparisons are applicable to a slice of maps.
-{{% /note %}}
+{{< /note >}}
 ## String comparison
@@ -178,9 +178,9 @@ To return a collection of pages where the "author" page parameter begins with ei
 {{% include "functions/_common/regular-expressions.md" %}}
-{{% note %}}
+{{< note >}}
 Use the `like` operator to compare string values. Comparing other data types will result in an empty collection.
-{{% /note %}}
+{{< /note >}}
 ## Date comparison
@@ -205,9 +205,9 @@ For example, to return a collection of pages that were created before the curren
 With custom front matter dates, the comparison depends on the front matter data format (TOML, YAML, or JSON).
-{{% note %}}
+{{< note >}}
 Using TOML for pages with custom front matter dates enables precise date comparisons.
-{{% /note %}}
+{{< /note >}}
 With TOML, date values are first-class citizens. TOML has a date data type while JSON and YAML do not. If you quote a TOML date, it is a string. If you do not quote a TOML date value, it is [`time.Time`] value, enabling precise comparisons.
@@ -14,7 +14,7 @@ aliases: [/functions/default]
 The `default` function returns the second argument if set, else the first argument.
-{{% note %}}
+{{< note >}}
 When the second argument is the boolean `false` value, the `default` function returns `false`. All _other_ falsy values are considered unset.
 {{% include "functions/go-template/_common/truthy-falsy.md" %}}
@@ -22,7 +22,7 @@ When the second argument is the boolean `false` value, the `default` function re
 To set a default value based on truthiness, use the [`or`] operator instead.
 [`or`]: /functions/go-template/or/
-{{% /note %}}
+{{< /note >}}
 The `default` function returns the second argument if set:
@@ -11,8 +11,8 @@ action:
 expiryDate: 2026-07-31 # deprecated 2024-07-31 in v0.129.0
 ---
-{{% deprecated-in 0.129.0 %}}
+{{< deprecated-in 0.129.0 >}}
 Use [`hash.FNV32a`] instead.
 [`hash.FNV32a`]: /functions/hash/FNV32a/
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
@@ -50,9 +50,9 @@ module.exports = {
 };
 {{< /code >}}
-{{% note %}}
+{{< note >}}
 {{% include "functions/resources/_common/postcss-windows-warning.md" %}}
-{{% /note %}}
+{{< /note >}}
 Step 4
 : Place your CSS file within the `assets/css` directory.
@@ -12,14 +12,14 @@ toc: true
 expiryDate: 2026-02-19 # deprecated 2024-02-19 in v0.123.0
 ---
-{{% deprecated-in 0.123.0 %}}
+{{< deprecated-in 0.123.0 >}}
 Instead, use [`transform.Unmarshal`] with a [global resource](g), [page resource](g), or [remote resource](g).
 See the [remote data example].
 [`transform.Unmarshal`]: /functions/transform/unmarshal/
 [remote data example]: /functions/resources/getremote/#remote-data
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
 Given the following directory structure:
@@ -36,11 +36,11 @@ Access the data with either of the following:
 {{ $data := getCSV "," "other-files/" "pets.csv" }}
 ```
-{{% note %}}
+{{< note >}}
 When working with local data, the file path is relative to the working directory.
 You must not place CSV files in the project's `data` directory.
-{{% /note %}}
+{{< /note >}}
 Access remote data with either of the following:
@@ -12,14 +12,14 @@ toc: true
 expiryDate: 2026-02-19 # deprecated 2024-02-19 in v0.123.0
 ---
-{{% deprecated-in 0.123.0 %}}
+{{< deprecated-in 0.123.0 >}}
 Instead, use [`transform.Unmarshal`] with a [global resource](g), [page resource](g), or [remote resource](g).
 See the [remote data example].
 [`transform.Unmarshal`]: /functions/transform/unmarshal/
 [remote data example]: /functions/resources/getremote/#remote-data
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
 Given the following directory structure:
@@ -36,9 +36,9 @@ Access the data with either of the following:
 {{ $data := getJSON "other-files/" "books.json" }}
 ```
-{{% note %}}
+{{< note >}}
 When working with local data, the file path is relative to the working directory.
-{{% /note %}}
+{{< /note >}}
 Access remote data with either of the following:
@@ -29,6 +29,6 @@ action:
 ]
 ```
-{{% note %}}
+{{< note >}}
 Output from this function may change from one release to the next. Use for debugging only.
-{{% /note %}}
+{{< /note >}}
@@ -27,9 +27,9 @@ When a `Page` object is not in context, you can use the global `page` function:
 {{ page.Params.foo }}
 ```
-{{% note %}}
+{{< note >}}
 Do not use the global `page` function in shortcodes, partials called by shortcodes, or cached partials. See [warnings](#warnings) below.
-{{% /note %}}
+{{< /note >}}
 ## Explanation
@@ -27,6 +27,6 @@ When the `Site` object is in context you can use the `Site` property:
 {{ $.Site.Params.foo }}
 ```
-{{% note %}}
+{{< note >}}
 To simplify your templates, use the global `site` function regardless of whether the `Site` object is in context.
-{{% /note %}}
+{{< /note >}}
@@ -59,9 +59,9 @@ Hugo will throw an error:
 The error occurs because we are trying to use the `.Title` method on an integer instead of a `Page` object. Within the `range` block, if we want to render the page title, we need to get the context passed into the template.
-{{% note %}}
+{{< note >}}
 Use the `$` to get the context passed into the template.
-{{% /note %}}
+{{< /note >}}
 This template will render the page title three times:
@@ -71,9 +71,9 @@ This template will render the page title three times:
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 Gaining a thorough understanding of context is critical for anyone writing template code.
-{{% /note %}}
+{{< /note >}}
 [`seq`]: /functions/collections/seq/
@@ -19,9 +19,9 @@ The returned value may be of any data type including, but not limited to, [`bool
 A `return` statement without a value returns an empty string of type `template.HTML`.
-{{% note %}}
+{{< note >}}
 Unlike `return` statements in other languages, Hugo executes the first occurrence of the `return` statement regardless of its position within logical blocks. See [usage](#usage) notes below.
-{{% /note %}}
+{{< /note >}}
 ## Example
@@ -70,9 +70,9 @@ See additional examples in the [partial templates] section.
 ## Usage
-{{% note %}}
+{{< note >}}
 Unlike `return` statements in other languages, Hugo executes the first occurrence of the `return` statement regardless of its position within logical blocks.
-{{% /note %}}
+{{< /note >}}
 A partial that returns a value must contain only one `return` statement, placed at the end of the template.
@@ -88,9 +88,9 @@ For example:
 {{ return $result }}
 {{< /code >}}
-{{% note %}}
+{{< note >}}
 The construct below is incorrect; it contains more than one `return` statement.
-{{% /note %}}
+{{< /note >}}
 {{< code file="layouts/partials/do-not-do-this.html" >}}
 {{ if math.ModBool . 2 }}
@@ -108,6 +108,6 @@ In the above, note that the [context](g) within the last conditional block is th
 [template context]: /templates/introduction/#template-context
-{{% note %}}
+{{< note >}}
 Hugo does not classify an HTTP response with status code 404 as an error. In this case `resources.GetRemote` returns nil.
-{{% /note %}}
+{{< /note >}}
@@ -78,9 +78,9 @@ Hugo will throw an error:
 The error occurs because we are trying to use the `.Title` method on an integer instead of a `Page` object. Inside of the `with` block, if we want to render the page title, we need to get the context passed into the template.
-{{% note %}}
+{{< note >}}
 Use the `$` to get the context passed into the template.
-{{% /note %}}
+{{< /note >}}
 This template will render the page title as desired:
@@ -90,9 +90,9 @@ This template will render the page title as desired:
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 Gaining a thorough understanding of context is critical for anyone writing template code.
-{{% /note %}}
+{{< /note >}}
 {{% include "functions/go-template/_common/text-template.md" %}}
@@ -25,9 +25,9 @@ Create the filter:
 {{% include "functions/images/_common/apply-image-filter.md" %}}
-{{% note %}}
+{{< note >}}
 When using with other filters, specify `images.AutoOrient` first.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ $filters := slice
@@ -24,10 +24,10 @@ See [image processing] for an overview of Hugo's image pipeline.
 Supported image formats include GIF, JPEG, PNG, TIFF, and WebP.
-{{% note %}}
+{{< note >}}
 This is a legacy function, superseded by the [`Width`] and [`Height`] methods for [global resources](g), [page resources](g), and [remote resources](g). See the [image processing] section for details.
 [`Width`]: /methods/resource/width/
 [`Height`]: /methods/resource/height/
 [image processing]: /content-management/image-processing/
-{{% /note %}}
+{{< /note >}}
@@ -17,9 +17,9 @@ toc: true
 The `images.Mask` filter applies a mask to an image. Black pixels in the mask make the corresponding areas of the base image transparent, while white pixels keep them opaque. Color images are converted to grayscale for masking purposes. The mask is automatically resized to match the dimensions of the base image.
-{{% note %}}
+{{< note >}}
 Of the formats supported by Hugo's imaging pipelie, only PNG and WebP have an alpha channel to support transparency. If your source image has a different format and you require transparent masked areas, convert it to either PNG or WebP as shown in the example below.
-{{% /note %}}
+{{< /note >}}
 When applying a mask to a non-transparent image format such as JPEG, the masked areas will be filled with the color specified by the `bgColor` parameter in your [site configuration]. You can override that color with a `Process` image filter:
@@ -116,9 +116,9 @@ If the QR code will be printed, use the default `scale` value of `4` pixels per
 Avoid using Hugo's image processing methods to resize QR codes. Resizing can introduce blurring due to anti-aliasing when a QR code module occupies a fractional number of pixels.
-{{% note %}}
+{{< note >}}
 Always test the rendered QR code both on-screen and in print.
-{{% /note %}}
+{{< /note >}}
 ## Shortcode
@@ -16,9 +16,9 @@ weight: 20
 toc: true
 ---
-{{% note %}}
+{{< note >}}
 For a runnable example of this feature, see [this test and demo repo](https://github.com/bep/hugojsbatchdemo/).
-{{% /note %}}
+{{< /note >}}
 The Batch `ID` is used to create the base directory for this batch. Forward slashes are allowed. `js.Batch` returns an object with an API with this structure:
@@ -250,13 +250,13 @@ Eeach [`Resource`] will be of media type `application/javascript` or `text/css`.
 In a template you would typically handle one group with a given `ID` (e.g. scripts for the current section). Because of the concurrent build, this needs to be done in a [`templates.Defer`] block:
-{{% note %}}
+{{< note >}}
 The [`templates.Defer`] acts as a synchronisation point to handle scripts added concurrently by different templates. If you have a setup with where the batch is created in one go (in one template), you don't need it.
 See [this discussion](https://discourse.gohugo.io/t/js-batch-with-simple-global-script/53002/5?u=bep) for more.
 [`templates.Defer`]: /functions/templates/defer/
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ $group := .group }}
@@ -109,9 +109,9 @@ Any imports in a file outside `assets` or that does not resolve to a component i
 The start directory for resolving npm packages (aka. packages that live inside a `node_modules` directory) is always the main project directory.
-{{% note %}}
+{{< note >}}
 If you're developing a theme/component that is supposed to be imported and depends on dependencies inside `package.json`, we recommend reading about [hugo mod npm pack](/commands/hugo_mod_npm_pack/), a tool to consolidate all the npm dependencies in a project.
-{{% /note %}}
+{{< /note >}}
 ## Examples
@@ -20,14 +20,14 @@ If the key is not found in the translation table for the current language, the `
 If the key is not found in the translation table for the `defaultContentLanguage`, the `lang.Translate` function returns an empty string.
-{{% note %}}
+{{< note >}}
 To list missing and fallback translations, use the `--printI18nWarnings` flag when building your site.
 To render placeholders for missing and fallback translations, set 
 [`enableMissingTranslationPlaceholders`] to `true` in your site configuration.
 [`enableMissingTranslationPlaceholders`]: /getting-started/configuration/#enablemissingtranslationplaceholders
-{{% /note %}}
+{{< /note >}}
 ## Translation tables
@@ -76,9 +76,9 @@ privacy = 'prywatność'
 security = 'bezpieczeństwo'
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 The examples below use the `T` alias for brevity.
-{{% /note %}}
+{{< /note >}}
 When viewing the English language site:
@@ -136,9 +136,9 @@ many = '{{ . }} miesięcy'
 other = '{{ . }} miesiąca'
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 The examples below use the `T` alias for brevity.
-{{% /note %}}
+{{< /note >}}
 When viewing the English language site:
@@ -185,9 +185,9 @@ Template code:
 {{ T "age" (dict "name" "John" "count" 3) }} → John is 3 years old.
 ```
-{{% note %}}
+{{< note >}}
 Translation tables may contain both simple translations and translations with pluralization.
-{{% /note %}}
+{{< /note >}}
 ## Reserved keys
@@ -30,6 +30,6 @@ Use this function to:
 [`warnf`]: /functions/fmt/warnf/
 [`resources.FromString`]: /functions/resources/fromstring/
-{{% note %}}
+{{< note >}}
 Due to concurrency, the value returned in a given template for a given page will vary from one build to the next. You cannot use this function to assign a static id to each page.
-{{% /note %}}
+{{< /note >}}
@@ -22,11 +22,11 @@ Without a [`return`] statement, the `partialCached` function returns a string of
 The `partialCached` function can offer significant performance gains for complex templates that don't need to be re-rendered on every invocation.
-{{% note %}}
+{{< note >}}
 Each Site (or language) has its own `partialCached` cache, so each site will execute a partial once.
 Hugo renders pages in parallel, and will render the partial more than once with concurrent calls to the `partialCached` function. After Hugo caches the rendered partial, new pages entering the build pipeline will use the cached result.
-{{% /note %}}
+{{< /note >}}
 Here is the simplest usage:
@@ -10,8 +10,8 @@ action:
 expiryDate: 2026-06-24 # deprecated 2024-06-24 in v0.128.0
 ---
-{{% deprecated-in 0.128.0 %}}
+{{< deprecated-in 0.128.0 >}}
 Use [`js.Babel`] instead.
 [`js.Babel`]: /functions/js/babel/
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
@@ -23,12 +23,12 @@ The [media type] is typically one of `image`, `text`, `audio`, `video`, or `appl
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 This function operates on global resources. A global resource is a file within the `assets` directory, or within any directory mounted to the `assets` directory.
 For page resources, use the [`Resources.ByType`] method on a `Page` object.
 [`Resources.ByType`]: /methods/page/resources/
-{{% /note %}}
+{{< /note >}}
 [media type]: https://en.wikipedia.org/wiki/Media_type
@@ -23,6 +23,6 @@ The relative URL of the new published resource will be:
 /img/new-image-name.jpg
 ```
-{{% note %}}
+{{< note >}}
 Use the `resources.Copy` function with global, page, and remote resources.
-{{% /note %}}
+{{< /note >}}
@@ -21,10 +21,10 @@ action:
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 This function operates on global resources. A global resource is a file within the `assets` directory, or within any directory mounted to the `assets` directory.
 For page resources, use the [`Resources.Get`] method on a `Page` object.
 [`Resources.Get`]: /methods/page/resources/
-{{% /note %}}
+{{< /note >}}
@@ -21,13 +21,13 @@ action:
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 This function operates on global resources. A global resource is a file within the `assets` directory, or within any directory mounted to the `assets` directory.
 For page resources, use the [`Resources.GetMatch`] method on a `Page` object.
 [`Resources.GetMatch`]: /methods/page/resources/
-{{% /note %}}
+{{< /note >}}
 Hugo determines a match using a case-insensitive [glob pattern].
@@ -69,11 +69,11 @@ The `resources.GetRemote` function takes an optional map of options.
 ## Options examples
-{{% note %}}
+{{< note >}}
 For brevity, the examples below do not include [error handling].
 [error handling]: #error-handling
-{{% /note %}}
+{{< /note >}}
 To include a header:
@@ -148,7 +148,7 @@ When retrieving remote data, use the [`transform.Unmarshal`] function to [unmars
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 When retrieving remote data, a misconfigured server may send a response header with an incorrect [Content-Type]. For example, the server may set the Content-Type header to `application/octet-stream` instead of `application/json`.
 In these cases, pass the resource `Content` through the `transform.Unmarshal` function instead of passing the resource itself. For example, in the above, do this instead:
@@ -156,7 +156,7 @@ In these cases, pass the resource `Content` through the `transform.Unmarshal` fu
 `{{ $data = .Content | transform.Unmarshal }}`
 [Content-Type]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type
-{{% /note %}}
+{{< /note >}}
 ## Error handling
@@ -164,9 +164,9 @@ Use the [`try`] statement to capture HTTP request errors. If you do not handle t
 [`try`]: /functions/go-template/try
-{{% note %}}
+{{< note >}}
 Hugo does not classify an HTTP response with status code 404 as an error. In this case `resources.GetRemote` returns nil.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ $url := "https://broken-example.org/images/a.jpg" }}
@@ -21,13 +21,13 @@ action:
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 This function operates on global resources. A global resource is a file within the `assets` directory, or within any directory mounted to the `assets` directory.
 For page resources, use the [`Resources.Match`] method on a `Page` object.
 [`Resources.Match`]: /methods/page/resources/
-{{% /note %}}
+{{< /note >}}
 Hugo determines a match using a case-insensitive [glob pattern].
@@ -10,8 +10,8 @@ action:
 expiryDate: 2026-06-24 # deprecated 2024-06-24 in v0.128.0
 ---
-{{% deprecated-in 0.128.0 %}}
+{{< deprecated-in 0.128.0 >}}
 Use [`css.PostCSS`] instead.
 [`css.PostCSS`]: /functions/css/postcss/
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
@@ -85,9 +85,9 @@ module.exports = {
 };
 {{< /code >}}
-{{% note %}}
+{{< note >}}
 {{% include "functions/resources/_common/postcss-windows-warning.md" %}}
-{{% /note %}}
+{{< /note >}}
 Step 5
 : Place your CSS file within the `assets/css` directory.
@@ -10,8 +10,8 @@ action:
 expiryDate: 2026-06-24 # deprecated 2024-06-24 in v0.128.0
 ---
-{{% deprecated-in 0.128.0 %}}
+{{< deprecated-in 0.128.0 >}}
 Use [`css.Sass`] instead.
 [`css.Sass`]: /functions/css/sass/
-{{% /deprecated-in %}}
+{{< /deprecated-in >}}
@@ -51,9 +51,9 @@ Hugo renders the above to:
 <p style="ZgotmplZ">foo</p>
 ```
-{{% note %}}
+{{< note >}}
 `ZgotmplZ` is a special value that indicates that unsafe content reached a CSS or URL context at runtime.
-{{% /note %}}
+{{< /note >}}
 To declare the string as safe:
@@ -50,9 +50,9 @@ Hugo renders the above to:
 <a href="#ZgotmplZ">IRC</a>
 ```
-{{% note %}}
+{{< note >}}
 `ZgotmplZ` is a special value that indicates that unsafe content reached a CSS or URL context at runtime.
-{{% /note %}}
+{{< /note >}}
 To declare the string as safe:
@@ -85,6 +85,6 @@ https://example.org
 https://gohugo.io
 ```
-{{% note %}}
+{{< note >}}
 You can write and test your regular expression using [regex101.com](https://regex101.com/). Be sure to select the Go flavor before you begin.
-{{% /note %}}
+{{< /note >}}
@@ -31,6 +31,6 @@ To limit the number of matches to one:
 {{ findRE `(?s)<h2.*?>.*?</h2>` .Content 1 }}
 ```
-{{% note %}}
+{{< note >}}
 You can write and test your regular expression using [regex101.com](https://regex101.com/). Be sure to select the Go flavor before you begin.
-{{% /note %}}
+{{< /note >}}
@@ -35,9 +35,9 @@ Use `$1`, `$2`, etc. within the replacement string to insert the content of each
 {{ replaceRE "^https?://([^/]+).*" "$1" $s }} → gohugo.io
 ```
-{{% note %}}
+{{< note >}}
 You can write and test your regular expression using [regex101.com](https://regex101.com/). Be sure to select the Go flavor before you begin.
-{{% /note %}}
+{{< /note >}}
 [RE2]: https://github.com/google/re2/wiki/Syntax
 [string literal]: https://go.dev/ref/spec#String_literals
@@ -19,8 +19,8 @@ Examples:
 {{ split "abc" "" }} → ["a", "b", "c"]
 ```
-{{% note %}}
+{{< note >}}
 The `strings.Split` function essentially does the opposite of the [`collections.Delimit`] function. While `split` creates a slice from a string, `delimit` creates a string from a slice.
 [`collections.Delimit`]: /functions/collections/delimit/
-{{% /note %}}
+{{< /note >}}
@@ -17,8 +17,8 @@ Since Go templates are HTML-aware, `truncate` will intelligently handle normal s
 {{ "<em>Keep my HTML</em>" | safeHTML | truncate 10 }} → <em>Keep my …</em>
 ```
-{{% note %}}
+{{< note >}}
 If you have a raw string that contains HTML tags you want to remain treated as HTML, you will need to convert the string to HTML using the [`safeHTML`]function before sending the value to `truncate`. Otherwise, the HTML tags will be escaped when passed through the `truncate` function.
 [`safeHTML`]: /functions/safe/html/
-{{% /note %}}
+{{< /note >}}
@@ -42,13 +42,13 @@ In some rare use cases, you may need to defer the execution of a template until
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 This function only works in combination with the `with` keyword.
-{{% /note %}}
+{{< /note >}}
-{{% note %}}
+{{< note >}}
 Variables defined on the outside are not visible on the inside and vice versa. To pass in data, use the `data` [option](#options).
-{{% /note %}}
+{{< /note >}}
 For the above to work well when running the server (or `hugo -w`), you want to have a configuration similar to this:
@@ -23,9 +23,9 @@ To keep the wrapping `p` tags for a single paragraph, use the [`RenderString`] m
 [`RenderString`]: /methods/page/renderstring/
-{{% note %}}
+{{< note >}}
 Although the `markdownify` function honors [Markdown render hooks] when rendering Markdown to HTML, use the `RenderString` method instead of `markdownify` if a render hook accesses `.Page` context. See issue [#9692] for details.
 [Markdown render hooks]: /render-hooks/
 [#9692]: https://github.com/gohugoio/hugo/issues/9692
-{{% /note %}}
+{{< /note >}}
@@ -15,11 +15,11 @@ aliases: [/functions/transform.remarshal]
 The format must be one of `json`, `toml`, `yaml`, or `xml`. If the input is a string of serialized data, it must be valid JSON, TOML, YAML, or XML.
-{{% note %}}
+{{< note >}}
 This function is primarily a helper for Hugo's documentation, used to convert configuration and front matter examples to JSON, TOML, and YAML.
 This is not a general purpose converter, and may change without notice if required for Hugo's documentation site.
-{{% /note %}}
+{{< /note >}}
 Example 1
 : Convert a string of TOML to JSON.
@@ -23,14 +23,14 @@ Hugo uses an embedded instance of the [KaTeX] display engine to render mathemati
 {{ transform.ToMath "c = \\pm\\sqrt{a^2 + b^2}" }}
 ```
-{{% note %}}
+{{< note >}}
 By default, Hugo renders mathematical markup to [MathML], and does not require any CSS to display the result.
 [MathML]: https://developer.mozilla.org/en-US/docs/Web/MathML
 To optimize rendering quality and accessibility, use the `htmlAndMathml` output option as described below. This approach requires an external stylesheet.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ $opts := dict "output" "htmlAndMathml" }}
@@ -109,9 +109,9 @@ block = [['\[', '\]'], ['$$', '$$']]
 inline = [['\(', '\)']]
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 The configuration above precludes the use of the `$...$` delimiter pair for inline equations. Although you can add this delimiter pair to the configuration, you will need to double-escape the `$` symbol when used outside of math contexts to avoid unintended formatting.
-{{% /note %}}
+{{< /note >}}
 ###### Step 2
@@ -112,7 +112,7 @@ A remote resource is a file on a remote server, accessible via HTTP or HTTPS.
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 When retrieving remote data, a misconfigured server may send a response header with an incorrect [Content-Type]. For example, the server may set the Content-Type header to `application/octet-stream` instead of `application/json`.
 In these cases, pass the resource `Content` through the `transform.Unmarshal` function instead of passing the resource itself. For example, in the above, do this instead:
@@ -120,7 +120,7 @@ In these cases, pass the resource `Content` through the `transform.Unmarshal` fu
 `{{ $data = .Content | transform.Unmarshal }}`
 [Content-Type]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type
-{{% /note %}}
+{{< /note >}}
 ## Options
@@ -74,12 +74,12 @@ If `enable` is set to `true`, creates a `hugo_stats.json` file in the root of yo
 Exclude `class` attributes, `id` attributes, or tags from `hugo_stats.json` with the `disableClasses`, `disableIDs`, and `disableTags` keys.
-{{% note %}}
+{{< note >}}
 Given that CSS purging is typically limited to production builds, place the `buildStats` object below [`config/production`].
 [`config/production`]: /getting-started/configuration/#configuration-directory
 Built for speed, there may be "false positive" detections (e.g., HTML elements that are not HTML elements) while parsing the published site. These "false positives" are infrequent and inconsequential.
-{{% /note %}}
+{{< /note >}}
 Due to the nature of partial server builds, new HTML entities are added while the server is running, but old values will not be removed until you restart the server or run a regular `hugo` build.
@@ -35,12 +35,12 @@ defaultMarkdownHandler|Description
 To use AsciiDoc, Pandoc, or reStructuredText you must install the relevant renderer and update your [security policy].
-{{% note %}}
+{{< note >}}
 Unless you need a unique capability provided by one of the alternative Markdown handlers, we strongly recommend that you use the default setting. Goldmark is fast, well maintained, conforms to the [CommonMark] specification, and is compatible with [GitHub Flavored Markdown] (GFM).
 [commonmark]: https://spec.commonmark.org/0.30/
 [github flavored markdown]: https://github.github.com/gfm/
-{{% /note %}}
+{{< /note >}}
 [asciidoc]: https://asciidoc.org/
 [content format]: /content-management/formats/#formats
@@ -159,12 +159,12 @@ Most of the Goldmark settings above are self-explanatory, but some require expla
 [multilingual page resources]: /content-management/page-resources/#multilingual
-{{% note %}}
+{{< note >}}
 With multilingual single-host sites, setting this parameter to `false` will enable Hugo's [embedded link render hook] and [embedded image render hook]. This is the default configuration for multilingual single-host sites.
 [embedded image render hook]: /render-hooks/images/#default
 [embedded link render hook]: /render-hooks/links/#default
-{{% /note %}}
+{{< /note >}}
 ###### parser.wrapStandAloneImageWithinParagraph
@@ -200,11 +200,11 @@ This is also the strategy used by the [anchorize](/functions/urls/anchorize) tem
 [embedded image render hook]: /render-hooks/images/#default
-{{% note %}}
+{{< note >}}
 The embedded image render hook is automatically enabled for multilingual single-host sites if [duplication of shared page resources] is disabled. This is the default configuration for multilingual single-host sites.
 [duplication of shared page resources]: /getting-started/configuration-markup/#duplicateresourcefiles
-{{% /note %}}
+{{< /note >}}
 ###### renderHooks.link.enableDefault
@@ -214,11 +214,11 @@ The embedded image render hook is automatically enabled for multilingual single-
 [embedded link render hook]: /render-hooks/links/#default
-{{% note %}}
+{{< note >}}
 The embedded link render hook is automatically enabled for multilingual single-host sites if [duplication of shared page resources] is disabled. This is the default configuration for multilingual single-host sites.
 [duplication of shared page resources]: /getting-started/configuration-markup/#duplicateresourcefiles
-{{% /note %}}
+{{< /note >}}
 ###### renderer.hardWraps
@@ -250,9 +250,9 @@ This is the default configuration for the AsciiDoc renderer:
 (`string array`) An array of enabled extensions, one or more of `asciidoctor-html5s`, `asciidoctor-bibtex`, `asciidoctor-diagram`, `asciidoctor-interdoc-reftext`, `asciidoctor-katex`, `asciidoctor-latex`, `asciidoctor-mathematical`, or `asciidoctor-question`.
-{{% note %}}
+{{< note >}}
 To mitigate security risks, entries in the extension array may not contain forward slashes (`/`), backslashes (`\`), or periods. Due to this restriction, extensions must be in Ruby's `$LOAD_PATH`.
-{{% /note %}}
+{{< /note >}}
 ###### failureLevel
@@ -22,9 +22,9 @@ my-project/
 └── hugo.toml
 ```
-{{% note %}}
+{{< note >}}
 With v0.109.0 and earlier the basename of the site configuration file was `config` instead of `hugo`. You can use either, but should transition to the new naming convention when practical.
-{{% /note %}}
+{{< /note >}}
 A simple example:
@@ -51,13 +51,13 @@ Combine two or more configuration files, with left-to-right precedence:
 hugo --config a.toml,b.yaml,c.json
 ```
-{{% note %}}
+{{< note >}}
 See the specifications for each file format: [TOML], [YAML], and [JSON].
 [TOML]: https://toml.io/en/latest
 [YAML]: https://yaml.org/spec/
 [JSON]: https://datatracker.ietf.org/doc/html/rfc7159
-{{% /note %}}
+{{< /note >}}
 ## Configuration directory
@@ -242,11 +242,11 @@ See [Configure File Caches](#configure-file-caches).
 Pass down default configuration values (front matter) to pages in the content tree. The options in site config is the same as in page front matter, see [Front Matter Cascade](/content-management/front-matter#cascade).
-{{% note %}}
+{{< note >}}
 For a website in a single language, define the `[[cascade]]` in [Front Matter](/content-management/front-matter#cascade). For a multilingual website, define the `[[cascade]]` in [Site Config](/getting-started/configuration/#cascade).
 To remain consistent and prevent unexpected behavior, do not mix these strategies.
-{{% /note %}}
+{{< /note >}}
 ###### cleanDestinationDir
@@ -547,7 +547,7 @@ See [module configuration](/hugo-modules/configuration/#module-configuration-imp
 (`bool`) Watch filesystem for changes and recreate as needed. Default is `false`.
-{{% note %}}
+{{< note >}}
 If you are developing your site on a \*nix machine, here is a handy shortcut for finding a configuration option from the command line:
 ```txt
 cd ~/sites/yourhugosite
@@ -559,7 +559,7 @@ which shows output like
 ```txt
 enableemoji: true
 ```
-{{% /note %}}
+{{< /note >}}
 ## Configure page
@@ -598,12 +598,12 @@ To sort all fields in ascending order:
  nextPrevSortOrder = 'asc'
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 These settings do not apply to the [`Next`] or [`Prev`] methods on a `Pages` object.
 [`Next`]: /methods/pages/next
 [`Prev`]: /methods/pages/next
-{{% /note %}}
+{{< /note >}}
 ## Configure build
@@ -754,19 +754,19 @@ $ env HUGO_TITLE="Some Title" hugo
 This is really useful if you use a service such as Netlify to deploy your site. Look at the Hugo docs [Netlify configuration file](https://github.com/gohugoio/hugoDocs/blob/master/netlify.toml) for an example.
-{{% note %}}
+{{< note >}}
 Names must be prefixed with `HUGO_` and the configuration key must be set in uppercase when setting operating system environment variables.
 To set configuration parameters, prefix the name with `HUGO_PARAMS_`
-{{% /note %}}
+{{< /note >}}
 If you are using snake_cased variable names, the above will not work. Hugo determines the delimiter to use by the first character after `HUGO`. This allows you to define environment variables on the form `HUGOxPARAMSxAPI_KEY=abcdefgh`, using any [allowed](https://stackoverflow.com/questions/2821043/allowed-characters-in-linux-environment-variable-names#:~:text=So%20names%20may%20contain%20any,not%20begin%20with%20a%20digit.) delimiter.
 ## Ignore content and data files when rendering
-{{% note %}}
+{{< note >}}
 This works, but we recommend you use the newer and more powerful [includeFiles and excludeFiles](/hugo-modules/configuration/#module-configuration-mounts) mount options.
-{{% /note %}}
+{{< /note >}}
 To exclude specific files from the `content`, `data`, and `i18n` directories when rendering your site, set `ignoreFiles` to one or more regular expressions to match against the absolute file path.
@@ -938,11 +938,11 @@ polling
 {{< new-in 0.124.0 />}}
-{{% note %}}
+{{< note >}}
 The `segments` configuration is currently only used to configure partitioned rendering.
 This feature is only about what gets rendered when, Hugo's entire object graph (sites and pages) is
 always available.
-{{% /note %}}
+{{< /note >}}
 * Each segment consists of zero or more `exclude` filters and zero or more `include` filters.
 * Each filter consists of one or more field Glob matchers.
@@ -158,11 +158,11 @@ source = '/home/user/shared-content'
 target = 'content'
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 When you overlay one directory on top of another, you must mount both directories.
 Hugo does not follow symbolic links. If you need the functionality provided by symbolic links, use Hugo's union file system instead.
-{{% /note %}}
+{{< /note >}}
 After mounting, the union file system has this structure:
@@ -185,9 +185,9 @@ home/
        └── hugo.toml
 ```
-{{% note %}}
+{{< note >}}
 When two or more files have the same path, the order of precedence follows the order of the mounts. For example, if the shared content directory contains `books/book-1.md`, it will be ignored because the project's `content` directory was mounted first.
-{{% /note %}}
+{{< /note >}}
 You can mount directories to `archetypes`, `assets`, `content`, `data`, `i18n`, `layouts`, and `static`. See&nbsp;[details](/hugo-modules/configuration/#module-configuration-mounts).
@@ -33,7 +33,7 @@ You must also be comfortable working from the command line.
 ### Commands
-{{% note %}}
+{{< note >}}
 **If you are a Windows user:**
 - Do not use the Command Prompt
@@ -44,7 +44,7 @@ PowerShell and Windows PowerShell [are different applications].
 [PowerShell]: https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows
 [are different applications]: https://learn.microsoft.com/en-us/powershell/scripting/whats-new/differences-from-windows-powershell?view=powershell-7.3
-{{% /note %}}
+{{< /note >}}
 Verify that you have installed Hugo {{% param "minVersion" %}} or later.
@@ -153,12 +153,12 @@ View your site at the URL displayed in your terminal. Keep the development serve
 When satisfied with your new content, set the front matter `draft` parameter to `false`.
-{{% note %}}
+{{< note >}}
 Hugo's rendering engine conforms to the CommonMark [specification] for Markdown. The CommonMark organization provides a useful [live testing tool] powered by the reference implementation.
 [live testing tool]: https://spec.commonmark.org/dingus/
 [specification]: https://spec.commonmark.org/
-{{% /note %}}
+{{< /note >}}
 ## Configure the site
@@ -183,7 +183,7 @@ Start Hugo's development server to see your changes, remembering to include draf
 hugo server -D
 ```
-{{% note %}}
+{{< note >}}
 Most theme authors provide configuration guidelines and options. Make sure to visit your theme's repository or documentation site for details.
 [The New Dynamic], authors of the Ananke theme, provide [documentation] for configuration and usage. They also provide a [demonstration site].
@@ -191,7 +191,7 @@ Most theme authors provide configuration guidelines and options. Make sure to vi
 [demonstration site]: https://gohugo-ananke-theme-demo.netlify.app/
 [documentation]: https://github.com/theNewDynamic/gohugo-theme-ananke#readme
 [The New Dynamic]: https://www.thenewdynamic.com/
-{{% /note %}}
+{{< /note >}}
 ## Publish the site
@@ -50,11 +50,11 @@ hugo
 The [`hugo`] command builds your site, publishing the files to the `public` directory. To publish your site to a different directory, use the [`--destination`] flag or set [`publishDir`] in your site configuration.
-{{% note %}}
+{{< note >}}
 Hugo does not clear the `public` directory before building your site. Existing files are overwritten, but not deleted. This behavior is intentional to prevent the inadvertent removal of files that you may have added to the `public` directory after the build.
 Depending on your needs, you may wish to manually clear the contents of the `public` directory before every build.
-{{% /note %}}
+{{< /note >}}
 ## Draft, future, and expired content
@@ -67,12 +67,12 @@ Hugo allows you to set `draft`, `date`, `publishDate`, and `expiryDate` in the [
 {{< new-in 0.123.0 />}}
-{{% note %}}
+{{< note >}}
 Hugo publishes descendants of draft, future, and expired [node](g) pages. To prevent publication of these descendants, use the [`cascade`] front matter field to cascade [build options] to the descendant pages.
 [build options]: /content-management/build-options/
 [`cascade`]: /content-management/front-matter/#cascade-field
-{{% /note %}}
+{{< /note >}}
 You can override the default behavior when running `hugo` or `hugo server` with command line flags:
@@ -84,11 +84,11 @@ hugo --buildFuture    # or -F
 Although you can also set these values in your site configuration, it can lead to unwanted results unless all content authors are aware of, and understand, the settings.
-{{% note %}}
+{{< note >}}
 As noted above, Hugo does not clear the `public` directory before building your site. Depending on the _current_ evaluation of the four conditions above, after the build your `public` directory may contain extraneous files from a previous build.
 A common practice is to manually clear the contents of the `public` directory before each build to remove draft, expired, and future content.
-{{% /note %}}
+{{< /note >}}
 ## Develop and test your site
@@ -122,9 +122,9 @@ hugo server --navigateToChanged
 ## Deploy your site
-{{% note %}}
+{{< note >}}
 As noted above, Hugo does not clear the `public` directory before building your site. Manually clear the contents of the `public` directory before each build to remove draft, expired, and future content.
-{{% /note %}}
+{{< /note >}}
 When you are ready to deploy your site, run:
@@ -91,9 +91,9 @@ firebase login:ci
 You can also set up your CI and add the token to a private variable like `$FIREBASE_DEPLOY_TOKEN`.
-{{% note %}}
+{{< note >}}
 This is a private secret and it should not appear in a public repository. Make sure you understand your chosen CI and that it's not visible to others.
-{{% /note %}}
+{{< /note >}}
 You can then add a step in your build to do the deployment using the token:
@@ -26,11 +26,11 @@ Please complete the following tasks before continuing:
 There are three types of GitHub Pages sites: project, user, and organization. Project sites are connected to a specific project hosted on GitHub. User and organization sites are connected to a specific account on GitHub.com.
-{{% note %}}
+{{< note >}}
 See the [GitHub Pages documentation] to understand the requirements for repository ownership and naming.
 [GitHub Pages documentation]: https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites
-{{% /note %}}
+{{< /note >}}
 [GitHub Pages documentation]: https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites
@@ -13,11 +13,11 @@ toc: true
 Use the `hugo deploy` command to deploy your site directly to a Google Cloud Storage bucket, an AWS S3 bucket, or an Azure Storage container
-{{% note %}}
+{{< note >}}
 This feature requires the Hugo extended/deploy edition. See the [installation] section for details.
 [installation]: /installation/
-{{% /note %}}
+{{< /note >}}
 ## Assumptions
@@ -93,7 +93,7 @@ the [deployment target's configuration][config] --
 * If the configuration specifies an `exclude` pattern, files matching the
  pattern are skipped.
-{{% note %}}
+{{< note >}}
 When creating the local file list, a few additional skips apply: first, Hugo always
 skips files named `.DS_Store`. 
@@ -102,7 +102,7 @@ Second, Hugo always skips local hidden directories
 traverse into them, except for the special [hidden directory named
 `.well-known`](https://en.wikipedia.org/wiki/Well-known_URI), which is
 traversed if it exists.
-{{% /note %}}
+{{< /note >}}
 ### How the local and remote file lists are compared
@@ -117,11 +117,11 @@ if Hugo cannot detect any differences between local and remote.
 Files are deleted from the remote bucket if they are not present in the local
 file list.
-{{% note %}}
+{{< note >}}
 If a remote file is excluded from the file list generation using the
 exclude/include configs, then the comparison step will not know to delete the
 file -- so it will remain on the remote even if it isn't present locally.
-{{% /note %}}
+{{< /note >}}
 If the [`--confirm` or `--dryRun` flags][commandline] are given, Hugo displays 
 what differences it has found and either pauses or stops here.
@@ -133,11 +133,11 @@ changed files are uploaded, and files missing locally but present remotely are
 deleted. As files are uploaded, their headers are also configured on the remote
 according to the matchers configuration.
-{{% note %}}
+{{< note >}}
 As a safety measure to help prevent accidents, if there are more than 256 files
 to delete, Hugo won't delete any files from the remote. Use the `--maxDeletes`
 command line flag to override this.
-{{% /note %}}
+{{< /note >}}
 ## Advanced configuration
@@ -112,13 +112,13 @@ noVendor
 ## Module configuration: mounts
-{{% note %}}
+{{< note >}}
 When the `mounts` configuration was introduced in Hugo 0.56.0, we were careful to preserve the existing `contentDir`, `staticDir`, and similar configuration to make sure all existing sites just continued to work. But you should not have both: if you add a `mounts` section you should remove the old `contentDir`, `staticDir`, etc. settings.
-{{% /note %}}
+{{< /note >}}
-{{% note %}}
+{{< note >}}
 When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.
-{{% /note %}}
+{{< /note >}}
 ### Default mounts
@@ -12,9 +12,9 @@ aliases: [/themes/customize/,/themes/customizing/]
 toc: true
 ---
-{{% note %}}
+{{< note >}}
 This section contain information that may be outdated and is in the process of being rewritten.
-{{% /note %}}
+{{< /note >}}
 Since Hugo `0.42` a project can configure a theme as a composite of as many theme components you need:
 {{< code-toggle file=hugo >}}
@@ -59,13 +59,13 @@ sudo snap disconnect hugo:ssh-keys
 Most Linux distributions maintain a repository for commonly installed applications.
-{{% note %}}
+{{< note >}}
 The Hugo version available in package repositories varies based on Linux distribution and release, and in some cases will not be the [latest version].
 Use one of the other installation methods if your package repository does not provide the desired version.
 [latest version]: https://github.com/gohugoio/hugo/releases/latest
-{{% /note %}}
+{{< /note >}}
 ### Alpine Linux
@@ -11,9 +11,9 @@ weight: 40
 toc: true
 ---
-{{% note %}}
+{{< note >}}
 Hugo v0.121.1 and later require at least Windows 10 or Windows Server 2016.
-{{% /note %}}
+{{< /note >}}
 ## Editions
@@ -65,9 +65,9 @@ winget uninstall --name "Hugo (Extended)"
 {{% include "installation/_common/04-build-from-source.md" %}}
-{{% note %}}
+{{< note >}}
 See these [detailed instructions](https://discourse.gohugo.io/t/41370) to install GCC on Windows.
-{{% /note %}}
+{{< /note >}}
 ## Comparison
@@ -37,8 +37,8 @@ This example uses the `Identifier` method when querying the translation table on
 </ul>
 ```
-{{% note %}}
+{{< note >}}
 In the menu definition above, note that the `identifier` property is only required when two or more menu entries have the same name, or when localizing the name using translation tables.
 [details]: /content-management/menus/#properties-front-matter
-{{% /note %}}
+{{< /note >}}
@@ -31,11 +31,11 @@ If a matching page is not found:
 - The [`Page`] method returns nil
 - The [`HasMenuCurrent`] and [`IsMenuCurrent`] methods on a `Page` object return `false`
-{{% note %}}
+{{< note >}}
 In almost also scenarios you should use the [`URL`] method instead.
 [`URL`]: /methods/menu-entry/url/
-{{% /note %}}
+{{< /note >}}
 [defining a menu entry]: /content-management/menus/#define-in-site-configuration
 [`Page`]: /methods/menu-entry/page/
@@ -48,11 +48,11 @@ In almost also scenarios you should use the [`URL`] method instead.
 This example is contrived.
-{{% note %}}
+{{< note >}}
 In almost also scenarios you should use the [`URL`] method instead.
 [`URL`]: /methods/menu-entry/url/
-{{% /note %}}
+{{< /note >}}
 Consider this content structure:
@@ -53,11 +53,11 @@ Hugo renders this to:
 </ul>
 ```
-{{% note %}}
+{{< note >}}
 In the menu definition above, note that the `identifier` property is only required when two or more menu entries have the same name, or when localizing the name using translation tables.
 [details]: /content-management/menus/#properties-front-matter
-{{% /note %}}
+{{< /note >}}
 You can also sort menu entries using the [`sort`] function. For example, to sort by `weight` in descending order:
@@ -18,9 +18,9 @@ action:
 {{% glossary-term section %}}
-{{% note %}}
+{{< note >}}
 The current section of a [section page](g), [taxonomy page](g), [term page](g), or the home page, is itself.
-{{% /note %}}
+{{< /note >}}
 Consider this content structure:
@@ -12,7 +12,7 @@ toc: true
 The `Data` method on a `Page` object returns a unique data object for each [page kind](g).
-{{% note %}}
+{{< note >}}
 The `Data` method is only useful within [taxonomy](g) and [term](g) templates.
 Themes that are not actively maintained may still use `.Data.Pages` in list templates. Although that syntax remains functional, use one of these methods instead: [`Pages`], [`RegularPages`], or [`RegularPagesRecursive`]
@@ -20,7 +20,7 @@ Themes that are not actively maintained may still use `.Data.Pages` in list temp
 [`Pages`]: /methods/page/pages/
 [`RegularPages`]: /methods/page/regularpages/
 [`RegularPagesRecursive`]: /methods/page/regularpagesrecursive/
-{{% /note %}}
+{{< /note >}}
 The examples that follow are based on this site configuration:
@@ -67,11 +67,11 @@ Terms
 {{ $taxonomyObject := .Data.Terms }} 
 ```
-{{% note %}}
+{{< note >}}
 Once you have captured the `Taxonomy` object, use any of the [taxonomy methods] to sort, count, or capture a subset of its weighted pages.
 [taxonomy methods]: /methods/taxonomy/
-{{% /note %}}
+{{< /note >}}
 Learn more about [taxonomy templates].
@@ -19,11 +19,11 @@ title = 'Article 1'
 date = 2023-10-19T00:40:04-07:00
 {{< /code-toggle >}}
-{{% note %}}
+{{< note >}}
 The date field in front matter is often considered to be the creation date, You can change its meaning, and its effect on your site, in the site configuration. See&nbsp;[details].
 [details]: /getting-started/configuration/#configure-dates
-{{% /note %}}
+{{< /note >}}
 The date is a [time.Time] value. Format and localize the value with the [`time.Format`] function, or use it with any of the [time methods].
@@ -22,15 +22,15 @@ content/
    └── book-2.md
 ```
-{{% note %}}
+{{< note >}}
 Code defensively by verifying file existence as shown in the examples below.
-{{% /note %}}
+{{< /note >}}
 ## Methods
-{{% note %}}
+{{< note >}}
 The path separators (slash or backslash) in `Path`, `Dir`, and `Filename` depend on the operating system.
-{{% /note %}}
+{{< /note >}}
 ###### BaseFileName
@@ -18,9 +18,9 @@ action:
 {{% glossary-term section %}}
-{{% note %}}
+{{< note >}}
 When called on the home page, the `FirstSection` method returns the `Page` object of the home page itself.
-{{% /note %}}
+{{< /note >}}
 Consider this content structure:
@@ -88,11 +88,14 @@ Hugo renders this to:
 </nav>
 ```
-{{% note %}}
+{{< note >}}
 It is safe to use the `Fragments` methods within a render hook, even for the current page.
-When using the `Fragments` methods within a shortcode, call the shortcode using the `{{</* */>}}` notation. If you use the `{{%/* */%}}` notation, the rendered shortcode is included in the creation of the fragments map, resulting in a circular loop.
+When using the `Fragments` methods within a shortcode, call the shortcode using [standard notation]. If you use [Markdown notation] the rendered shortcode is included in the creation of the fragments map, resulting in a circular loop.
-{{% /note %}}
+
 [Markdown notation]: /content-management/shortcodes/#notation
 [standard notation]: /content-management/shortcodes/#notation
 {{< /note >}}
 [atx]: https://spec.commonmark.org/0.30/#atx-headings
 [setext]: https://spec.commonmark.org/0.30/#setext-headings
@@ -13,9 +13,9 @@ toc: true
 The `GitInfo` method on a `Page` object returns an object with additional methods.
-{{% note %}}
+{{< note >}}
 Hugo's Git integration is performant, but may increase build times on large sites.
-{{% /note %}}
+{{< /note >}}
 ## Prerequisites
@@ -33,13 +33,13 @@ Alternatively, use the command line flag when building your site:
 hugo --enableGitInfo
 ```
-{{% note %}}
+{{< note >}}
 When you set `enableGitInfo` to `true`, or enable the feature with the command line flag, the last modification date for each content page will be the Author Date of the last commit for that file.
 This is configurable. See&nbsp;[details].
 [details]: /getting-started/configuration/#configure-dates
-{{% /note %}}
+{{< /note >}}
 ## Methods
@@ -28,8 +28,8 @@ If the `Page` object associated with the menu entry is a section, this method al
 See [menu templates] for a complete example.
-{{% note %}}
+{{< note >}}
 When using this method you must either define the menu entry in front matter, or specify a `pageRef` property when defining the menu entry in your site configuration.
-{{% /note %}}
+{{< /note >}}
 [menu templates]: /templates/menu/#example
@@ -83,9 +83,9 @@ Inside of the `with` block, the [context](g) (the dot) is the section `Page` obj
 The result would be wrong when rendering the "auction-1" page because we are comparing the section page to itself.
-{{% note %}}
+{{< note >}}
 Use the `$` to get the context passed into the template.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ with .Site.GetPage "/auctions" }}
@@ -93,9 +93,9 @@ Use the `$` to get the context passed into the template.
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 Gaining a thorough understanding of context is critical for anyone writing template code.
-{{% /note %}}
+{{< /note >}}
 [`with`]: /functions/go-template/with/
 [`else`]: /functions/go-template/else/
@@ -81,9 +81,9 @@ Inside of the `with` block, the [context](g) (the dot) is the section `Page` obj
 The result would be wrong when rendering the "auction-1" page because we are comparing the section page to itself.
-{{% note %}}
+{{< note >}}
 Use the `$` to get the context passed into the template.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ with .Site.GetPage "/auctions" }}
@@ -91,9 +91,9 @@ Use the `$` to get the context passed into the template.
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 Gaining a thorough understanding of context is critical for anyone writing template code.
-{{% /note %}}
+{{< /note >}}
 [`with`]: /functions/go-template/with/
 [`else`]: /functions/go-template/else/
@@ -80,9 +80,9 @@ Inside of the `with` block, the [context](g) (the dot) is the section `Page` obj
 The result would be wrong when rendering the "auction-1" page because we are comparing the section page to itself.
-{{% note %}}
+{{< note >}}
 Use the `$` to get the context passed into the template.
-{{% /note %}}
+{{< /note >}}
 ```go-html-template
 {{ with .Site.GetPage "/auctions" }}
@@ -90,9 +90,9 @@ Use the `$` to get the context passed into the template.
 {{ end }}
 ```
-{{% note %}}
+{{< note >}}
 Gaining a thorough understanding of context is critical for anyone writing template code.
-{{% /note %}}
+{{< /note >}}
 [`with`]: /functions/go-template/with/
 [`else`]: /functions/go-template/else/
@@ -26,8 +26,8 @@ aliases: [/functions/ismenucurrent]
 See [menu templates] for a complete example.
-{{% note %}}
+{{< note >}}
 When using this method you must either define the menu entry in front matter, or specify a `pageRef` property when defining the menu entry in your site configuration.
-{{% /note %}}
+{{< /note >}}
 [menu templates]: /templates/menu/#example
--- a/Show More
+++ b/Show More