--- /dev/null
+# https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
+
+MD001: false
+MD002: false
+MD003: false
+MD004: false
+MD007: false
+MD012:
+ maximum: 2
+MD013: false
+MD014: false
+MD022: false
+MD024: false
+MD031: false
+MD032: false
+MD033: false
+MD034: false
+MD036: false
+MD037: false
+MD038: false
+MD041: false
+MD046: false
+MD049: false
+MD050: false
+MD053: false
++MD055: false
--- /dev/null
- padding: 0.2em;
+.chroma .lntable pre {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+.chroma .lntable pre code {
+ padding: 0;
+ margin: 0;
+}
+
+code {
- font-size: 85%;
++ padding: 2px 3px;
+ margin: 0;
++ font-size: 93.75%;
+ background-color: rgba(27,31,35,0.05);
+ border-radius: 3px;
+}
+
+pre code {
+ display: block;
+ padding: 1.5em 1.5em;
+ font-size: .875rem;
+ line-height: 2;
+ overflow-x: auto;
+}
+
+pre {
+ background-color: #fff;
+ color: #333;
+ white-space: pre;
+ hyphens: none;
+ position: relative;
+ border-width: 1px;
+ border-color: #ccc;
+ border-style: solid;
+}
+
+/* The Pygments highlighter comes with its own styles. */
+.highlight pre {
+ background-color: inherit;
+ color: inherit;
+ padding: 0.5em;
+ font-size: .875rem;
+}
+
+
+/*We are adding the copy button content here so we can change it with javascript. See the "Clipboard scripts"*/
+.copy:after {
+ content: "Copy"
+}
+.copied:after {
+ content: "Copied"
+}
+
+@media (--breakpoint-large) {
+ .full-width
+ {
+ /*width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;*/
+ /*width: 60vw;*/
+ /*position: relative;
+ left: 50%;
+ right: 50%;*/
+ /*margin-left: -30vw;*/
+ margin-right: -30vw;
+ max-width: 100vw;
+ }
+}
+
+.code-block .line-numbers-rows {
+ background: #2f3a46;
+ border: none;
+ bottom: -50px;
+ color: #98a4b3;
+ left: -178px;
+ padding: 50px 0;
+ top: -50px;
+ width: 138px
+}
+
+.code-block .line-numbers-rows>span:before {
+ color: inherit;
+ padding-right: 30px
+}
--- /dev/null
- padding: 0.2em;
+/* muli-200normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 200;
+ src:
+ local('Muli Extra Light '),
+ local('Muli-Extra Light'),
+ url(/fonts/muli-latin-200.woff2) format('woff2'),
+ url(/fonts/muli-latin-200.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-200italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 200;
+ src:
+ local('Muli Extra Light italic'),
+ local('Muli-Extra Lightitalic'),
+ url(/fonts/muli-latin-200italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-200italic.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-300normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 300;
+ src:
+ local('Muli Light '),
+ local('Muli-Light'),
+ url(/fonts/muli-latin-300.woff2) format('woff2'),
+ url(/fonts/muli-latin-300.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-300italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 300;
+ src:
+ local('Muli Light italic'),
+ local('Muli-Lightitalic'),
+ url(/fonts/muli-latin-300italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-300italic.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-400normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src:
+ local('Muli Regular '),
+ local('Muli-Regular'),
+ url(/fonts/muli-latin-400.woff2) format('woff2'),
+ url(/fonts/muli-latin-400.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-400italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 400;
+ src:
+ local('Muli Regular italic'),
+ local('Muli-Regularitalic'),
+ url(/fonts/muli-latin-400italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-400italic.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-600normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 600;
+ src:
+ local('Muli SemiBold '),
+ local('Muli-SemiBold'),
+ url(/fonts/muli-latin-600.woff2) format('woff2'),
+ url(/fonts/muli-latin-600.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-600italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 600;
+ src:
+ local('Muli SemiBold italic'),
+ local('Muli-SemiBolditalic'),
+ url(/fonts/muli-latin-600italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-600italic.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-700normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 700;
+ src:
+ local('Muli Bold '),
+ local('Muli-Bold'),
+ url(/fonts/muli-latin-700.woff2) format('woff2'),
+ url(/fonts/muli-latin-700.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-700italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 700;
+ src:
+ local('Muli Bold italic'),
+ local('Muli-Bolditalic'),
+ url(/fonts/muli-latin-700italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-700italic.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-800normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 800;
+ src:
+ local('Muli ExtraBold '),
+ local('Muli-ExtraBold'),
+ url(/fonts/muli-latin-800.woff2) format('woff2'),
+ url(/fonts/muli-latin-800.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-800italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 800;
+ src:
+ local('Muli ExtraBold italic'),
+ local('Muli-ExtraBolditalic'),
+ url(/fonts/muli-latin-800italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-800italic.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-900normal - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 900;
+ src:
+ local('Muli Black '),
+ local('Muli-Black'),
+ url(/fonts/muli-latin-900.woff2) format('woff2'),
+ url(/fonts/muli-latin-900.woff) format('woff'); /* Modern Browsers */
+}
+/* muli-900italic - latin */
+@font-face {
+ font-family: 'Muli';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 900;
+ src:
+ local('Muli Black italic'),
+ local('Muli-Blackitalic'),
+ url(/fonts/muli-latin-900italic.woff2) format('woff2'),
+ url(/fonts/muli-latin-900italic.woff) format('woff'); /* Modern Browsers */
+}
+
+
+/*Base Styles*/
+/*! TACHYONS v4.7.0 | http://tachyons.io */
+/*
+ * NOTE: The Tachyons folder is for backup/reference only. This file references the module
+ * ________ ______
+ * ___ __/_____ _________ /______ ______________________
+ * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
+ * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
+ * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
+ * /____/
+ *
+ * TABLE OF CONTENTS
+ *
+ * 1. External Library Includes
+ * - Normalize.css | http://normalize.css.github.io
+ * 2. Tachyons Modules
+ * 3. Variables
+ * - Media Queries
+ * - Colors
+ * 4. Debugging
+ * - Debug all
+ * - Debug children
+ *
+ */
+/* External Library Includes */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Document
+ ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+/* Sections
+ ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+ margin: 0;
+}
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+/* Grouping content
+ ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+/* Text-level semantics
+ ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+ background-color: transparent;
+}
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted; /* 2 */
+}
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+ font-weight: bolder;
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+ font-size: 80%;
+}
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+/* Embedded content
+ ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+ border-style: none;
+}
+/* Forms
+ ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input { /* 1 */
+ overflow: visible;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select { /* 1 */
+ text-transform: none;
+}
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+legend {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+ vertical-align: baseline;
+}
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+ overflow: auto;
+}
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+/* Interactive
+ ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+ display: block;
+}
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+ display: list-item;
+}
+/* Misc
+ ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+ display: none;
+}
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+ display: none;
+}
+/* Modules */
+/*
+
+ BOX SIZING
+
+*/
+html,
+body,
+div,
+article,
+aside,
+section,
+main,
+nav,
+footer,
+header,
+form,
+fieldset,
+legend,
+pre,
+code,
+a,
+h1,h2,h3,h4,h5,h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figcaption,
+figure,
+textarea,
+table,
+td,
+th,
+tr,
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+.border-box {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+/*@import 'tachyons/src/_aspect-ratios';*/
+/*
+
+ IMAGES
+ Docs: http://tachyons.io/docs/elements/images/
+
+*/
+/* Responsive images! */
+img { max-width: 100%; }
+/*
+
+ BACKGROUND SIZE
+ Docs: http://tachyons.io/docs/themes/background-size/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/*
+ Often used in combination with background image set as an inline style
+ on an html element.
+*/
+.cover { background-size: cover!important; }
+.contain { background-size: contain!important; }
+@media screen and (min-width: 30em) {
+ .cover-ns { background-size: cover!important; }
+ .contain-ns { background-size: contain!important; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .cover-m { background-size: cover!important; }
+ .contain-m { background-size: contain!important; }
+}
+@media screen and (min-width: 60em) {
+ .cover-l { background-size: cover!important; }
+ .contain-l { background-size: contain!important; }
+}
+/*
+
+ BACKGROUND POSITION
+
+ Base:
+ bg = background
+
+ Modifiers:
+ -center = center center
+ -top = top center
+ -right = center right
+ -bottom = bottom center
+ -left = center left
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+.bg-center {
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+.bg-top {
+ background-repeat: no-repeat;
+ background-position: top center;
+}
+.bg-right {
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+.bg-bottom {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+}
+.bg-left {
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+@media screen and (min-width: 30em) {
+ .bg-center-ns {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-ns {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-ns {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-ns {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-ns {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .bg-center-m {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-m {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-m {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-m {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-m {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+@media screen and (min-width: 60em) {
+ .bg-center-l {
+ background-repeat: no-repeat;
+ background-position: center center;
+ }
+
+ .bg-top-l {
+ background-repeat: no-repeat;
+ background-position: top center;
+ }
+
+ .bg-right-l {
+ background-repeat: no-repeat;
+ background-position: center right;
+ }
+
+ .bg-bottom-l {
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ }
+
+ .bg-left-l {
+ background-repeat: no-repeat;
+ background-position: center left;
+ }
+}
+/*@import 'tachyons/src/_outlines';*/
+/*
+
+ BORDERS
+ Docs: http://tachyons.io/docs/themes/borders/
+
+ Base:
+ b = border
+
+ Modifiers:
+ a = all
+ t = top
+ r = right
+ b = bottom
+ l = left
+ n = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.ba { border-style: solid; border-width: 1px; }
+.bt { border-top-style: solid; border-top-width: 1px; }
+.br { border-right-style: solid; border-right-width: 1px; }
+.bb { border-bottom-style: solid; border-bottom-width: 1px; }
+.bl { border-left-style: solid; border-left-width: 1px; }
+.bn { border-style: none; border-width: 0; }
+@media screen and (min-width: 30em) {
+ .ba-ns { border-style: solid; border-width: 1px; }
+ .bt-ns { border-top-style: solid; border-top-width: 1px; }
+ .br-ns { border-right-style: solid; border-right-width: 1px; }
+ .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-ns { border-left-style: solid; border-left-width: 1px; }
+ .bn-ns { border-style: none; border-width: 0; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .ba-m { border-style: solid; border-width: 1px; }
+ .bt-m { border-top-style: solid; border-top-width: 1px; }
+ .br-m { border-right-style: solid; border-right-width: 1px; }
+ .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-m { border-left-style: solid; border-left-width: 1px; }
+ .bn-m { border-style: none; border-width: 0; }
+}
+@media screen and (min-width: 60em) {
+ .ba-l { border-style: solid; border-width: 1px; }
+ .bt-l { border-top-style: solid; border-top-width: 1px; }
+ .br-l { border-right-style: solid; border-right-width: 1px; }
+ .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-l { border-left-style: solid; border-left-width: 1px; }
+ .bn-l { border-style: none; border-width: 0; }
+}
+/*
+
+ BORDER COLORS
+ Docs: http://tachyons.io/docs/themes/borders/
+
+ Border colors can be used to extend the base
+ border classes ba,bt,bb,br,bl found in the _borders.css file.
+
+ The base border class by default will set the color of the border
+ to that of the current text color. These classes are for the cases
+ where you desire for the text and border colors to be different.
+
+ Base:
+ b = border
+
+ Modifiers:
+ --color-name = each color variable name is also a border color name
+
+*/
+.b--black { border-color: #000; }
+.b--near-black { border-color: #111; }
+.b--dark-gray { border-color: #333; }
+.b--mid-gray { border-color: #555; }
+.b--gray { border-color: #777; }
+.b--silver { border-color: #999; }
+.b--light-silver { border-color: #aaa; }
+.b--moon-gray { border-color: #ccc; }
+.b--light-gray { border-color: #eee; }
+.b--near-white { border-color: #f4f4f4; }
+.b--white { border-color: #fff; }
+.b--white-90 { border-color: rgba(255, 255, 255, .9); }
+.b--white-80 { border-color: rgba(255, 255, 255, .8); }
+.b--white-70 { border-color: rgba(255, 255, 255, .7); }
+.b--white-60 { border-color: rgba(255, 255, 255, .6); }
+.b--white-50 { border-color: rgba(255, 255, 255, .5); }
+.b--white-40 { border-color: rgba(255, 255, 255, .4); }
+.b--white-30 { border-color: rgba(255, 255, 255, .3); }
+.b--white-20 { border-color: rgba(255, 255, 255, .2); }
+.b--white-10 { border-color: rgba(255, 255, 255, .1); }
+.b--white-05 { border-color: rgba(255, 255, 255, .05); }
+.b--white-025 { border-color: rgba(255, 255, 255, .025); }
+.b--white-0125 { border-color: rgba(255, 255, 255, .0125); }
+.b--black-90 { border-color: rgba(0, 0, 0, .9); }
+.b--black-80 { border-color: rgba(0, 0, 0, .8); }
+.b--black-70 { border-color: rgba(0, 0, 0, .7); }
+.b--black-60 { border-color: rgba(0, 0, 0, .6); }
+.b--black-50 { border-color: rgba(0, 0, 0, .5); }
+.b--black-40 { border-color: rgba(0, 0, 0, .4); }
+.b--black-30 { border-color: rgba(0, 0, 0, .3); }
+.b--black-20 { border-color: rgba(0, 0, 0, .2); }
+.b--black-10 { border-color: rgba(0, 0, 0, .1); }
+.b--black-05 { border-color: rgba(0, 0, 0, .05); }
+.b--black-025 { border-color: rgba(0, 0, 0, .025); }
+.b--black-0125 { border-color: rgba(0, 0, 0, .0125); }
+.b--dark-red { border-color: #e7040f; }
+.b--red { border-color: #ff4136; }
+.b--light-red { border-color: #ff725c; }
+.b--orange { border-color: #ff6300; }
+.b--gold { border-color: #ffb700; }
+.b--yellow { border-color: #ffd700; }
+.b--light-yellow { border-color: #fbf1a9; }
+.b--purple { border-color: #5e2ca5; }
+.b--light-purple { border-color: #a463f2; }
+.b--dark-pink { border-color: #d5008f; }
+.b--hot-pink { border-color: #ff41b4; }
+.b--pink { border-color: #ff80cc; }
+.b--light-pink { border-color: #ffa3d7; }
+.b--dark-green { border-color: #137752; }
+.b--green { border-color: #19a974; }
+.b--light-green { border-color: #9eebcf; }
+.b--navy { border-color: #001b44; }
+.b--dark-blue { border-color: #00449e; }
+.b--blue { border-color: #0594CB; }
+.b--light-blue { border-color: #96ccff; }
+.b--lightest-blue { border-color: #cdecff; }
+.b--washed-blue { border-color: #f6fffe; }
+.b--washed-green { border-color: #e8fdf5; }
+.b--washed-yellow { border-color: #fffceb; }
+.b--washed-red { border-color: #ffdfdf; }
+.b--transparent { border-color: transparent; }
+.b--inherit { border-color: inherit; }
+/*
+
+ BORDER RADIUS
+ Docs: http://tachyons.io/docs/themes/border-radius/
+
+ Base:
+ br = border-radius
+
+ Modifiers:
+ 0 = 0/none
+ 1 = 1st step in scale
+ 2 = 2nd step in scale
+ 3 = 3rd step in scale
+ 4 = 4th step in scale
+
+ Literal values:
+ -100 = 100%
+ -pill = 9999px
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.br0 { border-radius: 0; }
+.br1 { border-radius: .125rem; }
+.br2 { border-radius: .25rem; }
+.br3 { border-radius: .5rem; }
+.br4 { border-radius: 1rem; }
+.br-100 { border-radius: 100%; }
+.br-pill { border-radius: 9999px; }
+.br--bottom {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+.br--top {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+.br--right {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+.br--left {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+@media screen and (min-width: 30em) {
+ .br0-ns { border-radius: 0; }
+ .br1-ns { border-radius: .125rem; }
+ .br2-ns { border-radius: .25rem; }
+ .br3-ns { border-radius: .5rem; }
+ .br4-ns { border-radius: 1rem; }
+ .br-100-ns { border-radius: 100%; }
+ .br-pill-ns { border-radius: 9999px; }
+ .br--bottom-ns {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-ns {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-ns {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-ns {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .br0-m { border-radius: 0; }
+ .br1-m { border-radius: .125rem; }
+ .br2-m { border-radius: .25rem; }
+ .br3-m { border-radius: .5rem; }
+ .br4-m { border-radius: 1rem; }
+ .br-100-m { border-radius: 100%; }
+ .br-pill-m { border-radius: 9999px; }
+ .br--bottom-m {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-m {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-m {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-m {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+@media screen and (min-width: 60em) {
+ .br0-l { border-radius: 0; }
+ .br1-l { border-radius: .125rem; }
+ .br2-l { border-radius: .25rem; }
+ .br3-l { border-radius: .5rem; }
+ .br4-l { border-radius: 1rem; }
+ .br-100-l { border-radius: 100%; }
+ .br-pill-l { border-radius: 9999px; }
+ .br--bottom-l {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .br--top-l {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .br--right-l {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ .br--left-l {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+/*
+
+ BORDER STYLES
+ Docs: http://tachyons.io/docs/themes/borders/
+
+ Depends on base border module in _borders.css
+
+ Base:
+ b = border-style
+
+ Modifiers:
+ --none = none
+ --dotted = dotted
+ --dashed = dashed
+ --solid = solid
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+.b--dotted { border-style: dotted; }
+.b--dashed { border-style: dashed; }
+.b--solid { border-style: solid; }
+.b--none { border-style: none; }
+@media screen and (min-width: 30em) {
+ .b--dotted-ns { border-style: dotted; }
+ .b--dashed-ns { border-style: dashed; }
+ .b--solid-ns { border-style: solid; }
+ .b--none-ns { border-style: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .b--dotted-m { border-style: dotted; }
+ .b--dashed-m { border-style: dashed; }
+ .b--solid-m { border-style: solid; }
+ .b--none-m { border-style: none; }
+}
+@media screen and (min-width: 60em) {
+ .b--dotted-l { border-style: dotted; }
+ .b--dashed-l { border-style: dashed; }
+ .b--solid-l { border-style: solid; }
+ .b--none-l { border-style: none; }
+}
+/*
+
+ BORDER WIDTHS
+ Docs: http://tachyons.io/docs/themes/borders/
+
+ Base:
+ bw = border-width
+
+ Modifiers:
+ 0 = 0 width border
+ 1 = 1st step in border-width scale
+ 2 = 2nd step in border-width scale
+ 3 = 3rd step in border-width scale
+ 4 = 4th step in border-width scale
+ 5 = 5th step in border-width scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
+/* Resets */
+.bt-0 { border-top-width: 0; }
+.br-0 { border-right-width: 0; }
+.bb-0 { border-bottom-width: 0; }
+.bl-0 { border-left-width: 0; }
+@media screen and (min-width: 30em) {
+ .bw0-ns { border-width: 0; }
+ .bw1-ns { border-width: .125rem; }
+ .bw2-ns { border-width: .25rem; }
+ .bw3-ns { border-width: .5rem; }
+ .bw4-ns { border-width: 1rem; }
+ .bw5-ns { border-width: 2rem; }
+ .bt-0-ns { border-top-width: 0; }
+ .br-0-ns { border-right-width: 0; }
+ .bb-0-ns { border-bottom-width: 0; }
+ .bl-0-ns { border-left-width: 0; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .bw0-m { border-width: 0; }
+ .bw1-m { border-width: .125rem; }
+ .bw2-m { border-width: .25rem; }
+ .bw3-m { border-width: .5rem; }
+ .bw4-m { border-width: 1rem; }
+ .bw5-m { border-width: 2rem; }
+ .bt-0-m { border-top-width: 0; }
+ .br-0-m { border-right-width: 0; }
+ .bb-0-m { border-bottom-width: 0; }
+ .bl-0-m { border-left-width: 0; }
+}
+@media screen and (min-width: 60em) {
+ .bw0-l { border-width: 0; }
+ .bw1-l { border-width: .125rem; }
+ .bw2-l { border-width: .25rem; }
+ .bw3-l { border-width: .5rem; }
+ .bw4-l { border-width: 1rem; }
+ .bw5-l { border-width: 2rem; }
+ .bt-0-l { border-top-width: 0; }
+ .br-0-l { border-right-width: 0; }
+ .bb-0-l { border-bottom-width: 0; }
+ .bl-0-l { border-left-width: 0; }
+}
+/*
+
+ BOX-SHADOW
+ Docs: http://tachyons.io/docs/themes/box-shadow/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+.shadow-1 { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+.shadow-2 { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+.shadow-3 { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+.shadow-4 { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+.shadow-5 { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+@media screen and (min-width: 30em) {
+ .shadow-1-ns { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-2-ns { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+ .shadow-3-ns { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-4-ns { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+ .shadow-5-ns { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .shadow-1-m { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-2-m { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+ .shadow-3-m { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-4-m { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+ .shadow-5-m { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+}
+@media screen and (min-width: 60em) {
+ .shadow-1-l { -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-2-l { -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); }
+ .shadow-3-l { -webkit-box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
+ .shadow-4-l { -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); }
+ .shadow-5-l { -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); }
+}
+/*@import 'tachyons/src/_code';*/
+/*
+
+ COORDINATES
+ Docs: http://tachyons.io/docs/layout/position/
+
+ Use in combination with the position module.
+
+ Base:
+ top
+ bottom
+ right
+ left
+
+ Modifiers:
+ -0 = literal value 0
+ -1 = literal value 1
+ -2 = literal value 2
+ --1 = literal value -1
+ --2 = literal value -2
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+.top-1 { top: 1rem; }
+.right-1 { right: 1rem; }
+.bottom-1 { bottom: 1rem; }
+.left-1 { left: 1rem; }
+.top-2 { top: 2rem; }
+.right-2 { right: 2rem; }
+.bottom-2 { bottom: 2rem; }
+.left-2 { left: 2rem; }
+.top--1 { top: -1rem; }
+.right--1 { right: -1rem; }
+.bottom--1 { bottom: -1rem; }
+.left--1 { left: -1rem; }
+.top--2 { top: -2rem; }
+.right--2 { right: -2rem; }
+.bottom--2 { bottom: -2rem; }
+.left--2 { left: -2rem; }
+.absolute--fill {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+@media screen and (min-width: 30em) {
+ .top-0-ns { top: 0; }
+ .left-0-ns { left: 0; }
+ .right-0-ns { right: 0; }
+ .bottom-0-ns { bottom: 0; }
+ .top-1-ns { top: 1rem; }
+ .left-1-ns { left: 1rem; }
+ .right-1-ns { right: 1rem; }
+ .bottom-1-ns { bottom: 1rem; }
+ .top-2-ns { top: 2rem; }
+ .left-2-ns { left: 2rem; }
+ .right-2-ns { right: 2rem; }
+ .bottom-2-ns { bottom: 2rem; }
+ .top--1-ns { top: -1rem; }
+ .right--1-ns { right: -1rem; }
+ .bottom--1-ns { bottom: -1rem; }
+ .left--1-ns { left: -1rem; }
+ .top--2-ns { top: -2rem; }
+ .right--2-ns { right: -2rem; }
+ .bottom--2-ns { bottom: -2rem; }
+ .left--2-ns { left: -2rem; }
+ .absolute--fill-ns {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .top-0-m { top: 0; }
+ .left-0-m { left: 0; }
+ .right-0-m { right: 0; }
+ .bottom-0-m { bottom: 0; }
+ .top-1-m { top: 1rem; }
+ .left-1-m { left: 1rem; }
+ .right-1-m { right: 1rem; }
+ .bottom-1-m { bottom: 1rem; }
+ .top-2-m { top: 2rem; }
+ .left-2-m { left: 2rem; }
+ .right-2-m { right: 2rem; }
+ .bottom-2-m { bottom: 2rem; }
+ .top--1-m { top: -1rem; }
+ .right--1-m { right: -1rem; }
+ .bottom--1-m { bottom: -1rem; }
+ .left--1-m { left: -1rem; }
+ .top--2-m { top: -2rem; }
+ .right--2-m { right: -2rem; }
+ .bottom--2-m { bottom: -2rem; }
+ .left--2-m { left: -2rem; }
+ .absolute--fill-m {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+@media screen and (min-width: 60em) {
+ .top-0-l { top: 0; }
+ .left-0-l { left: 0; }
+ .right-0-l { right: 0; }
+ .bottom-0-l { bottom: 0; }
+ .top-1-l { top: 1rem; }
+ .left-1-l { left: 1rem; }
+ .right-1-l { right: 1rem; }
+ .bottom-1-l { bottom: 1rem; }
+ .top-2-l { top: 2rem; }
+ .left-2-l { left: 2rem; }
+ .right-2-l { right: 2rem; }
+ .bottom-2-l { bottom: 2rem; }
+ .top--1-l { top: -1rem; }
+ .right--1-l { right: -1rem; }
+ .bottom--1-l { bottom: -1rem; }
+ .left--1-l { left: -1rem; }
+ .top--2-l { top: -2rem; }
+ .right--2-l { right: -2rem; }
+ .bottom--2-l { bottom: -2rem; }
+ .left--2-l { left: -2rem; }
+ .absolute--fill-l {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+}
+/*
+
+ CLEARFIX
+ http://tachyons.io/docs/layout/clearfix/
+
+*/
+/* Nicolas Gallaghers Clearfix solution
+ Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
+.cf:before,
+.cf:after { content: " "; display: table; }
+.cf:after { clear: both; }
+.cf { *zoom: 1; }
+.cl { clear: left; }
+.cr { clear: right; }
+.cb { clear: both; }
+.cn { clear: none; }
+@media screen and (min-width: 30em) {
+ .cl-ns { clear: left; }
+ .cr-ns { clear: right; }
+ .cb-ns { clear: both; }
+ .cn-ns { clear: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .cl-m { clear: left; }
+ .cr-m { clear: right; }
+ .cb-m { clear: both; }
+ .cn-m { clear: none; }
+}
+@media screen and (min-width: 60em) {
+ .cl-l { clear: left; }
+ .cr-l { clear: right; }
+ .cb-l { clear: both; }
+ .cn-l { clear: none; }
+}
+/*
+
+ DISPLAY
+ Docs: http://tachyons.io/docs/layout/display
+
+ Base:
+ d = display
+
+ Modifiers:
+ n = none
+ b = block
+ ib = inline-block
+ it = inline-table
+ t = table
+ tc = table-cell
+ t-row = table-row
+ t-columm = table-column
+ t-column-group = table-column-group
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.dn { display: none; }
+.di { display: inline; }
+.db { display: block; }
+.dib { display: inline-block; }
+.dit { display: inline-table; }
+.dt { display: table; }
+.dtc { display: table-cell; }
+.dt-row { display: table-row; }
+.dt-row-group { display: table-row-group; }
+.dt-column { display: table-column; }
+.dt-column-group { display: table-column-group; }
+/*
+ This will set table to full width and then
+ all cells will be equal width
+*/
+.dt--fixed {
+ table-layout: fixed;
+ width: 100%;
+}
+@media screen and (min-width: 30em) {
+ .dn-ns { display: none; }
+ .di-ns { display: inline; }
+ .db-ns { display: block; }
+ .dib-ns { display: inline-block; }
+ .dit-ns { display: inline-table; }
+ .dt-ns { display: table; }
+ .dtc-ns { display: table-cell; }
+ .dt-row-ns { display: table-row; }
+ .dt-row-group-ns { display: table-row-group; }
+ .dt-column-ns { display: table-column; }
+ .dt-column-group-ns { display: table-column-group; }
+
+ .dt--fixed-ns {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .dn-m { display: none; }
+ .di-m { display: inline; }
+ .db-m { display: block; }
+ .dib-m { display: inline-block; }
+ .dit-m { display: inline-table; }
+ .dt-m { display: table; }
+ .dtc-m { display: table-cell; }
+ .dt-row-m { display: table-row; }
+ .dt-row-group-m { display: table-row-group; }
+ .dt-column-m { display: table-column; }
+ .dt-column-group-m { display: table-column-group; }
+
+ .dt--fixed-m {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
+@media screen and (min-width: 60em) {
+ .dn-l { display: none; }
+ .di-l { display: inline; }
+ .db-l { display: block; }
+ .dib-l { display: inline-block; }
+ .dit-l { display: inline-table; }
+ .dt-l { display: table; }
+ .dtc-l { display: table-cell; }
+ .dt-row-l { display: table-row; }
+ .dt-row-group-l { display: table-row-group; }
+ .dt-column-l { display: table-column; }
+ .dt-column-group-l { display: table-column-group; }
+
+ .dt--fixed-l {
+ table-layout: fixed;
+ width: 100%;
+ }
+}
+/*
+
+ FLEXBOX
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
+.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
+/* 1. Fix for Chrome 44 bug.
+ * https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+}
+.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+.self-start { -ms-flex-item-align: start; align-self: flex-start; }
+.self-end { -ms-flex-item-align: end; align-self: flex-end; }
+.self-center { -ms-flex-item-align: center; align-self: center; }
+.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
+.self-stretch { -ms-flex-item-align: stretch; align-self: stretch; }
+.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
+.content-start { -ms-flex-line-pack: start; align-content: flex-start; }
+.content-end { -ms-flex-line-pack: end; align-content: flex-end; }
+.content-center { -ms-flex-line-pack: center; align-content: center; }
+.content-between { -ms-flex-line-pack: justify; align-content: space-between; }
+.content-around { -ms-flex-line-pack: distribute; align-content: space-around; }
+.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }
+.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
+.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; }
+.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; }
+@media screen and (min-width: 30em) {
+ .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; }
+ .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
+ .flex-auto-ns {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+ .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+ .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+ .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+ .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+ .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+ .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+ .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+ .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+ .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+ .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+ .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+ .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+
+ .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; }
+ .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; }
+ .self-center-ns { -ms-flex-item-align: center; align-self: center; }
+ .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; }
+ .self-stretch-ns { -ms-flex-item-align: stretch; align-self: stretch; }
+
+ .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+ .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+ .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+ .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+ .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; }
+
+ .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; }
+ .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; }
+ .content-center-ns { -ms-flex-line-pack: center; align-content: center; }
+ .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; }
+ .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; }
+ .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; }
+
+ .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
+ .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+ .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+ .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+ .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+ .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+ .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+ .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+ .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+ .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+
+ .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+ .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+ .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; }
+ .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; }
+ .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
+ .flex-auto-m {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+ .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+ .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+ .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+ .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+ .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+ .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+ .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+ .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+ .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+ .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+ .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+ .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+
+ .self-start-m { -ms-flex-item-align: start; align-self: flex-start; }
+ .self-end-m { -ms-flex-item-align: end; align-self: flex-end; }
+ .self-center-m { -ms-flex-item-align: center; align-self: center; }
+ .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; }
+ .self-stretch-m { -ms-flex-item-align: stretch; align-self: stretch; }
+
+ .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+ .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+ .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+ .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+ .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; }
+
+ .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; }
+ .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; }
+ .content-center-m { -ms-flex-line-pack: center; align-content: center; }
+ .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; }
+ .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; }
+ .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; }
+
+ .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
+ .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+ .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+ .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+ .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+ .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+ .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+ .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+ .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+ .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+
+ .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+ .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+ .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; }
+ .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; }
+}
+@media screen and (min-width: 60em) {
+ .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; }
+ .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }
+ .flex-auto-l {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ min-width: 0; /* 1 */
+ min-height: 0; /* 1 */
+ }
+ .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; }
+ .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
+ .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
+ .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; }
+ .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
+ .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }
+ .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
+ .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
+
+ .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
+ .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
+ .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
+ .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
+ .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
+
+ .self-start-l { -ms-flex-item-align: start; align-self: flex-start; }
+ .self-end-l { -ms-flex-item-align: end; align-self: flex-end; }
+ .self-center-l { -ms-flex-item-align: center; align-self: center; }
+ .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; }
+ .self-stretch-l { -ms-flex-item-align: stretch; align-self: stretch; }
+
+ .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
+ .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
+ .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
+ .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
+ .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; }
+
+ .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; }
+ .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; }
+ .content-center-l { -ms-flex-line-pack: center; align-content: center; }
+ .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; }
+ .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; }
+ .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; }
+
+ .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
+ .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
+ .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
+ .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
+ .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
+ .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
+ .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; }
+ .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
+ .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
+ .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; }
+
+ .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; }
+ .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
+
+ .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; }
+ .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; }
+}
+/*
+
+ FLOATS
+ http://tachyons.io/docs/layout/floats/
+
+ 1. Floated elements are automatically rendered as block level elements.
+ Setting floats to display inline will fix the double margin bug in
+ ie6. You know... just in case.
+
+ 2. Don't forget to clearfix your floats with .cf
+
+ Base:
+ f = float
+
+ Modifiers:
+ l = left
+ r = right
+ n = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.fl { float: left; _display: inline; }
+.fr { float: right; _display: inline; }
+.fn { float: none; }
+@media screen and (min-width: 30em) {
+ .fl-ns { float: left; _display: inline; }
+ .fr-ns { float: right; _display: inline; }
+ .fn-ns { float: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .fl-m { float: left; _display: inline; }
+ .fr-m { float: right; _display: inline; }
+ .fn-m { float: none; }
+}
+@media screen and (min-width: 60em) {
+ .fl-l { float: left; _display: inline; }
+ .fr-l { float: right; _display: inline; }
+ .fn-l { float: none; }
+}
+/*@import 'tachyons/src/_font-family';*/
+/*
+
+ FONT STYLE
+ Docs: http://tachyons.io/docs/typography/font-style/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.i { font-style: italic; }
+.fs-normal { font-style: normal; }
+@media screen and (min-width: 30em) {
+ .i-ns { font-style: italic; }
+ .fs-normal-ns { font-style: normal; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .i-m { font-style: italic; }
+ .fs-normal-m { font-style: normal; }
+}
+@media screen and (min-width: 60em) {
+ .i-l { font-style: italic; }
+ .fs-normal-l { font-style: normal; }
+}
+/*
+
+ FONT WEIGHT
+ Docs: http://tachyons.io/docs/typography/font-weight/
+
+ Base
+ fw = font-weight
+
+ Modifiers:
+ 1 = literal value 100
+ 2 = literal value 200
+ 3 = literal value 300
+ 4 = literal value 400
+ 5 = literal value 500
+ 6 = literal value 600
+ 7 = literal value 700
+ 8 = literal value 800
+ 9 = literal value 900
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.normal { font-weight: normal; }
+.b { font-weight: bold; }
+.fw1 { font-weight: 100; }
+.fw2 { font-weight: 200; }
+.fw3 { font-weight: 300; }
+.fw4 { font-weight: 400; }
+.fw5 { font-weight: 500; }
+.fw6 { font-weight: 600; }
+.fw7 { font-weight: 700; }
+.fw8 { font-weight: 800; }
+.fw9 { font-weight: 900; }
+@media screen and (min-width: 30em) {
+ .normal-ns { font-weight: normal; }
+ .b-ns { font-weight: bold; }
+ .fw1-ns { font-weight: 100; }
+ .fw2-ns { font-weight: 200; }
+ .fw3-ns { font-weight: 300; }
+ .fw4-ns { font-weight: 400; }
+ .fw5-ns { font-weight: 500; }
+ .fw6-ns { font-weight: 600; }
+ .fw7-ns { font-weight: 700; }
+ .fw8-ns { font-weight: 800; }
+ .fw9-ns { font-weight: 900; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .normal-m { font-weight: normal; }
+ .b-m { font-weight: bold; }
+ .fw1-m { font-weight: 100; }
+ .fw2-m { font-weight: 200; }
+ .fw3-m { font-weight: 300; }
+ .fw4-m { font-weight: 400; }
+ .fw5-m { font-weight: 500; }
+ .fw6-m { font-weight: 600; }
+ .fw7-m { font-weight: 700; }
+ .fw8-m { font-weight: 800; }
+ .fw9-m { font-weight: 900; }
+}
+@media screen and (min-width: 60em) {
+ .normal-l { font-weight: normal; }
+ .b-l { font-weight: bold; }
+ .fw1-l { font-weight: 100; }
+ .fw2-l { font-weight: 200; }
+ .fw3-l { font-weight: 300; }
+ .fw4-l { font-weight: 400; }
+ .fw5-l { font-weight: 500; }
+ .fw6-l { font-weight: 600; }
+ .fw7-l { font-weight: 700; }
+ .fw8-l { font-weight: 800; }
+ .fw9-l { font-weight: 900; }
+}
+/*
+
+ FORMS
+
+*/
+.input-reset {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+.button-reset::-moz-focus-inner,
+.input-reset::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+/*
+
+ HEIGHTS
+ Docs: http://tachyons.io/docs/layout/heights/
+
+ Base:
+ h = height
+ min-h = min-height
+ min-vh = min-height vertical screen height
+ vh = vertical screen height
+
+ Modifiers
+ 1 = 1st step in height scale
+ 2 = 2nd step in height scale
+ 3 = 3rd step in height scale
+ 4 = 4th step in height scale
+ 5 = 5th step in height scale
+
+ -25 = literal value 25%
+ -50 = literal value 50%
+ -75 = literal value 75%
+ -100 = literal value 100%
+
+ -auto = string value of auto
+ -inherit = string value of inherit
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/* Height Scale */
+.h1 { height: 1rem; }
+.h2 { height: 2rem; }
+.h3 { height: 4rem; }
+.h4 { height: 8rem; }
+.h5 { height: 16rem; }
+/* Height Percentages - Based off of height of parent */
+.h-25 { height: 25%; }
+.h-50 { height: 50%; }
+.h-75 { height: 75%; }
+.h-100 { height: 100%; }
+.min-h-100 { min-height: 100%; }
+/* Screen Height Percentage */
+.vh-25 { height: 25vh; }
+.vh-50 { height: 50vh; }
+.vh-75 { height: 75vh; }
+.vh-100 { height: 100vh; }
+.min-vh-100 { min-height: 100vh; }
+/* String Properties */
+.h-auto { height: auto; }
+.h-inherit { height: inherit; }
+@media screen and (min-width: 30em) {
+ .h1-ns { height: 1rem; }
+ .h2-ns { height: 2rem; }
+ .h3-ns { height: 4rem; }
+ .h4-ns { height: 8rem; }
+ .h5-ns { height: 16rem; }
+ .h-25-ns { height: 25%; }
+ .h-50-ns { height: 50%; }
+ .h-75-ns { height: 75%; }
+ .h-100-ns { height: 100%; }
+ .min-h-100-ns { min-height: 100%; }
+ .vh-25-ns { height: 25vh; }
+ .vh-50-ns { height: 50vh; }
+ .vh-75-ns { height: 75vh; }
+ .vh-100-ns { height: 100vh; }
+ .min-vh-100-ns { min-height: 100vh; }
+ .h-auto-ns { height: auto; }
+ .h-inherit-ns { height: inherit; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .h1-m { height: 1rem; }
+ .h2-m { height: 2rem; }
+ .h3-m { height: 4rem; }
+ .h4-m { height: 8rem; }
+ .h5-m { height: 16rem; }
+ .h-25-m { height: 25%; }
+ .h-50-m { height: 50%; }
+ .h-75-m { height: 75%; }
+ .h-100-m { height: 100%; }
+ .min-h-100-m { min-height: 100%; }
+ .vh-25-m { height: 25vh; }
+ .vh-50-m { height: 50vh; }
+ .vh-75-m { height: 75vh; }
+ .vh-100-m { height: 100vh; }
+ .min-vh-100-m { min-height: 100vh; }
+ .h-auto-m { height: auto; }
+ .h-inherit-m { height: inherit; }
+}
+@media screen and (min-width: 60em) {
+ .h1-l { height: 1rem; }
+ .h2-l { height: 2rem; }
+ .h3-l { height: 4rem; }
+ .h4-l { height: 8rem; }
+ .h5-l { height: 16rem; }
+ .h-25-l { height: 25%; }
+ .h-50-l { height: 50%; }
+ .h-75-l { height: 75%; }
+ .h-100-l { height: 100%; }
+ .min-h-100-l { min-height: 100%; }
+ .vh-25-l { height: 25vh; }
+ .vh-50-l { height: 50vh; }
+ .vh-75-l { height: 75vh; }
+ .vh-100-l { height: 100vh; }
+ .min-vh-100-l { min-height: 100vh; }
+ .h-auto-l { height: auto; }
+ .h-inherit-l { height: inherit; }
+}
+/*
+
+ LETTER SPACING
+ Docs: http://tachyons.io/docs/typography/tracking/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.tracked { letter-spacing: .1em; }
+.tracked-tight { letter-spacing: -.05em; }
+.tracked-mega { letter-spacing: .25em; }
+@media screen and (min-width: 30em) {
+ .tracked-ns { letter-spacing: .1em; }
+ .tracked-tight-ns { letter-spacing: -.05em; }
+ .tracked-mega-ns { letter-spacing: .25em; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .tracked-m { letter-spacing: .1em; }
+ .tracked-tight-m { letter-spacing: -.05em; }
+ .tracked-mega-m { letter-spacing: .25em; }
+}
+@media screen and (min-width: 60em) {
+ .tracked-l { letter-spacing: .1em; }
+ .tracked-tight-l { letter-spacing: -.05em; }
+ .tracked-mega-l { letter-spacing: .25em; }
+}
+/*
+
+ LINE HEIGHT / LEADING
+ Docs: http://tachyons.io/docs/typography/line-height
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.lh-solid { line-height: 1; }
+.lh-title { line-height: 1.25; }
+.lh-copy { line-height: 1.5; }
+@media screen and (min-width: 30em) {
+ .lh-solid-ns { line-height: 1; }
+ .lh-title-ns { line-height: 1.25; }
+ .lh-copy-ns { line-height: 1.5; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .lh-solid-m { line-height: 1; }
+ .lh-title-m { line-height: 1.25; }
+ .lh-copy-m { line-height: 1.5; }
+}
+@media screen and (min-width: 60em) {
+ .lh-solid-l { line-height: 1; }
+ .lh-title-l { line-height: 1.25; }
+ .lh-copy-l { line-height: 1.5; }
+}
+/*
+
+ LINKS
+ Docs: http://tachyons.io/docs/elements/links/
+
+*/
+.link {
+ text-decoration: none;
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+}
+.link:link,
+.link:visited {
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+}
+.link:hover {
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+}
+.link:active {
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+}
+.link:focus {
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+ outline: 1px dotted currentColor;
+}
+/*
+
+ LISTS
+ http://tachyons.io/docs/elements/lists/
+
+*/
+.list { list-style-type: none; }
+/*
+
+ MAX WIDTHS
+ Docs: http://tachyons.io/docs/layout/max-widths/
+
+ Base:
+ mw = max-width
+
+ Modifiers
+ 1 = 1st step in width scale
+ 2 = 2nd step in width scale
+ 3 = 3rd step in width scale
+ 4 = 4th step in width scale
+ 5 = 5th step in width scale
+ 6 = 6st step in width scale
+ 7 = 7nd step in width scale
+ 8 = 8rd step in width scale
+ 9 = 9th step in width scale
+
+ -100 = literal value 100%
+
+ -none = string value none
+
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/* Max Width Percentages */
+.mw-100 { max-width: 100%; }
+/* Max Width Scale */
+.mw1 { max-width: 1rem; }
+.mw2 { max-width: 2rem; }
+.mw3 { max-width: 4rem; }
+.mw4 { max-width: 8rem; }
+.mw5 { max-width: 16rem; }
+.mw6 { max-width: 32rem; }
+.mw7 { max-width: 48rem; }
+.mw8 { max-width: 64rem; }
+.mw9 { max-width: 96rem; }
+/* Max Width String Properties */
+.mw-none { max-width: none; }
+@media screen and (min-width: 30em) {
+ .mw-100-ns { max-width: 100%; }
+
+ .mw1-ns { max-width: 1rem; }
+ .mw2-ns { max-width: 2rem; }
+ .mw3-ns { max-width: 4rem; }
+ .mw4-ns { max-width: 8rem; }
+ .mw5-ns { max-width: 16rem; }
+ .mw6-ns { max-width: 32rem; }
+ .mw7-ns { max-width: 48rem; }
+ .mw8-ns { max-width: 64rem; }
+ .mw9-ns { max-width: 96rem; }
+
+ .mw-none-ns { max-width: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .mw-100-m { max-width: 100%; }
+
+ .mw1-m { max-width: 1rem; }
+ .mw2-m { max-width: 2rem; }
+ .mw3-m { max-width: 4rem; }
+ .mw4-m { max-width: 8rem; }
+ .mw5-m { max-width: 16rem; }
+ .mw6-m { max-width: 32rem; }
+ .mw7-m { max-width: 48rem; }
+ .mw8-m { max-width: 64rem; }
+ .mw9-m { max-width: 96rem; }
+
+ .mw-none-m { max-width: none; }
+}
+@media screen and (min-width: 60em) {
+ .mw-100-l { max-width: 100%; }
+
+ .mw1-l { max-width: 1rem; }
+ .mw2-l { max-width: 2rem; }
+ .mw3-l { max-width: 4rem; }
+ .mw4-l { max-width: 8rem; }
+ .mw5-l { max-width: 16rem; }
+ .mw6-l { max-width: 32rem; }
+ .mw7-l { max-width: 48rem; }
+ .mw8-l { max-width: 64rem; }
+ .mw9-l { max-width: 96rem; }
+
+ .mw-none-l { max-width: none; }
+}
+/*
+
+ WIDTHS
+ Docs: http://tachyons.io/docs/layout/widths/
+
+ Base:
+ w = width
+
+ Modifiers
+ 1 = 1st step in width scale
+ 2 = 2nd step in width scale
+ 3 = 3rd step in width scale
+ 4 = 4th step in width scale
+ 5 = 5th step in width scale
+
+ -10 = literal value 10%
+ -20 = literal value 20%
+ -25 = literal value 25%
+ -30 = literal value 30%
+ -33 = literal value 33%
+ -34 = literal value 34%
+ -40 = literal value 40%
+ -50 = literal value 50%
+ -60 = literal value 60%
+ -70 = literal value 70%
+ -75 = literal value 75%
+ -80 = literal value 80%
+ -90 = literal value 90%
+ -100 = literal value 100%
+
+ -third = 100% / 3 (Not supported in opera mini or IE8)
+ -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
+ -auto = string value auto
+
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/* Width Scale */
+.w1 { width: 1rem; }
+.w2 { width: 2rem; }
+.w3 { width: 4rem; }
+.w4 { width: 8rem; }
+.w5 { width: 16rem; }
+.w-10 { width: 10%; }
+.w-20 { width: 20%; }
+.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-33 { width: 33%; }
+.w-34 { width: 34%; }
+.w-40 { width: 40%; }
+.w-50 { width: 50%; }
+.w-60 { width: 60%; }
+.w-70 { width: 70%; }
+.w-75 { width: 75%; }
+.w-80 { width: 80%; }
+.w-90 { width: 90%; }
+.w-100 { width: 100%; }
+.w-third { width: 33.33333%; }
+.w-two-thirds { width: 66.66667%; }
+.w-auto { width: auto; }
+@media screen and (min-width: 30em) {
+ .w1-ns { width: 1rem; }
+ .w2-ns { width: 2rem; }
+ .w3-ns { width: 4rem; }
+ .w4-ns { width: 8rem; }
+ .w5-ns { width: 16rem; }
+ .w-10-ns { width: 10%; }
+ .w-20-ns { width: 20%; }
+ .w-25-ns { width: 25%; }
+ .w-30-ns { width: 30%; }
+ .w-33-ns { width: 33%; }
+ .w-34-ns { width: 34%; }
+ .w-40-ns { width: 40%; }
+ .w-50-ns { width: 50%; }
+ .w-60-ns { width: 60%; }
+ .w-70-ns { width: 70%; }
+ .w-75-ns { width: 75%; }
+ .w-80-ns { width: 80%; }
+ .w-90-ns { width: 90%; }
+ .w-100-ns { width: 100%; }
+ .w-third-ns { width: 33.33333%; }
+ .w-two-thirds-ns { width: 66.66667%; }
+ .w-auto-ns { width: auto; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .w1-m { width: 1rem; }
+ .w2-m { width: 2rem; }
+ .w3-m { width: 4rem; }
+ .w4-m { width: 8rem; }
+ .w5-m { width: 16rem; }
+ .w-10-m { width: 10%; }
+ .w-20-m { width: 20%; }
+ .w-25-m { width: 25%; }
+ .w-30-m { width: 30%; }
+ .w-33-m { width: 33%; }
+ .w-34-m { width: 34%; }
+ .w-40-m { width: 40%; }
+ .w-50-m { width: 50%; }
+ .w-60-m { width: 60%; }
+ .w-70-m { width: 70%; }
+ .w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-90-m { width: 90%; }
+ .w-100-m { width: 100%; }
+ .w-third-m { width: 33.33333%; }
+ .w-two-thirds-m { width: 66.66667%; }
+ .w-auto-m { width: auto; }
+}
+@media screen and (min-width: 60em) {
+ .w1-l { width: 1rem; }
+ .w2-l { width: 2rem; }
+ .w3-l { width: 4rem; }
+ .w4-l { width: 8rem; }
+ .w5-l { width: 16rem; }
+ .w-10-l { width: 10%; }
+ .w-20-l { width: 20%; }
+ .w-25-l { width: 25%; }
+ .w-30-l { width: 30%; }
+ .w-33-l { width: 33%; }
+ .w-34-l { width: 34%; }
+ .w-40-l { width: 40%; }
+ .w-50-l { width: 50%; }
+ .w-60-l { width: 60%; }
+ .w-70-l { width: 70%; }
+ .w-75-l { width: 75%; }
+ .w-80-l { width: 80%; }
+ .w-90-l { width: 90%; }
+ .w-100-l { width: 100%; }
+ .w-third-l { width: 33.33333%; }
+ .w-two-thirds-l { width: 66.66667%; }
+ .w-auto-l { width: auto; }
+}
+/*
+
+ OVERFLOW
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+.overflow-visible { overflow: visible; }
+.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-scroll { overflow-y: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+@media screen and (min-width: 30em) {
+ .overflow-visible-ns { overflow: visible; }
+ .overflow-hidden-ns { overflow: hidden; }
+ .overflow-scroll-ns { overflow: scroll; }
+ .overflow-auto-ns { overflow: auto; }
+ .overflow-x-visible-ns { overflow-x: visible; }
+ .overflow-x-hidden-ns { overflow-x: hidden; }
+ .overflow-x-scroll-ns { overflow-x: scroll; }
+ .overflow-x-auto-ns { overflow-x: auto; }
+
+ .overflow-y-visible-ns { overflow-y: visible; }
+ .overflow-y-hidden-ns { overflow-y: hidden; }
+ .overflow-y-scroll-ns { overflow-y: scroll; }
+ .overflow-y-auto-ns { overflow-y: auto; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .overflow-visible-m { overflow: visible; }
+ .overflow-hidden-m { overflow: hidden; }
+ .overflow-scroll-m { overflow: scroll; }
+ .overflow-auto-m { overflow: auto; }
+
+ .overflow-x-visible-m { overflow-x: visible; }
+ .overflow-x-hidden-m { overflow-x: hidden; }
+ .overflow-x-scroll-m { overflow-x: scroll; }
+ .overflow-x-auto-m { overflow-x: auto; }
+
+ .overflow-y-visible-m { overflow-y: visible; }
+ .overflow-y-hidden-m { overflow-y: hidden; }
+ .overflow-y-scroll-m { overflow-y: scroll; }
+ .overflow-y-auto-m { overflow-y: auto; }
+}
+@media screen and (min-width: 60em) {
+ .overflow-visible-l { overflow: visible; }
+ .overflow-hidden-l { overflow: hidden; }
+ .overflow-scroll-l { overflow: scroll; }
+ .overflow-auto-l { overflow: auto; }
+
+ .overflow-x-visible-l { overflow-x: visible; }
+ .overflow-x-hidden-l { overflow-x: hidden; }
+ .overflow-x-scroll-l { overflow-x: scroll; }
+ .overflow-x-auto-l { overflow-x: auto; }
+
+ .overflow-y-visible-l { overflow-y: visible; }
+ .overflow-y-hidden-l { overflow-y: hidden; }
+ .overflow-y-scroll-l { overflow-y: scroll; }
+ .overflow-y-auto-l { overflow-y: auto; }
+}
+/*
+
+ POSITIONING
+ Docs: http://tachyons.io/docs/layout/position/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.static { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+@media screen and (min-width: 30em) {
+ .static-ns { position: static; }
+ .relative-ns { position: relative; }
+ .absolute-ns { position: absolute; }
+ .fixed-ns { position: fixed; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .static-m { position: static; }
+ .relative-m { position: relative; }
+ .absolute-m { position: absolute; }
+ .fixed-m { position: fixed; }
+}
+@media screen and (min-width: 60em) {
+ .static-l { position: static; }
+ .relative-l { position: relative; }
+ .absolute-l { position: absolute; }
+ .fixed-l { position: fixed; }
+}
+/*
+
+ OPACITY
+ Docs: http://tachyons.io/docs/themes/opacity/
+
+*/
+.o-100 { opacity: 1; }
+.o-90 { opacity: .9; }
+.o-80 { opacity: .8; }
+.o-70 { opacity: .7; }
+.o-60 { opacity: .6; }
+.o-50 { opacity: .5; }
+.o-40 { opacity: .4; }
+.o-30 { opacity: .3; }
+.o-20 { opacity: .2; }
+.o-10 { opacity: .1; }
+.o-05 { opacity: .05; }
+.o-025 { opacity: .025; }
+.o-0 { opacity: 0; }
+/*@import 'tachyons/src/_rotations';*/
+/*
+
+ SKINS
+ Docs: http://tachyons.io/docs/themes/skins/
+
+ Classes for setting foreground and background colors on elements.
+ If you haven't declared a border color, but set border on an element, it will
+ be set to the current text color.
+
+*/
+/* Text colors */
+.black-90 { color: rgba(0, 0, 0, .9); }
+.black-80 { color: rgba(0, 0, 0, .8); }
+.black-70 { color: rgba(0, 0, 0, .7); }
+.black-60 { color: rgba(0, 0, 0, .6); }
+.black-50 { color: rgba(0, 0, 0, .5); }
+.black-40 { color: rgba(0, 0, 0, .4); }
+.black-30 { color: rgba(0, 0, 0, .3); }
+.black-20 { color: rgba(0, 0, 0, .2); }
+.black-10 { color: rgba(0, 0, 0, .1); }
+.black-05 { color: rgba(0, 0, 0, .05); }
+.white-90 { color: rgba(255, 255, 255, .9); }
+.white-80 { color: rgba(255, 255, 255, .8); }
+.white-70 { color: rgba(255, 255, 255, .7); }
+.white-60 { color: rgba(255, 255, 255, .6); }
+.white-50 { color: rgba(255, 255, 255, .5); }
+.white-40 { color: rgba(255, 255, 255, .4); }
+.white-30 { color: rgba(255, 255, 255, .3); }
+.white-20 { color: rgba(255, 255, 255, .2); }
+.white-10 { color: rgba(255, 255, 255, .1); }
+.black { color: #000; }
+.near-black { color: #111; }
+.dark-gray { color: #333; }
+.mid-gray { color: #555; }
+.gray { color: #777; }
+.silver { color: #999; }
+.light-silver { color: #aaa; }
+.moon-gray { color: #ccc; }
+.light-gray { color: #eee; }
+.near-white { color: #f4f4f4; }
+.white { color: #fff; }
+.dark-red { color: #e7040f; }
+.red { color: #ff4136; }
+.light-red { color: #ff725c; }
+.orange { color: #ff6300; }
+.gold { color: #ffb700; }
+.yellow { color: #ffd700; }
+.light-yellow { color: #fbf1a9; }
+.purple { color: #5e2ca5; }
+.light-purple { color: #a463f2; }
+.dark-pink { color: #d5008f; }
+.hot-pink { color: #ff41b4; }
+.pink { color: #ff80cc; }
+.light-pink { color: #ffa3d7; }
+.dark-green { color: #137752; }
+.green { color: #19a974; }
+.light-green { color: #9eebcf; }
+.navy { color: #001b44; }
+.dark-blue { color: #00449e; }
+.blue { color: #0594CB; }
+.light-blue { color: #96ccff; }
+.lightest-blue { color: #cdecff; }
+.washed-blue { color: #f6fffe; }
+.washed-green { color: #e8fdf5; }
+.washed-yellow { color: #fffceb; }
+.washed-red { color: #ffdfdf; }
+.color-inherit { color: inherit; }
+.bg-black-90 { background-color: rgba(0, 0, 0, .9); }
+.bg-black-80 { background-color: rgba(0, 0, 0, .8); }
+.bg-black-70 { background-color: rgba(0, 0, 0, .7); }
+.bg-black-60 { background-color: rgba(0, 0, 0, .6); }
+.bg-black-50 { background-color: rgba(0, 0, 0, .5); }
+.bg-black-40 { background-color: rgba(0, 0, 0, .4); }
+.bg-black-30 { background-color: rgba(0, 0, 0, .3); }
+.bg-black-20 { background-color: rgba(0, 0, 0, .2); }
+.bg-black-10 { background-color: rgba(0, 0, 0, .1); }
+.bg-black-05 { background-color: rgba(0, 0, 0, .05); }
+.bg-white-90 { background-color: rgba(255, 255, 255, .9); }
+.bg-white-80 { background-color: rgba(255, 255, 255, .8); }
+.bg-white-70 { background-color: rgba(255, 255, 255, .7); }
+.bg-white-60 { background-color: rgba(255, 255, 255, .6); }
+.bg-white-50 { background-color: rgba(255, 255, 255, .5); }
+.bg-white-40 { background-color: rgba(255, 255, 255, .4); }
+.bg-white-30 { background-color: rgba(255, 255, 255, .3); }
+.bg-white-20 { background-color: rgba(255, 255, 255, .2); }
+.bg-white-10 { background-color: rgba(255, 255, 255, .1); }
+/* Background colors */
+.bg-black { background-color: #000; }
+.bg-near-black { background-color: #111; }
+.bg-dark-gray { background-color: #333; }
+.bg-mid-gray { background-color: #555; }
+.bg-gray { background-color: #777; }
+.bg-silver { background-color: #999; }
+.bg-light-silver { background-color: #aaa; }
+.bg-moon-gray { background-color: #ccc; }
+.bg-light-gray { background-color: #eee; }
+.bg-near-white { background-color: #f4f4f4; }
+.bg-white { background-color: #fff; }
+.bg-transparent { background-color: transparent; }
+.bg-dark-red { background-color: #e7040f; }
+.bg-red { background-color: #ff4136; }
+.bg-light-red { background-color: #ff725c; }
+.bg-orange { background-color: #ff6300; }
+.bg-gold { background-color: #ffb700; }
+.bg-yellow { background-color: #ffd700; }
+.bg-light-yellow { background-color: #fbf1a9; }
+.bg-purple { background-color: #5e2ca5; }
+.bg-light-purple { background-color: #a463f2; }
+.bg-dark-pink { background-color: #d5008f; }
+.bg-hot-pink { background-color: #ff41b4; }
+.bg-pink { background-color: #ff80cc; }
+.bg-light-pink { background-color: #ffa3d7; }
+.bg-dark-green { background-color: #137752; }
+.bg-green { background-color: #19a974; }
+.bg-light-green { background-color: #9eebcf; }
+.bg-navy { background-color: #001b44; }
+.bg-dark-blue { background-color: #00449e; }
+.bg-blue { background-color: #0594CB; }
+.bg-light-blue { background-color: #96ccff; }
+.bg-lightest-blue { background-color: #cdecff; }
+.bg-washed-blue { background-color: #f6fffe; }
+.bg-washed-green { background-color: #e8fdf5; }
+.bg-washed-yellow { background-color: #fffceb; }
+.bg-washed-red { background-color: #ffdfdf; }
+.bg-inherit { background-color: inherit; }
+/*
+
+ SKINS:PSEUDO
+
+ Customize the color of an element when
+ it is focused or hovered over.
+
+ */
+.hover-black:hover,
+.hover-black:focus { color: #000; }
+.hover-near-black:hover,
+.hover-near-black:focus { color: #111; }
+.hover-dark-gray:hover,
+.hover-dark-gray:focus { color: #333; }
+.hover-mid-gray:hover,
+.hover-mid-gray:focus { color: #555; }
+.hover-gray:hover,
+.hover-gray:focus { color: #777; }
+.hover-silver:hover,
+.hover-silver:focus { color: #999; }
+.hover-light-silver:hover,
+.hover-light-silver:focus { color: #aaa; }
+.hover-moon-gray:hover,
+.hover-moon-gray:focus { color: #ccc; }
+.hover-light-gray:hover,
+.hover-light-gray:focus { color: #eee; }
+.hover-near-white:hover,
+.hover-near-white:focus { color: #f4f4f4; }
+.hover-white:hover,
+.hover-white:focus { color: #fff; }
+.hover-black-90:hover,
+.hover-black-90:focus { color: rgba(0, 0, 0, .9); }
+.hover-black-80:hover,
+.hover-black-80:focus { color: rgba(0, 0, 0, .8); }
+.hover-black-70:hover,
+.hover-black-70:focus { color: rgba(0, 0, 0, .7); }
+.hover-black-60:hover,
+.hover-black-60:focus { color: rgba(0, 0, 0, .6); }
+.hover-black-50:hover,
+.hover-black-50:focus { color: rgba(0, 0, 0, .5); }
+.hover-black-40:hover,
+.hover-black-40:focus { color: rgba(0, 0, 0, .4); }
+.hover-black-30:hover,
+.hover-black-30:focus { color: rgba(0, 0, 0, .3); }
+.hover-black-20:hover,
+.hover-black-20:focus { color: rgba(0, 0, 0, .2); }
+.hover-black-10:hover,
+.hover-black-10:focus { color: rgba(0, 0, 0, .1); }
+.hover-white-90:hover,
+.hover-white-90:focus { color: rgba(255, 255, 255, .9); }
+.hover-white-80:hover,
+.hover-white-80:focus { color: rgba(255, 255, 255, .8); }
+.hover-white-70:hover,
+.hover-white-70:focus { color: rgba(255, 255, 255, .7); }
+.hover-white-60:hover,
+.hover-white-60:focus { color: rgba(255, 255, 255, .6); }
+.hover-white-50:hover,
+.hover-white-50:focus { color: rgba(255, 255, 255, .5); }
+.hover-white-40:hover,
+.hover-white-40:focus { color: rgba(255, 255, 255, .4); }
+.hover-white-30:hover,
+.hover-white-30:focus { color: rgba(255, 255, 255, .3); }
+.hover-white-20:hover,
+.hover-white-20:focus { color: rgba(255, 255, 255, .2); }
+.hover-white-10:hover,
+.hover-white-10:focus { color: rgba(255, 255, 255, .1); }
+.hover-inherit:hover,
+.hover-inherit:focus { color: inherit; }
+.hover-bg-black:hover,
+.hover-bg-black:focus { background-color: #000; }
+.hover-bg-near-black:hover,
+.hover-bg-near-black:focus { background-color: #111; }
+.hover-bg-dark-gray:hover,
+.hover-bg-dark-gray:focus { background-color: #333; }
+.hover-bg-mid-gray:hover,
+.hover-bg-mid-gray:focus { background-color: #555; }
+.hover-bg-gray:hover,
+.hover-bg-gray:focus { background-color: #777; }
+.hover-bg-silver:hover,
+.hover-bg-silver:focus { background-color: #999; }
+.hover-bg-light-silver:hover,
+.hover-bg-light-silver:focus { background-color: #aaa; }
+.hover-bg-moon-gray:hover,
+.hover-bg-moon-gray:focus { background-color: #ccc; }
+.hover-bg-light-gray:hover,
+.hover-bg-light-gray:focus { background-color: #eee; }
+.hover-bg-near-white:hover,
+.hover-bg-near-white:focus { background-color: #f4f4f4; }
+.hover-bg-white:hover,
+.hover-bg-white:focus { background-color: #fff; }
+.hover-bg-transparent:hover,
+.hover-bg-transparent:focus { background-color: transparent; }
+.hover-bg-black-90:hover,
+.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); }
+.hover-bg-black-80:hover,
+.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); }
+.hover-bg-black-70:hover,
+.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); }
+.hover-bg-black-60:hover,
+.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); }
+.hover-bg-black-50:hover,
+.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); }
+.hover-bg-black-40:hover,
+.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); }
+.hover-bg-black-30:hover,
+.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); }
+.hover-bg-black-20:hover,
+.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); }
+.hover-bg-black-10:hover,
+.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); }
+.hover-bg-white-90:hover,
+.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); }
+.hover-bg-white-80:hover,
+.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); }
+.hover-bg-white-70:hover,
+.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); }
+.hover-bg-white-60:hover,
+.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); }
+.hover-bg-white-50:hover,
+.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); }
+.hover-bg-white-40:hover,
+.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); }
+.hover-bg-white-30:hover,
+.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); }
+.hover-bg-white-20:hover,
+.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); }
+.hover-bg-white-10:hover,
+.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); }
+.hover-dark-red:hover,
+.hover-dark-red:focus { color: #e7040f; }
+.hover-red:hover,
+.hover-red:focus { color: #ff4136; }
+.hover-light-red:hover,
+.hover-light-red:focus { color: #ff725c; }
+.hover-orange:hover,
+.hover-orange:focus { color: #ff6300; }
+.hover-gold:hover,
+.hover-gold:focus { color: #ffb700; }
+.hover-yellow:hover,
+.hover-yellow:focus { color: #ffd700; }
+.hover-light-yellow:hover,
+.hover-light-yellow:focus { color: #fbf1a9; }
+.hover-purple:hover,
+.hover-purple:focus { color: #5e2ca5; }
+.hover-light-purple:hover,
+.hover-light-purple:focus { color: #a463f2; }
+.hover-dark-pink:hover,
+.hover-dark-pink:focus { color: #d5008f; }
+.hover-hot-pink:hover,
+.hover-hot-pink:focus { color: #ff41b4; }
+.hover-pink:hover,
+.hover-pink:focus { color: #ff80cc; }
+.hover-light-pink:hover,
+.hover-light-pink:focus { color: #ffa3d7; }
+.hover-dark-green:hover,
+.hover-dark-green:focus { color: #137752; }
+.hover-green:hover,
+.hover-green:focus { color: #19a974; }
+.hover-light-green:hover,
+.hover-light-green:focus { color: #9eebcf; }
+.hover-navy:hover,
+.hover-navy:focus { color: #001b44; }
+.hover-dark-blue:hover,
+.hover-dark-blue:focus { color: #00449e; }
+.hover-blue:hover,
+.hover-blue:focus { color: #0594CB; }
+.hover-light-blue:hover,
+.hover-light-blue:focus { color: #96ccff; }
+.hover-lightest-blue:hover,
+.hover-lightest-blue:focus { color: #cdecff; }
+.hover-washed-blue:hover,
+.hover-washed-blue:focus { color: #f6fffe; }
+.hover-washed-green:hover,
+.hover-washed-green:focus { color: #e8fdf5; }
+.hover-washed-yellow:hover,
+.hover-washed-yellow:focus { color: #fffceb; }
+.hover-washed-red:hover,
+.hover-washed-red:focus { color: #ffdfdf; }
+.hover-bg-dark-red:hover,
+.hover-bg-dark-red:focus { background-color: #e7040f; }
+.hover-bg-red:hover,
+.hover-bg-red:focus { background-color: #ff4136; }
+.hover-bg-light-red:hover,
+.hover-bg-light-red:focus { background-color: #ff725c; }
+.hover-bg-orange:hover,
+.hover-bg-orange:focus { background-color: #ff6300; }
+.hover-bg-gold:hover,
+.hover-bg-gold:focus { background-color: #ffb700; }
+.hover-bg-yellow:hover,
+.hover-bg-yellow:focus { background-color: #ffd700; }
+.hover-bg-light-yellow:hover,
+.hover-bg-light-yellow:focus { background-color: #fbf1a9; }
+.hover-bg-purple:hover,
+.hover-bg-purple:focus { background-color: #5e2ca5; }
+.hover-bg-light-purple:hover,
+.hover-bg-light-purple:focus { background-color: #a463f2; }
+.hover-bg-dark-pink:hover,
+.hover-bg-dark-pink:focus { background-color: #d5008f; }
+.hover-bg-hot-pink:hover,
+.hover-bg-hot-pink:focus { background-color: #ff41b4; }
+.hover-bg-pink:hover,
+.hover-bg-pink:focus { background-color: #ff80cc; }
+.hover-bg-light-pink:hover,
+.hover-bg-light-pink:focus { background-color: #ffa3d7; }
+.hover-bg-dark-green:hover,
+.hover-bg-dark-green:focus { background-color: #137752; }
+.hover-bg-green:hover,
+.hover-bg-green:focus { background-color: #19a974; }
+.hover-bg-light-green:hover,
+.hover-bg-light-green:focus { background-color: #9eebcf; }
+.hover-bg-navy:hover,
+.hover-bg-navy:focus { background-color: #001b44; }
+.hover-bg-dark-blue:hover,
+.hover-bg-dark-blue:focus { background-color: #00449e; }
+.hover-bg-blue:hover,
+.hover-bg-blue:focus { background-color: #0594CB; }
+.hover-bg-light-blue:hover,
+.hover-bg-light-blue:focus { background-color: #96ccff; }
+.hover-bg-lightest-blue:hover,
+.hover-bg-lightest-blue:focus { background-color: #cdecff; }
+.hover-bg-washed-blue:hover,
+.hover-bg-washed-blue:focus { background-color: #f6fffe; }
+.hover-bg-washed-green:hover,
+.hover-bg-washed-green:focus { background-color: #e8fdf5; }
+.hover-bg-washed-yellow:hover,
+.hover-bg-washed-yellow:focus { background-color: #fffceb; }
+.hover-bg-washed-red:hover,
+.hover-bg-washed-red:focus { background-color: #ffdfdf; }
+.hover-bg-inherit:hover,
+.hover-bg-inherit:focus { background-color: inherit; }
+/* Variables */
+/*
+ SPACING
+ Docs: http://tachyons.io/docs/layout/spacing/
+
+ An eight step powers of two scale ranging from 0 to 16rem.
+
+ Base:
+ p = padding
+ m = margin
+
+ Modifiers:
+ a = all
+ h = horizontal
+ v = vertical
+ t = top
+ r = right
+ b = bottom
+ l = left
+
+ 0 = none
+ 1 = 1st step in spacing scale
+ 2 = 2nd step in spacing scale
+ 3 = 3rd step in spacing scale
+ 4 = 4th step in spacing scale
+ 5 = 5th step in spacing scale
+ 6 = 6th step in spacing scale
+ 7 = 7th step in spacing scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.pa0 { padding: 0; }
+.pa1 { padding: .25rem; }
+.pa2 { padding: .5rem; }
+.pa3 { padding: 1rem; }
+.pa4 { padding: 2rem; }
+.pa5 { padding: 4rem; }
+.pa6 { padding: 8rem; }
+.pa7 { padding: 16rem; }
+.pl0 { padding-left: 0; }
+.pl1 { padding-left: .25rem; }
+.pl2 { padding-left: .5rem; }
+.pl3 { padding-left: 1rem; }
+.pl4 { padding-left: 2rem; }
+.pl5 { padding-left: 4rem; }
+.pl6 { padding-left: 8rem; }
+.pl7 { padding-left: 16rem; }
+.pr0 { padding-right: 0; }
+.pr1 { padding-right: .25rem; }
+.pr2 { padding-right: .5rem; }
+.pr3 { padding-right: 1rem; }
+.pr4 { padding-right: 2rem; }
+.pr5 { padding-right: 4rem; }
+.pr6 { padding-right: 8rem; }
+.pr7 { padding-right: 16rem; }
+.pb0 { padding-bottom: 0; }
+.pb1 { padding-bottom: .25rem; }
+.pb2 { padding-bottom: .5rem; }
+.pb3 { padding-bottom: 1rem; }
+.pb4 { padding-bottom: 2rem; }
+.pb5 { padding-bottom: 4rem; }
+.pb6 { padding-bottom: 8rem; }
+.pb7 { padding-bottom: 16rem; }
+.pt0 { padding-top: 0; }
+.pt1 { padding-top: .25rem; }
+.pt2 { padding-top: .5rem; }
+.pt3 { padding-top: 1rem; }
+.pt4 { padding-top: 2rem; }
+.pt5 { padding-top: 4rem; }
+.pt6 { padding-top: 8rem; }
+.pt7 { padding-top: 16rem; }
+.pv0 {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.pv1 {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+}
+.pv2 {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+}
+.pv3 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+.pv4 {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+.pv5 {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+}
+.pv6 {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+}
+.pv7 {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+}
+.ph0 {
+ padding-left: 0;
+ padding-right: 0;
+}
+.ph1 {
+ padding-left: .25rem;
+ padding-right: .25rem;
+}
+.ph2 {
+ padding-left: .5rem;
+ padding-right: .5rem;
+}
+.ph3 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+.ph4 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+.ph5 {
+ padding-left: 4rem;
+ padding-right: 4rem;
+}
+.ph6 {
+ padding-left: 8rem;
+ padding-right: 8rem;
+}
+.ph7 {
+ padding-left: 16rem;
+ padding-right: 16rem;
+}
+.ma0 { margin: 0; }
+.ma1 { margin: .25rem; }
+.ma2 { margin: .5rem; }
+.ma3 { margin: 1rem; }
+.ma4 { margin: 2rem; }
+.ma5 { margin: 4rem; }
+.ma6 { margin: 8rem; }
+.ma7 { margin: 16rem; }
+.ml0 { margin-left: 0; }
+.ml1 { margin-left: .25rem; }
+.ml2 { margin-left: .5rem; }
+.ml3 { margin-left: 1rem; }
+.ml4 { margin-left: 2rem; }
+.ml5 { margin-left: 4rem; }
+.ml6 { margin-left: 8rem; }
+.ml7 { margin-left: 16rem; }
+.mr0 { margin-right: 0; }
+.mr1 { margin-right: .25rem; }
+.mr2 { margin-right: .5rem; }
+.mr3 { margin-right: 1rem; }
+.mr4 { margin-right: 2rem; }
+.mr5 { margin-right: 4rem; }
+.mr6 { margin-right: 8rem; }
+.mr7 { margin-right: 16rem; }
+.mb0 { margin-bottom: 0; }
+.mb1 { margin-bottom: .25rem; }
+.mb2 { margin-bottom: .5rem; }
+.mb3 { margin-bottom: 1rem; }
+.mb4 { margin-bottom: 2rem; }
+.mb5 { margin-bottom: 4rem; }
+.mb6 { margin-bottom: 8rem; }
+.mb7 { margin-bottom: 16rem; }
+.mt0 { margin-top: 0; }
+.mt1 { margin-top: .25rem; }
+.mt2 { margin-top: .5rem; }
+.mt3 { margin-top: 1rem; }
+.mt4 { margin-top: 2rem; }
+.mt5 { margin-top: 4rem; }
+.mt6 { margin-top: 8rem; }
+.mt7 { margin-top: 16rem; }
+.mv0 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.mv1 {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+}
+.mv2 {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+}
+.mv3 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+.mv4 {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+}
+.mv5 {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+}
+.mv6 {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+}
+.mv7 {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+}
+.mh0 {
+ margin-left: 0;
+ margin-right: 0;
+}
+.mh1 {
+ margin-left: .25rem;
+ margin-right: .25rem;
+}
+.mh2 {
+ margin-left: .5rem;
+ margin-right: .5rem;
+}
+.mh3 {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+.mh4 {
+ margin-left: 2rem;
+ margin-right: 2rem;
+}
+.mh5 {
+ margin-left: 4rem;
+ margin-right: 4rem;
+}
+.mh6 {
+ margin-left: 8rem;
+ margin-right: 8rem;
+}
+.mh7 {
+ margin-left: 16rem;
+ margin-right: 16rem;
+}
+@media screen and (min-width: 30em) {
+ .pa0-ns { padding: 0; }
+ .pa1-ns { padding: .25rem; }
+ .pa2-ns { padding: .5rem; }
+ .pa3-ns { padding: 1rem; }
+ .pa4-ns { padding: 2rem; }
+ .pa5-ns { padding: 4rem; }
+ .pa6-ns { padding: 8rem; }
+ .pa7-ns { padding: 16rem; }
+
+ .pl0-ns { padding-left: 0; }
+ .pl1-ns { padding-left: .25rem; }
+ .pl2-ns { padding-left: .5rem; }
+ .pl3-ns { padding-left: 1rem; }
+ .pl4-ns { padding-left: 2rem; }
+ .pl5-ns { padding-left: 4rem; }
+ .pl6-ns { padding-left: 8rem; }
+ .pl7-ns { padding-left: 16rem; }
+
+ .pr0-ns { padding-right: 0; }
+ .pr1-ns { padding-right: .25rem; }
+ .pr2-ns { padding-right: .5rem; }
+ .pr3-ns { padding-right: 1rem; }
+ .pr4-ns { padding-right: 2rem; }
+ .pr5-ns { padding-right: 4rem; }
+ .pr6-ns { padding-right: 8rem; }
+ .pr7-ns { padding-right: 16rem; }
+
+ .pb0-ns { padding-bottom: 0; }
+ .pb1-ns { padding-bottom: .25rem; }
+ .pb2-ns { padding-bottom: .5rem; }
+ .pb3-ns { padding-bottom: 1rem; }
+ .pb4-ns { padding-bottom: 2rem; }
+ .pb5-ns { padding-bottom: 4rem; }
+ .pb6-ns { padding-bottom: 8rem; }
+ .pb7-ns { padding-bottom: 16rem; }
+
+ .pt0-ns { padding-top: 0; }
+ .pt1-ns { padding-top: .25rem; }
+ .pt2-ns { padding-top: .5rem; }
+ .pt3-ns { padding-top: 1rem; }
+ .pt4-ns { padding-top: 2rem; }
+ .pt5-ns { padding-top: 4rem; }
+ .pt6-ns { padding-top: 8rem; }
+ .pt7-ns { padding-top: 16rem; }
+
+ .pv0-ns {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .pv1-ns {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ }
+ .pv2-ns {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ .pv3-ns {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+ .pv4-ns {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+ .pv5-ns {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ }
+ .pv6-ns {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+ }
+ .pv7-ns {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+ }
+ .ph0-ns {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ph1-ns {
+ padding-left: .25rem;
+ padding-right: .25rem;
+ }
+ .ph2-ns {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+ .ph3-ns {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .ph4-ns {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+ .ph5-ns {
+ padding-left: 4rem;
+ padding-right: 4rem;
+ }
+ .ph6-ns {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+ .ph7-ns {
+ padding-left: 16rem;
+ padding-right: 16rem;
+ }
+
+ .ma0-ns { margin: 0; }
+ .ma1-ns { margin: .25rem; }
+ .ma2-ns { margin: .5rem; }
+ .ma3-ns { margin: 1rem; }
+ .ma4-ns { margin: 2rem; }
+ .ma5-ns { margin: 4rem; }
+ .ma6-ns { margin: 8rem; }
+ .ma7-ns { margin: 16rem; }
+
+ .ml0-ns { margin-left: 0; }
+ .ml1-ns { margin-left: .25rem; }
+ .ml2-ns { margin-left: .5rem; }
+ .ml3-ns { margin-left: 1rem; }
+ .ml4-ns { margin-left: 2rem; }
+ .ml5-ns { margin-left: 4rem; }
+ .ml6-ns { margin-left: 8rem; }
+ .ml7-ns { margin-left: 16rem; }
+
+ .mr0-ns { margin-right: 0; }
+ .mr1-ns { margin-right: .25rem; }
+ .mr2-ns { margin-right: .5rem; }
+ .mr3-ns { margin-right: 1rem; }
+ .mr4-ns { margin-right: 2rem; }
+ .mr5-ns { margin-right: 4rem; }
+ .mr6-ns { margin-right: 8rem; }
+ .mr7-ns { margin-right: 16rem; }
+
+ .mb0-ns { margin-bottom: 0; }
+ .mb1-ns { margin-bottom: .25rem; }
+ .mb2-ns { margin-bottom: .5rem; }
+ .mb3-ns { margin-bottom: 1rem; }
+ .mb4-ns { margin-bottom: 2rem; }
+ .mb5-ns { margin-bottom: 4rem; }
+ .mb6-ns { margin-bottom: 8rem; }
+ .mb7-ns { margin-bottom: 16rem; }
+
+ .mt0-ns { margin-top: 0; }
+ .mt1-ns { margin-top: .25rem; }
+ .mt2-ns { margin-top: .5rem; }
+ .mt3-ns { margin-top: 1rem; }
+ .mt4-ns { margin-top: 2rem; }
+ .mt5-ns { margin-top: 4rem; }
+ .mt6-ns { margin-top: 8rem; }
+ .mt7-ns { margin-top: 16rem; }
+
+ .mv0-ns {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .mv1-ns {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ .mv2-ns {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+ .mv3-ns {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+ .mv4-ns {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .mv5-ns {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+ .mv6-ns {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+ }
+ .mv7-ns {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+ }
+
+ .mh0-ns {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .mh1-ns {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ }
+ .mh2-ns {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ .mh3-ns {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .mh4-ns {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ }
+ .mh5-ns {
+ margin-left: 4rem;
+ margin-right: 4rem;
+ }
+ .mh6-ns {
+ margin-left: 8rem;
+ margin-right: 8rem;
+ }
+ .mh7-ns {
+ margin-left: 16rem;
+ margin-right: 16rem;
+ }
+
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .pa0-m { padding: 0; }
+ .pa1-m { padding: .25rem; }
+ .pa2-m { padding: .5rem; }
+ .pa3-m { padding: 1rem; }
+ .pa4-m { padding: 2rem; }
+ .pa5-m { padding: 4rem; }
+ .pa6-m { padding: 8rem; }
+ .pa7-m { padding: 16rem; }
+
+ .pl0-m { padding-left: 0; }
+ .pl1-m { padding-left: .25rem; }
+ .pl2-m { padding-left: .5rem; }
+ .pl3-m { padding-left: 1rem; }
+ .pl4-m { padding-left: 2rem; }
+ .pl5-m { padding-left: 4rem; }
+ .pl6-m { padding-left: 8rem; }
+ .pl7-m { padding-left: 16rem; }
+
+ .pr0-m { padding-right: 0; }
+ .pr1-m { padding-right: .25rem; }
+ .pr2-m { padding-right: .5rem; }
+ .pr3-m { padding-right: 1rem; }
+ .pr4-m { padding-right: 2rem; }
+ .pr5-m { padding-right: 4rem; }
+ .pr6-m { padding-right: 8rem; }
+ .pr7-m { padding-right: 16rem; }
+
+ .pb0-m { padding-bottom: 0; }
+ .pb1-m { padding-bottom: .25rem; }
+ .pb2-m { padding-bottom: .5rem; }
+ .pb3-m { padding-bottom: 1rem; }
+ .pb4-m { padding-bottom: 2rem; }
+ .pb5-m { padding-bottom: 4rem; }
+ .pb6-m { padding-bottom: 8rem; }
+ .pb7-m { padding-bottom: 16rem; }
+
+ .pt0-m { padding-top: 0; }
+ .pt1-m { padding-top: .25rem; }
+ .pt2-m { padding-top: .5rem; }
+ .pt3-m { padding-top: 1rem; }
+ .pt4-m { padding-top: 2rem; }
+ .pt5-m { padding-top: 4rem; }
+ .pt6-m { padding-top: 8rem; }
+ .pt7-m { padding-top: 16rem; }
+
+ .pv0-m {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .pv1-m {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ }
+ .pv2-m {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ .pv3-m {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+ .pv4-m {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+ .pv5-m {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ }
+ .pv6-m {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+ }
+ .pv7-m {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+ }
+
+ .ph0-m {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ph1-m {
+ padding-left: .25rem;
+ padding-right: .25rem;
+ }
+ .ph2-m {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+ .ph3-m {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .ph4-m {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+ .ph5-m {
+ padding-left: 4rem;
+ padding-right: 4rem;
+ }
+ .ph6-m {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+ .ph7-m {
+ padding-left: 16rem;
+ padding-right: 16rem;
+ }
+
+ .ma0-m { margin: 0; }
+ .ma1-m { margin: .25rem; }
+ .ma2-m { margin: .5rem; }
+ .ma3-m { margin: 1rem; }
+ .ma4-m { margin: 2rem; }
+ .ma5-m { margin: 4rem; }
+ .ma6-m { margin: 8rem; }
+ .ma7-m { margin: 16rem; }
+
+ .ml0-m { margin-left: 0; }
+ .ml1-m { margin-left: .25rem; }
+ .ml2-m { margin-left: .5rem; }
+ .ml3-m { margin-left: 1rem; }
+ .ml4-m { margin-left: 2rem; }
+ .ml5-m { margin-left: 4rem; }
+ .ml6-m { margin-left: 8rem; }
+ .ml7-m { margin-left: 16rem; }
+
+ .mr0-m { margin-right: 0; }
+ .mr1-m { margin-right: .25rem; }
+ .mr2-m { margin-right: .5rem; }
+ .mr3-m { margin-right: 1rem; }
+ .mr4-m { margin-right: 2rem; }
+ .mr5-m { margin-right: 4rem; }
+ .mr6-m { margin-right: 8rem; }
+ .mr7-m { margin-right: 16rem; }
+
+ .mb0-m { margin-bottom: 0; }
+ .mb1-m { margin-bottom: .25rem; }
+ .mb2-m { margin-bottom: .5rem; }
+ .mb3-m { margin-bottom: 1rem; }
+ .mb4-m { margin-bottom: 2rem; }
+ .mb5-m { margin-bottom: 4rem; }
+ .mb6-m { margin-bottom: 8rem; }
+ .mb7-m { margin-bottom: 16rem; }
+
+ .mt0-m { margin-top: 0; }
+ .mt1-m { margin-top: .25rem; }
+ .mt2-m { margin-top: .5rem; }
+ .mt3-m { margin-top: 1rem; }
+ .mt4-m { margin-top: 2rem; }
+ .mt5-m { margin-top: 4rem; }
+ .mt6-m { margin-top: 8rem; }
+ .mt7-m { margin-top: 16rem; }
+
+ .mv0-m {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .mv1-m {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ .mv2-m {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+ .mv3-m {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+ .mv4-m {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .mv5-m {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+ .mv6-m {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+ }
+ .mv7-m {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+ }
+
+ .mh0-m {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .mh1-m {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ }
+ .mh2-m {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ .mh3-m {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .mh4-m {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ }
+ .mh5-m {
+ margin-left: 4rem;
+ margin-right: 4rem;
+ }
+ .mh6-m {
+ margin-left: 8rem;
+ margin-right: 8rem;
+ }
+ .mh7-m {
+ margin-left: 16rem;
+ margin-right: 16rem;
+ }
+
+}
+@media screen and (min-width: 60em) {
+ .pa0-l { padding: 0; }
+ .pa1-l { padding: .25rem; }
+ .pa2-l { padding: .5rem; }
+ .pa3-l { padding: 1rem; }
+ .pa4-l { padding: 2rem; }
+ .pa5-l { padding: 4rem; }
+ .pa6-l { padding: 8rem; }
+ .pa7-l { padding: 16rem; }
+
+ .pl0-l { padding-left: 0; }
+ .pl1-l { padding-left: .25rem; }
+ .pl2-l { padding-left: .5rem; }
+ .pl3-l { padding-left: 1rem; }
+ .pl4-l { padding-left: 2rem; }
+ .pl5-l { padding-left: 4rem; }
+ .pl6-l { padding-left: 8rem; }
+ .pl7-l { padding-left: 16rem; }
+
+ .pr0-l { padding-right: 0; }
+ .pr1-l { padding-right: .25rem; }
+ .pr2-l { padding-right: .5rem; }
+ .pr3-l { padding-right: 1rem; }
+ .pr4-l { padding-right: 2rem; }
+ .pr5-l { padding-right: 4rem; }
+ .pr6-l { padding-right: 8rem; }
+ .pr7-l { padding-right: 16rem; }
+
+ .pb0-l { padding-bottom: 0; }
+ .pb1-l { padding-bottom: .25rem; }
+ .pb2-l { padding-bottom: .5rem; }
+ .pb3-l { padding-bottom: 1rem; }
+ .pb4-l { padding-bottom: 2rem; }
+ .pb5-l { padding-bottom: 4rem; }
+ .pb6-l { padding-bottom: 8rem; }
+ .pb7-l { padding-bottom: 16rem; }
+
+ .pt0-l { padding-top: 0; }
+ .pt1-l { padding-top: .25rem; }
+ .pt2-l { padding-top: .5rem; }
+ .pt3-l { padding-top: 1rem; }
+ .pt4-l { padding-top: 2rem; }
+ .pt5-l { padding-top: 4rem; }
+ .pt6-l { padding-top: 8rem; }
+ .pt7-l { padding-top: 16rem; }
+
+ .pv0-l {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .pv1-l {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ }
+ .pv2-l {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
+ }
+ .pv3-l {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+ .pv4-l {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+ .pv5-l {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
+ }
+ .pv6-l {
+ padding-top: 8rem;
+ padding-bottom: 8rem;
+ }
+ .pv7-l {
+ padding-top: 16rem;
+ padding-bottom: 16rem;
+ }
+
+ .ph0-l {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .ph1-l {
+ padding-left: .25rem;
+ padding-right: .25rem;
+ }
+ .ph2-l {
+ padding-left: .5rem;
+ padding-right: .5rem;
+ }
+ .ph3-l {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+ .ph4-l {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+ .ph5-l {
+ padding-left: 4rem;
+ padding-right: 4rem;
+ }
+ .ph6-l {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+ .ph7-l {
+ padding-left: 16rem;
+ padding-right: 16rem;
+ }
+
+ .ma0-l { margin: 0; }
+ .ma1-l { margin: .25rem; }
+ .ma2-l { margin: .5rem; }
+ .ma3-l { margin: 1rem; }
+ .ma4-l { margin: 2rem; }
+ .ma5-l { margin: 4rem; }
+ .ma6-l { margin: 8rem; }
+ .ma7-l { margin: 16rem; }
+
+ .ml0-l { margin-left: 0; }
+ .ml1-l { margin-left: .25rem; }
+ .ml2-l { margin-left: .5rem; }
+ .ml3-l { margin-left: 1rem; }
+ .ml4-l { margin-left: 2rem; }
+ .ml5-l { margin-left: 4rem; }
+ .ml6-l { margin-left: 8rem; }
+ .ml7-l { margin-left: 16rem; }
+
+ .mr0-l { margin-right: 0; }
+ .mr1-l { margin-right: .25rem; }
+ .mr2-l { margin-right: .5rem; }
+ .mr3-l { margin-right: 1rem; }
+ .mr4-l { margin-right: 2rem; }
+ .mr5-l { margin-right: 4rem; }
+ .mr6-l { margin-right: 8rem; }
+ .mr7-l { margin-right: 16rem; }
+
+ .mb0-l { margin-bottom: 0; }
+ .mb1-l { margin-bottom: .25rem; }
+ .mb2-l { margin-bottom: .5rem; }
+ .mb3-l { margin-bottom: 1rem; }
+ .mb4-l { margin-bottom: 2rem; }
+ .mb5-l { margin-bottom: 4rem; }
+ .mb6-l { margin-bottom: 8rem; }
+ .mb7-l { margin-bottom: 16rem; }
+
+ .mt0-l { margin-top: 0; }
+ .mt1-l { margin-top: .25rem; }
+ .mt2-l { margin-top: .5rem; }
+ .mt3-l { margin-top: 1rem; }
+ .mt4-l { margin-top: 2rem; }
+ .mt5-l { margin-top: 4rem; }
+ .mt6-l { margin-top: 8rem; }
+ .mt7-l { margin-top: 16rem; }
+
+ .mv0-l {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .mv1-l {
+ margin-top: .25rem;
+ margin-bottom: .25rem;
+ }
+ .mv2-l {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ }
+ .mv3-l {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+ .mv4-l {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ }
+ .mv5-l {
+ margin-top: 4rem;
+ margin-bottom: 4rem;
+ }
+ .mv6-l {
+ margin-top: 8rem;
+ margin-bottom: 8rem;
+ }
+ .mv7-l {
+ margin-top: 16rem;
+ margin-bottom: 16rem;
+ }
+
+ .mh0-l {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ .mh1-l {
+ margin-left: .25rem;
+ margin-right: .25rem;
+ }
+ .mh2-l {
+ margin-left: .5rem;
+ margin-right: .5rem;
+ }
+ .mh3-l {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+ .mh4-l {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ }
+ .mh5-l {
+ margin-left: 4rem;
+ margin-right: 4rem;
+ }
+ .mh6-l {
+ margin-left: 8rem;
+ margin-right: 8rem;
+ }
+ .mh7-l {
+ margin-left: 16rem;
+ margin-right: 16rem;
+ }
+}
+/*
+ NEGATIVE MARGINS
+
+ Base:
+ n = negative
+
+ Modifiers:
+ a = all
+ t = top
+ r = right
+ b = bottom
+ l = left
+
+ 1 = 1st step in spacing scale
+ 2 = 2nd step in spacing scale
+ 3 = 3rd step in spacing scale
+ 4 = 4th step in spacing scale
+ 5 = 5th step in spacing scale
+ 6 = 6th step in spacing scale
+ 7 = 7th step in spacing scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.na1 { margin: -0.25rem; }
+.na2 { margin: -0.5rem; }
+.na3 { margin: -1rem; }
+.na4 { margin: -2rem; }
+.na5 { margin: -4rem; }
+.na6 { margin: -8rem; }
+.na7 { margin: -16rem; }
+.nl1 { margin-left: -0.25rem; }
+.nl2 { margin-left: -0.5rem; }
+.nl3 { margin-left: -1rem; }
+.nl4 { margin-left: -2rem; }
+.nl5 { margin-left: -4rem; }
+.nl6 { margin-left: -8rem; }
+.nl7 { margin-left: -16rem; }
+.nr1 { margin-right: -0.25rem; }
+.nr2 { margin-right: -0.5rem; }
+.nr3 { margin-right: -1rem; }
+.nr4 { margin-right: -2rem; }
+.nr5 { margin-right: -4rem; }
+.nr6 { margin-right: -8rem; }
+.nr7 { margin-right: -16rem; }
+.nb1 { margin-bottom: -0.25rem; }
+.nb2 { margin-bottom: -0.5rem; }
+.nb3 { margin-bottom: -1rem; }
+.nb4 { margin-bottom: -2rem; }
+.nb5 { margin-bottom: -4rem; }
+.nb6 { margin-bottom: -8rem; }
+.nb7 { margin-bottom: -16rem; }
+.nt1 { margin-top: -0.25rem; }
+.nt2 { margin-top: -0.5rem; }
+.nt3 { margin-top: -1rem; }
+.nt4 { margin-top: -2rem; }
+.nt5 { margin-top: -4rem; }
+.nt6 { margin-top: -8rem; }
+.nt7 { margin-top: -16rem; }
+@media screen and (min-width: 30em) {
+
+ .na1-ns { margin: -0.25rem; }
+ .na2-ns { margin: -0.5rem; }
+ .na3-ns { margin: -1rem; }
+ .na4-ns { margin: -2rem; }
+ .na5-ns { margin: -4rem; }
+ .na6-ns { margin: -8rem; }
+ .na7-ns { margin: -16rem; }
+
+ .nl1-ns { margin-left: -0.25rem; }
+ .nl2-ns { margin-left: -0.5rem; }
+ .nl3-ns { margin-left: -1rem; }
+ .nl4-ns { margin-left: -2rem; }
+ .nl5-ns { margin-left: -4rem; }
+ .nl6-ns { margin-left: -8rem; }
+ .nl7-ns { margin-left: -16rem; }
+
+ .nr1-ns { margin-right: -0.25rem; }
+ .nr2-ns { margin-right: -0.5rem; }
+ .nr3-ns { margin-right: -1rem; }
+ .nr4-ns { margin-right: -2rem; }
+ .nr5-ns { margin-right: -4rem; }
+ .nr6-ns { margin-right: -8rem; }
+ .nr7-ns { margin-right: -16rem; }
+
+ .nb1-ns { margin-bottom: -0.25rem; }
+ .nb2-ns { margin-bottom: -0.5rem; }
+ .nb3-ns { margin-bottom: -1rem; }
+ .nb4-ns { margin-bottom: -2rem; }
+ .nb5-ns { margin-bottom: -4rem; }
+ .nb6-ns { margin-bottom: -8rem; }
+ .nb7-ns { margin-bottom: -16rem; }
+
+ .nt1-ns { margin-top: -0.25rem; }
+ .nt2-ns { margin-top: -0.5rem; }
+ .nt3-ns { margin-top: -1rem; }
+ .nt4-ns { margin-top: -2rem; }
+ .nt5-ns { margin-top: -4rem; }
+ .nt6-ns { margin-top: -8rem; }
+ .nt7-ns { margin-top: -16rem; }
+
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .na1-m { margin: -0.25rem; }
+ .na2-m { margin: -0.5rem; }
+ .na3-m { margin: -1rem; }
+ .na4-m { margin: -2rem; }
+ .na5-m { margin: -4rem; }
+ .na6-m { margin: -8rem; }
+ .na7-m { margin: -16rem; }
+
+ .nl1-m { margin-left: -0.25rem; }
+ .nl2-m { margin-left: -0.5rem; }
+ .nl3-m { margin-left: -1rem; }
+ .nl4-m { margin-left: -2rem; }
+ .nl5-m { margin-left: -4rem; }
+ .nl6-m { margin-left: -8rem; }
+ .nl7-m { margin-left: -16rem; }
+
+ .nr1-m { margin-right: -0.25rem; }
+ .nr2-m { margin-right: -0.5rem; }
+ .nr3-m { margin-right: -1rem; }
+ .nr4-m { margin-right: -2rem; }
+ .nr5-m { margin-right: -4rem; }
+ .nr6-m { margin-right: -8rem; }
+ .nr7-m { margin-right: -16rem; }
+
+ .nb1-m { margin-bottom: -0.25rem; }
+ .nb2-m { margin-bottom: -0.5rem; }
+ .nb3-m { margin-bottom: -1rem; }
+ .nb4-m { margin-bottom: -2rem; }
+ .nb5-m { margin-bottom: -4rem; }
+ .nb6-m { margin-bottom: -8rem; }
+ .nb7-m { margin-bottom: -16rem; }
+
+ .nt1-m { margin-top: -0.25rem; }
+ .nt2-m { margin-top: -0.5rem; }
+ .nt3-m { margin-top: -1rem; }
+ .nt4-m { margin-top: -2rem; }
+ .nt5-m { margin-top: -4rem; }
+ .nt6-m { margin-top: -8rem; }
+ .nt7-m { margin-top: -16rem; }
+
+}
+@media screen and (min-width: 60em) {
+ .na1-l { margin: -0.25rem; }
+ .na2-l { margin: -0.5rem; }
+ .na3-l { margin: -1rem; }
+ .na4-l { margin: -2rem; }
+ .na5-l { margin: -4rem; }
+ .na6-l { margin: -8rem; }
+ .na7-l { margin: -16rem; }
+
+ .nl1-l { margin-left: -0.25rem; }
+ .nl2-l { margin-left: -0.5rem; }
+ .nl3-l { margin-left: -1rem; }
+ .nl4-l { margin-left: -2rem; }
+ .nl5-l { margin-left: -4rem; }
+ .nl6-l { margin-left: -8rem; }
+ .nl7-l { margin-left: -16rem; }
+
+ .nr1-l { margin-right: -0.25rem; }
+ .nr2-l { margin-right: -0.5rem; }
+ .nr3-l { margin-right: -1rem; }
+ .nr4-l { margin-right: -2rem; }
+ .nr5-l { margin-right: -4rem; }
+ .nr6-l { margin-right: -8rem; }
+ .nr7-l { margin-right: -16rem; }
+
+ .nb1-l { margin-bottom: -0.25rem; }
+ .nb2-l { margin-bottom: -0.5rem; }
+ .nb3-l { margin-bottom: -1rem; }
+ .nb4-l { margin-bottom: -2rem; }
+ .nb5-l { margin-bottom: -4rem; }
+ .nb6-l { margin-bottom: -8rem; }
+ .nb7-l { margin-bottom: -16rem; }
+
+ .nt1-l { margin-top: -0.25rem; }
+ .nt2-l { margin-top: -0.5rem; }
+ .nt3-l { margin-top: -1rem; }
+ .nt4-l { margin-top: -2rem; }
+ .nt5-l { margin-top: -4rem; }
+ .nt6-l { margin-top: -8rem; }
+ .nt7-l { margin-top: -16rem; }
+}
+/*
+
+ TABLES
+ Docs: http://tachyons.io/docs/elements/tables/
+
+*/
+.collapse {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+.striped--light-silver:nth-child(odd) {
+ background-color: #aaa;
+}
+.striped--moon-gray:nth-child(odd) {
+ background-color: #ccc;
+}
+.striped--light-gray:nth-child(odd) {
+ background-color: #eee;
+}
+.striped--near-white:nth-child(odd) {
+ background-color: #f4f4f4;
+}
+.stripe-light:nth-child(odd) {
+ background-color: rgba(255, 255, 255, .1);
+}
+.stripe-dark:nth-child(odd) {
+ background-color: rgba(0, 0, 0, .1);
+}
+/*
+
+ TEXT DECORATION
+ Docs: http://tachyons.io/docs/typography/text-decoration/
+
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.strike { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+@media screen and (min-width: 30em) {
+ .strike-ns { text-decoration: line-through; }
+ .underline-ns { text-decoration: underline; }
+ .no-underline-ns { text-decoration: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .strike-m { text-decoration: line-through; }
+ .underline-m { text-decoration: underline; }
+ .no-underline-m { text-decoration: none; }
+}
+@media screen and (min-width: 60em) {
+ .strike-l { text-decoration: line-through; }
+ .underline-l { text-decoration: underline; }
+ .no-underline-l { text-decoration: none; }
+}
+/*
+
+ TEXT ALIGN
+ Docs: http://tachyons.io/docs/typography/text-align/
+
+ Base
+ t = text-align
+
+ Modifiers
+ l = left
+ r = right
+ c = center
+ j = justify
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.tl { text-align: left; }
+.tr { text-align: right; }
+.tc { text-align: center; }
+.tj { text-align: justify; }
+@media screen and (min-width: 30em) {
+ .tl-ns { text-align: left; }
+ .tr-ns { text-align: right; }
+ .tc-ns { text-align: center; }
+ .tj-ns { text-align: justify; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .tl-m { text-align: left; }
+ .tr-m { text-align: right; }
+ .tc-m { text-align: center; }
+ .tj-m { text-align: justify; }
+}
+@media screen and (min-width: 60em) {
+ .tl-l { text-align: left; }
+ .tr-l { text-align: right; }
+ .tc-l { text-align: center; }
+ .tj-l { text-align: justify; }
+}
+/*
+
+ TEXT TRANSFORM
+ Docs: http://tachyons.io/docs/typography/text-transform/
+
+ Base:
+ tt = text-transform
+
+ Modifiers
+ c = capitalize
+ l = lowercase
+ u = uppercase
+ n = none
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.ttc { text-transform: capitalize; }
+.ttl { text-transform: lowercase; }
+.ttu { text-transform: uppercase; }
+.ttn { text-transform: none; }
+@media screen and (min-width: 30em) {
+ .ttc-ns { text-transform: capitalize; }
+ .ttl-ns { text-transform: lowercase; }
+ .ttu-ns { text-transform: uppercase; }
+ .ttn-ns { text-transform: none; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .ttc-m { text-transform: capitalize; }
+ .ttl-m { text-transform: lowercase; }
+ .ttu-m { text-transform: uppercase; }
+ .ttn-m { text-transform: none; }
+}
+@media screen and (min-width: 60em) {
+ .ttc-l { text-transform: capitalize; }
+ .ttl-l { text-transform: lowercase; }
+ .ttu-l { text-transform: uppercase; }
+ .ttn-l { text-transform: none; }
+}
+/*
+
+ TYPE SCALE
+ Docs: http://tachyons.io/docs/typography/scale/
+
+ Base:
+ f = font-size
+
+ Modifiers
+ 1 = 1st step in size scale
+ 2 = 2nd step in size scale
+ 3 = 3rd step in size scale
+ 4 = 4th step in size scale
+ 5 = 5th step in size scale
+ 6 = 6th step in size scale
+ 7 = 7th step in size scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+*/
+/*
+ * For Hero/Marketing Titles
+ *
+ * These generally are too large for mobile
+ * so be careful using them on smaller screens.
+ * */
+.f-6,
+.f-headline {
+ font-size: 6rem;
+}
+.f-5,
+.f-subheadline {
+ font-size: 5rem;
+}
+/* Type Scale */
+.f1 { font-size: 3rem; }
+.f2 { font-size: 2.25rem; }
+.f3 { font-size: 1.5rem; }
+.f4 { font-size: 1.25rem; }
+.f5 { font-size: 1rem; }
+.f6 { font-size: .875rem; }
+.f7 { font-size: .75rem; }
+/* Small and hard to read for many people so use with extreme caution */
+@media screen and (min-width: 30em){
+ .f-6-ns,
+ .f-headline-ns { font-size: 6rem; }
+ .f-5-ns,
+ .f-subheadline-ns { font-size: 5rem; }
+ .f1-ns { font-size: 3rem; }
+ .f2-ns { font-size: 2.25rem; }
+ .f3-ns { font-size: 1.5rem; }
+ .f4-ns { font-size: 1.25rem; }
+ .f5-ns { font-size: 1rem; }
+ .f6-ns { font-size: .875rem; }
+ .f7-ns { font-size: .75rem; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .f-6-m,
+ .f-headline-m { font-size: 6rem; }
+ .f-5-m,
+ .f-subheadline-m { font-size: 5rem; }
+ .f1-m { font-size: 3rem; }
+ .f2-m { font-size: 2.25rem; }
+ .f3-m { font-size: 1.5rem; }
+ .f4-m { font-size: 1.25rem; }
+ .f5-m { font-size: 1rem; }
+ .f6-m { font-size: .875rem; }
+ .f7-m { font-size: .75rem; }
+}
+@media screen and (min-width: 60em) {
+ .f-6-l,
+ .f-headline-l {
+ font-size: 6rem;
+ }
+ .f-5-l,
+ .f-subheadline-l {
+ font-size: 5rem;
+ }
+ .f1-l { font-size: 3rem; }
+ .f2-l { font-size: 2.25rem; }
+ .f3-l { font-size: 1.5rem; }
+ .f4-l { font-size: 1.25rem; }
+ .f5-l { font-size: 1rem; }
+ .f6-l { font-size: .875rem; }
+ .f7-l { font-size: .75rem; }
+}
+/*
+
+ TYPOGRAPHY
+ http://tachyons.io/docs/typography/measure/
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/* Measure is limited to ~66 characters */
+.measure {
+ max-width: 30em;
+}
+/* Measure is limited to ~80 characters */
+.measure-wide {
+ max-width: 34em;
+}
+/* Measure is limited to ~45 characters */
+.measure-narrow {
+ max-width: 20em;
+}
+/* Book paragraph style - paragraphs are indented with no vertical spacing. */
+.indent {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.small-caps {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+}
+/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
+.truncate {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+@media screen and (min-width: 30em) {
+ .measure-ns {
+ max-width: 30em;
+ }
+ .measure-wide-ns {
+ max-width: 34em;
+ }
+ .measure-narrow-ns {
+ max-width: 20em;
+ }
+ .indent-ns {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-ns {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+ }
+ .truncate-ns {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .measure-m {
+ max-width: 30em;
+ }
+ .measure-wide-m {
+ max-width: 34em;
+ }
+ .measure-narrow-m {
+ max-width: 20em;
+ }
+ .indent-m {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-m {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+ }
+ .truncate-m {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+@media screen and (min-width: 60em) {
+ .measure-l {
+ max-width: 30em;
+ }
+ .measure-wide-l {
+ max-width: 34em;
+ }
+ .measure-narrow-l {
+ max-width: 20em;
+ }
+ .indent-l {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .small-caps-l {
+ -webkit-font-feature-settings: "c2sc";
+ font-feature-settings: "c2sc";
+ font-variant: small-caps;
+ }
+ .truncate-l {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+/*
+
+ UTILITIES
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/* Equivalent to .overflow-y-scroll */
+.overflow-container {
+ overflow-y: scroll;
+}
+.center {
+ margin-right: auto;
+ margin-left: auto;
+}
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left: auto; }
+@media screen and (min-width: 30em){
+ .center-ns {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-ns { margin-right: auto; }
+ .ml-auto-ns { margin-left: auto; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em){
+ .center-m {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-m { margin-right: auto; }
+ .ml-auto-m { margin-left: auto; }
+}
+@media screen and (min-width: 60em){
+ .center-l {
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .mr-auto-l { margin-right: auto; }
+ .ml-auto-l { margin-left: auto; }
+}
+/*
+
+ VISIBILITY
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+/*
+ Text that is hidden but accessible
+ Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
+.clip {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+}
+@media screen and (min-width: 30em) {
+ .clip-ns {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .clip-m {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+@media screen and (min-width: 60em) {
+ .clip-l {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ }
+}
+/*
+
+ WHITE SPACE
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.ws-normal { white-space: normal; }
+.nowrap { white-space: nowrap; }
+.pre { white-space: pre; }
+@media screen and (min-width: 30em) {
+ .ws-normal-ns { white-space: normal; }
+ .nowrap-ns { white-space: nowrap; }
+ .pre-ns { white-space: pre; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .ws-normal-m { white-space: normal; }
+ .nowrap-m { white-space: nowrap; }
+ .pre-m { white-space: pre; }
+}
+@media screen and (min-width: 60em) {
+ .ws-normal-l { white-space: normal; }
+ .nowrap-l { white-space: nowrap; }
+ .pre-l { white-space: pre; }
+}
+/*
+
+ VERTICAL ALIGN
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.v-base { vertical-align: baseline; }
+.v-mid { vertical-align: middle; }
+.v-top { vertical-align: top; }
+.v-btm { vertical-align: bottom; }
+@media screen and (min-width: 30em) {
+ .v-base-ns { vertical-align: baseline; }
+ .v-mid-ns { vertical-align: middle; }
+ .v-top-ns { vertical-align: top; }
+ .v-btm-ns { vertical-align: bottom; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .v-base-m { vertical-align: baseline; }
+ .v-mid-m { vertical-align: middle; }
+ .v-top-m { vertical-align: top; }
+ .v-btm-m { vertical-align: bottom; }
+}
+@media screen and (min-width: 60em) {
+ .v-base-l { vertical-align: baseline; }
+ .v-mid-l { vertical-align: middle; }
+ .v-top-l { vertical-align: top; }
+ .v-btm-l { vertical-align: bottom; }
+}
+/*
+
+ HOVER EFFECTS
+ Docs: http://tachyons.io/docs/themes/hovers/
+
+ - Dim
+ - Glow
+ - Hide Child
+ - Underline text
+ - Grow
+ - Pointer
+ - Shadow
+
+*/
+/*
+
+ Dim element on hover by adding the dim class.
+
+*/
+.dim {
+ opacity: 1;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.dim:hover,
+.dim:focus {
+ opacity: .5;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.dim:active {
+ opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out;
+}
+/*
+
+ Animate opacity to 100% on hover by adding the glow class.
+
+*/
+.glow {
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.glow:hover,
+.glow:focus {
+ opacity: 1;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+/*
+
+ Hide child & reveal on hover:
+
+ Put the hide-child class on a parent element and any nested element with the
+ child class will be hidden and displayed on hover or focus.
+
+ <div class="hide-child">
+ <div class="child"> Hidden until hover or focus </div>
+ <div class="child"> Hidden until hover or focus </div>
+ <div class="child"> Hidden until hover or focus </div>
+ <div class="child"> Hidden until hover or focus </div>
+ </div>
+*/
+.hide-child .child {
+ opacity: 0;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.hide-child:hover .child,
+.hide-child:focus .child,
+.hide-child:active .child {
+ opacity: 1;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.underline-hover:hover,
+.underline-hover:focus {
+ text-decoration: underline;
+}
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+.grow {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-transition: -webkit-transform 0.25s ease-out;
+ transition: -webkit-transform 0.25s ease-out;
+ transition: transform 0.25s ease-out;
+ transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
+}
+.grow:hover,
+.grow:focus {
+ -webkit-transform: scale(1.05);
+ transform: scale(1.05);
+}
+.grow:active {
+ -webkit-transform: scale(.90);
+ transform: scale(.90);
+}
+.grow-large {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-transition: -webkit-transform .25s ease-in-out;
+ transition: -webkit-transform .25s ease-in-out;
+ transition: transform .25s ease-in-out;
+ transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
+}
+.grow-large:hover,
+.grow-large:focus {
+ -webkit-transform: scale(1.2);
+ transform: scale(1.2);
+}
+.grow-large:active {
+ -webkit-transform: scale(.95);
+ transform: scale(.95);
+}
+/* Add pointer on hover */
+.pointer:hover {
+ cursor: pointer;
+}
+/*
+ Add shadow on hover.
+
+ Performant box-shadow animation pattern from
+ http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
+.shadow-hover {
+ cursor: pointer;
+ position: relative;
+ -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+ transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.shadow-hover::after {
+ content: '';
+ -webkit-box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2);
+ box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2);
+ border-radius: inherit;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ -webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+ transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+ opacity: 1;
+}
+/* Combine with classes in skins and skins-pseudo for
+ * many different transition possibilities. */
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+ -webkit-transition: background-color .15s ease-in-out;
+ transition: background-color .15s ease-in-out;
+}
+/*
+
+ Z-INDEX
+
+ Base
+ z = z-index
+
+ Modifiers
+ -0 = literal value 0
+ -1 = literal value 1
+ -2 = literal value 2
+ -3 = literal value 3
+ -4 = literal value 4
+ -5 = literal value 5
+ -999 = literal value 999
+ -9999 = literal value 9999
+
+ -max = largest accepted z-index value as integer
+
+ -inherit = string value inherit
+ -initial = string value initial
+ -unset = string value unset
+
+ MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
+ Spec: http://www.w3.org/TR/CSS2/zindex.html
+ Articles:
+ https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+
+ Tips on extending:
+ There might be a time worth using negative z-index values.
+ Or if you are using tachyons with another project, you might need to
+ adjust these values to suit your needs.
+
+*/
+.z-0 { z-index: 0; }
+.z-1 { z-index: 1; }
+.z-2 { z-index: 2; }
+.z-3 { z-index: 3; }
+.z-4 { z-index: 4; }
+.z-5 { z-index: 5; }
+.z-999 { z-index: 999; }
+.z-9999 { z-index: 9999; }
+.z-max {
+ z-index: 2147483647;
+}
+.z-inherit { z-index: inherit; }
+.z-initial { z-index: auto; z-index: initial; }
+.z-unset { z-index: unset; }
+/*
+
+ NESTED
+ Tachyons module for styling nested elements
+ that are generated by a cms.
+
+*/
+.nested-copy-line-height p,
+.nested-copy-line-height ul,
+.nested-copy-line-height ol {
+ line-height: 1.5;
+}
+.nested-headline-line-height h1,
+.nested-headline-line-height h2,
+.nested-headline-line-height h3,
+.nested-headline-line-height h4,
+.nested-headline-line-height h5,
+.nested-headline-line-height h6 {
+ line-height: 1.25;
+}
+.nested-list-reset ul,
+.nested-list-reset ol {
+ padding-left: 0;
+ margin-left: 0;
+ list-style-type: none;
+}
+.nested-copy-indent p+p {
+ text-indent: 1em;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.nested-copy-separator p+p {
+ margin-top: 1.5em;
+}
+.nested-img img {
+ width: 100%;
+ max-width: 100%;
+ display: block;
+}
+.nested-links a {
+ color: #0594CB;
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+}
+.nested-links a:hover,
+.nested-links a:focus {
+ color: #96ccff;
+ -webkit-transition: color .15s ease-in;
+ transition: color .15s ease-in;
+}
+/*@import 'tachyons/src/_styles';*/
+/* Variables */
+/* Importing here will allow you to override any variables in the modules */
+/*
+
+ Tachyons
+ COLOR VARIABLES
+
+ Grayscale
+ - Solids
+ - Transparencies
+ Colors
+
+*/
+/*
+
+ CUSTOM MEDIA QUERIES
+
+ Media query values can be changed to fit your own content.
+ There are no magic bullets when it comes to media query width values.
+ They should be declared in em units - and they should be set to meet
+ the needs of your content. You can also add additional media queries,
+ or remove some of the existing ones.
+
+ These media queries can be referenced like so:
+
+ @media (--breakpoint-not-small) {
+ .medium-and-larger-specific-style {
+ background-color: red;
+ }
+ }
+
+ @media (--breakpoint-medium) {
+ .medium-screen-specific-style {
+ background-color: red;
+ }
+ }
+
+ @media (--breakpoint-large) {
+ .large-and-larger-screen-specific-style {
+ background-color: red;
+ }
+ }
+
+*/
+/* Media Queries */
+/* Debugging */
+/*@import 'tachyons/src/_debug-children';
+@import 'tachyons/src/_debug-grid';*/
+/* Uncomment out the line below to help debug layout issues */
+/* @import 'tachyons/src/_debug'; */
+/* purgecss start ignore */
+.header-link:after {
+ position: relative;
+ left: 0.5em;
+ opacity: 0;
+ font-size: 0.8em;
+ -moz-transition: opacity 0.2s ease-in-out 0.1s;
+ -ms-transition: opacity 0.2s ease-in-out 0.1s;
+}
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ opacity: 1;
+}
+.animated {
+ -webkit-animation-duration: .5s;
+ animation-duration: .5s;
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+}
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+.animated-delay-1 {
+ -webkit-animation-delay: 0.5s;
+ animation-delay: 0.5s;
+}
+.note,
+.warning {
+
+ border-left-width: 4px;
+ border-left-style: solid;
+ position: relative;
+ border-color: #0594CB;
+
+ display: block;
+}
+.note #exclamation-icon,
+.warning #exclamation-icon {
+
+ fill: #0594CB;
+ position: absolute;
+ top: 35%;
+ left: -12px;
+ /*background-color: white;*/
+}
+.admonition-content {
+ display: block;
+ margin: 0px;
+ padding: .125em 1em;
+ /*margin-left: 1em;*/
+ margin-top: 2em;
+ margin-bottom: 2em;
+ overflow-x: auto;
+ /*font-size: .9375em;*/
+ background-color: rgba(0, 0, 0, .05);
+ }
+.hide-child-menu .child-menu {
+ display: none;
+ }
+.hide-child-menu:hover .child-menu,
+ .hide-child-menu:focus .child-menu,
+ .hide-child-menu:active .child-menu {
+ display: block;
+ }
+/*documentation-copy headings exaggerate spacing and size to chunk content */
+.documentation-copy h2 {
+ margin-top: 3em
+ }
+.documentation-copy h2.minor {
+ font-size: inherit;
+ margin-top: inherit;
+ border-bottom: none;
+}
+.searchbox{display:inline-block;position:relative;width:200px;height:32px!important;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;visibility:visible!important}
+.searchbox .algolia-autocomplete{display:block;width:100%;height:100%}
+.searchbox__wrapper{width:100%;height:100%;z-index:999;position:relative}
+.searchbox__input{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .4s ease,-webkit-box-shadow .4s ease;transition:background .4s ease,-webkit-box-shadow .4s ease;transition:box-shadow .4s ease,background .4s ease;transition:box-shadow .4s ease,background .4s ease,-webkit-box-shadow .4s ease;border:0;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;background:#fff!important;padding:0 26px 0 32px;width:100%;height:100%;vertical-align:middle;white-space:normal;font-size:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
+.searchbox__input::-webkit-search-cancel-button,.searchbox__input::-webkit-search-decoration,.searchbox__input::-webkit-search-results-button,.searchbox__input::-webkit-search-results-decoration{display:none}
+.searchbox__input:hover{-webkit-box-shadow:inset 0 0 0 1px #b3b3b3;box-shadow:inset 0 0 0 1px #b3b3b3}
+.searchbox__input:active,.searchbox__input:focus{outline:0;-webkit-box-shadow:inset 0 0 0 1px #aaa;box-shadow:inset 0 0 0 1px #aaa;background:#fff}
+.searchbox__input::-webkit-input-placeholder{color:#aaa}
+.searchbox__input:-ms-input-placeholder{color:#aaa}
+.searchbox__input::-ms-input-placeholder{color:#aaa}
+.searchbox__input::placeholder{color:#aaa}
+.searchbox__submit{position:absolute;top:0;margin:0;border:0;border-radius:16px 0 0 16px;background-color:rgba(69, 142, 225, 0);padding:0;width:32px;height:100%;vertical-align:middle;text-align:center;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;right:inherit;left:0}
+.searchbox__submit:before{display:inline-block;margin-right:-4px;height:100%;vertical-align:middle;content:""}
+.searchbox__submit:active,.searchbox__submit:hover{cursor:pointer}
+.searchbox__submit:focus{outline:0}
+.searchbox__submit svg{width:14px;height:14px;vertical-align:middle;fill:#6d7e96}
+.searchbox__reset{display:block;position:absolute;top:8px;right:8px;margin:0;border:0;background:none;cursor:pointer;padding:0;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:rgba(0, 0, 0, .5)}
+.searchbox__reset.hide{display:none}
+.searchbox__reset:focus{outline:0}
+.searchbox__reset svg{display:block;margin:4px;width:8px;height:8px}
+.searchbox__input:valid~.searchbox__reset{display:block;-webkit-animation-name:sbx-reset-in;animation-name:sbx-reset-in;-webkit-animation-duration:.15s;animation-duration:.15s}
+@-webkit-keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}
+@keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}
+.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu{right:0!important;left:inherit!important}
+.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before{right:48px}
+.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu{left:0!important;right:inherit!important}
+.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before{left:48px}
+.algolia-autocomplete .ds-dropdown-menu{top:-6px;border-radius:4px;margin:6px 0 0;padding:0;text-align:left;height:auto;position:relative;background:transparent;border:none;z-index:999;max-width:600px;min-width:500px;-webkit-box-shadow:0 1px 0 0 rgba(0, 0, 0, .2),0 2px 3px 0 rgba(0, 0, 0, .1);box-shadow:0 1px 0 0 rgba(0, 0, 0, .2),0 2px 3px 0 rgba(0, 0, 0, .1)}
+.algolia-autocomplete .ds-dropdown-menu:before{display:block;position:absolute;content:"";width:14px;height:14px;background:#fff;z-index:1000;top:-7px;border-top:1px solid #d9d9d9;border-right:1px solid #d9d9d9;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-radius:2px}
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions{position:relative;z-index:1000;margin-top:8px}
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover{text-decoration:none}
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestion{cursor:pointer}
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content{background-color:rgba(69, 142, 225, .05)}
+.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{position:relative;border:1px solid #d9d9d9;background:#fff;border-radius:4px;overflow:auto;padding:0 8px 8px}
+.algolia-autocomplete .ds-dropdown-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}
+.algolia-autocomplete .algolia-docsearch-suggestion{display:block;position:relative;padding:0 8px;background:#fff;color:#02060c;overflow:hidden}
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#174d8c;background:rgba(143, 187, 237, .1);padding:.1em .05em}
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{padding:0 0 1px;background:inherit;-webkit-box-shadow:inset 0 -2px 0 0 rgba(69, 142, 225, .8);box-shadow:inset 0 -2px 0 0 rgba(69, 142, 225, .8);color:inherit}
+.algolia-autocomplete .algolia-docsearch-suggestion--content{display:block;float:right;width:70%;position:relative;padding:5.33333px 0 5.33333px 10.66667px;cursor:pointer}
+.algolia-autocomplete .algolia-docsearch-suggestion--content:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;left:-1px}
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header{position:relative;border-bottom:1px solid #ddd;display:none;margin-top:8px;padding:4px 0;font-size:1em;color:#33363d}
+.algolia-autocomplete .algolia-docsearch-suggestion--wrapper{width:100%;float:left;padding:8px 0 0}
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column{float:left;width:30%;text-align:right;position:relative;padding:5.33333px 10.66667px;color:#a4a7ae;font-size:.9em;word-wrap:break-word}
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;right:0}
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline{display:none}
+.algolia-autocomplete .algolia-docsearch-suggestion--title{margin-bottom:4px;color:#02060c;font-size:.9em;font-weight:700}
+.algolia-autocomplete .algolia-docsearch-suggestion--text{display:block;line-height:1.2em;font-size:.85em;color:#63676d}
+.algolia-autocomplete .algolia-docsearch-suggestion--no-results{width:100%;padding:8px 0;text-align:center;font-size:1.2em}
+.algolia-autocomplete .algolia-docsearch-suggestion--no-results:before{display:none}
+.algolia-autocomplete .algolia-docsearch-suggestion code{padding:1px 5px;font-size:90%;border:none;color:#222;background-color:#ebebeb;border-radius:3px;font-family:Menlo,Monaco,Consolas,Courier New,monospace}
+.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight{background:none}
+.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header,.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary{display:block}
+@media (min-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:block}}
+@media (max-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:inline-block;width:auto;float:left;padding:0;color:#02060c;font-size:.9em;font-weight:700;text-align:left;opacity:.5}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after{content:"|"}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content{display:inline-block;width:auto;text-align:left;float:left;padding:0}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before{display:none}}
+.algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion{border-bottom:1px solid #eee;padding:8px;margin:0}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content{width:100%;padding:0}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content:before{display:none}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header{margin:0;padding:0;display:block;width:100%;border:none}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1{opacity:.6;font-size:.85em}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1:before{background-image:url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>');content:"";width:10px;height:10px;display:inline-block}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}
+.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;-webkit-box-shadow:none;box-shadow:none}
+.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}
+.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}
+/* These styles enhance the home page carousel, located here: themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html */
+.overflow-x-scroll{
+ -webkit-overflow-scrolling: touch;
+}
+.row {
+ -webkit-transition: 450ms -webkit-transform;
+ transition: 450ms -webkit-transform;
+ transition: 450ms transform;
+ transition: 450ms transform, 450ms -webkit-transform;
+ font-size: 0;
+}
+.tile {
+ -webkit-transition: 450ms all;
+ transition: 450ms all;
+}
+.details {
+ background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .9)), to(rgba(0, 0, 0, 0)));
+ background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 100%);
+ -webkit-transition: 450ms opacity;
+ transition: 450ms opacity;
+}
+.tile:hover .details {
+ opacity: 1;
+}
+.row:hover .tile {
+ opacity: 0.3;
+}
+.row:hover .tile:hover {
+ opacity: 1;
+}
+.chroma .lntable pre {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+.chroma .lntable pre code {
+ padding: 0;
+ margin: 0;
+}
+code {
- font-size: 85%;
++ padding: 2px 3px;
+ margin: 0;
++ font-size: 93.75%;
+ background-color: rgba(27, 31, 35, .05);
+ border-radius: 3px;
+}
+pre code {
+ display: block;
+ padding: 1.5em 1.5em;
+ font-size: .875rem;
+ line-height: 2;
+ overflow-x: auto;
+}
+pre {
+ background-color: #fff;
+ color: #333;
+ white-space: pre;
+ -webkit-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ position: relative;
+ border-width: 1px;
+ border-color: #ccc;
+ border-style: solid;
+}
+/* The Pygments highlighter comes with its own styles. */
+.highlight pre {
+ background-color: inherit;
+ color: inherit;
+ padding: 0.5em;
+ font-size: .875rem;
+}
+/*We are adding the copy button content here so we can change it with javascript. See the "Clipboard scripts"*/
+.copy:after {
+ content: "Copy"
+}
+.copied:after {
+ content: "Copied"
+}
+@media screen and (min-width: 60em) {
+ .full-width
+ {
+ /*width: 100vw;
+ position: relative;
+ left: 50%;
+ right: 50%;
+ margin-left: -50vw;
+ margin-right: -50vw;*/
+ /*width: 60vw;*/
+ /*position: relative;
+ left: 50%;
+ right: 50%;*/
+ /*margin-left: -30vw;*/
+ margin-right: -30vw;
+ max-width: 100vw;
+ }
+}
+.code-block .line-numbers-rows {
+ background: #2f3a46;
+ border: none;
+ bottom: -50px;
+ color: #98a4b3;
+ left: -178px;
+ padding: 50px 0;
+ top: -50px;
+ width: 138px
+}
+.code-block .line-numbers-rows>span:before {
+ color: inherit;
+ padding-right: 30px
+}
+.tab-button{
+ margin-bottom:1px;
+ position: relative;
+ z-index: 1;
+ color:#333;
+ border-color:#ccc;
+ outline: none;
+ background-color:white;
+}
+.tab-pane code{
+ background:#f1f2f2;
+ border-radius:0;
+}
+.tab-pane .chroma{
+ background:none;
+ padding:0;
+}
+.tab-button.active{
+ border-bottom-color:#f1f2f2;
+ background-color: #f1f2f2;
+}
+.tab-content .tab-pane{
+ display: none;
+}
+.tab-content .tab-pane.active{
+ display: block;
+}
+/* Treatment of copy buttons inside a tab module */
+.tab-content .copy, .tab-content .copied{
+ display: none;
+}
+.tab-content .tab-pane.active + .copy, .tab-content .tab-pane.active + .copied{
+ display: block;
+}
+.primary-color {color: #0594CB}
+.bg-primary-color {background-color: #0594CB}
+.hover-bg-primary-color:hover {background-color: #0594CB}
+.primary-color-dark {color: #0A1922}
+.bg-primary-color-dark {background-color: #0A1922}
+.hover-bg-primary-color-dark:hover {background-color: #0A1922}
+.primary-color-light {color: #f9f9f9}
+.bg-primary-color-light {background-color: #f9f9f9}
+.hover-bg-primary-color-light:hover {background-color: #f9f9f9}
+.accent-color {color: #EBB951}
+.bg-accent-color {background-color: #EBB951}
+.hover-bg-accent-color:hover {background-color: #EBB951}
+.accent-color-light {color: #FF4088}
+.hover-accent-color-light:hover {color: #FF4088}
+.bg-accent-color-light {background-color: #FF4088}
+.hover-bg-accent-color-light:hover {background-color: #FF4088}
+.accent-color-dark {color: #33ba91}
+.bg-accent-color-dark {background-color: #33ba91}
+.hover-bg-accent-color-dark:hover {background-color: #33ba91}
+.text-color-primary {color: #373737}
+.text-on-primary-color {color: #fff}
+.text-color-secondary {color: #ccc}
+.text-color-disabled {color: #F7f7f7}
+.divider-color {color: #f6f6f6}
+.warn-color {color: red}
+.nested-links a {
+ color: #0594CB;
+ text-decoration: none;
+
+}
+.column-count-2 {-webkit-column-count: 1;column-count: 1}
+.column-gap-1 {-webkit-column-gap: 0;column-gap: 0}
+.break-inside-avoid {-webkit-column-break-inside: auto;break-inside: auto}
+@media screen and (min-width: 60em) {
+ .column-count-3-l {-webkit-column-count: 3;column-count: 3}
+ .column-count-2-l {-webkit-column-count: 2;column-count: 2}
+ .column-gap-1-l {-webkit-column-gap: 1;column-gap: 1}
+ .break-inside-avoid-l {-webkit-column-break-inside: avoid;break-inside: avoid}
+}
+.prose ul, .prose ol {
+ margin-bottom: 2em;
+}
+.prose ul li, .prose ol li {
+ margin-bottom: .5em;
+}
+.prose li:hover {
+ background-color: #eee
+}
+.prose ::selection {
+ background: #0594CB; /* WebKit/Blink Browsers */
+ color: white;
+}
+.prose-glossary h3 {
+ margin-top: 0;
+ font-size: 1.125rem;
+}
+.prose-glossary h3:first-of-type {
+ margin-top: 3em;
+}
+.prose-glossary h3 ~ p {
+ margin: 0.5em 0 2em 0;
+}
+body {
+
+line-height: 1.45;
+
+}
+p {margin-bottom: 1.3em;}
+h1, h2, h3, h4 {
+margin: 1.414em 0 0.5em;
+
+line-height: 1.2;
+}
+h1 {
+margin-top: 0;
+font-size: 2.441em;
+}
+h2 {font-size: 1.953em;}
+h3 {font-size: 1.563em;}
+h4 {font-size: 1.25em;}
+small, .font_small {font-size: 0.8em;}
+.prose table {
+ width: 100%;
+ margin-bottom: 3em;
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-size: 1em;
+ border: 1px solid #eee
+
+}
+.prose table th {
+ background-color: #0594CB;
+ border-bottom: 1px solid #0594CB;
+ color: white;
+ font-weight: 400;
+ text-align: left;
+ padding: .375em .5em;
+}
+.prose table td, .prose table tc {
+ padding: .75em .5em;
+ text-align: left;
+ border-right: 1px solid #eee;
+}
+.prose table tr:nth-child(even) {
+ background-color: #eee;
+}
+dl dt {
+ font-weight: bold;
+ font-size: 1.125rem;
+}
+dd {
+ margin: .5em 0 2em 0;
+ padding: 0;
+}
+.f2-fluid {
+ font-size: 2.25rem;
+}
+@media screen and (min-width: 60em) {
+ .f2-fluid {
+ font-size: 1.25rem;
+ font-size: calc(0.70833rem + 0.83333vw);
+ }
+}
+/* From https://www.cssfontstack.com */
+code, .code, pre code, .highlight pre {
+ font-family: 'inconsolata',Menlo,Monaco,'Courier New',monospace;
+}
+.sans-serif {
+ font-family: 'Muli', Avenir, 'Helvetica Neue', Helvetica, Roboto, Noto, 'Segoe UI', Arial, sans-serif;
+}
+.serif {
+ font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
+}
+/* Monospaced Typefaces (for code) */
+.courier {
+ font-family: 'Courier Next',
+ courier,
+ monospace;
+}
+/* Sans-Serif Typefaces */
+.helvetica {
+ font-family: 'helvetica neue', helvetica,
+ sans-serif;
+}
+.avenir {
+ font-family: 'avenir next', avenir,
+ sans-serif;
+}
+/* Serif Typefaces */
+.athelas {
+ font-family: athelas,
+ georgia,
+ serif;
+}
+.georgia {
+ font-family: georgia,
+ serif;
+}
+.times {
+ font-family: times,
+ serif;
+}
+.bodoni {
+ font-family: "Bodoni MT",
+ serif;
+}
+.calisto {
+ font-family: "Calisto MT",
+ serif;
+}
+.garamond {
+ font-family: garamond,
+ serif;
+}
+.baskerville {
+ font-family: baskerville,
+ serif;
+}
+/* pagination.html: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */
+.pagination {
+ margin: 3rem 0;
+}
+.pagination li {
+ display: inline-block;
+ margin-right: .375rem;
+ font-size: .875rem;
+ margin-bottom: 2.5em;
+}
+.pagination li a {
+ padding: .5rem .625rem;
+ background-color: white;
+ color: #333;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ text-decoration: none;
+}
+.pagination li.disabled {
+ display: none;
+}
+.pagination li.active a:link,
+.pagination li.active a:active,
+.pagination li.active a:visited {
+ background-color: #ddd;
+}
+/* Hides non-meaningful TOC items*/
+#TableOfContents ul li ul li ul li{
+ display: none;
+ }
+#TableOfContents ul li {
+ color: black;
+ display: block;
+ margin-bottom: .375em;
+ line-height: 1.375;
+}
+#TableOfContents ul li a{
+ width: 100%;
+ padding: .25em .375em;
+ margin-left: -.375em;
+
+}
+#TableOfContents ul li a:hover {
+ background-color: #999;
+ color: white;
+
+}
+.no-js .needs-js {
+ opacity: 0
+}
+.js .needs-js {
+ opacity: 1;
+ -webkit-transition: opacity .15s ease-in;
+ transition: opacity .15s ease-in;
+}
+.facebook,
+.twitter,
+.instagram,
+.youtube {
+ fill: #bababa;
+}
+.facebook:hover {
+ fill: #3b5998;
+}
+.twitter {
+ fill: #55acee;
+}
+.twitter:hover {
+ fill: #bababa;
+}
+.instagram:hover {
+ fill: #e95950;
+}
+.youtube:hover {
+ fill: #bb0000;
+}
+.mstdn {
+ display: inline-block;
+ background-color: #282c37;
+ color: #d9e1e8;
+ text-decoration: none;
+ padding: 4px 10px 4px 30px;
+ border-radius: 4px;
+ font-size: 16px;
+ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2261.076954mm%22%20height%3D%2265.47831mm%22%20viewBox%3D%220%200%20216.4144%20232.00976%22%3E%3Cpath%20d%3D%22M211.80734%20139.0875c-3.18125%2016.36625-28.4925%2034.2775-57.5625%2037.74875-15.15875%201.80875-30.08375%203.47125-45.99875%202.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125%200%202.53375.15625%204.94625.46875%207.2025%203.38375%2025.68625%2025.47%2027.225%2046.39125%2027.9425%2021.11625.7225%2039.91875-5.20625%2039.91875-5.20625l.8675%2019.09s-14.77%207.93125-41.08125%209.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234%20213.82%201.40609%20165.31125.20859%20116.09125c-.365-14.61375-.14-28.39375-.14-39.91875%200-50.33%2032.97625-65.0825%2032.97625-65.0825C49.67234%203.45375%2078.20359.2425%20107.86484%200h.72875c29.66125.2425%2058.21125%203.45375%2074.8375%2011.09%200%200%2032.975%2014.7525%2032.975%2065.0825%200%200%20.41375%2037.13375-4.59875%2062.915%22%20fill%3D%22%233088d4%22%2F%3E%3Cpath%20d%3D%22M177.50984%2080.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025%200-17.4175%207.5075-17.4175%2022.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375%200-15.74%206.32875-15.74%2018.7975v59.15H38.90484V80.077c0-12.455%203.17125-22.3525%209.54125-29.675%206.56875-7.3225%2015.17125-11.07625%2025.85-11.07625%2012.355%200%2021.71125%204.74875%2027.8975%2014.2475l6.01375%2010.08125%206.015-10.08125c6.185-9.49875%2015.54125-14.2475%2027.8975-14.2475%2010.6775%200%2019.28%203.75375%2025.85%2011.07625%206.36875%207.3225%209.54%2017.22%209.54%2029.675%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
+ background-size: 16px;
+ background-repeat: no-repeat;
+ background-position: top 50% left 8px;
+ -webkit-transition: all 0.5s;
+ transition: all 0.5s;
+}
+.mstdn:hover {
+ background-color: #484c56;
+}
+.mstdn > span {
+ color: #9baec8;
+ font-size: 12px;
+ padding-left: 3px;
+}
+.mstdn > span:before {
+ content: "@";
+}
+@media (min-width: 75em) {
+
+ [data-scrolldir="down"] .sticky {
+ position: fixed;
+ top:100px;
+ right:0;
+ }
+
+ [data-scrolldir="up"] .sticky {
+ position: fixed;
+ top:100px;
+ right:0;
+ }
+}
+#right-sidebar {
+ scrollbar-width: none; /* hide scrollbar: Firefox */
+ -ms-overflow-style: none; /* hide scrollbar: Internet Explorer 10+ */
+ height: calc(100vh - 9rem);
+ overflow-y: auto;
+}
+#right-sidebar::-webkit-scrollbar { /* hide scrollbar: WebKit */
+ width: 0;
+ height: 0;
+}
+.fill-current { fill: currentColor; }
+/* Background */
+.chroma { background-color: #ffffff }
+/* Error */
+.chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* LineTableTD */
+.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */
+.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */
+.chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */
+.chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* LineNumbers */
+.chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
+/* Keyword */
+.chroma .k { font-weight: bold }
+/* KeywordConstant */
+.chroma .kc { font-weight: bold }
+/* KeywordDeclaration */
+.chroma .kd { font-weight: bold }
+/* KeywordNamespace */
+.chroma .kn { font-weight: bold }
+/* KeywordPseudo */
+.chroma .kp { font-weight: bold }
+/* KeywordReserved */
+.chroma .kr { font-weight: bold }
+/* KeywordType */
+.chroma .kt { color: #445588; font-weight: bold }
+/* NameAttribute */
+.chroma .na { color: #008080 }
+/* NameBuiltin */
+.chroma .nb { color: #999999 }
+/* NameClass */
+.chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */
+.chroma .no { color: #008080 }
+/* NameEntity */
+.chroma .ni { color: #800080 }
+/* NameException */
+.chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */
+.chroma .nf { color: #990000; font-weight: bold }
+/* NameNamespace */
+.chroma .nn { color: #555555 }
+/* NameTag */
+.chroma .nt { color: #000080 }
+/* NameVariable */
+.chroma .nv { color: #008080 }
+/* LiteralString */
+.chroma .s { color: #bb8844 }
+/* LiteralStringAffix */
+.chroma .sa { color: #bb8844 }
+/* LiteralStringBacktick */
+.chroma .sb { color: #bb8844 }
+/* LiteralStringChar */
+.chroma .sc { color: #bb8844 }
+/* LiteralStringDelimiter */
+.chroma .dl { color: #bb8844 }
+/* LiteralStringDoc */
+.chroma .sd { color: #bb8844 }
+/* LiteralStringDouble */
+.chroma .s2 { color: #bb8844 }
+/* LiteralStringEscape */
+.chroma .se { color: #bb8844 }
+/* LiteralStringHeredoc */
+.chroma .sh { color: #bb8844 }
+/* LiteralStringInterpol */
+.chroma .si { color: #bb8844 }
+/* LiteralStringOther */
+.chroma .sx { color: #bb8844 }
+/* LiteralStringRegex */
+.chroma .sr { color: #808000 }
+/* LiteralStringSingle */
+.chroma .s1 { color: #bb8844 }
+/* LiteralStringSymbol */
+.chroma .ss { color: #bb8844 }
+/* LiteralNumber */
+.chroma .m { color: #009999 }
+/* LiteralNumberBin */
+.chroma .mb { color: #009999 }
+/* LiteralNumberFloat */
+.chroma .mf { color: #009999 }
+/* LiteralNumberHex */
+.chroma .mh { color: #009999 }
+/* LiteralNumberInteger */
+.chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */
+.chroma .il { color: #009999 }
+/* LiteralNumberOct */
+.chroma .mo { color: #009999 }
+/* Operator */
+.chroma .o { font-weight: bold }
+/* OperatorWord */
+.chroma .ow { font-weight: bold }
+/* Comment */
+.chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */
+.chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */
+.chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */
+.chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */
+.chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */
+.chroma .cp { color: #999999; font-weight: bold }
+/* CommentPreprocFile */
+.chroma .cpf { color: #999999; font-weight: bold }
+/* GenericDeleted */
+.chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */
+.chroma .ge { font-style: italic }
+/* GenericError */
+.chroma .gr { color: #aa0000 }
+/* GenericHeading */
+.chroma .gh { color: #999999 }
+/* GenericInserted */
+.chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */
+.chroma .go { color: #888888 }
+/* GenericPrompt */
+.chroma .gp { color: #555555 }
+/* GenericStrong */
+.chroma .gs { font-weight: bold }
+/* GenericSubheading */
+.chroma .gu { color: #aaaaaa }
+/* GenericTraceback */
+.chroma .gt { color: #aa0000 }
+/* TextWhitespace */
+.chroma .w { color: #bbbbbb }
+@media print {
+ #page-footer,
+ body > footer,
+ body > nav {
+ display: none;
+ }
+}
+/*
+Make h6 elements behave like dt elements. Initially implemented to support
+linkable glossary entries.
+
+Yes, it's a hack. That's why it's in the shame file.
+*/
+h6 {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 1.125rem;
+}
+h6:first-of-type {
+ margin-top: 3em;
+}
+h6 ~ p {
+ margin: 0.5em 0 2em 0;
+}
+/* QR codes */
+img.qrcode {
+ width: auto;
+ width: initial;
+}
+.nested-blockquote blockquote {
+ border-left: 4px solid #0594CB;
+ padding-left: 1em;
+}
+.mw-90 {
+ max-width:90%;
+}
+/* purgecss end ignore */
+
--- /dev/null
- {{ with resources.GetRemote $url }}
+{{ $author := .context.Params.author }}
+{{ if $author }}
+ <aside class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10 nested-links">
+
+ {{ $data := "" }}
+ {{ $url := urls.JoinPath "https://api.github.com/users" $author }}
- {{ else }}
++ {{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+ {{ end }}
+
+ <div class="tc">
+ {{ with $data }}
+
+ {{ with .avatar_url }}
+ <a href="{{ . }}" class="link hover-bg-light-gray pa1 br-100">
+ <img src="{{ . }}&size={{ $.size }}" alt="" class="br-100 ba b--light-gray">
+ </a>
+ {{ end }}
+ {{ with .name }}
+ <h3 class="f4">
+ <a href="{{ $data.html_url }}" class="link dim">
+ {{ . | htmlEscape }}
+ </a>
+ </h3>
+ <hr class="mw3 bb bw1 b--black-10">
+ {{ end }}
+ {{ with .bio }}
+ <p class="lh-copy measure center f6 black-70">
+ {{ . | htmlEscape }}
+ </p>
+ {{ end }}
+
+ {{ end }}
+ </div>
+
+ </aside>
+{{ end }}
--- /dev/null
- {{ with resources.GetRemote $url }}
+{{ $author := .context.Params.author }}
+{{ if $author }}
+ <aside class="mw5 br3 mv3 nested-links">
+
+ {{ $data := "" }}
+ {{ $url := urls.JoinPath "https://api.github.com/users" $author }}
- {{ else }}
++ {{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+ {{ end }}
+
+ {{ with $data }}
+ {{ with .name }}
+ <h3 class="f4 dib">
+ {{ . | htmlEscape }}
+ </h3>
+ {{ end }}
+ {{ with .bio }}
+ <p class="lh-copy measure center mt0 f6 black-60">
+ {{ . | htmlEscape }}
+ </p>
+ {{ end }}
+ {{ with .html_url }}
+ <a href="{{ . }}" class="link dim v-mid dib">
+ {{ partial "svg/github-squared.svg" (dict "fill" "gray" "width" "16" "height" "18") }}
+ </a>
+ {{ end }}
+ {{ end }}
+
+ </aside>
+{{ end }}
--- /dev/null
- {{ with resources.GetRemote $url }}
+{{/*
+Parses the serialized data from the given URL and returns a map or an array.
+
+Supports CSV, JSON, TOML, YAML, and XML.
+
+@param {string} . The URL from which to retrieve the serialized data.
+@returns {any}
+
+@example {{ partial "get-remote-data.html" "https://example.org/foo.json" }}
+*/}}
+
+{{ $url := . }}
+{{ $data := dict }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $data = .Content | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+{{ end }}
+{{ return $data }}
--- /dev/null
--- /dev/null
++{{- /*
++Returns syntax-highlighted code from the given text.
++
++This is useful as a terse way to highlight inline code snippets. Calling the
++highlight shortcode for inline snippets is verbose.
++*/}}
++
++{{- $code := .Inner | strings.TrimSpace }}
++{{- $lang := or (.Get 0) "go" }}
++{{- $opts := dict "hl_inline" true "noClasses" true }}
++{{- transform.Highlight $code $lang $opts }}
--- /dev/null
- "gamma" "gaussianblur" "grayscale" "hue" "invert" "none" "opacity" "overlay"
- "padding" "pixelate" "process" "saturation" "sepia" "sigmoid" "text"
+{{- /*
+Renders the given image using the given filter, if any.
+
+@param {string} src The path to the image which must be a remote, page, or global resource.
+@param {string} [filter] The filter to apply to the image (case-insensitive).
+@param {string} [filterArgs] A comma-delimited list of arguments to pass to the filter.
+@param {bool} [example=false] If true, renders a before/after example.
+@param {int} [exampleWidth=384] Image width, in pixels, when rendering a before/after example.
+
+@returns {template.HTML}
+
+@examples
+
+ {{< img src="zion-national-park.jpg" >}}
+
+ {{< img src="zion-national-park.jpg" alt="Zion National Park" >}}
+
+ {{< img
+ src="zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="grayscale"
+ >}}
+
+ {{< img
+ src="zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="process"
+ filterArgs="resize 400x webp"
+ >}}
+
+ {{< img
+ src="zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="colorize"
+ filterArgs="180,50,20"
+ >}}
+
+ {{< img
+ src="zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="grayscale"
+ example=true
+ >}}
+
+ {{< img
+ src="zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="grayscale"
+ example=true
+ exampleWidth=400
+ >}}
+
+ When using the text filter, provide the arguments in this order:
+
+ 0. The text
+ 1. The horizontal offset, in pixels, relative to the left of the image (default 20)
+ 2. The vertical offset, in pixels, relative to the top of the image (default 20)
+ 3. The font size in pixels (default 64)
+ 4. The line height (default 1.2)
+ 5. The font color (default #ffffff)
+
+ {{< img
+ src="images/examples/zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="Text"
+ filterArgs="Zion National Park,25,250,56"
+ example=true
+ >}}
+
+ When using the padding filter, provide all arguments in this order:
+
+ 0. Padding top
+ 1. Padding right
+ 2. Padding bottom
+ 3. Padding right
+ 4. Canvas color
+
+ {{< img
+ src="images/examples/zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="Padding"
+ filterArgs="20,50,20,50,#0705"
+ example=true
+ >}}
+
+*/}}
+
+{{- /* Initialize. */}}
+{{- $alt := "" }}
+{{- $src := "" }}
+{{- $filter := "" }}
+{{- $filterArgs := slice }}
+{{- $example := false }}
+{{- $exampleWidth := 384 }}
+
+{{- /* Default values to use with the text filter. */}}
+{{ $textFilterOpts := dict
+ "xOffset" 20
+ "yOffset" 20
+ "fontSize" 64
+ "lineHeight" 1.2
+ "fontColor" "#ffffff"
+ "fontPath" "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf"
+}}
+
+{{- /* Get and validate parameters. */}}
+{{- with .Get "alt" }}
+ {{- $alt = .}}
+{{- end }}
+
+{{- with .Get "src" }}
+ {{- $src = . }}
+{{- else }}
+ {{- errorf "The %q shortcode requires a file parameter. See %s" .Name .Position }}
+{{- end }}
+
+{{- with .Get "filter" }}
+ {{- $filter = . | lower }}
+{{- end }}
+
+{{- $validFilters := slice
+ "autoorient" "brightness" "colorbalance" "colorize" "contrast" "dither"
- <img class='di ba b--black-20' style="width: initial;" src="{{ $i.RelPermalink }}" alt="{{ $alt }}">
++ "gamma" "gaussianblur" "grayscale" "hue" "invert" "mask" "none" "opacity"
++ "overlay" "padding" "pixelate" "process" "saturation" "sepia" "sigmoid" "text"
+ "unsharpmask"
+}}
+
+{{- with $filter }}
+ {{- if not (in $validFilters .) }}
+ {{- errorf "The filter passed to the %q shortcode is invalid. The filter must be one of %s. See %s" $.Name (delimit $validFilters ", " ", or ") $.Position }}
+ {{- end }}
+{{- end }}
+
+{{- with .Get "filterArgs" }}
+ {{- $filterArgs = split . "," }}
+ {{- $filterArgs = apply $filterArgs "trim" "." " " }}
+{{- end }}
+
+{{- if in (slice "false" false 0) (.Get "example") }}
+ {{- $example = false }}
+{{- else if in (slice "true" true 1) (.Get "example")}}
+ {{- $example = true }}
+{{- end }}
+
+{{- with .Get "exampleWidth" }}
+ {{- $exampleWidth = . | int }}
+{{- end }}
+
+{{- /* Get image. */}}
+{{- $ctx := dict "page" .Page "src" $src "name" .Name "position" .Position }}
+{{- $i := partial "inline/get-resource.html" $ctx }}
+
+{{- /* Resize if rendering before/after examples. */}}
+{{- if $example }}
+ {{- $i = $i.Resize (printf "%dx" $exampleWidth) }}
+{{- end }}
+
+{{- /* Create filter. */}}
+{{- $f := "" }}
+{{- $ctx := dict "filter" $filter "args" $filterArgs "name" .Name "position" .Position }}
+{{- if eq $filter "autoorient" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 0) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $f = images.AutoOrient }}
+{{- else if eq $filter "brightness" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage" "argValue" (index $filterArgs 0) "min" -100 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Brightness (index $filterArgs 0) }}
+{{- else if eq $filter "colorbalance" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 3) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage red" "argValue" (index $filterArgs 0) "min" -100 "max" 500) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage green" "argValue" (index $filterArgs 1) "min" -100 "max" 500) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage blue" "argValue" (index $filterArgs 2) "min" -100 "max" 500) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.ColorBalance (index $filterArgs 0) (index $filterArgs 1) (index $filterArgs 2) }}
+{{- else if eq $filter "colorize" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 3) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "hue" "argValue" (index $filterArgs 0) "min" 0 "max" 360) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "saturation" "argValue" (index $filterArgs 1) "min" 0 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage" "argValue" (index $filterArgs 2) "min" 0 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Colorize (index $filterArgs 0) (index $filterArgs 1) (index $filterArgs 2) }}
+{{- else if eq $filter "contrast" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage" "argValue" (index $filterArgs 0) "min" -100 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Contrast (index $filterArgs 0) }}
+{{- else if eq $filter "dither" }}
+ {{- $f = images.Dither }}
+{{- else if eq $filter "gamma" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "gamma" "argValue" (index $filterArgs 0) "min" 0 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Gamma (index $filterArgs 0) }}
+{{- else if eq $filter "gaussianblur" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "sigma" "argValue" (index $filterArgs 0) "min" 0 "max" 1000) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.GaussianBlur (index $filterArgs 0) }}
+{{- else if eq $filter "grayscale" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 0) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $f = images.Grayscale }}
+{{- else if eq $filter "hue" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "shift" "argValue" (index $filterArgs 0) "min" -180 "max" 180) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Hue (index $filterArgs 0) }}
+{{- else if eq $filter "invert" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 0) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $f = images.Invert }}
++{{- else if eq $filter "mask" }}
++ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
++ {{- template "validate-arg-count" $ctx }}
++ {{- $ctx := dict "src" (index $filterArgs 0) "name" .Name "position" .Position }}
++ {{- $maskImage := partial "inline/get-resource.html" $ctx }}
++ {{- $f = images.Mask $maskImage }}
+{{- else if eq $filter "opacity" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "opacity" "argValue" (index $filterArgs 0) "min" 0 "max" 1) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Opacity (index $filterArgs 0) }}
+{{- else if eq $filter "overlay" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 3) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $ctx := dict "src" (index $filterArgs 0) "name" .Name "position" .Position }}
+ {{- $overlayImg := partial "inline/get-resource.html" $ctx }}
+ {{- $f = images.Overlay $overlayImg (index $filterArgs 1 | float ) (index $filterArgs 2 | float) }}
+{{- else if eq $filter "padding" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 5) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $f = images.Padding
+ (index $filterArgs 0 | int)
+ (index $filterArgs 1 | int)
+ (index $filterArgs 2 | int)
+ (index $filterArgs 3 | int)
+ (index $filterArgs 4)
+ }}
+{{- else if eq $filter "pixelate" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "size" "argValue" (index $filterArgs 0) "min" 0 "max" 1000) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Pixelate (index $filterArgs 0) }}
+{{- else if eq $filter "process" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $f = images.Process (index $filterArgs 0) }}
+{{- else if eq $filter "saturation" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage" "argValue" (index $filterArgs 0) "min" -100 "max" 500) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Saturation (index $filterArgs 0) }}
+{{- else if eq $filter "sepia" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "percentage" "argValue" (index $filterArgs 0) "min" 0 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Sepia (index $filterArgs 0) }}
+{{- else if eq $filter "sigmoid" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 2) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "midpoint" "argValue" (index $filterArgs 0) "min" 0 "max" 1) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "factor" "argValue" (index $filterArgs 1) "min" -10 "max" 10) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.Sigmoid (index $filterArgs 0) (index $filterArgs 1) }}
+{{- else if eq $filter "text" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 1) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $ctx := dict "src" $textFilterOpts.fontPath "name" .Name "position" .Position }}
+ {{- $font := or (partial "inline/get-resource.html" $ctx) }}
+ {{- $fontSize := or (index $filterArgs 3 | int) $textFilterOpts.fontSize }}
+ {{- $lineHeight := math.Max (or (index $filterArgs 4 | float) $textFilterOpts.lineHeight) 1 }}
+ {{- $opts := dict
+ "x" (or (index $filterArgs 1 | int) $textFilterOpts.xOffset)
+ "y" (or (index $filterArgs 2 | int) $textFilterOpts.yOffset)
+ "size" $fontSize
+ "linespacing" (mul (sub $lineHeight 1) $fontSize)
+ "color" (or (index $filterArgs 5) $textFilterOpts.fontColor)
+ "font" $font
+ }}
+ {{- $f = images.Text (index $filterArgs 0) $opts }}
+{{- else if eq $filter "unsharpmask" }}
+ {{- $ctx = merge $ctx (dict "argsRequired" 3) }}
+ {{- template "validate-arg-count" $ctx }}
+ {{- $filterArgs = apply $filterArgs "float" "." }}
+ {{- $ctx = merge $ctx (dict "argName" "sigma" "argValue" (index $filterArgs 0) "min" 0 "max" 500) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "amount" "argValue" (index $filterArgs 1) "min" 0 "max" 100) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $ctx = merge $ctx (dict "argName" "threshold" "argValue" (index $filterArgs 2) "min" 0 "max" 1) }}
+ {{- template "validate-arg-value" $ctx }}
+ {{- $f = images.UnsharpMask (index $filterArgs 0) (index $filterArgs 1) (index $filterArgs 2) }}
+{{- end }}
+
+{{- /* Apply filter. */}}
+{{- $fi := $i }}
+{{- with $f }}
+ {{- $fi = $i.Filter . }}
+{{- end }}
+
+{{- /* Render. */}}
++{{- $class := "di va b--black-20" }}
++{{- if eq $filter "mask" }}
++ {{- $class = "di va" }}
++{{- end }}
+{{- if $example }}
+ <p>Original</p>
- <img class='di ba b--black-20' style="width: initial;" src="{{ $fi.RelPermalink }}" alt="{{ $alt }}">
++ <img class="{{ $class}}" style="width: initial;" src="{{ $i.RelPermalink }}" alt="{{ $alt }}">
+ <p>Processed</p>
- {{- with resources.GetRemote $u.String }}
++ <img class="{{ $class }}" style="width: initial;" src="{{ $fi.RelPermalink }}" alt="{{ $alt }}">
+{{- else -}}
+ <img class='di' style="width: initial;" src="{{ $fi.RelPermalink }}" alt="{{ $alt }}">
+{{- end }}
+
+{{- define "validate-arg-count" }}
+ {{- $msg := "When using the %q filter, the %q shortcode requires an args parameter with %d %s. See %s" }}
+ {{- if lt (len .args) .argsRequired }}
+ {{- $text := "values" }}
+ {{- if eq 1 .argsRequired }}
+ {{- $text = "value" }}
+ {{- end }}
+ {{- errorf $msg .filter .name .argsRequired $text .position }}
+ {{- end }}
+{{- end }}
+
+{{- define "validate-arg-value" }}
+ {{- $msg := "The %q argument passed to the %q shortcode is invalid. Expected a value in the range [%v,%v], but received %v. See %s" }}
+ {{- if or (lt .argValue .min) (gt .argValue .max) }}
+ {{- errorf $msg .argName .name .min .max .argValue .position }}
+ {{- end }}
+{{- end }}
+
+{{- define "partials/inline/get-resource.html" }}
+ {{- $r := "" }}
+ {{- $u := urls.Parse .src }}
+ {{- $msg := "The %q shortcode was unable to resolve %s. See %s" }}
+ {{- if $u.IsAbs }}
- {{- else }}
++ {{- with try (resources.GetRemote $u.String) }}
+ {{- with .Err }}
+ {{- errorf "%s" . }}
- {{- else }}
- {{- errorf $msg $.name $u.String $.position }}
++ {{- else with .Value }}
+ {{- /* This is a remote resource. */}}
+ {{- $r = . }}
++ {{- else }}
++ {{- errorf $msg $.name $u.String $.position }}
+ {{- end }}
+ {{- end }}
+ {{- else }}
+ {{- with .page.Resources.Get (strings.TrimPrefix "./" $u.Path) }}
+ {{- /* This is a page resource. */}}
+ {{- $r = . }}
+ {{- else }}
+ {{- with resources.Get $u.Path }}
+ {{- /* This is a global resource. */}}
+ {{- $r = . }}
+ {{- else }}
+ {{- errorf $msg $.name $u.Path $.position }}
+ {{- end }}
+ {{- end }}
+ {{- end }}
+ {{- return $r}}
+{{- end -}}
--- /dev/null
- # github.com/gohugoio/gohugoioTheme v0.0.0-20250106044328-feb60697e056
++# github.com/gohugoio/gohugoioTheme v0.0.0-20250116152525-2d382cae7743
--- /dev/null
--- /dev/null
++---
++title: {{ replace .File.ContentBaseName "-" " " }}
++---
++
++<!--
++You can insert these definitions in other pages using the `glossary-term` shortcode, so they must be self-contained.
++
++Do this:
++
++ A _foo_ is big bar.
++
++Not this:
++
++ A big bar.
++
++Italicize the term whenever you use it in the definition.
++
++An exception to this rule occurs when a term is an alias for another. In such cases, it is sufficient to use the phrase 'See [page kind]'."
++-->
--- /dev/null
- 2. Add a summary to the `bio.md` file in this folder.
+---
+
+title: {{ replace .File.ContentBaseName "-" " " | title }}
+date: {{ now.Format "2006-01-02" }}
+
+description: A short description of this page.
+
+# The URL to the site on the internet.
+siteURL: https://gohugo.io/
+
+# Link to the site's Hugo source code if public and you can/want to share.
+# Remove or leave blank if not needed/wanted.
+siteSource: https://github.com/gohugoio/hugoDocs
+
+# Add credit to the article author. Leave blank or remove if not needed/wanted.
+byline: "[bep](https://github.com/bep), Hugo Lead"
+
+---
+
+To complete this showcase:
+
+1. Write the story about your site in this file.
++2. Add a summary to the `bio.md` file in this directory.
+3. Replace the `featured-template.png` with a screenshot of your site. You can rename it, but it must contain the word `featured`.
+4. Create a new pull request in https://github.com/gohugoio/hugoDocs/pulls
+
+The content of this bundle explained:
+
+index.md
+: The main content file. Fill in required front matter metadata and write your story. I does not have to be a novel. It can even be self-promotional, but it should include Hugo in some form.
+
+bio.md
+: A short summary of the website. Site credits (who built it) fits nicely here.
+
+featured.png
+: A reasonably sized screenshot of your website. It can be named anything, but the name must start with "featured". The sample image is `1500x750` (2:1 aspect ratio).
--- /dev/null
- name = 'Hugo Modules'
+[[docs]]
+identifier = 'about'
+name = 'About'
+pageRef = '/about/'
+weight = 10
+
+[[docs]]
+name = 'Installation'
+weight = 20
+identifier = 'installation'
+pageRef = '/installation/'
+
+[[docs]]
+name = 'Getting started'
+weight = 30
+identifier = 'getting-started'
+pageRef = '/getting-started/'
+
+[[docs]]
+name = 'Quick reference'
+weight = 40
+identifier = 'quick-reference'
+pageRef = '/quick-reference/'
+post = 'break'
+
+[[docs]]
+name = 'Content management'
+weight = 50
+identifier = 'content-management'
+post = 'expanded'
+pageRef = '/content-management/'
+
+[[docs]]
+name = 'Templates'
+weight = 60
+identifier = 'templates'
+pageRef = '/templates/'
+
+[[docs]]
+name = 'Functions'
+weight = 70
+identifier = 'functions'
+pageRef = '/functions/'
+
+[[docs]]
+name = 'Methods'
+weight = 80
+identifier = 'methods'
+pageRef = '/methods/'
+
+[[docs]]
+name = 'Render hooks'
+weight = 90
+identifier = 'render-hooks'
+pageRef = '/render-hooks/'
+
+[[docs]]
- weight = 110
++name = 'Shortcodes'
+weight = 100
++identifier = 'shortcodes'
++pageRef = '/shortcodes/'
++
++[[docs]]
++name = 'Hugo Modules'
++weight = 110
+identifier = 'modules'
+pageRef = '/hugo-modules/'
+
+[[docs]]
+name = 'Hugo Pipes'
- weight = 120
++weight = 120
+identifier = 'hugo-pipes'
+pageRef = '/hugo-pipes/'
+
+[[docs]]
+name = 'CLI'
- weight = 130
++weight = 130
+post = 'break'
+identifier = 'commands'
+pageRef = '/commands/'
+
+# Low level items
+
+[[docs]]
+name = 'Troubleshooting'
- weight = 140
++weight = 140
+identifier = 'troubleshooting'
+pageRef = '/troubleshooting/'
+
+[[docs]]
+name = 'Developer tools'
- weight = 150
++weight = 150
+identifier = 'developer-tools'
+pageRef = '/tools/'
+
+[[docs]]
+name = 'Hosting and deployment'
- weight = 160
++weight = 160
+identifier = 'hosting-and-deployment'
+pageRef = '/hosting-and-deployment/'
+
+[[docs]]
+name = 'Contribute'
++weight = 170
+post = 'break'
+identifier = 'contribute'
+pageRef = '/contribute/'
+
+######## QUICKLINKS
+
+[[quicklinks]]
+identifier = 'fundamentals'
+name = 'Fundamentals'
+pageRef = '/tags/fundamentals/'
+weight = 1
+
+######## GLOBAL ITEMS TO BE SHARED WITH THE HUGO SITES
+
+[[global]]
+name = 'News'
+weight = 1
+identifier = 'news'
+pageRef = '/news/'
+
+[[global]]
+name = 'Docs'
+weight = 5
+identifier = 'docs'
+url = '/documentation/'
+
+[[global]]
+name = 'Themes'
+weight = 10
+identifier = 'themes'
+url = 'https://themes.gohugo.io/'
+
+# [[global]]
+# name = 'Showcase'
+# weight = 20
+# identifier = 'showcase'
+# pageRef = '/showcase/'
+
+# Anything with a weight > 100 gets an external icon
+
+[[global]]
+name = 'Community'
+weight = 150
+icon = true
+identifier = 'community'
+post = 'external'
+url = 'https://discourse.gohugo.io/'
+
+[[global]]
+name = 'GitHub'
+weight = 200
+identifier = 'github'
+post = 'external'
+url = 'https://github.com/gohugoio/hugo'
--- /dev/null
- : Include mathematical equations and expressions in Markdown using LaTeX or TeX typesetting syntax.
+---
+title: Features
+description: Hugo's rich and powerful feature set provides the framework and tools to create static sites that build in seconds, often less.
+categories: [about]
+keywords: []
+menu:
+ docs:
+ parent: about
+ weight: 30
+weight: 30
+toc: true
+---
+
+## Framework
+
+[Multiplatform]
+: Install Hugo's single executable on Linux, macOS, Windows, and more.
+
+[Multilingual]
+: Localize your project for each language and region, including translations, images, dates, currencies, numbers, percentages, and collation sequence. Hugo's multilingual framework supports single-host and multihost configurations.
+
+[Output formats]
+: Render each page of your site to one or more output formats, with granular control by page kind, section, and path. While HTML is the default output format, you can add JSON, RSS, CSV, and more. For example, create a REST API to access content.
+
+[Templates]
+: Create templates using variables, functions, and methods to transform your content, resources, and data into a published page. While HTML templates are the most common, you can create templates for any output format.
+
+[Themes]
+: Reduce development time and cost by using one of the hundreds of themes contributed by the Hugo community. Themes are available for corporate sites, documentation projects, image portfolios, landing pages, personal and professional blogs, resumes, CVs, and more.
+
+[Modules]
+: Reduce development time and cost by creating or importing packaged combinations of archetypes, assets, content, data, templates, translation tables, static files, or configuration settings. A module may serve as the basis for a new site, or to augment an existing site.
+
+[Privacy]
+: Configure the behavior of Hugo's embedded templates and shortcodes to facilitate compliance with regional privacy regulations, including the [GDPR] and [CCPA].
+
+[Security]
+: Hugo's security model is based on the premise that template and configuration authors are trusted, but content authors are not. This model enables generation of HTML output safe against code injection. Other protections prevent "shelling out" to arbitrary applications, limit access to specific environment variables, prevent connections to arbitrary remote data sources, and more.
+
+## Content authoring
+
+[Content formats]
+: Create your content using Markdown, HTML, AsciiDoc, Emacs Org Mode, Pandoc, or reStructuredText. Markdown is the default content format, conforming to the [CommonMark] and [GitHub Flavored Markdown] specifications.
+
+[Markdown attributes]
+: Apply HTML attributes such as `class` and `id` to Markdown images and block elements including blockquotes, fenced code blocks, headings, horizontal rules, lists, paragraphs, and tables.
+
+[Markdown extensions]
+: Leverage the embedded Markdown extensions to create tables, definition lists, footnotes, task lists, inserted text, mark text, subscripts, superscripts, and more.
+
+[Markdown render hooks]
+: Override the conversion of Markdown to HTML when rendering blockquotes, fenced code blocks, headings, images, links, and tables. For example, render every standalone image as an HTML `figure` element.
+
+[Diagrams]
+: Use fenced code blocks and Markdown render hooks to include diagrams in your content.
+
+[Mathematics]
- [Modules]: https://gohugo.io/hugo-modules/
++: Include mathematical equations and expressions in Markdown using LaTeX markup.
+
+[Syntax highlighting]
+: Syntactically highlight code examples using Hugo's embedded syntax highlighter, enabled by default for fenced code blocks in Markdown. The syntax highlighter supports hundreds of code languages and dozens of styles.
+
+[Shortcodes]
+: Use Hugo's embedded shortcodes, or create your own, to insert complex content. For example, use shortcodes to include `audio` and `video` elements, render tables from local or remote data sources, insert snippets from other pages, and more.
+
+## Content management
+
+[Content adapters]
+: Create content adapters to dynamically add content when building your site. For example, use a content adapter to create pages from a remote data source such as JSON, TOML, YAML, or XML.
+
+[Taxonomies]
+: Classify content to establish simple or complex logical relationships between pages. For example, create an authors taxonomy, and assign one or more authors to each page. Among other uses, the taxonomy system provides an inverted, weighted index to render a list of related pages, ordered by relevance.
+
+[Data]
+: Augment your content using local or remote data sources including CSV, JSON, TOML, YAML, and XML. For example, create a shortcode to render an HTML table from a remote CSV file.
+
+[Menus]
+: Provide rapid access to content via Hugo's menu system, configured automatically, globally, or on a page-by-page basis. The menu system is a key component of Hugo's multilingual architecture.
+
+[URL management]
+: Serve any page from any path via global configuration or on a page-by-page basis.
+
+## Asset pipelines
+
+[Image processing]
+: Convert, resize, crop, rotate, adjust colors, apply filters, overlay text and images, and extract EXIF data.
+
+[JavaScript bundling]
+: Transpile TypeScript and JSX to JavaScript, bundle, tree shake, minify, create source maps, and perform SRI hashing.
+
+[Sass processing]
+: Transpile Sass to CSS, bundle, tree shake, minify, create source maps, perform SRI hashing, and integrate with PostCSS.
+
+[Tailwind CSS processing]
+: Compile Tailwind CSS utility classes into standard CSS, bundle, tree shake, optimize, minify, perform SRI hashing, and integrate with PostCSS.
+
+## Performance
+
+[Caching]
+: Reduce build time and cost by rendering a partial template once then cache the result, either globally or within a given context. For example, cache the result of an asset pipeline to prevent reprocessing on every rendered page.
+
+[Segmentation]
+: Reduce build time and cost by partitioning your sites into segments. For example, render the home page and the "news section" every hour, and render the entire site once a week.
+
+[Minification]
+: Minify HTML, CSS, and JavaScript to reduce file size, bandwidth consumption, and loading times.
+
+[CCPA]: https://en.wikipedia.org/wiki/California_Consumer_Privacy_Act
+[Sass processing]: /functions/css/Sass/
+[Caching]: /functions/partials/includecached/
+[CommonMark]: https://spec.commonmark.org/current/
+[Content adapters]: /content-management/content-adapters/
+[Content formats]: /content-management/formats/
+[Data]: /content-management/data-sources/
+[Diagrams]: /content-management/diagrams/
+[GDPR]: https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
+[GitHub Flavored Markdown]: https://github.github.com/gfm/
+[Image processing]: /content-management/image-processing/
+[JavaScript bundling]: /functions/js/build/
+[Markdown attributes]: /content-management/markdown-attributes/
+[Markdown extensions]: /getting-started/configuration-markup/#goldmark-extensions
+[Markdown render hooks]: /render-hooks/introduction/
+[Mathematics]: /content-management/mathematics/
+[Menus]: /content-management/menus/
+[Minification]: /getting-started/configuration/#configure-minify
- [Templates]: templates/introduction/
++[Modules]: /hugo-modules/
+[Multilingual]: /content-management/multilingual/
+[Multiplatform]: /installation/
+[Output formats]: /templates/output-formats/
+[Privacy]: /about/privacy/
+[Security]: /about/security/
+[Segmentation]: /getting-started/configuration/#configure-segments
+[Shortcodes]: /content-management/shortcodes/
+[Syntax highlighting]: /content-management/syntax-highlighting/
+[Tailwind CSS processing]: /functions/css/tailwindcss/
+[Taxonomies]: /content-management/taxonomies/
++[Templates]: /templates/introduction/
+[Themes]: https://themes.gohugo.io/
+[URL management]: /content-management/urls/
--- /dev/null
- [privacy.twitter]
+---
+title: Privacy
+linkTitle: Privacy
+description: Configure your site to facilitate compliance with regional privacy regulations.
+categories: [about]
+keywords: ["GDPR", "Privacy", "Data Protection"]
+menu:
+ docs:
+ parent: about
+ weight: 40
+weight: 40
+toc: true
+aliases: [/gdpr/,/about/hugo-and-gdpr/]
+---
+
+ General Data Protection Regulation ([GDPR](https://en.wikipedia.org/wiki/General_Data_Protection_Regulation)) is a regulation in EU law on data protection and privacy for all individuals within the European Union and the European Economic Area. It became enforceable on 25 May 2018.
+
+ **Hugo is a static site generator. By using Hugo you are already standing on very solid ground. Static HTML files on disk are much easier to reason about compared to server and database driven websites.**
+
+ But even static websites can integrate with external services, so from version `0.41`, Hugo provides a **privacy configuration** that covers the relevant built-in templates.
+
+ Note that:
+
+ * These settings have their defaults setting set to _off_, i.e. how it worked before Hugo `0.41`. You must do your own evaluation of your site and apply the appropriate settings.
+ * These settings work with the [embedded templates](/templates/embedded/). Some theme may contain custom templates for embedding services like Google Analytics. In that case these options have no effect.
+ * We will continue this work and improve this further in future Hugo versions.
+
+## All privacy settings
+
+Below are all privacy settings and their default value. These settings need to be put in your site configuration (e.g. `hugo.toml`).
+
+{{< code-toggle file=hugo >}}
+[privacy]
+[privacy.disqus]
+disable = false
+[privacy.googleAnalytics]
+disable = false
+respectDoNotTrack = false
+[privacy.instagram]
+disable = false
+simple = false
- [privacy.vimeo]
++[privacy.vimeo]
+disable = false
+enableDNT = false
+simple = false
- [privacy.twitter]
- disable = true
++[privacy.x]
+disable = false
+enableDNT = false
+simple = false
+[privacy.youtube]
+disable = false
+privacyEnhanced = false
+{{< /code-toggle >}}
+
+## Disable all services
+
+An example privacy configuration that disables all the relevant services in Hugo. With this configuration, the other settings will not matter.
+
+{{< code-toggle file=hugo >}}
+[privacy]
+[privacy.disqus]
+disable = true
+[privacy.googleAnalytics]
+disable = true
+[privacy.instagram]
+disable = true
- ### Twitter
+[privacy.vimeo]
+disable = true
++[privacy.x]
++disable = true
+[privacy.youtube]
+disable = true
+{{< /code-toggle >}}
+
+## The privacy settings explained
+
+### GoogleAnalytics
+
+respectDoNotTrack
+: Enabling this will make the GA templates respect the "Do Not Track" HTTP header.
+
+### Instagram
+
+simple
+: If simple mode is enabled, a static and no-JS version of the Instagram image card will be built. Note that this only supports image cards and the image itself will be fetched from Instagram's servers.
+
+**Note:** If you use the _simple mode_ for Instagram and a site styled with Bootstrap 4, you may want to disable the inline styles provided by Hugo:
+
+{{< code-toggle file=hugo >}}
+[services]
+[services.instagram]
+disableInlineCSS = true
+{{< /code-toggle >}}
+
- : Enabling this for the twitter/tweet shortcode, the tweet and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads.
++### X
+
+enableDNT
- : If simple mode is enabled, a static and no-JS version of a tweet will be built.
++: Enabling this for the x shortcode, the post and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads.
+
+simple
- **Note:** If you use the _simple mode_ for Twitter, you may want to disable the inline styles provided by Hugo:
++: If simple mode is enabled, a static and no-JS version of a post will be built.
+
- [services.twitter]
++**Note:** If you use the _simple mode_ for X, you may want to disable the inline styles provided by Hugo:
+
+{{< code-toggle file=hugo >}}
+[services]
++[services.x]
+disableInlineCSS = true
+{{< /code-toggle >}}
+
+### YouTube
+
+privacyEnhanced
+: When you turn on privacy-enhanced mode, YouTube won’t store information about visitors on your website unless the user plays the embedded video.
+
+### Vimeo
+
+enableDNT
+: Enabling this for the vimeo shortcode, the Vimeo player will be blocked from tracking any session data, including all cookies and stats.
+
+simple
+: If simple mode is enabled, the video thumbnail is fetched from Vimeo's servers and it is overlaid with a play button. If the user clicks to play the video, it will open in a new tab directly on Vimeo's website.
--- /dev/null
- * [hugo deploy](/commands/hugo_deploy/) - Deploy your site to a cloud provider
+---
+title: "hugo"
+slug: hugo
+url: /commands/hugo/
+---
+## hugo
+
+Build your site
+
+### Synopsis
+
+hugo is the main command, used to build your Hugo site.
+
+Hugo is a Fast and Flexible Static Site Generator
+built with love by spf13 and friends in Go.
+
+Complete documentation is available at https://gohugo.io/.
+
+```
+hugo [flags]
+```
+
+### Options
+
+```
+ -b, --baseURL string hostname (and path) to the root, e.g. https://spf13.com/
+ -D, --buildDrafts include content marked as draft
+ -E, --buildExpired include expired content
+ -F, --buildFuture include content with publishdate in the future
+ --cacheDir string filesystem path to cache directory
+ --cleanDestinationDir remove files from destination not found in static directories
+ --clock string set the clock used by Hugo, e.g. --clock 2021-11-06T22:30:00.00+09:00
+ --config string config file (default is hugo.yaml|json|toml)
+ --configDir string config dir (default "config")
+ -c, --contentDir string filesystem path to content directory
+ -d, --destination string filesystem path to write files to
+ --disableKinds strings disable different kind of pages (home, RSS etc.)
+ --enableGitInfo add Git revision, date, author, and CODEOWNERS info to the pages
+ -e, --environment string build environment
+ --forceSyncStatic copy all files when static is changed.
+ --gc enable to run some cleanup tasks (remove unused cache files) after the build
+ -h, --help help for hugo
+ --ignoreCache ignores the cache directory
+ --ignoreVendorPaths string ignores any _vendor for module paths matching the given Glob pattern
+ -l, --layoutDir string filesystem path to layout directory
+ --logLevel string log level (debug|info|warn|error)
+ --minify minify any supported output format (HTML, XML etc.)
+ --noBuildLock don't create .hugo_build.lock file
+ --noChmod don't sync permission mode of files
+ --noTimes don't sync modification time of files
+ --panicOnWarning panic on first WARNING log
+ --poll string set this to a poll interval, e.g --poll 700ms, to use a poll based approach to watch for file system changes
+ --printI18nWarnings print missing translations
+ --printMemoryUsage print memory usage to screen at intervals
+ --printPathWarnings print warnings on duplicate target paths etc.
+ --printUnusedTemplates print warnings on unused templates.
+ --quiet build in quiet mode
+ --renderSegments strings named segments to render (configured in the segments config)
+ -M, --renderToMemory render to memory (mostly useful when running the server)
+ -s, --source string filesystem path to read files relative from
+ --templateMetrics display metrics about template executions
+ --templateMetricsHints calculate some improvement hints when combined with --templateMetrics
+ -t, --theme strings themes to use (located in /themes/THEMENAME/)
+ --themesDir string filesystem path to themes directory
+ --trace file write trace to file (not useful in general)
+ -w, --watch watch filesystem for changes and recreate as needed
+```
+
+### SEE ALSO
+
+* [hugo build](/commands/hugo_build/) - Build your site
+* [hugo completion](/commands/hugo_completion/) - Generate the autocompletion script for the specified shell
+* [hugo config](/commands/hugo_config/) - Display site configuration
+* [hugo convert](/commands/hugo_convert/) - Convert front matter to another format
+* [hugo env](/commands/hugo_env/) - Display version and environment info
+* [hugo gen](/commands/hugo_gen/) - Generate documentation and syntax highlighting styles
+* [hugo import](/commands/hugo_import/) - Import a site from another system
+* [hugo list](/commands/hugo_list/) - List content
+* [hugo mod](/commands/hugo_mod/) - Manage modules
+* [hugo new](/commands/hugo_new/) - Create new content
+* [hugo server](/commands/hugo_server/) - Start the embedded web server
+* [hugo version](/commands/hugo_version/) - Display version
+
--- /dev/null
- A content file consists of [front matter] and markup. The markup is typically Markdown, but Hugo also supports other [content formats]. Front matter can be TOML, YAML, or JSON.
+---
+title: Archetypes
+description: An archetype is a template for new content.
+categories: [content management]
+keywords: [archetypes,generators,metadata,front matter]
+menu:
+ docs:
+ parent: content-management
+ weight: 140
+ quicklinks:
+weight: 140
+toc: true
+aliases: [/content/archetypes/]
+---
+
+## Overview
+
- When you create new content, Hugo evaluates the [template actions] within the archetype. For example:
++A content file consists of [front matter](g) and markup. The markup is typically Markdown, but Hugo also supports other [content formats](g). Front matter can be TOML, YAML, or JSON.
+
+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 >}}
+title = '{{ replace .File.ContentBaseName `-` ` ` | title }}'
+date = '{{ .Date }}'
+draft = true
+{{< /code-toggle >}}
+
- You can create an archetype for one or more [content types]. For example, use one archetype for posts, and use the default archetype for everything else:
++When you create new content, Hugo evaluates the [template actions](g) within the archetype. For example:
+
+```sh
+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 >}}
+title = 'My First Post'
+date = '2023-08-24T11:49:46-07:00'
+draft = true
+{{< /code-toggle >}}
+
- 1. archetypes/posts.md
- 1. archetypes/default.md
- 1. themes/my-theme/archetypes/posts.md
- 1. themes/my-theme/archetypes/default.md
++You can create an archetype for one or more [content types](g). For example, use one archetype for posts, and use the default archetype for everything else:
+
+```text
+archetypes/
+├── default.md
+└── posts.md
+```
+
+## Lookup order
+
+Hugo looks for archetypes in the `archetypes` directory in the root of your project, falling back to the `archetypes` directory in themes or installed modules. An archetype for a specific content type takes precedence over the default archetype.
+
+For example, with this command:
+
+```sh
+hugo new content posts/my-first-post.md
+```
+
+The archetype lookup order is:
+
- You can use any [template function] within an archetype. As shown above, the default archetype uses the [`replace`](/functions/strings/replace) function to replace hyphens with spaces when populating the title in front matter.
++1. `archetypes/posts.md`
++1. `archetypes/default.md`
++1. `themes/my-theme/archetypes/posts.md`
++1. `themes/my-theme/archetypes/default.md`
+
+If none of these exists, Hugo uses a built-in default archetype.
+
+## Functions and context
+
- Archetypes receive the following [context]:
++You can use any template [function](g) within an archetype. As shown above, the default archetype uses the [`replace`](/functions/strings/replace) function to replace hyphens with spaces when populating the title in front matter.
+
- : (`string`) The [content type] inferred from the top-level directory name, or as specified by the `--kind` flag passed to the `hugo new content` command.
-
- [content type]: /getting-started/glossary#content-type
++Archetypes receive the following [context](g):
+
+Date
+: (`string`) The current date and time, formatted in compliance with RFC3339.
+
+File
+: (`hugolib.fileInfo`) Returns file information for the current page. See [details](/methods/page/file).
+
+Type
- Although you can include [template actions] within the content body, remember that Hugo evaluates these once---at the time of content creation. In most cases, place template actions in a [template] where Hugo evaluates the actions every time you [build](/getting-started/glossary/#build) the site.
++: (`string`) The [content type](g) inferred from the top-level directory name, or as specified by the `--kind` flag passed to the `hugo new content` command.
+
+Site
+: (`page.Site`) The current site object. See [details](/methods/site/).
+
+## Date format
+
+To insert date and time with a different format, use the [`time.Now`] function:
+
+[`time.Now`]: /functions/time/now/
+
+{{< code-toggle file=archetypes/default.md fm=true >}}
+title = '{{ replace .File.ContentBaseName `-` ` ` | title }}'
+date = '{{ time.Now.Format "2006-01-02" }}'
+draft = true
+{{< /code-toggle >}}
+
+## Include content
+
+Although typically used as a front matter template, you can also use an archetype to populate content.
+
+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 >}}
+---
+date: '{{ .Date }}'
+draft: true
+title: '{{ replace .File.ContentBaseName `-` ` ` | title }}'
+---
+
+A brief description of what the function does, using simple present tense in the third person singular form. For example:
+
+`someFunction` returns the string `s` repeated `n` times.
+
+## Signature
+
+```text
+func someFunction(s string, n int) string
+```
+
+## Examples
+
+One or more practical examples, each within a fenced code block.
+
+## Notes
+
+Additional information to clarify as needed.
+{{< /code >}}
+
- You can also create archetypes for [leaf bundles](/getting-started/glossary/#leaf-bundle).
++Although you can include [template actions](g) within the content body, remember that Hugo evaluates these once---at the time of content creation. In most cases, place template actions in a [template](g) where Hugo evaluates the actions every time you [build](g) the site.
+
+## Leaf bundles
+
-
- [content formats]: /getting-started/glossary/#content-format
- [content types]: /getting-started/glossary/#content-type
- [context]: /getting-started/glossary/#context
- [front matter]: /getting-started/glossary/#front-matter
- [template actions]: /getting-started/glossary/#template-action
- [template]: /getting-started/glossary/#template
- [template function]: /getting-started/glossary/#function
++You can also create archetypes for [leaf bundles](g).
+
+For example, in a photography site you might have a section (content type) for galleries. Each gallery is leaf bundle with content and images.
+
+Create an archetype for galleries:
+
+```text
+archetypes/
+├── galleries/
+│ ├── images/
+│ │ └── .gitkeep
+│ └── index.md <-- same format as default.md
+└── default.md
+```
+
+Subdirectories within an archetype must contain at least one file. Without a file, Hugo will not create the subdirectory when you create new content. The name and size of the file are irrelevant. The example above includes a `.gitkeep` file, an empty file commonly used to preserve otherwise empty directories in a Git repository.
+
+To create a new gallery:
+
+```sh
+hugo new galleries/bryce-canyon
+```
+
+This produces:
+
+```text
+content/
+├── galleries/
+│ └── bryce-canyon/
+│ ├── images/
+│ │ └── .gitkeep
+│ └── index.md
+└── _index.md
+```
+
+## Specify archetype
+
+Use the `--kind` command line flag to specify an archetype when creating content.
+
+For example, let's say your site has two sections: articles and tutorials. Create an archetype for each content type:
+
+```text
+archetypes/
+├── articles.md
+├── default.md
+└── tutorials.md
+```
+
+To create an article using the articles archetype:
+
+```sh
+hugo new content articles/something.md
+```
+
+To create an article using the tutorials archetype:
+
+```sh
+hugo new content --kind tutorials articles/something.md
+```
--- /dev/null
-
+---
+title: Build options
+description: Build options help define how Hugo must treat a given page when building the site.
+categories: [content management,fundamentals]
+keywords: [build,content,front matter, page resources]
+menu:
+ docs:
+ parent: content-management
+ weight: 70
+weight: 70
+toc: true
+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 >}}
+[build]
+list = 'always'
+publishResources = true
+render = 'always'
+{{< /code-toggle >}}
+
- 2. Despite setting `publishResources` to `false` in front matter, Hugo published the [page resources] because we invoked the [`RelPermalink`] method on each resource. This is the expected behavior.
+list
+: When to include the page within page collections. Specify one of:
+
+ - `always`
+ : Include the page in _all_ page collections. For example, `site.RegularPages`, `.Pages`, etc. This is the default value.
+
+ - `local`
+ : Include the page in _local_ page collections. For example, `.RegularPages`, `.Pages`, etc. Use this option to create fully navigable but headless content sections.
+
+ - `never`
+ : Do not include the page in _any_ page collection.
+
+publishResources
+: Applicable to [page bundles], determines whether to publish the associated [page resources]. Specify one of:
+
+ - `true`
+ : Always publish resources. This is the default value.
+
+ - `false`
+ : Only publish a resource when invoking its [`Permalink`], [`RelPermalink`], or [`Publish`] method within a template.
+
+render
+: When to render the page. Specify one of:
+
+ - `always`
+ : Always render the page to disk. This is the default value.
+
+ - `link`
+ : Do not render the page to disk, but assign `Permalink` and `RelPermalink` values.
+
+ - `never`
+ : Never render the page to disk, and exclude it from all page collections.
+
+[page bundles]: /content-management/page-bundles/
+[page resources]: /content-management/page-resources/
+[`Permalink`]: /methods/resource/permalink/
+[`RelPermalink`]: /methods/resource/relpermalink/
+[`Publish`]: /methods/resource/publish/
+
+{{% 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 %}}
+
+## Example -- headless page
+
+Create a unpublished page whose content and resources can be included in other pages.
+
+```text
+content/
+├── headless/
+│ ├── a.jpg
+│ ├── b.jpg
+│ └── index.md <-- leaf bundle
+└── _index.md <-- home page
+```
+
+Set the build options in front matter:
+
+{{< code-toggle file=content/headless/index.md fm=true >}}
+title = 'Headless page'
+[build]
+ list = 'never'
+ publishResources = false
+ render = 'never'
+{{< /code-toggle >}}
+
+To include the content and images on the home page:
+
+{{< code file=layouts/_default/home.html >}}
+{{ with .Site.GetPage "/headless" }}
+ {{ .Content }}
+ {{ range .Resources.ByType "image" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+The published site will have this structure:
+
+```text
+public/
+├── headless/
+│ ├── a.jpg
+│ └── b.jpg
+└── index.html
+```
+
+In the example above, note that:
+
+1. Hugo did not publish an HTML file for the page.
- 2. Despite setting `publishResources` to `false` in front matter, Hugo correctly published the [page resources] because we invoked the [`RelPermalink`] method on each resource. This is the expected behavior.
++1. Despite setting `publishResources` to `false` in front matter, Hugo published the [page resources] because we invoked the [`RelPermalink`] method on each resource. This is the expected behavior.
+
+## Example -- headless section
+
+Create a unpublished section whose content and resources can be included in other pages.
+
+[branch bundle]: /content-management/page-bundles/
+
+```text
+content/
+├── headless/
+│ ├── note-1/
+│ │ ├── a.jpg
+│ │ ├── b.jpg
+│ │ └── index.md <-- leaf bundle
+│ ├── note-2/
+│ │ ├── c.jpg
+│ │ ├── d.jpg
+│ │ └── index.md <-- leaf bundle
+│ └── _index.md <-- branch bundle
+└── _index.md <-- home page
+```
+
+Set the build options in front matter, using the `cascade` keyword to "cascade" the values down to descendant pages.
+
+{{< code-toggle file=content/headless/_index.md fm=true >}}
+title = 'Headless section'
+[[cascade]]
+[cascade.build]
+ list = 'local'
+ publishResources = false
+ render = 'never'
+{{< /code-toggle >}}
+
+In the front matter above, note that we have set `list` to `local` to include the descendant pages in local page collections.
+
+To include the content and images on the home page:
+
+{{< code file=layouts/_default/home.html >}}
+{{ with .Site.GetPage "/headless" }}
+ {{ range .Pages }}
+ {{ .Content }}
+ {{ range .Resources.ByType "image" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+The published site will have this structure:
+
+```text
+public/
+├── headless/
+│ ├── note-1/
+│ │ ├── a.jpg
+│ │ └── b.jpg
+│ └── note-2/
+│ ├── c.jpg
+│ └── d.jpg
+└── index.html
+```
+
+In the example above, note that:
+
+1. Hugo did not publish an HTML file for the page.
++1. Despite setting `publishResources` to `false` in front matter, Hugo correctly published the [page resources] because we invoked the [`RelPermalink`] method on each resource. This is the expected behavior.
+
+## Example -- list without publishing
+
+Publish a section page without publishing the descendant pages. For example, to create a glossary:
+
+```text
+content/
+├── glossary/
+│ ├── _index.md
+│ ├── bar.md
+│ ├── baz.md
+│ └── foo.md
+└── _index.md
+```
+
+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 >}}
+title = 'Glossary'
+[build]
+render = 'always'
+[[cascade]]
+[cascade.build]
+ list = 'local'
+ publishResources = false
+ render = 'never'
+{{< /code-toggle >}}
+
+To render the glossary:
+
+{{< code file=layouts/glossary/list.html >}}
+<dl>
+ {{ range .Pages }}
+ <dt>{{ .Title }}</dt>
+ <dd>{{ .Content }}</dd>
+ {{ end }}
+</dl>
+{{< /code >}}
+
+The published site will have this structure:
+
+```text
+public/
+├── glossary/
+│ └── index.html
+└── index.html
+```
+
+## Example -- publish without listing
+
+Publish a section's descendant pages without publishing the section page itself.
+
+```text
+content/
+├── books/
+│ ├── _index.md
+│ ├── book-1.md
+│ └── book-2.md
+└── _index.md
+```
+
+Set the build options in front matter:
+
+{{< code-toggle file=content/books/_index.md fm=true >}}
+title = 'Books'
+[build]
+render = 'never'
+list = 'never'
+{{< /code-toggle >}}
+
+The published site will have this structure:
+
+```html
+public/
+├── books/
+│ ├── book-1/
+│ │ └── index.html
+│ └── book-2/
+│ └── index.html
+└── index.html
+```
+
+## Example -- conditionally hide section
+
+Consider this example. A documentation site has a team of contributors with access to 20 custom shortcodes. Each shortcode takes several arguments, and requires documentation for the contributors to reference when using them.
+
+Instead of external documentation for the shortcodes, include an "internal" section that is hidden when building the production site.
+
+```text
+content/
+├── internal/
+│ ├── shortcodes/
+│ │ ├── _index.md
+│ │ ├── shortcode-1.md
+│ │ └── shortcode-2.md
+│ └── _index.md
+├── reference/
+│ ├── _index.md
+│ ├── reference-1.md
+│ └── reference-2.md
+├── tutorials/
+│ ├── _index.md
+│ ├── tutorial-1.md
+│ └── tutorial-2.md
+└── _index.md
+```
+
+Set the build options in front matter, using the `cascade` keyword to "cascade" the values down to descendant pages, and use the `target` keyword to target the production environment.
+
+{{< code-toggle file=content/internal/_index.md >}}
+title = 'Internal'
+[[cascade]]
+[cascade.build]
+render = 'never'
+list = 'never'
+[cascade._target]
+environment = 'production'
+{{< /code-toggle >}}
+
+The production site will have this structure:
+
+```html
+public/
+├── reference/
+│ ├── reference-1/
+│ │ └── index.html
+│ ├── reference-2/
+│ │ └── index.html
+│ └── index.html
+├── tutorials/
+│ ├── tutorial-1/
+│ │ └── index.html
+│ ├── tutorial-2/
+│ │ └── index.html
+│ └── index.html
+└── index.html
+```
--- /dev/null
- Unlike templates that reside in the layouts directory, content adapters reside in the content directory, no more than one per directory per language. When a content adapter creates a page, the page's [logical path] will be relative to the content adapter.
+---
+title: Content adapters
+description: Create content adapters to dynamically add content when building your site.
+categories: [content management]
+keywords: []
+menu:
+ docs:
+ parent: content-management
+ weight: 290
+weight: 290
+toc: true
+---
+
+{{< new-in 0.126.0 >}}
+
+## Overview
+
+A content adapter is a template that dynamically creates pages when building a site. For example, use a content adapter to create pages from a remote data source such as JSON, TOML, YAML, or XML.
+
- Each content adapter is named _content.gotmpl and uses the same [syntax] as templates in the layouts directory. You can use any of the [template functions] within a content adapter, as well as the methods described below.
++Unlike templates that reside in the `layouts` directory, content adapters reside in the `content` directory, no more than one per directory per language. When a content adapter creates a page, the page's [logical path](g) will be relative to the content adapter.
+
+```text
+content/
+├── articles/
+│ ├── _index.md
+│ ├── article-1.md
+│ └── article-2.md
+├── books/
+│ ├── _content.gotmpl <-- content adapter
+│ └── _index.md
+└── films/
+ ├── _content.gotmpl <-- content adapter
+ └── _index.md
+```
+
- `kind`|The [page kind]. Default is `page`.|
++Each content adapter is named _content.gotmpl and uses the same [syntax] as templates in the `layouts` directory. You can use any of the [template functions] within a content adapter, as well as the methods described below.
+
+## Methods
+
+Use these methods within a content adapter.
+
+###### AddPage
+
+Adds a page to the site.
+
+{{< code file=content/books/_content.gotmpl >}}
+{{ $content := dict
+ "mediaType" "text/markdown"
+ "value" "The _Hunchback of Notre Dame_ was written by Victor Hugo."
+}}
+{{ $page := dict
+ "content" $content
+ "kind" "page"
+ "path" "the-hunchback-of-notre-dame"
+ "title" "The Hunchback of Notre Dame"
+}}
+{{ .AddPage $page }}
+{{< /code >}}
+
+###### AddResource
+
+Adds a page resource to the site.
+
+{{< code file=content/books/_content.gotmpl >}}
+{{ with resources.Get "images/a.jpg" }}
+ {{ $content := dict
+ "mediaType" .MediaType.Type
+ "value" .
+ }}
+ {{ $resource := dict
+ "content" $content
+ "path" "the-hunchback-of-notre-dame/cover.jpg"
+ }}
+ {{ $.AddResource $resource }}
+{{ end }}
+{{< /code >}}
+
+Then retrieve the new page resource with something like:
+
+{{< code file=layouts/_default/single.html >}}
+{{ with .Resources.Get "cover.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+{{< /code >}}
+
+###### Site
+
+Returns the `Site` to which the pages will be added.
+
+{{< code file=content/books/_content.gotmpl >}}
+{{ .Site.Title }}
+{{< /code >}}
+
+{{% 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 %}}
+
+###### Store
+
+Returns a persistent “scratch pad” to store and manipulate data. The main use case for this is to transfer values between executions when [EnableAllLanguages](#enablealllanguages) is set. See [examples](/methods/page/store/).
+
+{{< code file=content/books/_content.gotmpl >}}
+{{ .Store.Set "key" "value" }}
+{{ .Store.Get "key" }}
+{{< /code >}}
+
+###### EnableAllLanguages
+
+By default, Hugo executes the content adapter for the language defined by the _content.gotmpl file . Use this method to activate the content adapter for all languages.
+
+{{< code file=content/books/_content.gotmpl >}}
+{{ .EnableAllLanguages }}
+{{ $content := dict
+ "mediaType" "text/markdown"
+ "value" "The _Hunchback of Notre Dame_ was written by Victor Hugo."
+}}
+{{ $page := dict
+ "content" $content
+ "kind" "page"
+ "path" "the-hunchback-of-notre-dame"
+ "title" "The Hunchback of Notre Dame"
+}}
+{{ .AddPage $page }}
+{{< /code >}}
+
+## Page map
+
+Set any [front matter field] in the map passed to the [`AddPage`](#addpage) method, excluding `markup`. Instead of setting the `markup` field, specify the `content.mediaType` as described below.
+
+This table describes the fields most commonly passed to the `AddPage` method.
+
+Key|Description|Required
+:--|:--|:-:
+`content.mediaType`|The content [media type]. Default is `text/markdown`. See [content formats] for examples.|
+`content.value`|The content value as a string.|
+`dates.date`|The page creation date as a `time.Time` value.|
+`dates.expiryDate`|The page expiry date as a `time.Time` value.|
+`dates.lastmod`|The page last modification date as a `time.Time` value.|
+`dates.publishDate`|The page publication date as a `time.Time` value.|
- `path`|The page's [logical path] relative to the content adapter. Do not include a leading slash or file extension.|:heavy_check_mark:
+`params`|A map of page parameters.|
- `path`|The resources's [logical path] relative to the content adapter. Do not include a leading slash.|:heavy_check_mark:
++`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.|
+
+{{% 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 %}}
+
+## Resource map
+
+Construct the map passed to the [`AddResource`](#addresource) method using the fields below.
+
+Key|Description|Required
+:--|:--|:-:
+`content.mediaType`|The content [media type].|:heavy_check_mark:
+`content.value`|The content value as a string or resource.|:heavy_check_mark:
+`name`|The resource name.|
+`params`|A map of resource parameters.|
- {{ with resources.GetRemote $url }}
++`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.|
+
+{{% 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 %}}
+
+## Example
+
+Create pages from remote data, where each page represents a book review.
+
+Step 1
+: Create the content structure.
+
+```text
+content/
+└── books/
+ ├── _content.gotmpl <-- content adapter
+ └── _index.md
+```
+
+Step 2
+: Inspect the remote data to determine how to map key-value pairs to front matter fields.
+
+: <https://gohugo.io/shared/examples/data/books.json>
+
+Step 3
+: Create the content adapter.
+
+{{< code file=content/books/_content.gotmpl copy=true >}}
+{{/* Get remote data. */}}
+{{ $data := dict }}
+{{ $url := "https://gohugo.io/shared/examples/data/books.json" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "Unable to get remote resource %s: %s" $url . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %s" $url }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %s" $url }}
+ {{ end }}
- {{ with resources.GetRemote $url }}
+{{ end }}
+
+{{/* Add pages and page resources. */}}
+{{ range $data }}
+
+ {{/* Add page. */}}
+ {{ $content := dict "mediaType" "text/markdown" "value" .summary }}
+ {{ $dates := dict "date" (time.AsTime .date) }}
+ {{ $params := dict "author" .author "isbn" .isbn "rating" .rating "tags" .tags }}
+ {{ $page := dict
+ "content" $content
+ "dates" $dates
+ "kind" "page"
+ "params" $params
+ "path" .title
+ "title" .title
+ }}
+ {{ $.AddPage $page }}
+
+ {{/* Add page resource. */}}
+ {{ $item := . }}
+ {{ with $url := $item.cover }}
- {{ else }}
++ {{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "Unable to get remote resource %s: %s" $url . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %s" $url }}
++ {{ else with .Value }}
+ {{ $content := dict "mediaType" .MediaType.Type "value" .Content }}
+ {{ $params := dict "alt" $item.title }}
+ {{ $resource := dict
+ "content" $content
+ "params" $params
+ "path" (printf "%s/cover.%s" $item.title .MediaType.SubType)
+ }}
+ {{ $.AddResource $resource }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %s" $url }}
+ {{ end }}
- 2. Create content adapters unique to each language. See the examples below.
+ {{ end }}
+ {{ end }}
+
+{{ end }}
+{{< /code >}}
+
+Step 4
+: Create a single template to render each book review.
+
+{{< code file=layouts/books/single.html copy=true >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+
+ {{ with .Resources.GetMatch "cover.*" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Params.alt }}">
+ {{ end }}
+
+ <p>Author: {{ .Params.author }}</p>
+
+ <p>
+ ISBN: {{ .Params.isbn }}<br>
+ Rating: {{ .Params.rating }}<br>
+ Review date: {{ .Date | time.Format ":date_long" }}
+ </p>
+
+ {{ with .GetTerms "tags" }}
+ <p>Tags:</p>
+ <ul>
+ {{ range . }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+ {{ end }}
+
+ {{ .Content }}
+{{ end }}
+{{< /code >}}
+
+## Multilingual sites
+
+With multilingual sites you can:
+
+1. Create one content adapter for all languages using the [`EnableAllLanguages`](#enablealllanguages) method as described above.
- [logical path]: /getting-started/glossary/#logical-path
++1. Create content adapters unique to each language. See the examples below.
+
+### Translations by file name
+
+With this site configuration:
+
+{{< code-toggle file=hugo >}}
+[languages.en]
+weight = 1
+
+[languages.de]
+weight = 2
+{{< /code-toggle >}}
+
+Include a language designator in the content adapter's file name.
+
+```text
+content/
+└── books/
+ ├── _content.de.gotmpl
+ ├── _content.en.gotmpl
+ ├── _index.de.md
+ └── _index.en.md
+```
+
+### Translations by content directory
+
+With this site configuration:
+
+{{< code-toggle file=hugo >}}
+[languages.en]
+contentDir = 'content/en'
+weight = 1
+
+[languages.de]
+contentDir = 'content/de'
+weight = 2
+{{< /code-toggle >}}
+
+Create a single content adapter in each directory:
+
+```text
+content/
+├── de/
+│ └── books/
+│ ├── _content.gotmpl
+│ └── _index.md
+└── en/
+ └── books/
+ ├── _content.gotmpl
+ └── _index.md
+```
+
+## Page collisions
+
+Two or more pages collide when they have the same publication path. Due to concurrency, the content of the published page is indeterminate. Consider this example:
+
+```text
+content/
+└── books/
+ ├── _content.gotmpl <-- content adapter
+ ├── _index.md
+ └── the-hunchback-of-notre-dame.md
+```
+
+If the content adapter also creates books/the-hunchback-of-notre-dame, the content of the published page is indeterminate. You can not define the processing order.
+
+To detect page collisions, use the `--printPathWarnings` flag when building your site.
+
+[content formats]: /content-management/formats/#classification
+[front matter field]: /content-management/front-matter/#fields
- [page kind]: /getting-started/glossary/#page-kind
+[media type]: https://en.wikipedia.org/wiki/Media_type
+[syntax]: /templates/introduction/
+[template functions]: /functions/
--- /dev/null
- index.md can be reference either by its path or by its containing folder without the ending `/`. \_index.md can be referenced only by its containing folder:
+---
+title: Links and cross references
+description: Shortcodes for creating links to documents.
+categories: [content management]
+keywords: [cross references,references,anchors,urls]
+menu:
+ docs:
+ parent: content-management
+ weight: 170
+weight: 170
+toc: true
+aliases: [/extras/crossreferences/]
+---
+
+The `ref` and `relref` shortcodes display the absolute and relative permalinks to a document, respectively.
+
+## Use of `ref` and `relref`
+
+The `ref` and `relref` shortcodes require a single argument: the path to a content document, with or without a file extension, with or without an anchor. Paths without a leading `/` are first resolved relative to the current page, then to the remainder of the site.
+
+```text
+.
+└── content
+ ├── about
+ | ├── _index.md
+ | └── credits.md
+ ├── pages
+ | ├── document1.md
+ | └── document2.md // has anchor #anchor
+ ├── products
+ | └── index.md
+ └── blog
+ └── my-post.md
+```
+
+The pages can be referenced as follows:
+
+```text
+{{</* ref "document2" */>}} <-- From pages/document1.md, relative path
+{{</* ref "document2#anchor" */>}}
+{{</* ref "document2.md" */>}}
+{{</* ref "document2.md#anchor" */>}}
+{{</* ref "#anchor" */>}} <-- From pages/document2.md
+{{</* ref "/blog/my-post" */>}} <-- From anywhere, absolute path
+{{</* ref "/blog/my-post.md" */>}}
+{{</* relref "document" */>}}
+{{</* relref "document.md" */>}}
+{{</* relref "#anchor" */>}}
+{{</* relref "/blog/my-post.md" */>}}
+```
+
++`index.md` can be reference either by its path or by its containing directory without the ending `/`. `_index.md` can be referenced only by its containing directory:
+
+```text
+{{</* ref "/about" */>}} <-- References /about/_index.md
+{{</* ref "/about/_index" */>}} <-- Raises REF_NOT_FOUND error
+{{</* ref "/about/credits.md" */>}} <-- References /about/credits.md
+
+{{</* ref "/products" */>}} <-- References /products/index.md
+{{</* ref "/products/index" */>}} <-- References /products/index.md
+```
+
+To generate a hyperlink using `ref` or `relref` in Markdown:
+
+```text
+[About]({{</* ref "/about" */>}} "About Us")
+```
+
+Hugo emits an error or warning if a document cannot be uniquely resolved. The error behavior is configurable; see below.
+
+### Link to another language version
+
+Using `ref` or `relref` without specifying a language, will make the reference resolve to the language of the current content page.
+
+To link to another language version of a document, use this syntax:
+
+```text
+{{</* relref path="document.md" lang="ja" */>}}
+```
+
+### Get another output format
+
+To link to another Output Format of a document, use this syntax:
+
+```text
+{{</* relref path="document.md" outputFormat="rss" */>}}
+```
+
+### Heading IDs
+
+When using Markdown document types, Hugo generates element IDs for every heading on a page. For example:
+
+```text
+## Reference
+```
+
+produces this HTML:
+
+```html
+<h2 id="reference">Reference</h2>
+```
+
+Get the permalink to a heading by appending the ID to the path when using the `ref` or `relref` shortcodes:
+
+```text
+{{</* ref "document.md#reference" */>}}
+{{</* relref "document.md#reference" */>}}
+```
+
+Generate a custom heading ID by including an attribute. For example:
+
+```text
+## Reference A {#foo}
+## Reference B {id="bar"}
+```
+
+produces this HTML:
+
+```html
+<h2 id="foo">Reference A</h2>
+<h2 id="bar">Reference B</h2>
+```
+
+Hugo will generate unique element IDs if the same heading appears more than once on a page. For example:
+
+```text
+## Reference
+## Reference
+## Reference
+```
+
+produces this HTML:
+
+```html
+<h2 id="reference">Reference</h2>
+<h2 id="reference-1">Reference</h2>
+<h2 id="reference-2">Reference</h2>
+```
+
+## Ref and RelRef Configuration
+
+The behavior can be configured in `hugo.toml`:
+
+refLinksErrorLevel ("ERROR")
+: When using `ref` or `relref` to resolve page links and a link cannot resolved, it will be logged with this log level. Valid values are `ERROR` (default) or `WARNING`. Any `ERROR` will fail the build (`exit -1`).
+
+refLinksNotFoundURL
+: URL to be used as a placeholder when a page reference cannot be found in `ref` or `relref`. Is used as-is.
--- /dev/null
- Hugo can access and [unmarshal] local and remote data sources including CSV, JSON, TOML, YAML, and XML. Use this data to augment existing content or to create new content.
+---
+title: Data sources
+description: Use local and remote data sources to augment or create content.
+categories: [content management]
+keywords: [data,json,toml,yaml,xml]
+menu:
+ docs:
+ parent: content-management
+ weight: 280
+weight: 280
+toc: true
+aliases: [/extras/datafiles/,/extras/datadrivencontent/,/doc/datafiles/,/templates/data-templates/]
+---
+
- [unmarshal]: /getting-started/glossary/#unmarshal
-
- A data source might be a file in the data directory, a [global resource], a [page resource], or a [remote resource].
-
- [global resource]: /getting-started/glossary/#global-resource
- [page resource]: /getting-started/glossary/#page-resource
- [remote resource]: /getting-started/glossary/#remote-resource
++Hugo can access and [unmarshal](g) local and remote data sources including CSV, JSON, TOML, YAML, and XML. Use this data to augment existing content or to create new content.
+
- The data directory in the root of your project may contain one or more data files, in either a flat or nested tree. Hugo merges the data files to create a single data structure, accessible with the `Data` method on a `Site` object.
++A data source might be a file in the `data` directory, a [global resource](g), a [page resource](g), or a [remote resource](g).
+
+## Data directory
+
- 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.
++The `data` directory in the root of your project may contain one or more data files, in either a flat or nested tree. Hugo merges the data files to create a single data structure, accessible with the `Data` method on a `Site` object.
+
- Do not place CSV files in the data directory. Access CSV files as page, global, or remote resources.
++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 %}}
+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 %}}
+
+Theme and module authors may wish to namespace their data files to prevent collisions. For example:
+
+```text
+project/
+└── data/
+ └── mytheme/
+ └── foo.json
+```
+
+{{% note %}}
++Do not place CSV files in the `data` directory. Access CSV files as page, global, or remote resources.
+{{% /note %}}
+
+See the documentation for the [`Data`] method on a `Site` object for details and examples.
+
+[`Data`]: /methods/site/data/
+
+## Global resources
+
+Use the `resources.Get` and `transform.Unmarshal` functions to access data files that exist as global resources.
+
+See the [`transform.Unmarshal`](/functions/transform/unmarshal/#global-resource) documentation for details and examples.
+
+## Page resources
+
+Use the `Resources.Get` method on a `Page` object combined with the `transform.Unmarshal` function to access data files that exist as page resources.
+
+See the [`transform.Unmarshal`](/functions/transform/unmarshal/#page-resource) documentation for details and examples.
+
+## Remote resources
+
+Use the `resources.GetRemote` and `transform.Unmarshal` functions to access remote data.
+
+See the [`transform.Unmarshal`](/functions/transform/unmarshal/#remote-resource) documentation for details and examples.
+
+## Augment existing content
+
+Use data sources to augment existing content. For example, create a shortcode to render an HTML table from a global CSV resource.
+
+{{< code file=assets/pets.csv >}}
+"name","type","breed","age"
+"Spot","dog","Collie","3"
+"Felix","cat","Malicious","7"
+{{< /code >}}
+
+{{< code file=content/example.md lang=text >}}
+{{</* csv-to-table "pets.csv" */>}}
+{{< /code >}}
+
+{{< code file=layouts/shortcodes/csv-to-table.html >}}
+{{ with $file := .Get 0 }}
+ {{ with resources.Get $file }}
+ {{ with . | transform.Unmarshal }}
+ <table>
+ <thead>
+ <tr>
+ {{ range index . 0 }}
+ <th>{{ . }}</th>
+ {{ end }}
+ </tr>
+ </thead>
+ <tbody>
+ {{ range after 1 . }}
+ <tr>
+ {{ range . }}
+ <td>{{ . }}</td>
+ {{ end }}
+ </tr>
+ {{ end }}
+ </tbody>
+ </table>
+ {{ end }}
+ {{ else }}
+ {{ errorf "The %q shortcode was unable to find %s. See %s" $.Name $file $.Position }}
+ {{ end }}
+{{ else }}
+ {{ errorf "The %q shortcode requires one positional argument, the path to the CSV file relative to the assets directory. See %s" .Name .Position }}
+{{ end }}
+{{< /code >}}
+
+Hugo renders this to:
+
+name|type|breed|age
+:--|:--|:--|:--
+Spot|dog|Collie|3
+Felix|cat|Malicious|7
+
+## Create new content
+
+Use [content adapters] to create new content.
+
+[content adapters]: /content-management/content-adapters/
--- /dev/null
- Hugo selects the content renderer based on the `markup` identifier in front matter, falling back to the file extension. See the [classification](#classification) table below for a list of markup identifiers and recognized file extensions.
+---
+title: Content formats
+description: Create your content using Markdown, HTML, Emacs Org Mode, AsciiDoc, Pandoc, or reStructuredText.
+categories: [content management]
+keywords: [markdown,asciidoc,pandoc,content format]
+menu:
+ docs:
+ parent: content-management
+ weight: 40
+weight: 40
+toc: true
+aliases: [/content/markdown-extras/,/content/supported-formats/,/doc/supported-formats/]
+---
+
+## Introduction
+
+You may mix content formats throughout your site. For example:
+
+```text
+content/
+└── posts/
+ ├── post-1.md
+ ├── post-2.adoc
+ ├── post-3.org
+ ├── post-4.pandoc
+ ├── post-5.rst
+ └── post-6.html
+```
+
+Regardless of content format, all content must have [front matter], preferably including both `title` and `date`.
+
- Markdown is Hugo's default content format. Hugo natively renders Markdown to HTML using [Goldmark]. Goldmark is fast and conforms to the [CommonMark] and [GitHub Flavored Markdown] specifications. You can [configure Goldmark] in your site configuration.
++Hugo selects the content renderer based on the `markup` identifier in front matter, falling back to the file extension. See the [classification] table below for a list of markup identifiers and recognized file extensions.
++
++[classification]: #classification
++[front matter]: /content-management/front-matter/
+
+## Formats
+
+### Markdown
+
+Create your content in [Markdown] preceded by front matter.
+
- : Include mathematical equations and expressions in Markdown using LaTeX or TeX typesetting syntax.
++Markdown is Hugo's default content format. Hugo natively renders Markdown to HTML using [Goldmark]. Goldmark is fast and conforms to the [CommonMark] and [GitHub Flavored Markdown] specifications. You can configure Goldmark in your [site configuration][configure goldmark].
+
+Hugo provides custom Markdown features including:
+
+[Attributes]
+: Apply HTML attributes such as `class` and `id` to Markdown images and block elements including blockquotes, fenced code blocks, headings, horizontal rules, lists, paragraphs, and tables.
+
+[Extensions]
+: Leverage the embedded Markdown extensions to create tables, definition lists, footnotes, task lists, inserted text, mark text, subscripts, superscripts, and more.
+
+[Mathematics]
- Create your content in the [Emacs Org Mode] format preceded by front matter. You can use Org Mode keywords for front matter. See [details](/content-management/front-matter/#emacs-org-mode).
++: Include mathematical equations and expressions in Markdown using LaTeX markup.
+
+[Render hooks]
+: Override the conversion of Markdown to HTML when rendering fenced code blocks, headings, images, and links. For example, render every standalone image as an HTML `figure` element.
+
++[Attributes]: /content-management/markdown-attributes/
++[CommonMark]: https://spec.commonmark.org/current/
++[Extensions]: /getting-started/configuration-markup/#goldmark-extensions
++[GitHub Flavored Markdown]: https://github.github.com/gfm/
++[Goldmark]: https://github.com/yuin/goldmark
++[Markdown]: https://daringfireball.net/projects/markdown/
++[Mathematics]: /content-management/mathematics/
++[Render hooks]: /render-hooks/introduction/
++[configure goldmark]: /getting-started/configuration-markup/#goldmark
++
+### HTML
+
+Create your content in [HTML] preceded by front matter. The content is typically what you would place within an HTML document's `body` or `main` element.
+
++[HTML]: https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content
++
+### Emacs Org Mode
+
- You can [configure the AsciiDoc renderer] in your site configuration.
++Create your content in the [Emacs Org Mode] format preceded by front matter. You can use Org Mode keywords for front matter. See [details].
++
++[details]: /content-management/front-matter/#emacs-org-mode
++[Emacs Org Mode]: https://orgmode.org/
+
+### AsciiDoc
+
+Create your content in the [AsciiDoc] format preceded by front matter. Hugo renders AsciiDoc content to HTML using the Asciidoctor executable. You must install Asciidoctor and its dependencies (Ruby) to use the AsciiDoc content format.
+
-
- [AsciiDoc]: https://asciidoc.org/
- [Asciidoctor]: https://asciidoctor.org/
- [Attributes]: /content-management/markdown-attributes/
- [CommonMark]: https://spec.commonmark.org/current/
- [Docutils]: https://docutils.sourceforge.io/
- [Emacs Org Mode]: https://orgmode.org/
- [Extensions]: /getting-started/configuration-markup/#goldmark-extensions
- [GitHub Flavored Markdown]: https://github.github.com/gfm/
- [Goldmark]: https://github.com/yuin/goldmark
- [HTML]: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- [Markdown]: https://daringfireball.net/projects/markdown/
- [Mathematics]: /content-management/mathematics/
- [Pandoc]: https://pandoc.org/
- [Render hooks]: https://gohugo.io/render-hooks/introduction/
- [configure Goldmark]: /getting-started/configuration-markup/#goldmark
- [configure the AsciiDoc renderer]: /getting-started/configuration-markup/#asciidoc
- [front matter]: /content-management/front-matter/
- [reStructuredText]: https://docutils.sourceforge.io/rst.html
++You can configure the AsciiDoc renderer in your [site configuration][configure asciidoc].
+
+In its default configuration, Hugo passes these CLI flags when calling the Asciidoctor executable:
+
+```text
+--no-header-footer
+```
+
+The CLI flags passed to the Asciidoctor executable depend on configuration. You may inspect the flags when building your site:
+
+```text
+hugo --logLevel info
+```
+
++[AsciiDoc]: https://asciidoc.org/
++[configure the AsciiDoc renderer]: /getting-started/configuration-markup/#asciidoc
++[configure asciidoc]: /getting-started/configuration-markup/#asciidoc
++
+### Pandoc
+
+Create your content in the [Pandoc] format preceded by front matter. Hugo renders Pandoc content to HTML using the Pandoc executable. You must install Pandoc to use the Pandoc content format.
+
+Hugo passes these CLI flags when calling the Pandoc executable:
+
+```text
+--mathjax
+```
+
++[Pandoc]: https://pandoc.org/
++
+### reStructuredText
+
+Create your content in the [reStructuredText] format preceded by front matter. Hugo renders reStructuredText content to HTML using [Docutils], specifically rst2html. You must install Docutils and its dependencies (Python) to use the reStructuredText content format.
+
+Hugo passes these CLI flags when calling the rst2html executable:
+
+```text
+--leave-comments --initial-header-level=2
+```
+
++[Docutils]: https://docutils.sourceforge.io/
++[reStructuredText]: https://docutils.sourceforge.io/rst.html
++
+## Classification
+
+Content format|Media type|Identifier|File extensions
+:--|:--|:--|:--
+Markdown|`text/markdown`|`markdown`|`markdown`,`md`, `mdown`
+HTML|`text/html`|`html`|`htm`, `html`
+Emacs Org Mode|`text/org`|`org`|`org`
+AsciiDoc|`text/asciidoc`|`asciidoc`|`ad`, `adoc`, `asciidoc`
+Pandoc|`text/pandoc`|`pandoc`|`pandoc`, `pdc`
+reStructuredText|`text/rst`|`rst`|`rst`
+
+When converting content to HTML, Hugo uses:
+
+- Native renderers for Markdown, HTML, and Emacs Org mode
+- External renderers for AsciiDoc, Pandoc, and reStructuredText
+
+Native renderers are faster than external renderers.
--- /dev/null
- Front matter fields may be [boolean], [integer], [float], [string], [arrays], or [maps]. Note that the TOML format also supports unquoted date/time values.
-
- [scalar]: /getting-started/glossary/#scalar
- [arrays]: /getting-started/glossary/#array
- [maps]: /getting-started/glossary/#map
- [boolean]: /getting-started/glossary/#boolean
- [integer]: /getting-started/glossary/#integer
- [float]: /getting-started/glossary/#float
- [string]: /getting-started/glossary/#string
+---
+title: Front matter
+description: Use front matter to add metadata to your content.
+categories: [content management]
+keywords: [front matter,yaml,toml,json,metadata,archetypes]
+menu:
+ docs:
+ parent: content-management
+ weight: 60
+weight: 60
+toc: true
+aliases: [/content/front-matter/]
+---
+
+## Overview
+
+The front matter at the top of each content file is metadata that:
+
+- Describes the content
+- Augments the content
+- Establishes relationships with other content
+- Controls the published structure of your site
+- Determines template selection
+
+Provide front matter using a serialization format, one of [JSON], [TOML], or [YAML]. Hugo determines the front matter format by examining the delimiters that separate the front matter from the page content.
+
+[json]: https://www.json.org/
+[toml]: https://toml.io/
+[yaml]: https://yaml.org/
+
+See examples of front matter delimiters by toggling between the serialization formats below.
+
+{{< code-toggle file=content/example.md fm=true >}}
+title = 'Example'
+date = 2024-02-02T04:14:54-08:00
+draft = false
+weight = 10
+[params]
+author = 'John Smith'
+{{< /code-toggle >}}
+
-
++Front matter fields may be [boolean](g), [integer](g), [float](g), [string](g), [arrays](g), or [maps](g). Note that the TOML format also supports unquoted date/time values.
+
+## Fields
+
+The most common front matter fields are `date`, `draft`, `title`, and `weight`, but you can specify metadata using any of fields below.
+
+{{% 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 %}}
+
+###### aliases
+
+(`string array`) An array of one or more aliases, where each alias is a relative URL that will redirect the browser to the current location. Access these values from a template using the [`Aliases`] method on a `Page` object. See the [aliases] section for details.
+
+[`aliases`]: /methods/page/aliases/
+[aliases]: /content-management/urls/#aliases
+
+###### build
+
+(`map`) A map of [build options].
+
+[build options]: /content-management/build-options/
+
+###### cascade {#cascade-field}
+
+(`map`) A map of front matter keys whose values are passed down to the page’s descendants unless overwritten by self or a closer ancestor’s cascade. See the [cascade] section for details.
+
+[cascade]: #cascade
+
+###### date
+
+(`string`) The date associated with the page, typically the creation date. Note that the TOML format also supports unquoted date/time values. See the [dates](#dates) section for examples. Access this value from a template using the [`Date`] method on a `Page` object.
+
- (`bool`) Set to `true` if the content language is in the [CJK] family. This value determines how Hugo calculates word count, and affects the values returned by the [`WordCount`], [`FuzzyWordCount`], [`ReadingTime`], and [`Summary`] methods on a `Page` object.
+[`date`]: /methods/page/date/
+
+###### description
+
+(`string`) Conceptually different than the page `summary`, the description is typically rendered within a `meta` element within the `head` element of the published HTML file. Access this value from a template using the [`Description`] method on a `Page` object.
+
+[`description`]: /methods/page/description/
+
+###### draft
+
+(`bool`)
+If `true`, the page will not be rendered unless you pass the `--buildDrafts` flag to the `hugo` command. Access this value from a template using the [`Draft`] method on a `Page` object.
+
+[`draft`]: /methods/page/draft/
+
+###### expiryDate
+
+(`string`) The page expiration date. On or after the expiration date, the page will not be rendered unless you pass the `--buildExpired` flag to the `hugo` command. Note that the TOML format also supports unquoted date/time values. See the [dates](#dates) section for examples. Access this value from a template using the [`ExpiryDate`] method on a `Page` object.
+
+[`expirydate`]: /methods/page/expirydate/
+
+###### headless
+
+(`bool`) Applicable to [leaf bundles], if `true` this value sets the `render` and `list` [build options] to `never`, creating a headless bundle of [page resources].
+
+[leaf bundles]: /content-management/page-bundles/#leaf-bundles
+[page resources]: /content-management/page-resources/
+
+###### isCJKLanguage
+
- [cjk]: /getting-started/glossary/#cjk
++(`bool`) Set to `true` if the content language is in the [CJK](g) family. This value determines how Hugo calculates word count, and affects the values returned by the [`WordCount`], [`FuzzyWordCount`], [`ReadingTime`], and [`Summary`] methods on a `Page` object.
+
+[`fuzzywordcount`]: /methods/page/wordcount/
+[`readingtime`]: /methods/page/readingtime/
+[`summary`]: /methods/page/summary/
+[`wordcount`]: /methods/page/wordcount/
- (`string array`) An array of keywords, typically rendered within a `meta` element within the `head` element of the published HTML file, or used as a [taxonomy] to classify content. Access these values from a template using the [`Keywords`] method on a `Page` object.
+
+###### keywords
+
- [taxonomy]: /getting-started/glossary/#taxonomy
++(`string array`) An array of keywords, typically rendered within a `meta` element within the `head` element of the published HTML file, or used as a [taxonomy](g) to classify content. Access these values from a template using the [`Keywords`] method on a `Page` object.
+
+[`keywords`]: /methods/page/keywords/
- {{% comment %}}
+
- {{% /comment %}}
+<!-- Added in v0.123.0 but purposefully omitted from documentation. -->
+<!--
+kind
+: The kind of page, e.g. "page", "section", "home" etc. This is usually derived from the content path.
+-->
+
+<!-- Added in v0.123.0 but purposefully omitted from documentation. -->
+<!--
+lang
+: The language code for this page. This is usually derived from the module mount or filename.
+-->
- [target a specific template]: templates/lookup-order/#target-a-template
+
+###### lastmod
+
+(`string`) The date that the page was last modified. Note that the TOML format also supports unquoted date/time values. See the [dates](#dates) section for examples. Access this value from a template using the [`Lastmod`] method on a `Page` object.
+
+[`lastmod`]: /methods/page/date/
+
+###### layout
+
+(`string`) Provide a template name to [target a specific template], overriding the default [template lookup order]. Set the value to the base file name of the template, excluding its extension. Access this value from a template using the [`Layout`] method on a `Page` object.
+
+[`layout`]: /methods/page/layout/
+[template lookup order]: /templates/lookup-order/
- {{% comment %}}
++[target a specific template]: /templates/lookup-order/#target-a-template
+
+###### linkTitle
+
+(`string`) Typically a shorter version of the `title`. Access this value from a template using the [`LinkTitle`] method on a `Page` object.
+
+[`linktitle`]: /methods/page/linktitle/
+
+###### markup
+
+(`string`) An identifier corresponding to one of the supported [content formats]. If not provided, Hugo determines the content renderer based on the file extension.
+
+[content formats]: /content-management/formats/#classification
+
+###### menus
+
+(`string`, `string array`, or `map`) If set, Hugo adds the page to the given menu or menus. See the [menus] page for details.
+
+[menus]: /content-management/menus/#define-in-front-matter
+
+###### modified
+
+Alias to [lastmod](#lastmod).
+
+###### outputs
+
+(`string array`) The [output formats] to render.
+
+[output formats]: /templates/output-formats/
+
- {{% /comment %}}
+<!-- Added in v0.123.0 but purposefully omitted from documentation. -->
+<!--
+path
+: The canonical page path.
+-->
- (`string`) The [content type], overriding the value derived from the top level section in which the page resides. Access this value from a template using the [`Type`] method on a `Page` object.
+
+###### params
+
+{{< new-in 0.123.0 >}}
+
+(`map`) A map of custom [page parameters].
+
+[page parameters]: #parameters
+
+###### pubdate
+
+Alias to [publishDate](#publishdate).
+
+###### publishDate
+
+(`string`) The page publication date. Before the publication date, the page will not be rendered unless you pass the `--buildFuture` flag to the `hugo` command. Note that the TOML format also supports unquoted date/time values. See the [dates](#dates) section for examples. Access this value from a template using the [`PublishDate`] method on a `Page` object.
+
+[`publishdate`]: /methods/page/publishdate/
+
+###### published
+
+Alias to [publishDate](#publishdate).
+
+###### resources
+
+(`map array`) An array of maps to provide metadata for [page resources].
+
+[page-resources]: /content-management/page-resources/#page-resources-metadata
+
+###### sitemap
+
+(`map`) A map of sitemap options. See the [sitemap templates] page for details. Access these values from a template using the [`Sitemap`] method on a `Page` object.
+
+[sitemap templates]: /templates/sitemap/
+[`sitemap`]: /methods/page/sitemap/
+
+###### slug
+
+(`string`) Overrides the last segment of the URL path. Not applicable to section pages. See the [URL management] page for details. Access this value from a template using the [`Slug`] method on a `Page` object.
+
+[`slug`]: /methods/page/slug/
+[URL management]: /content-management/urls/#slug
+
+###### summary
+
+(`string`) Conceptually different than the page `description`, the summary either summarizes the content or serves as a teaser to encourage readers to visit the page. Access this value from a template using the [`Summary`] method on a `Page` object.
+
+[`Summary`]: /methods/page/summary/
+
+###### title
+
+(`string`) The page title. Access this value from a template using the [`Title`] method on a `Page` object.
+
+[`title`]: /methods/page/title/
+
+###### translationKey
+
+(`string`) An arbitrary value used to relate two or more translations of the same page, useful when the translated pages do not share a common path. Access this value from a template using the [`TranslationKey`] method on a `Page` object.
+
+[`translationkey`]: /methods/page/translationkey/
+
+###### type
+
- [content type]: /getting-started/glossary/#content-type
++(`string`) The [content type](g), overriding the value derived from the top level section in which the page resides. Access this value from a template using the [`Type`] method on a `Page` object.
+
- (`int`) The page [weight], used to order the page within a [page collection]. Access this value from a template using the [`Weight`] method on a `Page` object.
+[`type`]: /methods/page/type/
+
+###### unpublishdate
+
+Alias to [expirydate](#expirydate).
+
+###### url
+
+(`string`) Overrides the entire URL path. Applicable to regular pages and section pages. See the [URL management] page for details.
+
+###### weight
- [page collection]: /getting-started/glossary/#page-collection
- [weight]: /getting-started/glossary/#weight
++(`int`) The page [weight](g), used to order the page within a [page collection](g). Access this value from a template using the [`Weight`] method on a `Page` object.
+
- The embedded templates will skip a parameter if not provided in front matter, but will throw an error if the data type is unexpected.
+[`weight`]: /methods/page/weight/
+
+## Parameters
+
+{{< new-in 0.123.0 >}}
+
+Specify custom page parameters under the `params` key in front matter:
+
+{{< code-toggle file=content/example.md fm=true >}}
+title = 'Example'
+date = 2024-02-02T04:14:54-08:00
+draft = false
+weight = 10
+[params]
+author = 'John Smith'
+{{< /code-toggle >}}
+
+Access these values from a template using the [`Params`] or [`Param`] method on a `Page` object.
+
+[`param`]: /methods/page/param/
+[`params`]: /methods/page/params/
+
+Hugo provides [embedded templates] to optionally insert meta data within the `head` element of your rendered pages. These embedded templates expect the following front matter parameters:
+
+Parameter|Data type|Used by these embedded templates
+:--|:--|:--
+`audio`|`[]string`|[`opengraph.html`]
+`images`|`[]string`|[`opengraph.html`], [`schema.html`], [`twitter_cards.html`]
+`videos`|`[]string`|[`opengraph.html`]
+
- You can add taxonomy terms to the front matter of any these [page kinds]:
++The embedded templates will skip a parameter if not provided in front matter, but will throw an error if the data type is unexpected.
+
+[`opengraph.html`]: {{% eturl opengraph %}}
+[`schema.html`]: {{% eturl schema %}}
+[`twitter_cards.html`]: {{% eturl twitter_cards %}}
+[embedded templates]: /templates/embedded/
+
+## Taxonomies
+
+Classify content by adding taxonomy terms to front matter. For example, with this site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+tag = 'tags'
+genre = 'genres'
+{{< /code-toggle >}}
+
+Add taxonomy terms as shown below:
+
+{{< code-toggle file=content/example.md fm=true >}}
+title = 'Example'
+date = 2024-02-02T04:14:54-08:00
+draft = false
+weight = 10
+tags = ['red','blue']
+genres = ['mystery','romance']
+[params]
+author = 'John Smith'
+{{< /code-toggle >}}
+
- [page kinds]: /getting-started/glossary/#page-kind
-
++You can add taxonomy terms to the front matter of any these [page kinds](g):
+
+- `home`
+- `page`
+- `section`
+- `taxonomy`
+- `term`
+
- Any [node] can pass down to its descendants a set of front matter values.
-
- [node]: /getting-started/glossary/#node
+Access taxonomy terms from a template using the [`Params`] or [`GetTerms`] method on a `Page` object. For example:
+
+{{< code file=layouts/_default/single.html >}}
+{{ with .GetTerms "tags" }}
+ <p>Tags</p>
+ <ul>
+ {{ range . }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+{{< /code >}}
+
+[`Params`]: /methods/page/params/
+[`GetTerms`]: /methods/page/getterms/
+
+## Cascade
+
- 2. The time zone specified in your site configuration
- 3. The `Etc/UTC` time zone
++Any [node](g) can pass down to its descendants a set of front matter values.
+
+### Target specific pages
+
+The `cascade` block can be an array with an optional `_target` keyword, allowing you to target different page sets while cascading values.
+
+{{< code-toggle file=content/_index.md fm=true >}}
+title ="Home"
+[[cascade]]
+[cascade.params]
+background = "yosemite.jpg"
+[cascade._target]
+path="/articles/**"
+lang="en"
+kind="page"
+[[cascade]]
+[cascade.params]
+background = "goldenbridge.jpg"
+[cascade._target]
+kind="section"
+{{</ code-toggle >}}
+
+Use any combination of these keywords to target a set of pages:
+
+###### path {#cascade-path}
+
+(`string`) A [Glob](https://github.com/gobwas/glob) pattern matching the content path below /content. Expects Unix-styled slashes. Note that this is the virtual path, so it starts at the mount root. The matching supports double-asterisks so you can match for patterns like `/blog/*/**` to match anything from the third level and down.
+
+###### kind {#cascade-kind}
+
+(`string`) A Glob pattern matching the Page's Kind(s), e.g. "{home,section}".
+
+###### lang {#cascade-lang}
+
+(`string`) A Glob pattern matching the Page's language, e.g. "{en,sv}".
+
+###### environment {#cascade-environment}
+
+(`string`) A Glob pattern matching the build environment, e.g. "{production,development}"
+
+Any of the above can be omitted.
+
+{{% 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 %}}
+
+### Example
+
+{{< code-toggle file=content/posts/_index.md fm=true >}}
+date = 2024-02-01T21:25:36-08:00
+title = 'Posts'
+[cascade]
+ [cascade.params]
+ banner = 'images/typewriter.jpg'
+{{</ code-toggle >}}
+
+With the above example the posts section page and its descendants will return `images/typewriter.jpg` when `.Params.banner` is invoked unless:
+
+- Said descendant has its own `banner` value set
+- Or a closer ancestor node has its own `cascade.banner` value set.
+
+## Emacs Org Mode
+
+If your [content format] is [Emacs Org Mode], you may provide front matter using Org Mode keywords. For example:
+
+{{< code file=content/example.org lang=text >}}
+#+TITLE: Example
+#+DATE: 2024-02-02T04:14:54-08:00
+#+DRAFT: false
+#+AUTHOR: John Smith
+#+GENRES: mystery
+#+GENRES: romance
+#+TAGS: red
+#+TAGS: blue
+#+WEIGHT: 10
+{{< /code >}}
+
+Note that you can also specify array elements on a single line:
+
+{{< code file=content/example.org lang=text >}}
+#+TAGS[]: red blue
+{{< /code >}}
+
+[content format]: /content-management/formats/
+[emacs org mode]: https://orgmode.org/
+
+## Dates
+
+When populating a date field, whether a [custom page parameter](#parameters) or one of the four predefined fields ([`date`](#date), [`expiryDate`](#expirydate), [`lastmod`](#lastmod), [`publishDate`](#publishdate)), use one of these parsable formats:
+
+{{% include "functions/time/_common/parsable-date-time-strings.md" %}}
+
+To override the default time zone, set the [`timeZone`](https://gohugo.io/getting-started/configuration/#timezone) in your site configuration. The order of precedence for determining the time zone is:
+
+1. The time zone offset in the date/time string
++1. The time zone specified in your site configuration
++1. The `Etc/UTC` time zone
--- /dev/null
- {{ $u := "https://gohugo.io/img/hugo-logo.png" }}
- {{ with resources.GetRemote $u }}
+---
+title: Image processing
+description: Resize, crop, rotate, filter, and convert images.
+categories: [content management,fundamentals]
+keywords: [resources,images]
+menu:
+ docs:
+ parent: content-management
+ weight: 90
+toc: true
+weight: 90
+---
+
+## Image resources
+
+To process an image you must access the file as a page resource, global resource, or remote resource.
+
+### Page resource
+
+A page resource is a file within a [page bundle]. A page bundle is a directory with an `index.md` or `_index.md` file at its root.
+
+```text
+content/
+└── posts/
+ └── post-1/ <-- page bundle
+ ├── index.md
+ └── sunset.jpg <-- page resource
+```
+
+To access an image as a page resource:
+
+```go-html-template
+{{ $image := .Resources.Get "sunset.jpg" }}
+```
+
+### Global resource
+
+A global resource is a file within the `assets` directory, or within any directory [mounted] to the `assets` directory.
+
+```text
+assets/
+└── images/
+ └── sunset.jpg <-- global resource
+```
+
+To access an image as a global resource:
+
+```go-html-template
+{{ $image := resources.Get "images/sunset.jpg" }}
+```
+
+### Remote resource
+
+A remote resource is a file on a remote server, accessible via HTTP or HTTPS. To access an image as a remote resource:
+
+```go-html-template
+{{ $image := resources.GetRemote "https://gohugo.io/img/hugo-logo.png" }}
+```
+
+## Image rendering
+
+Once you have accessed an image as a resource, render it in your templates using the `Permalink`, `RelPermalink`, `Width`, and `Height` properties.
+
+Example 1: Throws an error if the resource is not found.
+
+```go-html-template
+{{ $image := .Resources.GetMatch "sunset.jpg" }}
+<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+```
+
+Example 2: Skips image rendering if the resource is not found.
+
+```go-html-template
+{{ $image := .Resources.GetMatch "sunset.jpg" }}
+{{ with $image }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+{{ end }}
+```
+
+Example 3: A more concise way to skip image rendering if the resource is not found.
+
+```go-html-template
+{{ with .Resources.GetMatch "sunset.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+{{ end }}
+```
+
+Example 4: Skips rendering if there's problem accessing a remote resource.
+
+```go-html-template
- {{ else }}
++{{ $url := "https://gohugo.io/img/hugo-logo.png" }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $u }}
++ {{ else with .Value }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
- By default, Hugo uses the [Smartcrop] library when cropping images with the `Crop` or`Fill` methods. You can set the anchor point manually, but in most cases the `Smart` option will make a good choice.
+{{ end }}
+```
+
+## Image processing methods
+
+The `image` resource implements the [`Process`], [`Resize`], [`Fit`], [`Fill`], [`Crop`], [`Filter`], [`Colors`] and [`Exif`] methods.
+
+{{% 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 %}}
+
+### Process
+
+{{< new-in 0.119.0 >}}
+
+{{% 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 %}}
+
+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`].
+
+See [Options](#image-processing-options) for available options.
+
+You can also use this method apply image processing that does not need any scaling, e.g. format conversions:
+
+```go-html-template
+{{/* Convert the image from JPG to PNG. */}}
+{{ $png := $jpg.Process "png" }}
+```
+
+Some more examples:
+
+```go-html-template
+{{/* Rotate the image 90 degrees counter-clockwise. */}}
+{{ $image := $image.Process "r90" }}
+
+{{/* Scaling actions. */}}
+{{ $image := $image.Process "resize 600x" }}
+{{ $image := $image.Process "crop 600x400" }}
+{{ $image := $image.Process "fit 600x400" }}
+{{ $image := $image.Process "fill 600x400" }}
+```
+
+### Resize
+
+Resize an image to the given width and/or height.
+
+If you specify both width and height, the resulting image will be disproportionally scaled unless the original image has the same aspect ratio.
+
+```go-html-template
+{{/* Resize to a width of 600px and preserve aspect ratio */}}
+{{ $image := $image.Resize "600x" }}
+
+{{/* Resize to a height of 400px and preserve aspect ratio */}}
+{{ $image := $image.Resize "x400" }}
+
+{{/* Resize to a width of 600px and a height of 400px */}}
+{{ $image := $image.Resize "600x400" }}
+```
+
+### Fit
+
+Downscale an image to fit the given dimensions while maintaining aspect ratio. You must provide both width and height.
+
+```go-html-template
+{{ $image := $image.Fit "600x400" }}
+```
+
+### Fill
+
+Crop and resize an image to match the given dimensions. You must provide both width and height. Use the [`anchor`] option to change the crop box anchor point.
+
+```go-html-template
+{{ $image := $image.Fill "600x400" }}
+```
+
+### Crop
+
+Crop an image to match the given dimensions without resizing. You must provide both width and height. Use the [`anchor`] option to change the crop box anchor point.
+
+```go-html-template
+{{ $image := $image.Crop "600x400" }}
+```
+
+### Filter
+
+Apply one or more [filters] to an image.
+
+```go-html-template
+{{ $image := $image.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
+```
+
+Write this in a more functional style using pipes. Hugo applies the filters in the order given.
+
+```go-html-template
+{{ $image := $image | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}
+```
+
+Sometimes it can be useful to create the filter chain once and then reuse it.
+
+```go-html-template
+{{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}
+{{ $image1 := $image1.Filter $filters }}
+{{ $image2 := $image2.Filter $filters }}
+```
+
+### Colors
+
+`.Colors` returns a slice of hex strings with the dominant colors in the image using a simple histogram method.
+
+```go-html-template
+{{ $colors := $image.Colors }}
+```
+
+This method is fast, but if you also scale down your images, it would be good for performance to extract the colors from the scaled down image.
+
+### EXIF
+
+Provides an [EXIF] object containing image metadata.
+
+You may access EXIF data in JPEG, PNG, TIFF, and WebP images. To prevent errors when processing images without EXIF data, wrap the access in a [`with`] statement.
+
+```go-html-template
+{{ with $image.Exif }}
+ Date: {{ .Date }}
+ Lat/Long: {{ .Lat }}/{{ .Long }}
+ Tags:
+ {{ range $k, $v := .Tags }}
+ TAG: {{ $k }}: {{ $v }}
+ {{ end }}
+{{ end }}
+```
+
+You may also access EXIF fields individually, using the [`lang.FormatNumber`] function to format the fields as needed.
+
+```go-html-template
+{{ with $image.Exif }}
+ <ul>
+ {{ with .Date }}<li>Date: {{ .Format "January 02, 2006" }}</li>{{ end }}
+ {{ with .Tags.ApertureValue }}<li>Aperture: {{ lang.FormatNumber 2 . }}</li>{{ end }}
+ {{ with .Tags.BrightnessValue }}<li>Brightness: {{ lang.FormatNumber 2 . }}</li>{{ end }}
+ {{ with .Tags.ExposureTime }}<li>Exposure Time: {{ . }}</li>{{ end }}
+ {{ with .Tags.FNumber }}<li>F Number: {{ . }}</li>{{ end }}
+ {{ with .Tags.FocalLength }}<li>Focal Length: {{ . }}</li>{{ end }}
+ {{ with .Tags.ISOSpeedRatings }}<li>ISO Speed Ratings: {{ . }}</li>{{ end }}
+ {{ with .Tags.LensModel }}<li>Lens Model: {{ . }}</li>{{ end }}
+ </ul>
+{{ end }}
+```
+
+#### EXIF methods
+
+Date
+: (`time.Time`) Returns the image creation date/time. Format with the [`time.Format`]function.
+
+[time.Format]: /functions/time/format/
+
+Lat
+: (`float64`) Returns the GPS latitude in degrees.
+
+Long
+: (`float64`) Returns the GPS longitude in degrees.
+
+Tags
+: (`exif.Tags`) Returns a collection of the available EXIF tags for this image. You may include or exclude specific tags from this collection in the [site configuration].
+
+## Image processing options
+
+The [`Resize`], [`Fit`], [`Fill`], and [`Crop`] methods accept a space-delimited, case-insensitive list of options. The order of the options within the list is irrelevant.
+
+### Dimensions
+
+With the [`Resize`] method you must specify width, height, or both. The [`Fit`], [`Fill`], and [`Crop`] methods require both width and height. All dimensions are in pixels.
+
+```go-html-template
+{{ $image := $image.Resize "600x" }}
+{{ $image := $image.Resize "x400" }}
+{{ $image := $image.Resize "600x400" }}
+{{ $image := $image.Fit "600x400" }}
+{{ $image := $image.Fill "600x400" }}
+{{ $image := $image.Crop "600x400" }}
+```
+
+### Rotation
+
+Rotates an image counter-clockwise by the given angle. Hugo performs rotation _before_ scaling. For example, if the original image is 600x400 and you wish to rotate the image 90 degrees counter-clockwise while scaling it by 50%:
+
+```go-html-template
+{{ $image = $image.Resize "200x r90" }}
+```
+
+In the example above, the width represents the desired width _after_ rotation.
+
+To rotate an image without scaling, use the dimensions of the original image:
+
+```go-html-template
+{{ with .Resources.GetMatch "sunset.jpg" }}
+ {{ with .Resize (printf "%dx%d r90" .Height .Width) }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+ {{ end }}
+{{ end }}
+```
+
+In the example above, on the second line, we have reversed width and height to reflect the desired dimensions _after_ rotation.
+
+### Anchor
+
+When using the [`Crop`] or [`Fill`] method, the _anchor_ determines the placement of the crop box. You may specify `TopLeft`, `Top`, `TopRight`, `Left`, `Center`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`, or `Smart`.
+
+The default value is `Smart`, which uses [Smartcrop] image analysis to determine the optimal placement of the crop box. You may override the default value in the [site configuration].
+
+For example, if you have a 400x200 image with a bird in the upper left quadrant, you can create a 200x100 thumbnail containing the bird:
+
+```go-html-template
+{{ $image.Crop "200x100 TopLeft" }}
+```
+
+If you apply [rotation](#rotation) when using the [`Crop`] or [`Fill`] method, specify the anchor relative to the rotated image.
+
+### Target format
+
+By default, Hugo encodes the image in the source format. You may convert the image to another format by specifying `bmp`, `gif`, `jpeg`, `jpg`, `png`, `tif`, `tiff`, or `webp`.
+
+```go-html-template
+{{ $image.Resize "600x webp" }}
+```
+
+To convert an image without scaling, use the dimensions of the original image:
+
+```go-html-template
+{{ with .Resources.GetMatch "sunset.jpg" }}
+ {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+ {{ end }}
+{{ end }}
+```
+
+### Quality
+
+Applicable to JPEG and WebP images, the `q` value determines the quality of the converted image. Higher values produce better quality images, while lower values produce smaller files. Set this value to a whole number between 1 and 100, inclusive.
+
+The default value is 75. You may override the default value in the [site configuration].
+
+```go-html-template
+{{ $image.Resize "600x webp q50" }}
+```
+
+### Hint
+
+Applicable to WebP images, this option corresponds to a set of predefined encoding parameters, and is equivalent to the `-preset` flag for the [`cwebp`] encoder.
+
+[`cwebp`]: https://developers.google.com/speed/webp/docs/cwebp
+
+Value|Example
+:--|:--
+`drawing`|Hand or line drawing with high-contrast details
+`icon`|Small colorful image
+`photo`|Outdoor photograph with natural lighting
+`picture`|Indoor photograph such as a portrait
+`text`|Image that is primarily text
+
+The default value is `photo`. You may override the default value in the [site configuration].
+
+```go-html-template
+{{ $image.Resize "600x webp picture" }}
+```
+
+### Background color
+
+When converting an image from a format that supports transparency (e.g., PNG) to a format that does _not_ support transparency (e.g., JPEG), you may specify the background color of the resulting image.
+
+Use either a 3-digit or 6-digit hexadecimal color code (e.g., `#00f` or `#0000ff`).
+
+The default value is `#ffffff` (white). You may override the default value in the [site configuration].
+
+```go-html-template
+{{ $image.Resize "600x jpg #b31280" }}
+```
+
+### Resampling filter
+
+You may specify the resampling filter used when resizing an image. Commonly used resampling filters include:
+
+Filter|Description
+:--|:--
+`Box`|Simple and fast averaging filter appropriate for downscaling
+`Lanczos`|High-quality resampling filter for photographic images yielding sharp results
+`CatmullRom`|Sharp cubic filter that is faster than the Lanczos filter while providing similar results
+`MitchellNetravali`|Cubic filter that produces smoother results with less ringing artifacts than CatmullRom
+`Linear`|Bilinear resampling filter, produces smooth output, faster than cubic filters
+`NearestNeighbor`|Fastest resampling filter, no antialiasing
+
+The default value is `Box`. You may override the default value in the [site configuration].
+
+```go-html-template
+{{ $image.Resize "600x400 Lanczos" }}
+```
+
+See [github.com/disintegration/imaging] for the complete list of resampling filters. If you wish to improve image quality at the expense of performance, you may wish to experiment with the alternative filters.
+
+## Image processing examples
+
+_The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pedersen](https://commons.wikimedia.org/wiki/User:Bep) (Creative Commons Attribution-Share Alike 4.0 International license)_
+
+{{< imgproc "sunset.jpg" "resize 300x" />}}
+
+{{< imgproc "sunset.jpg" "fill 90x120 left" />}}
+
+{{< imgproc "sunset.jpg" "fill 90x120 right" />}}
+
+{{< imgproc "sunset.jpg" "fit 90x90" />}}
+
+{{< imgproc "sunset.jpg" "crop 250x250 center" />}}
+
+{{< imgproc "sunset.jpg" "resize 300x q10" />}}
+
+This is the shortcode used to generate the examples above:
+
+{{< readfile file=layouts/shortcodes/imgproc.html highlight=go-html-template >}}
+
+Call the shortcode from your Markdown like this:
+
+```go-html-template
+{{</* imgproc "sunset.jpg" "resize 300x" /*/>}}
+```
+
+{{% note %}}
+Note the self-closing shortcode syntax above. You may call the `imgproc` shortcode with or without **inner content**.
+{{% /note %}}
+
+## Imaging configuration
+
+### Processing options
+
+Define an `imaging` section in your site configuration to set the default [image processing options](#image-processing-options).
+
+{{< code-toggle config=imaging />}}
+
+anchor
+: See image processing options: [anchor](#anchor).
+
+bgColor
+: See image processing options: [background color](#background-color).
+
+hint
+: See image processing options: [hint](#hint).
+
+quality
+: See image processing options: [quality](#quality).
+
+resampleFilter
+: See image processing options: [resampling filter](#resampling-filter).
+
+### EXIF data
+
+Define an `imaging.exif` section in your site configuration to control the availability of EXIF data.
+
+{{< code-toggle file=hugo >}}
+[imaging.exif]
+includeFields = ""
+excludeFields = ""
+disableDate = false
+disableLatLong = false
+{{< /code-toggle >}}
+
+disableDate
+: Hugo extracts the image creation date/time into `.Date`. Set this to `true` to disable. Default is `false`.
+
+disableLatLong
+: Hugo extracts the GPS latitude and longitude into `.Lat` and `.Long`. Set this to `true` to disable. Default is `false`.
+
+excludeFields
+: Regular expression matching the EXIF tags to exclude from the `.Tags` collection. Default is `""`.
+
+includeFields
+: Regular expression matching the EXIF tags to include in the `.Tags` collection. Default is `""`. To include all available tags, set this value to `".*"`.
+
+{{% 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 %}}
+
+## Smart cropping of images
+
-
++By default, Hugo uses the [Smartcrop] library when cropping images with the `Crop` or `Fill` methods. You can set the anchor point manually, but in most cases the `Smart` option will make a good choice.
+
+Examples using the sunset image from above:
+
+{{< imgproc "sunset.jpg" "fill 200x200 smart" />}}
+
+{{< imgproc "sunset.jpg" "crop 200x200 smart" />}}
+
+## Image processing performance consideration
+
+Hugo caches processed images in the `resources` directory. If you include this directory in source control, Hugo will not have to regenerate the images in a CI/CD workflow (e.g., GitHub Pages, GitLab Pages, Netlify, etc.). This results in faster builds.
+
+If you change image processing methods or options, or if you rename or remove images, the `resources` directory will contain unused images. To remove the unused images, perform garbage collection with:
+
+```sh
+hugo --gc
+```
+
- [github.com/disintegration/imaging]: <https://github.com/disintegration/imaging#image-resizing>
- [Smartcrop]: <https://github.com/muesli/smartcrop#smartcrop>
- [Exif]: <https://en.wikipedia.org/wiki/Exif>
+[`anchor`]: /content-management/image-processing#anchor
+[mounted]: /hugo-modules/configuration#module-configuration-mounts
+[page bundle]: /content-management/page-bundles/
+[`lang.FormatNumber`]: /functions/lang/formatnumber/
+[filters]: /functions/images/filter/#image-filters
++[github.com/disintegration/imaging]: https://github.com/disintegration/imaging#image-resizing
++[Smartcrop]: https://github.com/muesli/smartcrop#smartcrop
++[Exif]: https://en.wikipedia.org/wiki/Exif
+[`Process`]: #process
+[`Colors`]: #colors
+[`Crop`]: #crop
+[`Exif`]: #exif
+[`Fill`]: #fill
+[`Filter`]: #filter
+[`Fit`]: #fit
+[`Resize`]: #resize
+[site configuration]: #processing-options
+[`with`]: /functions/go-template/with/
--- /dev/null
-
+---
+title: Markdown attributes
+description: Use Markdown attributes to add HTML attributes when rendering Markdown to HTML.
+categories: [content management]
+keywords: [goldmark,markdown]
+menu:
+ docs:
+ parent: content-management
+ weight: 240
+weight: 240
+toc: true
+---
+
+## Overview
+
+Hugo supports Markdown attributes on images and block elements including blockquotes, fenced code blocks, headings, horizontal rules, lists, paragraphs, and tables.
+
+For example:
+
+```text
+This is a paragraph.
+{class="foo bar" id="baz"}
+```
+
+With `class` and `id` you can use shorthand notation:
+
+```text
+This is a paragraph.
+{.foo .bar #baz}
+```
+
+Hugo renders both of these to:
+
+```html
+<p class="foo bar" id="baz">This is a paragraph.</p>
+```
+
+## Block elements
+
+Update your site configuration to enable Markdown attributes for block-level elements.
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+title = true # default is true
+block = true # default is false
+{{< /code-toggle >}}
+
+## Standalone images
+
+By default, when the [Goldmark] Markdown renderer encounters a standalone image element (no other elements or text on the same line), it wraps the image element within a paragraph element per the [CommonMark specification].
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+[Goldmark]: https://github.com/yuin/goldmark
+
+If you were to place an attribute list beneath an image element, Hugo would apply the attributes to the surrounding paragraph, not the image.
+
+To apply attributes to a standalone image element, you must disable the default wrapping behavior:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser]
+wrapStandAloneImageWithinParagraph = false # default is true
+{{< /code-toggle >}}
+
+## Usage
+
+You may add [global HTML attributes], or HTML attributes specific to the current element type. Consistent with its content security model, Hugo removes HTML event attributes such as `onclick` and `onmouseover`.
+
+[global HTML attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
+
+The attribute list consists of one or more key-value pairs, separated by spaces or commas, wrapped by braces. You must quote string values that contain spaces. Unlike HTML, boolean attributes must have both key and value.
+
+For example:
+
+```text
+> This is a blockquote.
+{class="foo bar" hidden=hidden}
+```
+
+Hugo renders this to:
+
+```html
+<blockquote class="foo bar" hidden="hidden">
+ <p>This is a blockquote.</p>
+</blockquote>
+```
+
+In most cases, place the attribute list beneath the markup element. For headings and fenced code blocks, place the attribute list on the right.
+
+Element|Position of attribute list
+:--|:--
+blockquote | bottom
+fenced code block | right
+heading | right
+horizontal rule | bottom
+image | bottom
+list | bottom
+paragraph | bottom
+table | bottom
+
+For example:
+
+````text
+## Section 1 {class=foo}
+
+```bash {class=foo linenos=inline}
+declare a=1
+echo "${a}"
+```
+
+This is a paragraph.
+{class=foo}
+````
+
+As shown above, the attribute list for fenced code blocks is not limited to HTML attributes. You can also configure syntax highlighting by passing one or more of [these options](/functions/transform/highlight/#options).
--- /dev/null
- description: Include mathematical equations and expressions in your Markdown using LaTeX or TeX typesetting syntax.
+---
+title: Mathematics in Markdown
+linkTitle: Mathematics
- keywords: [chemical,chemistry,latex,math,mathjax,tex,typesetting]
++description: Include mathematical equations and expressions in Markdown using LaTeX markup.
+categories: [content management]
- ## Overview
-
- Mathematical equations and expressions authored in [LaTeX] or [TeX] are common in academic and scientific publications. Your browser typically renders this mathematical markup using an open-source JavaScript display engine such as [MathJax] or [KaTeX].
-
- For example, this is the mathematical markup for the equations displayed at the top of this page:
++keywords: [katex,latex,math,mathjax,typesetting]
+menu:
+ docs:
+ parent: content-management
+ weight: 270
+weight: 270
+toc: true
+math: true
+---
+
+{{< new-in 0.122.0 >}}
+
++## Overview
++
++Mathematical equations and expressions written in [LaTeX] are common in academic and scientific publications. Your browser typically renders this mathematical markup using an open-source JavaScript display engine such as [MathJax] or [KaTeX].
++
++For example, with this LaTeX markup:
++
++```text
+\[
+\begin{aligned}
+KL(\hat{y} || y) &= \sum_{c=1}^{M}\hat{y}_c \log{\frac{\hat{y}_c}{y_c}} \\
+JS(\hat{y} || y) &= \frac{1}{2}(KL(y||\frac{y+\hat{y}}{2}) + KL(\hat{y}||\frac{y+\hat{y}}{2}))
+\end{aligned}
+\]
++```
+
- ```text
++The MathJax display engine renders this:
+
- ```
+\[
+\begin{aligned}
+KL(\hat{y} || y) &= \sum_{c=1}^{M}\hat{y}_c \log{\frac{\hat{y}_c}{y_c}} \\
+JS(\hat{y} || y) &= \frac{1}{2}(KL(y||\frac{y+\hat{y}}{2}) + KL(\hat{y}||\frac{y+\hat{y}}{2}))
+\end{aligned}
+\]
- 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. Common delimiter pairs are shown in [Step 1].
+
+Equations and expressions can be displayed inline with other text, or as standalone blocks. Block presentation is also known as "display" mode.
+
- The approach described below avoids reliance on platform-specific features like shortcodes or code block render hooks. Instead, it utilizes a standardized markup format for mathematical equations and expressions, compatible with the rendering engines used by GitHub, GitLab, [Microsoft VS Code], [Obsidian], [Typora], and others.
++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.
+
- Follow these instructions to include mathematical equations and expressions in your Markdown using LaTeX or TeX typesetting syntax.
++{{% 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 while building your site with the [`transform.ToMath`]function.
++
++The first approach is described below.
++
++[`transform.ToMath`]: /functions/transform/tomath/
++{{% /note %}}
+
+## Setup
+
- Include mathematical equations and expressions in your Markdown using LaTeX or TeX typesetting syntax.
++Follow these instructions to include mathematical equations and expressions in your Markdown using LaTeX markup.
+
+###### Step 1
+
+Enable and configure the Goldmark [passthrough extension] in your site configuration. The passthrough extension preserves raw Markdown within delimited snippets of text, including the delimiters themselves.
+
+{{< code-toggle file=hugo copy=true >}}
+[markup.goldmark.extensions.passthrough]
+enable = true
+
+[markup.goldmark.extensions.passthrough.delimiters]
+block = [['\[', '\]'], ['$$', '$$']]
+inline = [['\(', '\)']]
+
+[params]
+math = true
+{{< /code-toggle >}}
+
+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 %}}
+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 %}}
+
+To disable passthrough of inline snippets, omit the `inline` key from the configuration:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.extensions.passthrough.delimiters]
+block = [['\[', '\]'], ['$$', '$$']]
+{{< /code-toggle >}}
+
+You can define your own opening and closing delimiters, provided they match the delimiters that you set in [Step 2].
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.extensions.passthrough.delimiters]
+block = [['@@', '@@']]
+inline = [['@', '@']]
+{{< /code-toggle >}}
+
+###### Step 2
+
+Create a partial template to load MathJax or KaTeX. The example below loads MathJax, or you can use KaTeX as described in the [engines](#engines) section.
+
+{{< code file=layouts/partials/math.html copy=true >}}
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+<script>
+ MathJax = {
+ tex: {
+ displayMath: [['\\[', '\\]'], ['$$', '$$']], // block
+ inlineMath: [['\\(', '\\)']] // inline
+ }
+ };
+</script>
+{{< /code >}}
+
+The delimiters above must match the delimiters in your site configuration.
+
+###### Step 3
+
+Conditionally call the partial template from the base template.
+
+{{< code file=layouts/_default/baseof.html >}}
+<head>
+ ...
+ {{ if .Param "math" }}
+ {{ partialCached "math.html" . }}
+ {{ end }}
+ ...
+</head>
+{{< /code >}}
+
+The example above loads the partial template if you have set the `math` parameter in front matter to `true`. If you have not set the `math` parameter in front matter, the conditional statement falls back to the `math` parameter in your site configuration.
+
+###### Step 4
+
- 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.9.
++Include mathematical equations and expressions in Markdown using LaTeX markup.
+
+{{< code file=content/math-examples.md copy=true >}}
+This is an inline \(a^*=x-b^*\) equation.
+
+These are block equations:
+
+\[a^*=x-b^*\]
+
+\[ a^*=x-b^* \]
+
+\[
+a^*=x-b^*
+\]
+
+These are also block equations:
+
+$$a^*=x-b^*$$
+
+$$ a^*=x-b^* $$
+
+$$
+a^*=x-b^*
+$$
+{{< /code >}}
+
+If you set the `math` parameter to `false` in your site configuration, you must set the `math` parameter to `true` in front matter. For example:
+
+{{< code-toggle file=content/math-examples.md fm=true >}}
+title = 'Math examples'
+date = 2024-01-24T18:09:49-08:00
+[params]
+math = true
+{{< /code-toggle >}}
+
+## Inline delimiters
+
+The configuration, JavaScript, and examples above use the `\(...\)` delimiter pair for inline equations. The `$...$` delimiter pair is a common alternative, but using it may result in unintended formatting if you use the `$` symbol outside of math contexts.
+
+If you add the `$...$` delimiter pair to your configuration and JavaScript, you must double-escape the `$` when outside of math contexts, regardless of whether mathematical rendering is enabled on the page. For example:
+
+```text
+A \\$5 bill _saved_ is a \\$5 bill _earned_.
+```
+
+{{% note %}}
+If you use the `$...$` delimiter pair for inline equations, and occasionally use the `$` 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 %}}
+
+## Engines
+
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
- <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
- <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
++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 %}}
+If you use the `$...$` delimiter pair for inline equations, and occasionally use the `$` 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 %}}
+
+To use KaTeX instead of MathJax, replace the partial template from [Step 2] with this:
+
+{{< code file=layouts/partials/math.html copy=true >}}
- [Microsoft VS Code]: https://code.visualstudio.com/
- [Obsidian]: https://obsidian.md/
++<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
++<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
++<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+<script>
+ document.addEventListener("DOMContentLoaded", function() {
+ renderMathInElement(document.body, {
+ delimiters: [
+ {left: '\\[', right: '\\]', display: true}, // block
+ {left: '$$', right: '$$', display: true}, // block
+ {left: '\\(', right: '\\)', display: false}, // inline
+ ],
+ throwOnError : false
+ });
+ });
+</script>
+{{< /code >}}
+
+The delimiters above must match the delimiters in your site configuration.
+
+## Chemistry
+
+Both MathJax and KaTeX provide support for chemical equations. For example:
+
+```text
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+```
+
+$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
+
+As shown in [Step 2] above, MathJax supports chemical equations without additional configuration. To add chemistry support to KaTeX, enable the mhchem extension as described in the KaTeX [documentation](https://katex.org/docs/libs).
+
+[KaTeX]: https://katex.org/
+[LaTeX]: https://www.latex-project.org/
+[MathJax]: https://www.mathjax.org/
- [TeX]: https://en.wikipedia.org/wiki/TeX
- [Typora]: https://typora.io/
- [passthrough extension]: https://github.com/gohugoio/hugo-goldmark-extensions
+[Step 1]: #step-1
+[Step 2]: #step-2
+[Step 3]: #step-3
++[passthrough extension]: /getting-started/configuration-markup/#passthrough
--- /dev/null
- 2. [Localize] each entry
- 3. Render the menu with a [template]
+---
+title: Menus
+description: Create menus by defining entries, localizing each entry, and rendering the resulting data structure.
+categories: [content management]
+keywords: [menus]
+menu:
+ docs:
+ parent: content-management
+ weight: 190
+weight: 190
+toc: true
+aliases: [/extras/menus/]
+---
+
+## Overview
+
+To create a menu for your site:
+
+1. Define the menu entries
- To automatically define a menu entry for each top-level [section] of your site, enable the section pages menu in your site configuration.
++1. [Localize] each entry
++1. Render the menu with a [template]
+
+Create multiple menus, either flat or nested. For example, create a main menu for the header, and a separate menu for the footer.
+
+There are three ways to define menu entries:
+
+1. Automatically
+1. In front matter
+1. In site configuration
+
+{{% 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 %}}
+
+## Define automatically
+
- [section]: /getting-started/glossary/#section
++To automatically define a menu entry for each top-level [section](g) of your site, enable the section pages menu in your site configuration.
+
+{{< code-toggle file=hugo >}}
+sectionPagesMenu = "main"
+{{< /code-toggle >}}
+
+This creates a menu structure that you can access with `site.Menus.main` in your templates. See [menu templates] for details.
+
+## Define in front matter
+
+To add a page to the "main" menu:
+
+{{< code-toggle file=content/about.md fm=true >}}
+title = 'About'
+menus = 'main'
+{{< /code-toggle >}}
+
+Access the entry with `site.Menus.main` in your templates. See [menu templates] for details.
+
+To add a page to the "main" and "footer" menus:
+
+{{< code-toggle file=content/contact.md fm=true >}}
+title = 'Contact'
+menus = ['main','footer']
+{{< /code-toggle >}}
+
+Access the entry with `site.Menus.main` and `site.Menus.footer` in your templates. See [menu templates] for details.
+
+{{% note %}}
+The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`.
+{{% /note %}}
+
+### Properties {#properties-front-matter}
+
+Use these properties when defining menu entries in front matter:
+
+identifier
+: (`string`) Required when two or more menu entries have the same `name`, or when localizing the `name` using translation tables. Must start with a letter, followed by letters, digits, or underscores.
+
+name
+: (`string`) The text to display when rendering the menu entry.
+
+params
+: (`map`) User-defined properties for the menu entry.
+
+parent
+: (`string`) The `identifier` of the parent menu entry. If `identifier` is not defined, use `name`. Required for child entries in a nested menu.
+
+post
+: (`string`) The HTML to append when rendering the menu entry.
+
+pre
+: (`string`) The HTML to prepend when rendering the menu entry.
+
+title
+: (`string`) The HTML `title` attribute of the rendered menu entry.
+
+weight
+: (`int`) A non-zero integer indicating the entry's position relative the root of the menu, or to its parent for a child entry. Lighter entries float to the top, while heavier entries sink to the bottom.
+
+### Example {#example-front-matter}
+
+This front matter menu entry demonstrates some of the available properties:
+
+{{< code-toggle file=content/products/software.md fm=true >}}
+title = 'Software'
+[menus.main]
+parent = 'Products'
+weight = 20
+pre = '<i class="fa-solid fa-code"></i>'
+[menus.main.params]
+class = 'center'
+{{< /code-toggle >}}
+
+Access the entry with `site.Menus.main` in your templates. See [menu templates] for details.
+
+## Define in site configuration
+
+To define entries for the "main" menu:
+
+{{< code-toggle file=hugo >}}
+[[menus.main]]
+name = 'Home'
+pageRef = '/'
+weight = 10
+
+[[menus.main]]
+name = 'Products'
+pageRef = '/products'
+weight = 20
+
+[[menus.main]]
+name = 'Services'
+pageRef = '/services'
+weight = 30
+{{< /code-toggle >}}
+
+This creates a menu structure that you can access with `site.Menus.main` in your templates. See [menu templates] for details.
+
+To define entries for the "footer" menu:
+
+{{< code-toggle file=hugo >}}
+[[menus.footer]]
+name = 'Terms'
+pageRef = '/terms'
+weight = 10
+
+[[menus.footer]]
+name = 'Privacy'
+pageRef = '/privacy'
+weight = 20
+{{< /code-toggle >}}
+
+This creates a menu structure that you can access with `site.Menus.footer` in your templates. See [menu templates] for details.
+
+{{% note %}}
+The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`.
+{{% /note %}}
+
+### Properties {#properties-site-configuration}
+
+{{% 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 %}}
+
+Each menu entry defined in site configuration requires two or more properties:
+
+- Specify `name` and `pageRef` for internal links
+- Specify `name` and `url` for external links
+
+pageRef
+: (`string`) The logical path of the target page, relative to the `content` directory. Omit language code and file extension. Required for *internal* links.
+
+Kind|pageRef
+:--|:--
+home|`/`
+page|`/books/book-1`
+section|`/books`
+taxonomy|`/tags`
+term|`/tags/foo`
+
+url
+: (`string`) Required for *external* links.
+
+### Example {#example-site-configuration}
+
+This nested menu demonstrates some of the available properties:
+
+{{< code-toggle file=hugo >}}
+[[menus.main]]
+name = 'Products'
+pageRef = '/products'
+weight = 10
+
+[[menus.main]]
+name = 'Hardware'
+pageRef = '/products/hardware'
+parent = 'Products'
+weight = 1
+
+[[menus.main]]
+name = 'Software'
+pageRef = '/products/software'
+parent = 'Products'
+weight = 2
+
+[[menus.main]]
+name = 'Services'
+pageRef = '/services'
+weight = 20
+
+[[menus.main]]
+name = 'Hugo'
+pre = '<i class="fa fa-heart"></i>'
+url = 'https://gohugo.io/'
+weight = 30
+[menus.main.params]
+rel = 'external'
+{{< /code-toggle >}}
+
+This creates a menu structure that you can access with `site.Menus.main` in your templates. See [menu templates] for details.
+
+## Localize
+
+Hugo provides two methods to localize your menu entries. See [multilingual].
+
+## Render
+
+See [menu templates].
+
+[localize]: /content-management/multilingual/#menus
+[menu templates]: /templates/menu/
+[multilingual]: /content-management/multilingual/#menus
+[template]: /templates/menu/
--- /dev/null
-
+---
+title: Multilingual mode
+linkTitle: Multilingual
+description: Localize your project for each language and region, including translations, images, dates, currencies, numbers, percentages, and collation sequence. Hugo's multilingual framework supports single-host and multihost configurations.
+categories: [content management]
+keywords: [multilingual,i18n,internationalization]
+menu:
+ docs:
+ parent: content-management
+ weight: 230
+weight: 230
+toc: true
+aliases: [/content/multilingual/,/tutorials/create-a-multilingual-site/]
+---
+
+## Configure languages
+
+This is the default language configuration:
+
+{{< code-toggle config=languages />}}
+
+In the above, `en` is the language key.
+
- : (`string`) The content directory for this language. Omit if [translating by file name].
+Language keys must conform to the syntax described in [RFC 5646]. For example:
+
+- `en`
+- `en-US`
+
+Artificial languages with private use subtags as defined in [RFC 5646 § 2.2.7] are also supported. Omit the `art-x-` prefix from the language key. For example:
+
+- `hugolang`
+
+{{% note %}}
+Private use subtags must not exceed 8 alphanumeric characters.
+{{% /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
+
+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.
+
+{{< code-toggle file=hugo >}}
+defaultContentLanguage = 'de'
+defaultContentLanguageInSubdir = true
+
+[languages.de]
+contentDir = 'content/de'
+disabled = false
+languageCode = 'de-DE'
+languageDirection = 'ltr'
+languageName = 'Deutsch'
+title = 'Projekt Dokumentation'
+weight = 1
+
+[languages.de.params]
+subtitle = 'Referenz, Tutorials und Erklärungen'
+
+[languages.en]
+contentDir = 'content/en'
+disabled = false
+languageCode = 'en-US'
+languageDirection = 'ltr'
+languageName = 'English'
+title = 'Project Documentation'
+weight = 2
+
+[languages.en.params]
+subtitle = 'Reference, Tutorials, and Explanations'
+{{< /code-toggle >}}
+
+defaultContentLanguage
+: (`string`) The project's default language key, conforming to the syntax described in [RFC 5646]. This value must match one of the defined language keys. Examples:
+
+- `en`
+- `en-GB`
+- `pt-BR`
+
+defaultContentLanguageInSubdir
+: (`bool`) If `true`, Hugo renders the default language site in a subdirectory matching the `defaultContentLanguage`. Default is `false`.
+
+contentDir
- ### Changes in Hugo 0.112.0
-
- {{< new-in 0.112.0 >}}
++: (`string`) The `content` directory for this language. Omit if [translating by file name].
+
+disabled
+: (`bool`) If `true`, Hugo will not render content for this language. Default is `false`.
+
+languageCode
+: (`string`) The language tag as described in [RFC 5646]. This value does not affect localization or URLs. Hugo uses this value to populate the `language` element in the [built-in RSS template], and the `lang` attribute of the `html` element in the [built-in alias template]. Examples:
+
+- `en`
+- `en-GB`
+- `pt-BR`
+
+languageDirection
+: (`string`) The language direction, either left-to-right (`ltr`) or right-to-left (`rtl`). Use this value in your templates with the global [`dir`] HTML attribute.
+
+languageName
+: (`string`) The language name, typically used when rendering a language switcher.
+
+title
+: (`string`) The site title for this language (optional).
+
+weight
+: (`int`) The language weight. When set to a non-zero value, this is the primary sort criteria for this language.
+
+[`dir`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
+[built-in RSS template]: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/rss.xml
+[built-in alias template]: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/alias.html
+[RFC 5646]: https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
+[translating by file name]: #translation-by-file-name
+
- In Hugo `v0.112.0` we consolidated all configuration options, and improved how the languages and their parameters are merged with the main configuration. But while testing this on Hugo sites out there, we received some error reports and reverted some of the changes in favor of deprecation warnings:
-
- 1. `site.Language.Params` is deprecated. Use `site.Params` directly.
- 1. Adding custom parameters to the top level language configuration is deprecated. Define custom parameters within `languages.xx.params`. See `color` in the example below.
++### Site parameters
+
-
- title = "My blog"
- languageCode = "en-us"
++Set language-specific site parameters under each language's `params` key:
+
+{{< code-toggle file=hugo >}}
- [languages.sv]
- title = "Min blogg"
- languageCode = "sv"
- [languages.en.params]
- color = "blue"
++[params]
++color = "red"
+
+[languages]
- In the example above, all settings except `color` below `params` map to predefined configuration options in Hugo for the site and its language, and should be accessed via the documented accessors:
++ [languages.de]
++ languageCode = 'de-DE'
++ title = 'Projekt Dokumentation'
++ weight = 1
++ [languages.de.params]
++ color = 'blue'
++ subtitle = 'Referenz, Tutorials und Erklärungen'
++ [languages.en]
++ languageCode = 'en-US'
++ title = 'Project Documentation'
++ weight = 2
++ [languages.en.params]
++ subtitle = 'Reference, Tutorials, and Explanations'
+{{< /code-toggle >}}
+
- {{ site.Title }}
- {{ site.Language.LanguageCode }}
- {{ site.Params.color }}
++When building the English site:
++
++```go-html-template
++{{ site.Params.color }} --> red
++{{ site.Params.subtitle }} --> Reference, Tutorials, and Explanations
++```
++
++When building the English site:
+
+```go-html-template
-
++{{ site.Params.color }} --> blue
++{{ site.Params.subtitle }} --> 'Referenz, Tutorials und Erklärungen'
+```
+
+### Disable a language
+
+To disable a language within a `languages` object in your site configuration:
+
+{{< code-toggle file=hugo >}}
+[languages.es]
+disabled = true
+{{< /code-toggle >}}
+
+To disable one or more languages in the root of your site configuration:
+
+{{< code-toggle file=hugo >}}
+disableLanguages = ["es", "fr"]
+{{< /code-toggle >}}
+
+To disable one or more languages using an environment variable:
+
+```sh
+HUGO_DISABLELANGUAGES="es fr" hugo
+```
+
+Note that you cannot disable the default content language.
+
+### Configure multilingual multihost
+
- 2. `/content/about.fr.md`
+Hugo supports multiple languages in a multihost configuration. This means you can configure a `baseURL` per `language`.
+
+{{% note %}}
+If a `baseURL` is set on the `language` level, then all languages must have one and they must all be different.
+{{% /note %}}
+
+Example:
+
+{{< code-toggle file=hugo >}}
+[languages]
+ [languages.en]
+ baseURL = 'https://en.example.org/'
+ languageName = 'English'
+ title = 'In English'
+ weight = 2
+ [languages.fr]
+ baseURL = 'https://fr.example.org'
+ languageName = 'Français'
+ title = 'En Français'
+ weight = 1
+{{</ code-toggle >}}
+
+With the above, the two sites will be generated into `public` with their own root:
+
+```text
+public
+├── en
+└── fr
+```
+
+**All URLs (i.e `.Permalink` etc.) will be generated from that root. So the English home page above will have its `.Permalink` set to `https://example.org/`.**
+
+When you run `hugo server` we will start multiple HTTP servers. You will typically see something like this in the console:
+
+```text
+Web Server is available at 127.0.0.1:1313 (bind address 127.0.0.1) fr
+Web Server is available at 127.0.0.1:1314 (bind address 127.0.0.1) en
+Press Ctrl+C to stop
+```
+
+Live reload and `--navigateToChanged` between the servers work as expected.
+
+## Translate your content
+
+There are two ways to manage your content translations. Both ensure each page is assigned a language and is linked to its counterpart translations.
+
+### Translation by file name
+
+Considering the following example:
+
+1. `/content/about.en.md`
- This system uses different content directories for each of the languages. Each language's content directory is set using the `contentDir` parameter.
++1. `/content/about.fr.md`
+
+The first file is assigned the English language and is linked to the second.
+The second file is assigned the French language and is linked to the first.
+
+Their language is __assigned__ according to the language code added as a __suffix to the file name__.
+
+By having the same **path and base file name**, the content pieces are __linked__ together as translated pages.
+
+{{% note %}}
+If a file has no language code, it will be assigned the default language.
+{{% /note %}}
+
+### Translation by content directory
+
- 2. `/content/french/about.md`
++This system uses different content directories for each of the languages. Each language's `content` directory is set using the `contentDir` parameter.
+
+{{< code-toggle file=hugo >}}
+languages:
+ en:
+ weight: 10
+ languageName: "English"
+ contentDir: "content/english"
+ fr:
+ weight: 20
+ languageName: "Français"
+ contentDir: "content/french"
+{{< /code-toggle >}}
+
+The value of `contentDir` can be any valid path -- even absolute path references. The only restriction is that the content directories cannot overlap.
+
+Considering the following example in conjunction with the configuration above:
+
+1. `/content/english/about.md`
- Their language is __assigned__ according to the content directory they are __placed__ in.
++1. `/content/french/about.md`
+
+The first file is assigned the English language and is linked to the second.
+The second file is assigned the French language and is linked to the first.
+
- By having the same **path and basename** (relative to their language content directory), the content pieces are __linked__ together as translated pages.
++Their language is __assigned__ according to the `content` directory they are __placed__ in.
+
- 2. `/content/om.nn.md`
- 3. `/content/presentation/a-propos.fr.md`
++By having the same **path and basename** (relative to their language `content` directory), the content pieces are __linked__ together as translated pages.
+
+### Bypassing default linking
+
+Any pages sharing the same `translationKey` set in front matter will be linked as translated pages regardless of basename or location.
+
+Considering the following example:
+
+1. `/content/about-us.en.md`
++1. `/content/om.nn.md`
++1. `/content/presentation/a-propos.fr.md`
+
+{{< code-toggle >}}
+translationKey: "about"
+{{< /code-toggle >}}
+
+By setting the `translationKey` front matter parameter to `about` in all three pages, they will be __linked__ as translated pages.
+
+### Localizing permalinks
+
+Because paths and file names are used to handle linking, all translated pages will share the same URL (apart from the language subdirectory).
+
+To localize URLs:
+
+- For a regular page, set either [`slug`] or [`url`] in front matter
+- For a section page, set [`url`] in front matter
+
+[`slug`]: /content-management/urls/#slug
+[`url`]: /content-management/urls/#url
+
+For example, a French translation can have its own localized slug.
+
+{{< code-toggle file=content/about.fr.md fm=true >}}
+title: A Propos
+slug: "a-propos"
+{{< /code-toggle >}}
+
+At render, Hugo will build both `/about/` and `/fr/a-propos/` without affecting the translation link.
+
+### Page bundles
+
+To avoid the burden of having to duplicate files, each Page Bundle inherits the resources of its linked translated pages' bundles except for the content files (Markdown files, HTML files etc...).
+
+Therefore, from within a template, the page will have access to the files from all linked pages' bundles.
+
+If, across the linked bundles, two or more files share the same basename, only one will be included and chosen as follows:
+
+* File from current language bundle, if present.
+* First file found across bundles by order of language `Weight`.
+
+{{% 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 %}}
+
+## Reference translated content
+
+To create a list of links to translated content, use a template similar to the following:
+
+{{< code file=layouts/partials/i18nlist.html >}}
+{{ if .IsTranslated }}
+<h4>{{ i18n "translations" }}</h4>
+<ul>
+ {{ range .Translations }}
+ <li>
+ <a href="{{ .RelPermalink }}">{{ .Language.Lang }}: {{ .LinkTitle }}{{ if .IsPage }} ({{ i18n "wordCount" . }}){{ end }}</a>
+ </li>
+ {{ end }}
+</ul>
+{{ end }}
+{{< /code >}}
+
+The above can be put in a `partial` (i.e., inside `layouts/partials/`) and included in any template. It will not print anything if there are no translations for a given page.
+
+The above also uses the [`i18n` function][i18func] described in the next section.
+
+### List all available languages
+
+`.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 >}}
+<ul>
+{{ range $.Site.Home.AllTranslations }}
+<li><a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a></li>
+{{ end }}
+</ul>
+{{< /code >}}
+
+## Translation of strings
+
+See the [`lang.Translate`] template function.
+
+[`lang.Translate`]: /functions/lang/translate
+
+## Localization
+
+The following localization examples assume your site's primary language is English, with translations to French and German.
+
+{{< code-toggle file=hugo >}}
+defaultContentLanguage = 'en'
+
+[languages]
+[languages.en]
+contentDir = 'content/en'
+languageName = 'English'
+weight = 1
+[languages.fr]
+contentDir = 'content/fr'
+languageName = 'Français'
+weight = 2
+[languages.de]
+contentDir = 'content/de'
+languageName = 'Deutsch'
+weight = 3
+
+{{< /code-toggle >}}
+
+### Dates
+
+With this front matter:
+
+{{< code-toggle >}}
+date = 2021-11-03T12:34:56+01:00
+{{< /code-toggle >}}
+
+And this template code:
+
+```go-html-template
+{{ .Date | time.Format ":date_full" }}
+```
+
+The rendered page displays:
+
+Language|Value
+:--|:--
+English|Wednesday, November 3, 2021
+Français|mercredi 3 novembre 2021
+Deutsch|Mittwoch, 3. November 2021
+
+See [`time.Format`] for details.
+
+### Currency
+
+With this template code:
+
+```go-html-template
+{{ 512.5032 | lang.FormatCurrency 2 "USD" }}
+```
+
+The rendered page displays:
+
+Language|Value
+:--|:--
+English|$512.50
+Français|512,50 $US
+Deutsch|512,50 $
+
+See [lang.FormatCurrency] and [lang.FormatAccounting] for details.
+
+### Numbers
+
+With this template code:
+
+```go-html-template
+{{ 512.5032 | lang.FormatNumber 2 }}
+```
+
+The rendered page displays:
+
+Language|Value
+:--|:--
+English|512.50
+Français|512,50
+Deutsch|512,50
+
+See [lang.FormatNumber] and [lang.FormatNumberCustom] for details.
+
+### Percentages
+
+With this template code:
+
+```go-html-template
+{{ 512.5032 | lang.FormatPercent 2 }}
+```
+
+The rendered page displays:
+
+Language|Value
+:--|:--
+English|512.50%
+Français|512,50 %
+Deutsch|512,50 %
+
+See [lang.FormatPercent] for details.
+
+## Menus
+
+Localization of menu entries depends on how you define them:
+
+- When you define menu entries [automatically] using the section pages menu, you must use translation tables to localize each entry.
+- When you define menu entries [in front matter], they are already localized based on the front matter itself. If the front matter values are insufficient, use translation tables to localize each entry.
+- When you define menu entries [in site configuration], you must create language-specific menu entries under each language key. If the names of the menu entries are insufficient, use translation tables to localize each entry.
+
+### Create language-specific menu entries
+
+#### Method 1 -- Use a single configuration file
+
+For a simple menu with a small number of entries, use a single configuration file. For example:
+
+{{< code-toggle file=hugo >}}
+[languages.de]
+languageCode = 'de-DE'
+languageName = 'Deutsch'
+weight = 1
+
+[[languages.de.menus.main]]
+name = 'Produkte'
+pageRef = '/products'
+weight = 10
+
+[[languages.de.menus.main]]
+name = 'Leistungen'
+pageRef = '/services'
+weight = 20
+
+[languages.en]
+languageCode = 'en-US'
+languageName = 'English'
+weight = 2
+
+[[languages.en.menus.main]]
+name = 'Products'
+pageRef = '/products'
+weight = 10
+
+[[languages.en.menus.main]]
+name = 'Services'
+pageRef = '/services'
+weight = 20
+{{< /code-toggle >}}
+
+#### Method 2 -- Use a configuration directory
+
+With a more complex menu structure, create a [configuration directory] and split the menu entries into multiple files, one file per language. For example:
+
+```text
+config/
+└── _default/
+ ├── menus.de.toml
+ ├── menus.en.toml
+ └── hugo.toml
+```
+
+{{< code-toggle file=config/_default/menus.de >}}
+[[main]]
+name = 'Produkte'
+pageRef = '/products'
+weight = 10
+[[main]]
+name = 'Leistungen'
+pageRef = '/services'
+weight = 20
+{{< /code-toggle >}}
+
+{{< code-toggle file=config/_default/menus.en >}}
+[[main]]
+name = 'Products'
+pageRef = '/products'
+weight = 10
+[[main]]
+name = 'Services'
+pageRef = '/services'
+weight = 20
+{{< /code-toggle >}}
+
+[configuration directory]: /getting-started/configuration/#configuration-directory
+
+### Use translation tables
+
+When rendering the text that appears in menu each entry, the [example menu template] does this:
+
+```go-html-template
+{{ or (T .Identifier) .Name | safeHTML }}
+```
+
+It queries the translation table for the current language using the menu entry's `identifier` and returns the translated string. If the translation table does not exist, or if the `identifier` key is not present in the translation table, it falls back to `name`.
+
+The `identifier` depends on how you define menu entries:
+
+- If you define the menu entry [automatically] using the section pages menu, the `identifier` is the page's `.Section`.
+- If you define the menu entry [in site configuration] or [in front matter], set the `identifier` property to the desired value.
+
+For example, if you define menu entries in site configuration:
+
+{{< code-toggle file=hugo >}}
+[[menus.main]]
+ identifier = 'products'
+ name = 'Products'
+ pageRef = '/products'
+ weight = 10
+[[menus.main]]
+ identifier = 'services'
+ name = 'Services'
+ pageRef = '/services'
+ weight = 20
+{{< / code-toggle >}}
+
+Create corresponding entries in the translation tables:
+
+{{< code-toggle file=i18n/de >}}
+products = 'Produkte'
+services = 'Leistungen'
+{{< / code-toggle >}}
+
+[example menu template]: /templates/menu/#example
+[automatically]: /content-management/menus/#define-automatically
+[in front matter]: /content-management/menus/#define-in-front-matter
+[in site configuration]: /content-management/menus/#define-in-site-configuration
+
+## Missing translations
+
+If a string does not have a translation for the current language, Hugo will use the value from the default language. If no default value is set, an empty string will be shown.
+
+While translating a Hugo website, it can be handy to have a visual indicator of missing translations. The [`enableMissingTranslationPlaceholders` configuration option][config] will flag all untranslated strings with the placeholder `[i18n] identifier`, where `identifier` is the id of the missing translation.
+
+{{% note %}}
+Hugo will generate your website with these missing translation placeholders. It might not be suitable for production environments.
+{{% /note %}}
+
+For merging of content from other languages (i.e. missing content translations), see [lang.Merge].
+
+To track down missing translation strings, run Hugo with the `--printI18nWarnings` flag:
+
+```sh
+hugo --printI18nWarnings | grep i18n
+i18n|MISSING_TRANSLATION|en|wordCount
+```
+
+## Multilingual themes support
+
+To support Multilingual mode in your themes, some considerations must be taken for the URLs in the templates. If there is more than one language, URLs must meet the following criteria:
+
+* Come from the built-in `.Permalink` or `.RelPermalink`
+* Be constructed with the [`relLangURL`] or [`absLangURL`] template function, or be prefixed with `{{ .LanguagePrefix }}`
+
+If there is more than one language defined, the `LanguagePrefix` method will return `/en` (or whatever the current language is). If not enabled, it will be an empty string (and is therefore harmless for single-language Hugo websites).
+
+## Generate multilingual content with `hugo new content`
+
+If you organize content with translations in the same directory:
+
+```sh
+hugo new content post/test.en.md
+hugo new content post/test.de.md
+```
+
+If you organize content with translations in different directories:
+
+```sh
+hugo new content content/en/post/test.md
+hugo new content content/de/post/test.md
+```
+
+[`abslangurl`]: /functions/urls/abslangurl/
+[config]: /getting-started/configuration/
+[go-i18n-source]: https://github.com/nicksnyder/go-i18n
+[go-i18n]: https://github.com/nicksnyder/go-i18n
+[Hugo Multilingual Part 1: Content translation]: https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/
+[i18func]: /functions/lang/translate/
+[lang.FormatAccounting]: /functions/lang/formataccounting/
+[lang.FormatCurrency]: /functions/lang/formatcurrency/
+[lang.FormatNumber]: /functions/lang/formatnumber/
+[lang.FormatNumberCustom]: /functions/lang/formatnumbercustom/
+[lang.FormatPercent]: /functions/lang/formatpercent/
+[lang.Merge]: /functions/lang/merge/
+[menus]: /content-management/menus/
+[OS environment]: /getting-started/configuration/#configure-with-environment-variables
+[`rellangurl`]: /functions/urls/rellangurl/
+[`time.Format`]: /functions/time/format/
--- /dev/null
- : A _leaf bundle_ is a directory that contains an index.md file and zero or more resources. Analogous to a physical leaf, a leaf bundle is at the end of a branch. It has no descendants.
+---
+title: Page bundles
+description: Use page bundles to logically associate one or more resources with content.
+categories: [content management]
+keywords: [page,bundle,leaf,branch]
+menu :
+ docs:
+ parent: content-management
+ weight: 30
+weight: 30
+toc: true
+---
+
+## Introduction
+
+A page bundle is a directory that encapsulates both content and associated resources.
+
+By way of example, this site has an "about" page and a "privacy" page:
+
+```text
+content/
+├── about/
+│ ├── index.md
+│ └── welcome.jpg
+└── privacy.md
+```
+
+The "about" page is a page bundle. It logically associates a resource with content by bundling them together. Resources within a page bundle are [page resources], accessible with the [`Resources`] method on the `Page` object.
+
+Page bundles are either _leaf bundles_ or _branch bundles_.
+
+leaf bundle
- : A _branch bundle_ is a directory that contains an _index.md 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 files are also branch bundles. This includes the home page.
++: A _leaf bundle_ is a directory that contains an `index.md` file and zero or more resources. Analogous to a physical leaf, a leaf bundle is at the end of a branch. It has no descendants.
+
+branch bundle
- In the definitions above and the examples below, the extension of the index file depends on the [content format]. For example, use index.md for Markdown content, index.html for HTML content, index.adoc for AsciiDoc content, etc.
-
- [content format]: /getting-started/glossary/#content-format
++: A _branch bundle_ is a directory that contains an `_index.md` 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` files are also branch bundles. This includes the home page.
+
+{{% note %}}
- | Index file | index.md | _index.md |
- | Example | content/about/index.md | content/posts/_index.md |
- | [Page kinds] | `page` | `home`, `section`, `taxonomy`, or `term` |
- | Template types | [single] | [home], [section], [taxonomy], or [term] |
++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 %}}
+
+## Comparison
+
+Page bundle characteristics vary by bundle type.
+
+| | Leaf bundle | Branch bundle |
+|---------------------|---------------------------------------------------------|---------------------------------------------------------|
- | [Resource types] | `page`, `image`, `video`, etc. | all but `page` |
++| Index file | `index.md` | `_index.md` |
++| Example | `content/about/index.md` | `content/posts/_index.md ` |
++| [Page kinds](g) | `page` | `home`, `section`, `taxonomy`, or `term` |
++| Template types | [single] | [home], [section], [taxonomy], or [term] |
+| Descendant pages | None | Zero or more |
+| Resource location | Adjacent to the index file or in a nested subdirectory | Same as a leaf bundles, but excludes descendant bundles |
- Files with [resource type] `page` include content written in Markdown, HTML, AsciiDoc, Pandoc, reStructuredText, and Emacs Org Mode. In a leaf bundle, excluding the index file, these files are only accessible as page resources. In a branch bundle, these files are only accessible as content pages.
++| [Resource types](g) | `page`, `image`, `video`, etc. | all but `page` |
+
+[single]: /templates/types/#single
+[home]: /templates/types/#home
+[section]: /templates/types/#section
+[taxonomy]: /templates/types/#taxonomy
+[term]: /templates/types/#term
+
- A _leaf bundle_ is a directory that contains an index.md file and zero or more resources. Analogous to a physical leaf, a leaf bundle is at the end of a branch. It has no descendants.
++Files with [resource type](g) `page` include content written in Markdown, HTML, AsciiDoc, Pandoc, reStructuredText, and Emacs Org Mode. In a leaf bundle, excluding the index file, these files are only accessible as page resources. In a branch bundle, these files are only accessible as content pages.
+
+## Leaf bundles
+
- : This leaf bundle contains an index file, two resources of [resource type] `page`, and two resources of resource type `image`.
++A _leaf bundle_ is a directory that contains an `index.md` file and zero or more resources. Analogous to a physical leaf, a leaf bundle is at the end of a branch. It has no descendants.
+
+```text
+content/
+├── about
+│ └── index.md
+├── posts
+│ ├── my-post
+│ │ ├── content-1.md
+│ │ ├── content-2.md
+│ │ ├── image-1.jpg
+│ │ ├── image-2.png
+│ │ └── index.md
+│ └── my-other-post
+│ └── index.md
+└── another-section
+ ├── foo.md
+ └── not-a-leaf-bundle
+ ├── bar.md
+ └── another-leaf-bundle
+ └── index.md
+```
+
+There are four leaf bundles in the example above:
+
+about
+: This leaf bundle does not contain any page resources.
+
+my-post
- 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.
++: This leaf bundle contains an index file, two resources of [resource type](g) `page`, and two resources of resource type `image`.
+
+- content-1, content-2
+
+ These are resources of resource type `page`, accessible via the [`Resources`] method on the `Page` object. Hugo will not render these as individual pages.
+
+- image-1, image-2
+
+ These are resources of resource type `image`, accessible via the `Resources` method on the `Page` object
+
+my-other-post
+: This leaf bundle does not contain any page resources.
+
+another-leaf-bundle
+: This leaf bundle does not contain any page resources.
+
+{{% note %}}
- A _branch bundle_ is a directory that contains an _index.md 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 files are also branch bundles. This includes the home page.
++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 %}}
+
+## Branch bundles
+
- : This branch bundle contains an index file, two resources of [resource type] `page`, and two resources of resource type `image`.
++A _branch bundle_ is a directory that contains an `_index.md` 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` files are also branch bundles. This includes the home page.
+
+```text
+content/
+├── branch-bundle-1/
+│ ├── _index.md
+│ ├── content-1.md
+│ ├── content-2.md
+│ ├── image-1.jpg
+│ └── image-2.png
+├── branch-bundle-2/
+│ ├── a-leaf-bundle/
+│ │ └── index.md
+│ └── _index.md
+└── _index.md
+```
+
+There are three branch bundles in the example above:
+
+home page
+: This branch bundle contains an index file, two descendant branch bundles, and no resources.
+
+branch-bundle-1
- Create branch bundles at any depth within the content directory, but a leaf bundle may not contain another bundle. Leaf bundles do not have descendants.
++: This branch bundle contains an index file, two resources of [resource type](g) `page`, and two resources of resource type `image`.
+
+branch-bundle-2
+: This branch bundle contains an index file and a leaf bundle.
+
+{{% note %}}
-
++Create branch bundles at any depth within the `content` directory, but a leaf bundle may not contain another bundle. Leaf bundles do not have descendants.
+{{% /note %}}
+
- [build options]: content-management/build-options/
- [page kinds]: /getting-started/glossary/#page-kind
+## Headless bundles
+
+Use [build options] in front matter to create an unpublished leaf or branch bundle whose content and resources you can include in other pages.
+
+[`Resources`]: /methods/page/resources/
- [resource type]: /getting-started/glossary/#resource-type
- [resource types]: /getting-started/glossary/#resource-type
++[build options]: /content-management/build-options/
+[page resources]: /content-management/page-resources/
--- /dev/null
- : (`slice`) A list of special keywords that is used for indices configured as type "fragments". This will match the [fragment] identifiers of the documents.
+---
+title: Related content
+description: List related content in "See Also" sections.
+categories: [content management]
+keywords: [content]
+menu:
+ docs:
+ parent: content-management
+ weight: 110
+weight: 110
+toc: true
+aliases: [/content/related/,/related/]
+---
+
+Hugo uses a set of factors to identify a page's related content based on front matter parameters. This can be tuned to the desired set of indices and parameters or left to Hugo's default [Related Content configuration](#configure-related-content).
+
+## List related content
+
+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 template:
+
+{{< code file=layouts/partials/related.html >}}
+{{ $related := .Site.RegularPages.Related . | first 5 }}
+{{ with $related }}
+ <h3>See Also</h3>
+ <ul>
+ {{ range . }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+{{< /code >}}
+
+The `Related` method takes one argument which may be a `Page` or a options map. The options map have these options:
+
+indices
+: (`slice`) The indices to search within.
+
+document
+: (`page`) The page for which to find related content. Required when specifying an options map.
+
+namedSlices
+: (`slice`) The keywords to search for, expressed as a slice of `KeyValues` using the [`keyVals`] function.
+
+fragments
- [fragment]: /getting-started/glossary/#fragment
++: (`slice`) A list of special keywords that is used for indices configured as type "fragments". This will match the [fragment](g) identifiers of the documents.
+
- {{< new-in 0.111.0 >}}
-
+[`keyVals`]: /functions/collections/keyvals/
+
+A fictional example using all of the above options:
+
+```go-html-template
+{{ $page := . }}
+{{ $opts := dict
+ "indices" (slice "tags" "keywords")
+ "document" $page
+ "namedSlices" (slice (keyVals "tags" "hugo" "rocks") (keyVals "date" $page.Date))
+ "fragments" (slice "heading-1" "heading-2")
+}}
+```
+
+{{% 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 %}}
+
+## Index content headings in related content
+
- * If `applyFilter`is enabled, the `.HeadingsFiltered` on each page in the result will reflect the filtered headings. This is useful if you want to show the headings in the related content listing:
+Hugo can index the headings in your content and use this to find related content. You can enable this by adding a index of type `fragments` to your `related` configuration:
+
+{{< code-toggle file=hugo >}}
+[related]
+threshold = 20
+includeNewer = true
+toLower = false
+[[related.indices]]
+name = "fragmentrefs"
+type = "fragments"
+applyFilter = true
+weight = 80
+{{< /code-toggle >}}
+
+* The `name` maps to a optional front matter slice attribute that can be used to link from the page level down to the fragment/heading level.
- type {{< new-in 0.111.0 >}}
++* If `applyFilter` is enabled, the `.HeadingsFiltered` on each page in the result will reflect the filtered headings. This is useful if you want to show the headings in the related content listing:
+
+```go-html-template
+{{ $related := .Site.RegularPages.Related . | first 5 }}
+{{ with $related }}
+ <h2>See Also</h2>
+ <ul>
+ {{ range $i, $p := . }}
+ <li>
+ <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+ {{ with .HeadingsFiltered }}
+ <ul>
+ {{ range . }}
+ {{ $link := printf "%s#%s" $p.RelPermalink .ID | safeURL }}
+ <li>
+ <a href="{{ $link }}">{{ .Title }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ {{ end }}
+ </li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+## Configure related content
+
+Hugo provides a sensible default configuration of Related Content, but you can fine-tune this in your configuration, on the global or language level if needed.
+
+### Default configuration
+
+Without any `related` configuration set on the project, Hugo's Related Content methods will use the following.
+
+{{< code-toggle config=related />}}
+
+Custom configuration should be set using the same syntax.
+
+{{% 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 %}}
+
+### Top level configuration options
+
+threshold
+: (`int`) A value between 0-100. Lower value will give more, but maybe not so relevant, matches.
+
+includeNewer
+: (`bool`) Set to `true` to include **pages newer than the current page** in the related content listing. This will mean that the output for older posts may change as new related content gets added.
+
+toLower
+: (`bool`) Set to `true` to lower case keywords in both the indexes and the queries. This may give more accurate results at a slight performance penalty. Note that this can also be set per index.
+
+### Configuration options per index
+
+name
+: (`string`) The index name. This value maps directly to a page parameter. Hugo supports string values (`author` in the example) and lists (`tags`, `keywords` etc.) and time and date objects.
+
- applyFilter {{< new-in 0.111.0 >}}
++type
+: (`string`) One of `basic`(default) or `fragments`.
+
- cardinalityThreshold {{< new-in 0.111.0 >}}
++applyFilter
+: (`string`) Apply a `type` specific filter to the result of a search. This is currently only used for the `fragments` type.
+
+weight
+: (`int`) An integer weight that indicates _how important_ this parameter is relative to the other parameters. It can be `0`, which has the effect of turning this index off, or even negative. Test with different values to see what fits your content best.
+
-
- ## Performance considerations
-
- **Fast is Hugo's middle name** and we would not have released this feature had it not been blistering fast.
-
- This feature has been in the back log and requested by many for a long time. The development got this recent kick start from this Twitter thread:
-
- {{< tweet user="scott_lowe" id="898398437527363585" >}}
-
- Scott S. Lowe removed the "Related Content" section built using the `intersect` template function on tags, and the build time dropped from 30 seconds to less than 2 seconds on his 1700 content page sized blog.
-
- He should now be able to add an improved version of that "Related Content" section without giving up the fast live-reloads. But it's worth noting that:
-
- * If you don't use any of the `Related` methods, you will not use the Relate Content feature, and performance will be the same as before.
- * Calling `.RegularPages.Related` etc. will create one inverted index, also sometimes named posting list, that will be reused for any lookups in that same page collection. Doing that in addition to, as an example, calling `.Pages.Related` will work as expected, but will create one additional inverted index. This should still be very fast, but worth having in mind, especially for bigger sites.
-
- {{% note %}}
- We currently do not index **Page content**. We thought we would release something that will make most people happy before we start solving [Sherlock's last case](https://github.com/joearms/sherlock).
- {{% /note %}}
++cardinalityThreshold
+: (`int`) If between 1 and 100, this is a percentage. All keywords that are used in more than this percentage of documents are removed. For example, setting this to `60` will remove all keywords that are used in more than 60% of the documents in the index. If `0`, no keyword is removed from the index. Default is `0`.
+
+pattern
+: (`string`) This is currently only relevant for dates. When listing related content, we may want to list content that is also close in time. Setting "2006" (default value for date indexes) as the pattern for a date index will add weight to pages published in the same year. For busier blogs, "200601" (year and month) may be a better default.
+
+toLower
+: (`bool`) See above.
--- /dev/null
- A section is a top-level content directory, or any content directory with an _index.md file. A content directory with an _index.md file is also known as a [branch bundle](/getting-started/glossary/#branch-bundle). Section templates receive one or more page [collections](/getting-started/glossary/#collection) in [context](/getting-started/glossary/#context).
+---
+title: Sections
+description: Organize content into sections.
+
+categories: [content management]
+keywords: [lists,sections,content types,organization]
+menu:
+ docs:
+ parent: content-management
+ weight: 120
+weight: 120
+toc: true
+aliases: [/content/sections/]
+---
+
+## Overview
+
- Although top-level directories without _index.md files are sections, we recommend creating _index.md files in _all_ sections.
++A section is a top-level content directory, or any content directory with an `_index.md` file. A content directory with an `_index.md` file is also known as a [branch bundle](g). Section templates receive one or more page [collections](g) in [context](g).
+
+{{% note %}}
- content/products|layouts/products/list.html
- content/products/product-1|layouts/products/list.html
- content/products/product-1/benefits|layouts/products/list.html
++Although top-level directories without `_index.md` files are sections, we recommend creating `_index.md` files in _all_ sections.
+{{% /note %}}
+
+A typical site consists of one or more sections. For example:
+
+```text
+content/
+├── articles/ <-- section (top-level directory)
+│ ├── 2022/
+│ │ ├── article-1/
+│ │ │ ├── cover.jpg
+│ │ │ └── index.md
+│ │ └── article-2.md
+│ └── 2023/
+│ ├── article-3.md
+│ └── article-4.md
+├── products/ <-- section (top-level directory)
+│ ├── product-1/ <-- section (has _index.md file)
+│ │ ├── benefits/ <-- section (has _index.md file)
+│ │ │ ├── _index.md
+│ │ │ ├── benefit-1.md
+│ │ │ └── benefit-2.md
+│ │ ├── features/ <-- section (has _index.md file)
+│ │ │ ├── _index.md
+│ │ │ ├── feature-1.md
+│ │ │ └── feature-2.md
+│ │ └── _index.md
+│ └── product-2/ <-- section (has _index.md file)
+│ ├── benefits/ <-- section (has _index.md file)
+│ │ ├── _index.md
+│ │ ├── benefit-1.md
+│ │ └── benefit-2.md
+│ ├── features/ <-- section (has _index.md file)
+│ │ ├── _index.md
+│ │ ├── feature-1.md
+│ │ └── feature-2.md
+│ └── _index.md
+├── _index.md
+└── about.md
+```
+
+The example above has two top-level sections: articles and products. None of the directories under articles are sections, while all of the directories under products are sections. A section within a section is a known as a nested section or subsection.
+
+## Explanation
+
+Sections and non-sections behave differently.
+
+||Sections|Non-sections
+:--|:-:|:-:
+Directory names become URL segments|:heavy_check_mark:|:heavy_check_mark:
+Have logical ancestors and descendants|:heavy_check_mark:|:x:
+Have list pages|:heavy_check_mark:|:x:
+
+With the file structure from the [example above](#overview):
+
+1. The list page for the articles section includes all articles, regardless of directory structure; none of the subdirectories are sections.
+
+1. The articles/2022 and articles/2023 directories do not have list pages; they are not sections.
+
+1. The list page for the products section, by default, includes product-1 and product-2, but not their descendant pages. To include descendant pages, use the `RegularPagesRecursive` method instead of the `Pages` method in the list template.
+
+[`Pages`]: /methods/page/pages/
+[`RegularPagesRecursive`]: /methods/page/regularpagesrecursive/
+
+1. All directories in the products section have list pages; each directory is a section.
+
+## Template selection
+
+Hugo has a defined [lookup order] to determine which template to use when rendering a page. The [lookup rules] consider the top-level section name; subsection names are not considered when selecting a template.
+
+With the file structure from the [example above](#overview):
+
+Content directory|Section template
+:--|:--
- content/products|layouts/products/single.html
- content/products/product-1|layouts/products/single.html
- content/products/product-1/benefits|layouts/products/single.html
++`content/products`|`layouts/products/list.html`
++`content/products/product-1`|`layouts/products/list.html`
++`content/products/product-1/benefits`|`layouts/products/list.html`
+
+Content directory|Single template
+:--|:--
++`content/products`|`layouts/products/single.html`
++`content/products/product-1`|`layouts/products/single.html`
++`content/products/product-1/benefits`|`layouts/products/single.html`
+
+If you need to use a different template for a subsection, specify `type` and/or `layout` in front matter.
+
+[lookup rules]: /templates/lookup-order/#lookup-rules
+[lookup order]: /templates/lookup-order/
+
+## Ancestors and descendants
+
+A section has one or more ancestors (including the home page), and zero or more descendants. With the file structure from the [example above](#overview):
+
+```text
+content/products/product-1/benefits/benefit-1.md
+```
+
+The content file (benefit-1.md) has four ancestors: benefits, product-1, products, and the home page. This logical relationship allows us to use the `.Parent` and `.Ancestors` methods to traverse the site structure.
+
+For example, use the `.Ancestors` method to render breadcrumb navigation.
+
+{{< code file=layouts/partials/breadcrumb.html >}}
+<nav aria-label="breadcrumb" class="breadcrumb">
+ <ol>
+ {{ range .Ancestors.Reverse }}
+ <li>
+ <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+ </li>
+ {{ end }}
+ <li class="active">
+ <a aria-current="page" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+ </li>
+ </ol>
+</nav>
+{{< /code >}}
+
+With this CSS:
+
+```css
+.breadcrumb ol {
+ padding-left: 0;
+}
+
+.breadcrumb li {
+ display: inline;
+}
+
+.breadcrumb li:not(:last-child)::after {
+ content: "»";
+}
+```
+
+Hugo renders this, where each breadcrumb is a link to the corresponding page:
+
+```text
+Home » Products » Product 1 » Benefits » Benefit 1
+```
+
+[archetype]: /content-management/archetypes/
+[content type]: /content-management/types/
+[directory structure]: /getting-started/directory-structure/
+[section templates]: /templates/types/#section
+[leaf bundles]: /content-management/page-bundles/#leaf-bundles
+[branch bundles]: /content-management/page-bundles/#branch-bundles
--- /dev/null
- Use these embedded shortcodes as needed.
-
- ### comment
-
- {{< new-in "0.137.1" >}}
-
- {{% note %}}
- To override Hugo's embedded `comment` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl comment %}}
- {{% /note %}}
-
- Use the `comment` shortcode to include comments in your Markdown. Hugo excludes the encapsulated text when rendering your site.
-
- Example usage:
-
- ```text
- {{%/* comment */%}} TODO: rewrite the paragraph below. {{%/* /comment */%}}
- ```
-
- Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
-
- ### details
-
- {{< new-in 0.140.0 >}}
-
- {{% note %}}
- To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl details %}}
- {{% /note %}}
-
- Use the `details` shortcode to create a `details` HTML element. For example:
-
- ```text
- {{</* details summary="See the details" */>}}
- This is a **bold** word.
- {{</* /details */>}}
- ```
-
- Hugo renders this to:
-
- ```html
- <details>
- <summary>See the details</summary>
- <p>This is a <strong>bold</strong> word.</p>
- </details>
- ```
-
- The `details` shortcode accepts these named arguments:
-
- summary
- : (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
-
- open
- : (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
-
- class
- : (`string`) The value of the element's `class` attribute.
-
- name
- : (`string`) The value of the element's `name` attribute.
-
- title
- : (`string`) The value of the element's `title` attribute.
-
- ### figure
-
- {{% note %}}
- To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl figure %}}
- {{% /note %}}
-
- The `figure` shortcode can use the following named arguments:
-
- src
- : URL of the image to be displayed.
-
- link
- : If the image needs to be hyperlinked, URL of the destination.
-
- target
- : Optional `target` attribute for the URL if `link` argument is set.
-
- rel
- : Optional `rel` attribute for the URL if `link` argument is set.
-
- alt
- : Alternate text for the image if the image cannot be displayed.
-
- title
- : Image title.
-
- caption
- : Image caption. Markdown within the value of `caption` will be rendered.
-
- class
- : `class` attribute of the HTML `figure` tag.
-
- height
- : `height` attribute of the image.
-
- width
- : `width` attribute of the image.
-
- loading
- : `loading` attribute of the image.
-
- attr
- : Image attribution text. Markdown within the value of `attr` will be rendered.
-
- attrlink
- : If the attribution text needs to be hyperlinked, URL of the destination.
-
- Example usage:
-
- ```text
- {{</* figure src="elephant.jpg" title="An elephant at sunset" */>}}
- ```
-
- Rendered:
-
- ```html
- <figure>
- <img src="elephant.jpg">
- <figcaption><h4>An elephant at sunset</h4></figcaption>
- </figure>
- ```
-
- ### gist
-
- {{% note %}}
- To override Hugo's embedded `gist` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl gist %}}
- {{% /note %}}
-
- To display a GitHub [gist] with this URL:
-
- [gist]: https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists
-
- ```text
- https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
- ```
-
- Include this in your Markdown:
-
- ```text
- {{</* gist user 50a7482715eac222e230d1e64dd9a89b */>}}
- ```
-
- This will display all files in the gist alphabetically by file name.
-
- {{< gist jmooring 23932424365401ffa5e9d9810102a477 >}}
-
- To display a specific file within the gist:
-
- ```text
- {{</* gist user 23932424365401ffa5e9d9810102a477 list.html */>}}
- ```
-
- Rendered:
-
- {{< gist jmooring 23932424365401ffa5e9d9810102a477 list.html >}}
-
- ### highlight
-
- {{% note %}}
- To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl highlight %}}
- {{% /note %}}
-
- To display a highlighted code sample:
-
- ```text
- {{</* highlight go-html-template */>}}
- {{ range .Pages }}
- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
- {{ end }}
- {{</* /highlight */>}}
- ```
-
- Rendered:
-
- {{< highlight go-html-template >}}
- {{ range .Pages }}
- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
- {{ end }}
- {{< /highlight >}}
-
- To specify one or more [highlighting options], include a quotation-encapsulated, comma-separated list:
-
- [highlighting options]: /functions/transform/highlight/
-
- ```text
- {{</* highlight go-html-template "lineNos=inline, lineNoStart=42" */>}}
- {{ range .Pages }}
- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
- {{ end }}
- {{</* /highlight */>}}
- ```
-
- Rendered:
-
- {{< highlight go-html-template "lineNos=inline, lineNoStart=42" >}}
- {{ range .Pages }}
- <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
- {{ end }}
- {{< /highlight >}}
-
- ### instagram
-
- {{% note %}}
- To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl instagram %}}
- {{% /note %}}
-
- To display an Instagram post with this URL:
-
- ```text
- https://www.instagram.com/p/CxOWiQNP2MO/
- ```
-
- Include this in your Markdown:
-
- ```text
- {{</* instagram CxOWiQNP2MO */>}}
- ```
-
- Rendered:
-
- {{< instagram CxOWiQNP2MO >}}
-
- ### param
-
- {{% note %}}
- To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl param %}}
- {{% /note %}}
-
- The `param` shortcode renders a parameter from the page's front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
-
- Example usage:
-
- ```text
- {{</* param testparam */>}}
- ```
-
- Access nested values by [chaining] the [identifiers]:
-
- [chaining]: /getting-started/glossary/#chain
- [identifiers]: /getting-started/glossary/#identifier
-
- ```text
- {{</* param my.nested.param */>}}
- ```
-
- ### qr
-
- {{% note %}}
- To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl qr %}}
- {{% /note %}}
-
- The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
-
- [QR code]: https://en.wikipedia.org/wiki/QR_code
-
- Use the self-closing syntax to pass the text as an argument:
-
- ```text
- {{</* qr text="https://gohugo.io" /*/>}}
- ```
-
- Or insert the text between the opening and closing tags:
-
- ```text
- {{</* qr */>}}
- https://gohugo.io
- {{</* /qr */>}}
- ```
-
- Both of the above produce this image:
-
- {{< qr text="https://gohugo.io" class="qrcode" />}}
-
- To create a QR code for a phone number:
-
- ```text
- {{</* qr text="tel:+12065550101" /*/>}}
- ```
-
- {{< qr text="tel:+12065550101" class="qrcode" />}}
-
- To create a QR code containing contact information in the [vCard] format:
-
- [vCard]: https://en.wikipedia.org/wiki/VCard
-
- ```text
- {{</* qr level="low" scale=2 alt="QR code of vCard for John Smith" */>}}
- BEGIN:VCARD
- VERSION:2.1
- N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
- FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
- ORG;CHARSET=UTF-8:ABC Widgets
- TITLE;CHARSET=UTF-8:Vice President Engineering
- TEL;TYPE=WORK:+12065550101
- EMAIL;TYPE=WORK:jsmith@example.org
- END:VCARD
- {{</* /qr */>}}
- ```
-
- {{< qr level="low" scale=2 alt="QR code of vCard for John Smith" class="qrcode" >}}
- BEGIN:VCARD
- VERSION:2.1
- N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
- FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
- ORG;CHARSET=UTF-8:ABC Widgets
- TITLE;CHARSET=UTF-8:Vice President Engineering
- TEL;TYPE=WORK:+12065550101
- EMAIL;TYPE=WORK:jsmith@example.org
- END:VCARD
- {{< /qr >}}
-
- Internally this shortcode calls the `images.QR` function. Please read the [related documentation] for implementation details and guidance.
-
- [related documentation]: /functions/images/qr/
-
- The `qr` shortcode accepts these named arguments:
-
- text
- : (`string`) The text to encode, falling back to the text between the opening and closing shortcode tags.
-
- level
- : (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
-
- scale
- : (`int`) The number of image pixels per QR code module. Must be greater than or equal to 2. Default is `4`.
-
- targetDir
- : (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image.
-
- [`publishDir`]: /getting-started/configuration/#publishdir
-
- alt
- : (`string`) The `alt` attribute of the `img` element.
-
- class
- : (`string`) The `class` attribute of the `img` element.
-
- id
- : (`string`) The `id` attribute of the `img` element.
-
- title
- : (`string`) The `title` attribute of the `img` element.
-
- ### ref
-
- {{% note %}}
- To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- Always use the `{{%/* */%}}` notation when calling this shortcode.
-
- [source code]: {{% eturl ref %}}
- {{% /note %}}
-
- The `ref` shortcode returns the permalink of the given page reference.
-
- Example usage:
-
- ```text
- [Post 1]({{%/* ref "/posts/post-1" */%}})
- [Post 1]({{%/* ref "/posts/post-1.md" */%}})
- [Post 1]({{%/* ref "/posts/post-1#foo" */%}})
- [Post 1]({{%/* ref "/posts/post-1.md#foo" */%}})
- ```
-
- Rendered:
-
- ```html
- <a href="http://example.org/posts/post-1/">Post 1</a>
- <a href="http://example.org/posts/post-1/">Post 1</a>
- <a href="http://example.org/posts/post-1/#foo">Post 1</a>
- <a href="http://example.org/posts/post-1/#foo">Post 1</a>
- ```
-
- ### relref
-
- {{% note %}}
- To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- Always use the `{{%/* */%}}` notation when calling this shortcode.
-
- [source code]: {{% eturl relref %}}
- {{% /note %}}
-
- The `relref` shortcode returns the permalink of the given page reference.
-
- Example usage:
-
- ```text
- [Post 1]({{%/* relref "/posts/post-1" */%}})
- [Post 1]({{%/* relref "/posts/post-1.md" */%}})
- [Post 1]({{%/* relref "/posts/post-1#foo" */%}})
- [Post 1]({{%/* relref "/posts/post-1.md#foo" */%}})
- ```
-
- Rendered:
-
- ```html
- <a href="/posts/post-1/">Post 1</a>
- <a href="/posts/post-1/">Post 1</a>
- <a href="/posts/post-1/#foo">Post 1</a>
- <a href="/posts/post-1/#foo">Post 1</a>
- ```
-
- ### twitter
-
- {{% note %}}
- To override Hugo's embedded `twitter` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- You may call the `twitter` shortcode by using its `tweet` alias.
-
- [source code]: {{% eturl twitter %}}
- {{% /note %}}
-
- To display a Twitter post with this URL:
-
- ```txt
- https://x.com/SanDiegoZoo/status/1453110110599868418
- ```
-
- Include this in your Markdown:
-
- ```text
- {{</* twitter user="SanDiegoZoo" id="1453110110599868418" */>}}
- ```
-
- Rendered:
-
- {{< twitter user="SanDiegoZoo" id="1453110110599868418" >}}
-
- ### vimeo
-
- {{% note %}}
- To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl vimeo %}}
- {{% /note %}}
-
- To display a Vimeo video with this URL:
-
- ```text
- https://vimeo.com/channels/staffpicks/55073825
- ```
-
- Include this in your Markdown:
-
- ```text
- {{</* vimeo 55073825 */>}}
- ```
-
- Rendered:
-
- {{< vimeo 55073825 >}}
-
- {{% note %}}
- If you want to further customize the visual styling, add a `class` argument when calling the shortcode. The new `class` will be added to the `<div>` that wraps the `<iframe>` *and* will remove the inline styles. Note that you will need to call the `id` as a named argument as well. You can also give the vimeo video a descriptive title with `title`.
-
- ```go
- {{</* vimeo id="146022717" class="my-vimeo-wrapper-class" title="My vimeo video" */>}}
- ```
- {{% /note %}}
-
- ### youtube
-
- {{% note %}}
- To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
-
- [source code]: {{% eturl youtube %}}
- {{% /note %}}
-
- To display a YouTube video with this URL:
-
- ```text
- https://www.youtube.com/watch?v=0RKpf3rK57I
- ```
-
- Include this in your Markdown:
-
- ```text
- {{</* youtube 0RKpf3rK57I */>}}
- ```
-
- Rendered:
-
- {{< youtube 0RKpf3rK57I >}}
-
- The youtube shortcode accepts these named arguments:
-
- id
- : (`string`) The video `id`. Optional if the `id` is provided as a positional argument as shown in the example above.
-
- allowFullScreen
- {{< new-in 0.125.0 >}}
- : (`bool`) Whether the `iframe` element can activate full screen mode. Default is `true`.
-
- autoplay
- {{< new-in 0.125.0 >}}
- : (`bool`) Whether to automatically play the video. Forces `mute` to `true`. Default is `false`.
-
- class
- : (`string`) The `class` attribute of the wrapping `div` element. When specified, removes the `style` attributes from the `iframe` element and its wrapping `div` element.
-
- controls
- {{< new-in 0.125.0 >}}
- : (`bool`) Whether to display the video controls. Default is `true`.
-
- end
- {{< new-in 0.125.0 >}}
- : (`int`) The time, measured in seconds from the start of the video, when the player should stop playing the video.
-
- loading
- {{< new-in 0.125.0 >}}
- : (`string`) The loading attribute of the `iframe` element, either `eager` or `lazy`. Default is `eager`.
-
- loop
- {{< new-in 0.125.0 >}}
- : (`bool`) Whether to indefinitely repeat the video. Ignores the `start` and `end` arguments after the first play. Default is `false`.
-
- mute
- {{< new-in 0.125.0 >}}
- : (`bool`) Whether to mute the video. Always `true` when `autoplay` is `true`. Default is `false`.
-
- start
- {{< new-in 0.125.0 >}}
- : (`int`) The time, measured in seconds from the start of the video, when the player should start playing the video.
-
- title
- : (`string`) The `title` attribute of the `iframe` element. Defaults to "YouTube video".
-
- Example using some of the above:
-
- ```text
- {{</* youtube id=0RKpf3rK57I start=30 end=60 loading=lazy */>}}
- ```
+---
+title: Shortcodes
+description: Shortcodes are simple snippets inside your content files calling built-in or custom templates.
+categories: [content management]
+keywords: [markdown,content,shortcodes]
+menu:
+ docs:
+ parent: content-management
+ weight: 100
+weight: 100
+toc: true
+aliases: [/extras/shortcodes/]
+testparam: "Hugo Rocks!"
+---
+
+## What a shortcode is
+
+Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video `<iframe>`'s) to Markdown content. We think this contradicts the beautiful simplicity of Markdown's syntax.
+
+Hugo created **shortcodes** to circumvent these limitations.
+
+A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files. If you need the type of drop-in functionality that shortcodes provide but in a template, you most likely want a [partial template][partials] instead.
+
+In addition to cleaner Markdown, shortcodes can be updated any time to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge in your changes. You avoid a possibly complicated search and replace operation.
+
+## Use shortcodes
+
+{{< youtube 2xkNJL4gJ9E >}}
+
+In your content files, a shortcode can be called by calling `{{%/* shortcodename arguments */%}}`. Shortcode arguments are space delimited, and arguments with internal spaces must be quoted.
+
+The first word in the shortcode declaration is always the name of the shortcode. Arguments follow the name. Depending upon how the shortcode is defined, the arguments may be named, positional, or both, although you can't mix argument types in a single call. The format for named arguments models that of HTML with the format `name="value"`.
+
+Some shortcodes use or require closing shortcodes. Again like HTML, the opening and closing shortcodes match (name only) with the closing declaration, which is prepended with a slash.
+
+Here are two examples of paired shortcodes:
+
+```go-html-template
+{{%/* mdshortcode */%}}Stuff to `process` in the *center*.{{%/* /mdshortcode */%}}
+```
+
+```go-html-template
+{{</* highlight go */>}} A bunch of code here {{</* /highlight */>}}
+```
+
+The examples above use two different delimiters, the difference being the `%` character in the first and the `<>` characters in the second.
+
+### Shortcodes with raw string arguments
+
+You can pass multiple lines as arguments to a shortcode by using raw string literals:
+
+```go-html-template
+{{</* myshortcode `This is some <b>HTML</b>,
+and a new line with a "quoted string".` */>}}
+```
+
+### Shortcodes with Markdown
+
+Shortcodes using the `%` as the outer-most delimiter will be fully rendered when sent to the content renderer. This means that the rendered output from a shortcode can be part of the page's table of contents, footnotes, etc.
+
+### Shortcodes without Markdown
+
+The `<` character indicates that the shortcode's inner content does *not* need further rendering. Often shortcodes without Markdown include internal HTML:
+
+```go-html-template
+{{</* myshortcode */>}}<p>Hello <strong>World!</strong></p>{{</* /myshortcode */>}}
+```
+
+### Nested shortcodes
+
+You can call shortcodes within other shortcodes by creating your own templates that leverage the `.Parent` method. `.Parent` allows you to check the context in which the shortcode is being called. See [Shortcode templates][sctemps].
+
+## Embedded shortcodes
+
++See the [shortcodes](/shortcodes/) section.
+
+## Privacy configuration
+
+To learn how to configure your Hugo site to meet the new EU privacy regulation, see [privacy protections].
+
+## Create custom shortcodes
+
+To learn more about creating custom shortcodes, see the [shortcode template documentation].
+
+[privacy protections]: /about/privacy/
+[partials]: /templates/partial/
+[quickstart]: /getting-started/quick-start/
+[sctemps]: /templates/shortcode/
+[shortcode template documentation]: /templates/shortcode/
+[Vimeo]: https://vimeo.com/
+[YouTube Videos]: https://www.youtube.com/
--- /dev/null
- {{% comment %}}
+---
+title: Content summaries
+linkTitle: Summaries
+description: Create and render content summaries.
+categories: [content management]
+keywords: [summaries,abstracts,read more]
+menu:
+ docs:
+ parent: content-management
+ weight: 160
+weight: 160
+toc: true
+aliases: [/content/summaries/,/content-management/content-summaries/]
+---
- {{% /comment %}}
++
+<!-- Do not remove the manual summary divider below. -->
+<!-- If you do, you will break its first literal usage on this page. -->
++
+<!--more-->
+
+You can define a summary manually, in front matter, or automatically. A manual summary takes precedence over a front matter summary, and a front matter summary takes precedence over an automatic summary.
+
+Review the [comparison table](#comparison) below to understand the characteristics of each summary type.
+
+## Manual summary
+
+Use a `<!--more-->` divider to indicate the end of the summary. Hugo will not render the summary divider itself.
+
+{{< code file=content/example.md >}}
++++
+title: 'Example'
+date: 2024-05-26T09:10:33-07:00
++++
+
+This is the first paragraph.
+
+<!--more-->
+
+This is the second paragraph.
+{{< /code >}}
+
+When using the Emacs Org Mode [content format], use a `# more` divider to indicate the end of the summary.
+
+[content format]: /content-management/formats/
+
+## Front matter summary
+
+Use front matter to define a summary independent of content.
+
+{{< code file=content/example.md >}}
++++
+title: 'Example'
+date: 2024-05-26T09:10:33-07:00
+summary: 'This summary is independent of the content.'
++++
+
+This is the first paragraph.
+
+This is the second paragraph.
+{{< /code >}}
+
+## Automatic summary
+
+If you do not define the summary manually or in front matter, Hugo automatically defines the summary based on the [`summaryLength`] in your site configuration.
+
+[`summaryLength`]: /getting-started/configuration/#summarylength
+
+{{< code file=content/example.md >}}
++++
+title: 'Example'
+date: 2024-05-26T09:10:33-07:00
++++
+
+This is the first paragraph.
+
+This is the second paragraph.
+
+This is the third paragraph.
+{{< /code >}}
+
+For example, with a `summaryLength` of 7, the automatic summary will be:
+
+```html
+<p>This is the first paragraph.</p>
+<p>This is the second paragraph.</p>
+```
+
+## Comparison
+
+Each summary type has different characteristics:
+
+Type|Precedence|Renders markdown|Renders shortcodes|Wraps single lines with `<p>`
+:--|:-:|:-:|:-:|:-:
+Manual|1|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:
+Front matter|2|:heavy_check_mark:|:x:|:x:
+Automatic|3|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:
+
+## Rendering
+
+Render the summary in a template by calling the [`Summary`] method on a `Page` object.
+
+[`Summary`]: /methods/page/summary
+
+```go-html-template
+{{ range site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ <div class="summary">
+ {{ .Summary }}
+ {{ if .Truncated }}
+ <a href="{{ .RelPermalink }}">More ...</a>
+ {{ end }}
+ </div>
+{{ end }}
+```
+
+## Alternative
+
+Instead of calling the `Summary` method on a `Page` object, use the [`strings.Truncate`] function for granular control of the summary length. For example:
+
+[`strings.Truncate`]: /functions/strings/truncate/
+
+```go-html-template
+{{ range site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ <div class="summary">
+ {{ .Content | strings.Truncate 42 }}
+ </div>
+{{ end }}
+```
--- /dev/null
- Highlighting is carried out via the built-in [`highlight` shortcode](/content-management/shortcodes/#highlight). It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.
+---
+title: Syntax highlighting
+description: Hugo comes with really fast syntax highlighting from Chroma.
+categories: [content management]
+keywords: [highlighting,chroma,code blocks,syntax]
+menu:
+ docs:
+ parent: content-management
+ weight: 250
+weight: 250
+toc: true
+aliases: [/extras/highlighting/,/extras/highlight/,/tools/syntax-highlighting/]
+---
+
+Hugo uses [Chroma](https://github.com/alecthomas/chroma) as its code highlighter; it is built in Go and is really, really fast.
+
+## Configure syntax highlighter
+
+See [Configure Highlight](/getting-started/configuration-markup#highlight).
+
+## Generate syntax highlighter CSS
+
+If you run with `markup.highlight.noClasses=false` in your site configuration, you need a style sheet. The style sheet will override the style specified in [`markup.highlight.style`](/functions/transform/highlight/#options).
+
+You can generate one with Hugo:
+
+```sh
+hugo gen chromastyles --style=monokai > syntax.css
+```
+
+Run `hugo gen chromastyles -h` for more options. See https://xyproto.github.io/splash/docs/ for a gallery of available styles.
+
+## Highlight shortcode
+
++Highlighting is carried out via the built-in [`highlight` shortcode](/shortcodes/highlight/). It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.
+
+Options:
+
+* `linenos`: configure line numbers. Valid values are `true`, `false`, `table`, or `inline`. `false` will turn off line numbers if it's configured to be on in site configuration. `table` will give copy-and-paste friendly code blocks.
+* `hl_lines`: lists a set of line numbers or line number ranges to be highlighted.
+* `linenostart=199`: starts the line number count from 199.
+* `anchorlinenos`: Configure anchors on line numbers. Valid values are `true` or `false`;
+* `lineanchors`: Configure a prefix for the anchors on line numbers. Will be suffixed with `-`, so linking to the line number 1 with the option `lineanchors=prefix` adds the anchor `prefix-1` to the page.
+* `hl_inline` Highlight inside a `<code>` (inline HTML element) tag. Valid values are `true` or `false`. The `code` tag will get a class with name `code-inline`.
+
+### Example: highlight shortcode
+
+```go-html-template
+{{</* highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" */>}}
+// ... code
+{{</* / highlight */>}}
+```
+
+Gives this:
+
+{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
+// GetTitleFunc returns a func that can be used to transform a string to
+// title case.
+//
+// The supported styles are
+//
+// - "Go" (strings.Title)
+// - "AP" (see https://www.apstylebook.com/)
+// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
+//
+// If an unknown or empty style is provided, AP style is what you get.
+func GetTitleFunc(style string) func(s string) string {
+ switch strings.ToLower(style) {
+ case "go":
+ return strings.Title
+ case "chicago":
+ return transform.NewTitleConverter(transform.ChicagoStyle)
+ default:
+ return transform.NewTitleConverter(transform.APStyle)
+ }
+}
+{{< / highlight >}}
+
+## Highlight Hugo/Go template code
+
+For highlighting Hugo/Go template code on your page, add `/*` after the opening double curly braces and `*/` before closing curly braces.
+
+``` go
+{{</*/* myshortcode */*/>}}
+```
+
+Gives this:
+
+``` go
+{{</* myshortcode */>}}
+```
+
+## Highlight template function
+
+See [Highlight](/functions/transform/highlight/).
+
+## Highlighting in code fences
+
+Highlighting in code fences is enabled by default.
+
+````txt
+```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199}
+// ... code
+```
+````
+
+Gives this:
+
+```go {linenos=table,hl_lines=[8,"15-17"],linenostart=199}
+// GetTitleFunc returns a func that can be used to transform a string to
+// title case.
+//
+// The supported styles are
+//
+// - "Go" (strings.Title)
+// - "AP" (see https://www.apstylebook.com/)
+// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
+//
+// If an unknown or empty style is provided, AP style is what you get.
+func GetTitleFunc(style string) func(s string) string {
+ switch strings.ToLower(style) {
+ case "go":
+ return strings.Title
+ case "chicago":
+ return transform.NewTitleConverter(transform.ChicagoStyle)
+ default:
+ return transform.NewTitleConverter(transform.APStyle)
+ }
+}
+```
+
+The options are the same as in the [highlighting shortcode](/content-management/syntax-highlighting/#highlight-shortcode), including `linenos=false`, but note the slightly different Markdown attribute syntax.
+
+## List of Chroma highlighting languages
+
+The full list of Chroma lexers and their aliases (which is the identifier used in the `highlight` template func or when doing highlighting in code fences):
+
+{{< chroma-lexers >}}
--- /dev/null
-
+---
+title: URL management
+description: Control the structure and appearance of URLs through front matter entries and settings in your site configuration.
+categories: [content management]
+keywords: [aliases,redirects,permalinks,urls]
+menu:
+ docs:
+ parent: content-management
+ weight: 180
+weight: 180
+toc: true
+aliases: [/extras/permalinks/,/extras/aliases/,/extras/urls/,/doc/redirects/,/doc/alias/,/doc/aliases/]
+---
+
+## Overview
+
+By default, when Hugo renders a page, the resulting URL matches the file path within the `content` directory. For example:
+
+```text
+content/posts/post-1.md → https://example.org/posts/post-1/
+```
+
+You can change the structure and appearance of URLs with front matter values and site configuration options.
+
+## Front matter
+
+### `slug`
+
+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 >}}
+title = 'My First Post'
+slug = 'my-first-post'
+{{< /code-toggle >}}
+
+The resulting URL will be:
+
+```text
+https://example.org/posts/my-first-post/
+```
+
+### `url`
+
+Set the `url` in front matter to override the entire path. Use this with either regular pages or section pages.
+
+{{% 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 %}}
+
+If you set both `slug` and `url` in front matter, the `url` value takes precedence.
+
+#### Include a colon
+
+{{< new-in 0.136.0 >}}
+
+If you need to include a colon in the `url` front matter field, escape it with backslash characters. Use one backslash if you wrap the string within single quotes, or use two backslashes if you wrap the string within double quotes. With YAML front matter, use a single backslash if you omit quotation marks.
+
+For example, with this front matter:
+
+{{< code-toggle file=content/example.md fm=true >}}
+title: Example
+url: "my\\:example"
+{{< /code-toggle >}}
+
+The resulting URL will be:
+
+```text
+https://example.org/my:example/
+```
+
+As described above, this will fail on Windows because the colon (`:`) is a reserved character.
+
+#### File extensions
+
+With this front matter:
+
+{{< code-toggle file=content/posts/post-1.md fm=true >}}
+title = 'My First Article'
+url = 'articles/my-first-article'
+{{< /code-toggle >}}
+
+The resulting URL will be:
+
+```text
+https://example.org/articles/my-first-article/
+```
+
+If you include a file extension:
+
+{{< code-toggle file=content/posts/post-1.md fm=true >}}
+title = 'My First Article'
+url = 'articles/my-first-article.html'
+{{< /code-toggle >}}
+
+The resulting URL will be:
+
+```text
+https://example.org/articles/my-first-article.html
+```
+
+#### Leading slashes
+
+With monolingual sites, `url` values with or without a leading slash are relative to the [`baseURL`]. With multilingual sites, `url` values with a leading slash are relative to the `baseURL`, and `url` values without a leading slash are relative to the `baseURL` plus the language prefix.
+
+[`baseURL`]: /getting-started/configuration/#baseurl
+
+Site type|Front matter `url`|Resulting URL
+:--|:--|:--
+monolingual|`/about`|`https://example.org/about/`
+monolingual|`about`|`https://example.org/about/`
+multilingual|`/about`|`https://example.org/about/`
+multilingual|`about`|`https://example.org/de/about/`
+
+#### Permalinks tokens in front matter
+
+{{< new-in "0.131.0" >}}
+
+You can also use [tokens](#tokens) when setting the `url` value. This is typically used in `cascade` sections:
+
+{{< code-toggle file=content/foo/bar/_index.md fm=true >}}
+title ="Bar"
+[[cascade]]
+ url = "/:sections[last]/:slug"
+{{< /code-toggle >}}
+
- To override Hugo's embedded `alias` template, copy the [source code] to a file with the same name in the layouts directory. The template receives the following context:
+## Site configuration
+
+### Permalinks
+
+In your site configuration, define a URL pattern for each top-level section. Each URL pattern can target a given language and/or page kind.
+
+Front matter `url` values override the URL patterns defined in the `permalinks` section of your site configuration.
+
+#### Monolingual examples {#permalinks-monolingual-examples}
+
+With this content structure:
+
+```text
+content/
+├── posts/
+│ ├── bash-in-slow-motion.md
+│ └── tls-in-a-nutshell.md
+├── tutorials/
+│ ├── git-for-beginners.md
+│ └── javascript-bundling-with-hugo.md
+└── _index.md
+```
+
+Render tutorials under "training", and render the posts under "articles" with a date-base hierarchy:
+
+{{< code-toggle file=hugo >}}
+[permalinks.page]
+posts = '/articles/:year/:month/:slug/'
+tutorials = '/training/:slug/'
+[permalinks.section]
+posts = '/articles/'
+tutorials = '/training/'
+{{< /code-toggle >}}
+
+The structure of the published site will be:
+
+```text
+public/
+├── articles/
+│ ├── 2023/
+│ │ ├── 04/
+│ │ │ └── bash-in-slow-motion/
+│ │ │ └── index.html
+│ │ └── 06/
+│ │ └── tls-in-a-nutshell/
+│ │ └── index.html
+│ └── index.html
+├── training/
+│ ├── git-for-beginners/
+│ │ └── index.html
+│ ├── javascript-bundling-with-hugo/
+│ │ └── index.html
+│ └── index.html
+└── index.html
+```
+
+To create a date-based hierarchy for regular pages in the content root:
+
+{{< code-toggle file=hugo >}}
+[permalinks.page]
+"/" = "/:year/:month/:slug/"
+{{< /code-toggle >}}
+
+Use the same approach with taxonomy terms. For example, to omit the taxonomy segment of the URL:
+
+{{< code-toggle file=hugo >}}
+[permalinks.term]
+'tags' = '/:slug/'
+{{< /code-toggle >}}
+
+#### Multilingual example {#permalinks-multilingual-example}
+
+Use the `permalinks` configuration as a component of your localization strategy.
+
+With this content structure:
+
+```text
+content/
+├── en/
+│ ├── books/
+│ │ ├── les-miserables.md
+│ │ └── the-hunchback-of-notre-dame.md
+│ └── _index.md
+└── es/
+ ├── books/
+ │ ├── les-miserables.md
+ │ └── the-hunchback-of-notre-dame.md
+ └── _index.md
+```
+
+And this site configuration:
+
+{{< code-toggle file=hugo >}}
+defaultContentLanguage = 'en'
+defaultContentLanguageInSubdir = true
+
+[languages.en]
+contentDir = 'content/en'
+languageCode = 'en-US'
+languageDirection = 'ltr'
+languageName = 'English'
+weight = 1
+
+[languages.en.permalinks.page]
+books = "/books/:slug/"
+
+[languages.en.permalinks.section]
+books = "/books/"
+
+[languages.es]
+contentDir = 'content/es'
+languageCode = 'es-ES'
+languageDirection = 'ltr'
+languageName = 'Español'
+weight = 2
+
+[languages.es.permalinks.page]
+books = "/libros/:slug/"
+
+[languages.es.permalinks.section]
+books = "/libros/"
+{{< /code-toggle >}}
+
+The structure of the published site will be:
+
+```text
+public/
+├── en/
+│ ├── books/
+│ │ ├── les-miserables/
+│ │ │ └── index.html
+│ │ ├── the-hunchback-of-notre-dame/
+│ │ │ └── index.html
+│ │ └── index.html
+│ └── index.html
+├── es/
+│ ├── libros/
+│ │ ├── les-miserables/
+│ │ │ └── index.html
+│ │ ├── the-hunchback-of-notre-dame/
+│ │ │ └── index.html
+│ │ └── index.html
+│ └── index.html
+└── index.html
+````
+
+#### Tokens
+
+Use these tokens when defining the URL pattern. You can also use these tokens when setting the [`url`](#permalinks-tokens-in-front-matter) value in front matter.
+
+`:year`
+: The 4-digit year as defined in the front matter `date` field.
+
+`:month`
+: The 2-digit month as defined in the front matter `date` field.
+
+`:monthname`
+: The name of the month as defined in the front matter `date` field.
+
+`:day`
+: The 2-digit day as defined in the front matter `date` field.
+
+`:weekday`
+: The 1-digit day of the week as defined in the front matter `date` field (Sunday = 0).
+
+`:weekdayname`
+: The name of the day of the week as defined in the front matter `date` field.
+
+`:yearday`
+: The 1- to 3-digit day of the year as defined in the front matter `date` field.
+
+`:section`
+: The content's section.
+
+`:sections`
+: The content's sections hierarchy. You can use a selection of the sections using _slice syntax_: `:sections[1:]` includes all but the first, `:sections[:last]` includes all but the last, `:sections[last]` includes only the last, `:sections[1:2]` includes section 2 and 3. Note that this slice access will not throw any out-of-bounds errors, so you don't have to be exact.
+
+`:title`
+: The title as defined in front matter, else the automatic title. Hugo generates titles automatically for section, taxonomy, and term pages that are not backed by a file.
+
+`:slug`
+: The slug as defined in front matter, else the title as defined in front matter, else the automatic title. Hugo generates titles automatically for section, taxonomy, and term pages that are not backed by a file.
+
+`:filename`
+: The content's file name without extension, applicable to the `page` page kind.
+
+`:slugorfilename`
+: The slug as defined in front matter, else the content's file name without extension, applicable to the `page` page kind.
+
+For time-related values, you can also use the layout string components defined in Go's [time package]. For example:
+
+[time package]: https://pkg.go.dev/time#pkg-constants
+
+{{< code-toggle file=hugo >}}
+permalinks:
+ posts: /:06/:1/:2/:title/
+{{< /code-toggle >}}
+
+### Appearance
+
+The appearance of a URL is either ugly or pretty.
+
+Type|Path|URL
+:--|:--|:--
+ugly|content/about.md|`https://example.org/about.html`
+pretty|content/about.md|`https://example.org/about/`
+
+By default, Hugo produces pretty URLs. To generate ugly URLs, change your site configuration:
+
+{{< code-toggle file=hugo >}}
+uglyURLs = true
+{{< /code-toggle >}}
+
+You can also enable uglyURLs by section. For example, with a site that contains sections for books and films:
+
+{{< code-toggle file=hugo >}}
+[uglyURLs]
+books = true
+films = false
+{{< /code-toggle >}}
+
+### Post-processing
+
+Hugo provides two mutually exclusive configuration options to alter URLs _after_ it renders a page.
+
+#### Canonical URLs
+
+{{% 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 %}}
+
+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.
+
+```html
+<a href="/about"> → <a href="https://example.org/about/">
+<img src="/a.gif"> → <img src="https://example.org/a.gif">
+```
+
+This is an imperfect, brute force approach that can affect content as well as HTML attributes. As noted above, this is a legacy configuration option that will likely be removed in a future release.
+
+To enable:
+
+{{< code-toggle file=hugo >}}
+canonifyURLs = true
+{{< /code-toggle >}}
+
+#### Relative URLs
+
+{{% note %}}
+Do not enable this option unless you are creating a serverless site, navigable via the file system.
+{{% /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.
+
+For example, when rendering `content/posts/post-1`:
+
+```html
+<a href="/about"> → <a href="../../about">
+<img src="/a.gif"> → <img src="../../a.gif">
+```
+
+This is an imperfect, brute force approach that can affect content as well as HTML attributes. As noted above, do not enable this option unless you are creating a serverless site.
+
+To enable:
+
+{{< code-toggle file=hugo >}}
+relativeURLs = true
+{{< /code-toggle >}}
+
+## Aliases
+
+Create redirects from old URLs to new URLs with aliases:
+
+- An alias with a leading slash is relative to the `baseURL`
+- An alias without a leading slash is relative to the current directory
+
+### Examples {#alias-examples}
+
+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 >}}
+aliases = ['/posts/previous-file-name']
+{{< /code-toggle >}}
+
+Each of these directory-relative aliases is equivalent to the site-relative alias above:
+
+- `previous-file-name`
+- `./previous-file-name`
+- `../posts/previous-file-name`
+
+You can create more than one alias to the current page:
+
+{{< 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 >}}
+aliases = ['/de/posts/previous-file-name']
+{{< /code-toggle >}}
+
+### How aliases work
+
+Using the first example above, Hugo generates the following site structure:
+
+```text
+public/
+├── posts/
+│ ├── new-file-name/
+│ │ └── index.html
+│ ├── previous-file-name/
+│ │ └── index.html
+│ └── index.html
+└── index.html
+```
+
+The alias from the previous URL to the new URL is a client-side redirect:
+
+{{< code file=posts/previous-file-name/index.html >}}
+<!DOCTYPE html>
+<html lang="en-us">
+ <head>
+ <title>https://example.org/posts/new-file-name/</title>
+ <link rel="canonical" href="https://example.org/posts/new-file-name/">
+ <meta name="robots" content="noindex">
+ <meta charset="utf-8">
+ <meta http-equiv="refresh" content="0; url=https://example.org/posts/new-file-name/">
+ </head>
+</html>
+{{< /code >}}
+
+Collectively, the elements in the `head` section:
+
+- Tell search engines that the new URL is canonical
+- Tell search engines not to index the previous URL
+- Tell the browser to redirect to the new URL
+
+Hugo renders alias files before rendering pages. A new page with the previous file name will overwrite the alias, as expected.
+
+### Customize
+
++To override Hugo's embedded `alias` template, copy the [source code] to a file with the same name in the `layouts` directory. The template receives the following context:
+
+Permalink
+: The link to the page being aliased.
+
+Page
+: The Page data for the page being aliased.
+
+[source code]: {{% eturl alias %}}
--- /dev/null
- [documentation]: https://gohugo.io/documentation
+---
+title: Development
+description: Contribute to the development of Hugo.
+categories: [contribute]
+keywords: [development]
+menu:
+ docs:
+ parent: contribute
+ weight: 20
+weight: 20
+toc: true
+---
+
+## Introduction
+
+You can contribute to the Hugo project by:
+
+- Answering questions on the [forum]
+- Improving the [documentation]
+- Monitoring the [issue queue]
+- Creating or improving [themes]
+- Squashing [bugs]
+
+Please submit documentation issues and pull requests to the [documentation repository].
+
+If you have an idea for an enhancement or new feature, create a new topic on the [forum] in the "Feature" category. This will help you to:
+
+- Determine if the capability already exists
+- Measure interest
+- Refine the concept
+
+If there is sufficient interest, [create a proposal]. Do not submit a pull request until the project lead accepts the proposal.
+
+For a complete guide to contributing to Hugo, see the [Contribution Guide].
+
+[bugs]: https://github.com/gohugoio/hugo/issues?q=is%3Aopen+is%3Aissue+label%3ABug
+[contributing]: CONTRIBUTING.md
+[create a proposal]: https://github.com/gohugoio/hugo/issues/new?labels=Proposal%2C+NeedsTriage&template=feature_request.md
+[documentation repository]: https://github.com/gohugoio/hugoDocs
- CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@v0.137.1
++[documentation]: /documentation
+[forum]: https://discourse.gohugo.io
+[issue queue]: https://github.com/gohugoio/hugo/issues
+[themes]: https://themes.gohugo.io/
+[contribution guide]: https://github.com/gohugoio/hugo/blob/master/CONTRIBUTING.md
+
+## Prerequisites
+
+To build the extended or extended/deploy edition from source you must:
+
+1. Install [Git]
+1. Install [Go] version 1.23.0 or later
+1. Install a C compiler, either [GCC] or [Clang]
+1. Update your `PATH` environment variable as described in the [Go documentation]
+
+[Clang]: https://clang.llvm.org/
+[GCC]: https://gcc.gnu.org/
+[Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+[Go documentation]: https://go.dev/doc/code#Command
+[Go]: https://go.dev/doc/install
+
+{{% note %}}
+See these [detailed instructions](https://discourse.gohugo.io/t/41370) to install GCC on Windows.
+{{% /note %}}
+
+## GitHub workflow
+
+{{% note %}}
+This section assumes that you have a working knowledge of Go, Git and GitHub, and are comfortable working on the command line.
+{{% /note %}}
+
+Use this workflow to create and submit pull requests.
+
+Step 1
+: Fork the [project repository].
+
+[project repository]: https://github.com/gohugoio/hugo/
+
+Step 2
+: Clone your fork.
+
+Step 3
+: Create a new branch with a descriptive name that includes the corresponding issue number.
+
+For a new feature:
+
+```sh
+git checkout -b feat/implement-some-feature-99999
+```
+
+For a bug fix:
+
+```sh
+git checkout -b fix/fix-some-bug-99999
+```
+
+Step 4
+: Make changes.
+
+Step 5
+: Compile and install.
+
+To compile and install the standard edition:
+
+```text
+go install
+```
+
+To compile and install the extended edition:
+
+```text
+CGO_ENABLED=1 go install -tags extended
+```
+
+To compile and install the extended/deploy edition:
+
+```text
+CGO_ENABLED=1 go install -tags extended,withdeploy
+```
+
+Step 6
+: Test your changes:
+
+```text
+go test ./...
+```
+
+Step 7
+: Commit your changes with a descriptive commit message:
+
+- Provide a summary on the first line, typically 50 characters or less, followed by a blank line.
+- Optionally, provide a detailed description where each line is 80 characters or less, followed by a blank line.
+- Add one or more "Fixes" or "Closes" keywords, each on its own line, referencing the [issues] addressed by this change.
+
+[issues]: https://github.com/gohugoio/hugo/issues
+
+For example:
+
+```sh
+git commit -m "tpl/strings: Create wrap function
+
+The strings.Wrap function wraps a string into one or more lines,
+splitting the string after the given number of characters, but not
+splitting in the middle of a word.
+
+Fixes #99998
+Closes #99999"
+```
+
+See the [commit message guidelines] for details.
+
+[commit message guidelines]: https://github.com/gohugoio/hugo/blob/master/CONTRIBUTING.md#git-commit-message-guidelines
+
+Step 8
+: Push the new branch to your fork of the documentation repository.
+
+Step 9
+: Visit the [project repository] and create a pull request (PR).
+
+Step 10
+: A project maintainer will review your PR and may request changes. You may delete your branch after the maintainer merges your PR.
+
+## Building from source
+
+You can build, install, and test Hugo at any point in its development history. The examples below build and install the extended version of Hugo.
+
+To build and install the latest release:
+
+```sh
+CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest
+```
+
+To build and install a specific release:
+
+```sh
++CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@v0.141.0
+```
+
+To build and install at the latest commit on the master branch:
+
+```sh
+CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@master
+```
+
+To build and install at a specific commit:
+
+```sh
+CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@0851c17
+```
--- /dev/null
- - Use the [note shortcode] instead of blockquotes
+---
+title: Documentation
+description: Help us to improve the documentation by identifying issues and suggesting changes.
+categories: [contribute]
+keywords: [documentation]
+menu:
+ docs:
+ parent: contribute
+ weight: 30
+weight: 30
+toc: true
+aliases: [/contribute/docs/]
+---
+
+## Introduction
+
+We welcome corrections and improvements to the documentation. Please note that the documentation resides in its own repository, separate from the project repository.
+
+For corrections and improvements to the current documentation, please submit issues and pull requests to the [documentation repository].
+
+For documentation related to a new feature, please include the documentation changes when you submit a pull request to the [project repository].
+
+## Guidelines
+
++### Style
++
++Please adhere to Google's [developer documentation style guide].
++
++[developer documentation style guide]: https://developers.google.com/style
++
+### Markdown
+
+Please follow these guidelines:
+
+- Use [ATX] headings, not [setext] headings, levels 2 through 4
+- Use [fenced code blocks], not [indented code blocks]
+- Use hyphens, not asterisks, with unordered [list items]
- ### Style
++- Use the [note shortcode] instead of blockquotes or bold text
+- Do not mix [raw HTML] within Markdown
+- Do not use bold text instead of a heading or description term (`dt`)
+- Remove consecutive blank lines (maximum of two)
+- Remove trailing spaces
+
- Please adhere to Google's [developer documentation style guide].
++### Glossary of terms
+
- [developer documentation style guide]: https://developers.google.com/style
++Each term in the glossary has its own dedicated page located within the `content/en/getting-started/glossary` directory. While these individual glossary pages are not published as standalone web pages during the build process, their content is included in other pages as needed.
+
- #### Terminology
++To link to a term definition on the glossary page, use this custom link syntax:
++
++```text
++[term](g)
++```
++
++Lookups are case-insensitive, ignore formatting, and support both singular and plural forms. For example, all of these variations will link to the same glossary entry:
++
++```text
++[global resource](g)
++[Global Resource](g)
++[Global Resources](g)
++[`Global Resources`](g)
++```
++
++To insert a term definition, use the [`glossary-term`] shortcode:
++
++```text
++{{%/* glossary-term "global resource" */%}}
++```
++
++[glossary of terms]: /getting-started/glossary/
++[`glossary-term`]: #glossary-term
+
- #### Page titles and headings
++### Terminology
+
+Please link to the [glossary of terms] when necessary, and use the terms consistently throughout the documentation. Of special note:
+
+- The term "front matter" is two words unless you are referring to the configuration key
+- The term "home page" is two words
+- The term "website" is one word
+- The term "standalone" is one word, not hyphenated
+- Use the word "map" instead of "dictionary"
+- Use the word "flag" instead of "option" when referring to a command line flag
+- Capitalize the word "Markdown"
+- Hyphenate the term "open-source" when used an adjective.
+
- #### Use active voice with present tense
++Use the [glossary link] (`gl`) shortcode to insert a link to the glossary entry for the given term, and use the [glossary term] (`gt`) shortcode to insert the definition of the given term.
++
++### Page titles and headings
+
+Please follow these guidelines for page titles and headings:
+
+- Use sentence-style capitalization
+- Avoid formatted strings in headings and page titles
+- Shorter is better
+
- No → This will cause Hugo to generate HTML files in the public directory.\
- Yes → Hugo generates HTML files in the public directory.
++### Use active voice with present tense
+
+In software documentation, passive voice is unavoidable in some cases. Please use active voice when possible.
+
+No → With Hugo you can build a static site.\
+Yes → Build a static site with Hugo.
+
- #### Use second person instead of third person
++No → This will cause Hugo to generate HTML files in the `public` directory.\
++Yes → Hugo generates HTML files in the `public` directory.
+
- #### Avoid adverbs when possible
++### Use second person instead of third person
+
+No → Users should exercise caution when deleting files.\
+Better → You must be cautious when deleting files.\
+Best → Be cautious when deleting files.
+
- #### Level 6 headings
++### Avoid adverbs when possible
+
+No → Hugo is extremely fast.\
+Yes → Hugo is fast.
+
+{{% note %}}
+"It's an adverb, Sam. It's a lazy tool of a weak mind." (Outbreak, 1995).
+{{% /note %}}
+
- #### Function and method descriptions
++### Level 6 headings
+
+Level 6 headings are styled as `dt` elements. This was implemented to support a [glossary] with linkable terms.
+
+[glossary]: /getting-started/glossary/
+
- #### Miscellaneous
++### Function and method descriptions
+
+When adding a page to the [functions] or [methods] section, begin the description with the word "Returns". With functions and methods that return a boolean value, begin the description with the phrase "Reports whether".
+
+For example:
+
+- `Returns the URL aliases as defined in front matter.`
+- `Reports whether the given page is in the given section.`
+
+[functions]: /functions
+[methods]: /methods
+
- Rendered:
-
++### Directory names, file names, and file paths
++
++Enclose directory names, file names, and file paths within backticks, with the following exceptions:
++
++- Page titles
++- Section headings (h1-h6)
++- Definition list terms
++- The description field in front matter
++
++### Miscellaneous
+
+Other guidelines to consider:
+
+- Do not place list items directly under a heading; include an introductory sentence or phrase before the list.
+- Avoid use of **bold** text. Use the [note shortcode] to draw attention to important content.
+- Do not place description terms (`dt`) within backticks unless required for syntactic clarity.
+- Do not use Hugo's `ref` or `relref` shortcodes. We use a link render hook to resolve and validate link destinations, including fragments.
+- Shorter is better. If there is more than one way to do something, describe the current best practice. For example, avoid phrases such as "you can also do..." and "in older versions you had to..."
+- When including code samples, use short snippets that demonstrate the concept.
+- The Hugo user community is global; use [basic english](https://simple.wikipedia.org/wiki/Basic_English) when possible.
+
+## Code examples
+
+Indent code by two spaces. With examples of template code, include a space after opening action delimiters, and include a space before closing action delimiters.
+
+### Fenced code blocks
+
+Always include the language code when using a fenced code block:
+
+````text
+```go-html-template
+{{ if eq $foo "bar" }}
+ {{ print "foo is bar" }}
+{{ end }}
+```
+````
+
- Rendered:
-
+```go-html-template
+{{ if eq $foo "bar" }}
+ {{ print "foo is bar" }}
+{{ end }}
+```
+
+### Shortcode calls
+
+Use this syntax to include shortcodes calls within your code examples:
+
+```text
+{{</*/* foo */*/>}}
+{{%/*/* foo */*/%}}
+```
+
- Rendered:
-
+```text
+{{</* foo */>}}
+{{%/* foo */%}}
+```
+
+### Site configuration
+
+Use the [code-toggle shortcode] to include site configuration examples:
+
+```text
+{{</* code-toggle file=hugo */>}}
+baseURL = 'https://example.org/'
+languageCode = 'en-US'
+title = 'My Site'
+{{</* /code-toggle */>}}
+```
+
- Rendered:
-
+{{< code-toggle file=hugo >}}
+baseURL = 'https://example.org/'
+languageCode = 'en-US'
+title = 'My Site'
+{{< /code-toggle >}}
+
+### Front matter
+
+Use the [code-toggle shortcode] to include front matter examples:
+
+```text
+{{</* code-toggle file=content/posts/my-first-post.md fm=true */>}}
+title = 'My first post'
+date = 2023-11-09T12:56:07-08:00
+draft = false
+{{</* /code-toggle */>}}
+```
+
- Rendered:
-
+{{< code-toggle file=content/posts/my-first-post.md fm=true >}}
+title = 'My first post'
+date = 2023-11-09T12:56:07-08:00
+draft = false
+{{< /code-toggle >}}
+
+### Other code examples
+
+Use the [code shortcode] for other code examples that require a file name:
+
+```text
+{{</* code file=layouts/_default/single.html */>}}
+{{ range .Site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+{{</* /code */>}}
+```
+
- Use the "code" shortcode for other code examples that require a file name. See the [code examples] above. This shortcode takes these arguments:
+{{< code file=layouts/_default/single.html >}}
+{{ range .Site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+{{< /code >}}
+
+## Shortcodes
+
+These shortcodes are commonly used throughout the documentation. Other shortcodes are available for specialized use.
+
+### code
+
- Use the "code-toggle" shortcode to display examples of site configuration, front matter, or data files. See the [code examples] above. This shortcode takes these arguments:
++Use the `code` shortcode for other code examples that require a file name. See the [code examples] above. This shortcode takes these arguments:
+
+copy
+: (`bool`) Whether to display a copy-to-clipboard button. Default is `false`.
+
+file
+: (`string`) The file name to display.
+
+lang
+: (`string`) The code language. If you do not provide a `lang` argument, the code language is determined by the file extension. If the file extension is `html`, sets the code language to `go-html-template`. Default is `text`.
+
++```text
++{{</* code file=content/something/foo.md lang=text copy=true */>}}
++Some code here
++{{</* /code */>}}
++```
++
++{{< code file=content/something/foo.md lang=text copy=true >}}
++Some code here
++{{< /code >}}
++
+### code-toggle
+
- : (`string`) The file name to display. Omit the file extension for site configuration examples.
++Use the `code-toggle` shortcode to display examples of site configuration, front matter, or data files. See the [code examples] above. This shortcode takes these arguments:
++
++config
++: (`string`) The section of `site.Data.docs.config` to render.
+
+copy
+: (`bool`) Whether to display a copy-to-clipboard button. Default is `false`.
+
+file
- Use the “deprecated-in” shortcode to indicate that a feature is deprecated:
++: (`string`) The file name to display. Omit the file extension for site configuration examples. Default is `hugo`
+
+fm
+: (`bool`) Whether the example is front matter. Default is `false`.
+
++skipHeader
++: (`bool`) Whether to omit top level key(s) when rendering a section of `site.Data.docs.config`.
++
++```text
++{{</* code-toggle */>}}
++title: Example
++draft: false
++{{</* /code-toggle */>}}
++```
++
++{{< code-toggle >}}
++title: Example
++draft: false
++{{< /code-toggle >}}
+
+### deprecated-in
+
- Rendered:
-
++Use the `deprecated-in` shortcode to indicate that a feature is deprecated:
+
+```text
+{{%/* deprecated-in 0.127.0 */%}}
+Use [`hugo.IsServer`] instead.
+
+[`hugo.IsServer`]: /functions/hugo/isserver/
+{{%/* /deprecated-in */%}}
+```
+
- Use the embedded template URL (eturl) shortcode to insert an absolute URL to the source code for an embedded template. The shortcode takes a single argument, the base file name of the template (omit the file extension).
+{{% deprecated-in 0.127.0 %}}
+Use [`hugo.IsServer`] instead.
+
+[`hugo.IsServer`]: /functions/hugo/isserver/
+{{% /deprecated-in %}}
+
+### eturl
+
- Rendered:
-
++Use the embedded template URL (`eturl`) shortcode to insert an absolute URL to the source code for an embedded template. The shortcode takes a single argument, the base file name of the template (omit the file extension).
+
+```text
+This is a link to the [embedded alias template].
+
+[embedded alias template]: {{%/* eturl alias */%}}
+```
+
- Use the "new-in" shortcode to indicate a new feature:
+This is a link to the [embedded alias template].
+
+[embedded alias template]: {{% eturl alias %}}
+
++### glossary-term
++
++Use the `glossary-term` shortcode to insert the definition of the given glossary term.
++
++```text
++{{%/* glossary-term scalar */%}}
++```
++
++{{% glossary-term scalar %}}
++
++### include
++
++Use the `include` shortcode to include content from another page.
++
++```text
++{{%/* include "functions/_common/glob-patterns" */%}}
++```
++
+### new-in
+
- Rendered:
-
++Use the `new-in` shortcode to indicate a new feature:
+
+```text
+{{</* new-in 0.127.0 */>}}
+```
+
- Use the "note" shortcode with `{{%/* */%}}` delimiters to call attention to important content:
+{{< new-in 0.127.0 >}}
+
+### note
+
- Rendered:
-
++Use the `note` shortcode with `{{%/* */%}}` delimiters to call attention to important content:
+
+```text
+{{%/* note */%}}
+Use the [`math.Mod`] function to control...
+
+[`math.Mod`]: /functions/math/mod/
+{{%/* /note */%}}
+```
+
+{{% note %}}
+Use the [`math.Mod`] function to control...
+
+[`math.Mod`]: /functions/math/mod/
+{{% /note %}}
+
+## New features
+
+Use the "new-in" shortcode to indicate a new feature:
+
+{{< code file=content/something/foo.md lang=text >}}
+{{</* new-in 0.120.0 */>}}
+{{< /code >}}
+
+The "new in" label will be hidden if the specified version is older than a predefined threshold, based on differences in major and minor versions. See [details](https://github.com/gohugoio/hugoDocs/blob/master/_vendor/github.com/gohugoio/gohugoioTheme/layouts/shortcodes/new-in.html).
+
+## Deprecated features
+
+Use the "deprecated-in" shortcode to indicate that a feature is deprecated:
+
+{{< code file=content/something/foo.md >}}
+{{%/* deprecated-in 0.120.0 */%}}
+Use [`hugo.IsServer`] instead.
+
+[`hugo.IsServer`]: /functions/hugo/isserver/
+{{%/* /deprecated-in */%}}
+{{< /code >}}
+
+When deprecating a function or method, add this to front matter:
+
+{{< code-toggle file=content/something/foo.md fm=true >}}
+expiryDate: 2024-10-30
+{{< /code-toggle >}}
+
+Set the `expiryDate` to one year from the date of deprecation, and add a brief front matter comment to explain the setting.
+
+## GitHub workflow
+
+{{% note %}}
+This section assumes that you have a working knowledge of Git and GitHub, and are comfortable working on the command line.
+{{% /note %}}
+
+Use this workflow to create and submit pull requests.
+
+Step 1
+: Fork the [documentation repository].
+
+Step 2
+: Clone your fork.
+
+Step 3
+: Create a new branch with a descriptive name that includes the corresponding issue number, if any:
+
+```sh
+git checkout -b restructure-foo-page-99999
+```
+
+Step 4
+: Make changes.
+
+Step 5
+: Build the site locally to preview your changes.
+
+Step 6
+: Commit your changes with a descriptive commit message:
+
+- Provide a summary on the first line, typically 50 characters or less, followed by a blank line.
+- Optionally, provide a detailed description where each line is 80 characters or less, followed by a blank line.
+- Optionally, add one or more "Fixes" or "Closes" keywords, each on its own line, referencing the [issues] addressed by this change.
+
+For example:
+
+```sh
+git commit -m "Restructure the taxonomy page
+
+This restructures the taxonomy page by splitting topics into logical
+sections, each with one or more examples.
+
+Fixes #9999
+Closes #9998"
+```
+
+Step 7
+: Push the new branch to your fork of the documentation repository.
+
+Step 8
+: Visit the [documentation repository] and create a pull request (PR).
+
+Step 9
+: A project maintainer will review your PR and may request changes. You may delete your branch after the maintainer merges your PR.
+
+[ATX]: https://spec.commonmark.org/0.30/#atx-headings
+[Microsoft Writing Style Guide]: https://learn.microsoft.com/en-us/style-guide/welcome/
+[basic english]: https://simple.wikipedia.org/wiki/Basic_English
+[code examples]: #code-examples
+[code shortcode]: #code
+[code-toggle shortcode]: #code-toggle
+[documentation repository]: https://github.com/gohugoio/hugoDocs/
+[fenced code blocks]: https://spec.commonmark.org/0.30/#fenced-code-blocks
+[glossary of terms]: /getting-started/glossary/
+[indented code blocks]: https://spec.commonmark.org/0.30/#indented-code-blocks
+[issues]: https://github.com/gohugoio/hugoDocs/issues
+[list items]: https://spec.commonmark.org/0.30/#list-items
+[note shortcode]: #note
+[project repository]: https://github.com/gohugoio/hugo
+[raw HTML]: https://spec.commonmark.org/0.30/#raw-html
+[setext]: https://spec.commonmark.org/0.30/#setext-heading
--- /dev/null
- 2. Open a pull request in the [themes repository]
+---
+title: Themes
+description: If you've built a Hugo theme and want to contribute back to the Hugo Community, please share it with us.
+categories: [contribute]
+keywords: [themes]
+menu:
+ docs:
+ parent: contribute
+ weight: 40
+weight: 40
+aliases: [/contribute/theme/]
+---
+
+Visit [themes.gohugo.io] to browse a collection of themes created by the Hugo community.
+
+To submit your theme:
+
+1. Read the [submission guidelines]
++1. Open a pull request in the [themes repository]
+
+Other useful theme directories:
+
+- [jamstack.club]
+- [jamstackthemes.dev]
+
+[jamstack.club]: https://jamstack.club/#ssg=hugo
+[jamstackthemes.dev]: https://jamstackthemes.dev/ssg/hugo
+[submission guidelines]: https://github.com/gohugoio/hugoThemesSiteBuilder/tree/main#readme
+[themes repository]: https://github.com/gohugoio/hugoThemesSiteBuilder
+[themes.gohugo.io]: https://themes.gohugo.io/
--- /dev/null
--- /dev/null
++---
++_comment: Do not remove front matter.
++---
++
++anchorLineNos
++: (`bool`) Whether to render each line number as an HTML anchor element, setting the `id` attribute of the surrounding `span` element to the line number. Irrelevant if `lineNos` is `false`. Default is `false`.
++
++codeFences
++: (`bool`) Whether to highlight fenced code blocks. Default is `true`.
++
++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 %}}
++The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
++{{% /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.
++
++hl_inline
++: (`bool`) Whether to render the highlighted code without a wrapping container. Default is `false`.
++
++lineAnchors
++: (`string`) When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding `span` element. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`.
++
++lineNoStart
++: (`int`) The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. Default is `1`.
++
++lineNos
++: (`bool`) Whether to display a number at the beginning of each line. Default is `false`.
++
++lineNumbersInTable
++: (`bool`) Whether to render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers, while the right table cell contains the code. Irrelevant if `lineNos` is `false`. Default is `true`.
++
++noClasses
++: (`bool`) Whether to use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and generate the CSS file using the `hugo gen chromastyles` command. Default is `true`.
++
++style
++: (`string`) The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. Default is `monokai`.
++
++[style gallery]: https://xyproto.github.io/splash/docs/
++
++tabWidth
++: (`int`) Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. Default is `4`.
++
++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 %}}
++Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
++
++lineNos=inline
++: equivalent to `lineNos=true` and `lineNumbersInTable=false`
++
++lineNos=table
++: equivalent to `lineNos=true` and `lineNumbersInTable=true`
++{{% /note %}}
--- /dev/null
- 2. The second row is titled "Recent Articles" and shows only the 2nd- to 4th-most recently published articles.
+---
+title: collections.After
+description: Slices an array to the items after the Nth item.
+categories: []
+keywords: []
+action:
+ aliases: [after]
+ related:
+ - functions/collections/First
+ - functions/collections/Last
+ returnType: any
+ signatures: [collections.After INDEX COLLECTION]
+aliases: [/functions/after]
+---
+
+The following shows `after` being used in conjunction with the [`slice`]function:
+
+```go-html-template
+{{ $data := slice "one" "two" "three" "four" }}
+<ul>
+ {{ range after 2 $data }}
+ <li>{{ . }}</li>
+ {{ end }}
+</ul>
+```
+
+The template above is rendered to:
+
+```html
+<ul>
+ <li>three</li>
+ <li>four</li>
+</ul>
+```
+
+## Example of `after` with `first`: 2nd–4th most recent articles
+
+You can use `after` in combination with the [`first`] function and Hugo's [powerful sorting methods](/quick-reference/page-collections/#sort). Let's assume you have a `section` page at `example.com/articles`. You have 10 articles, but you want your template to show only two rows:
+
+1. The top row is titled "Featured" and shows only the most recently published article (i.e. by `publishdate` in the content files' front matter).
++1. The second row is titled "Recent Articles" and shows only the 2nd- to 4th-most recently published articles.
+
+{{< code file=layouts/section/articles.html >}}
+{{ define "main" }}
+ <section class="row featured-article">
+ <h2>Featured Article</h2>
+ {{ range first 1 .Pages.ByPublishDate.Reverse }}
+ <header>
+ <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+ </header>
+ <p>{{ .Description }}</p>
+ {{ end }}
+ </section>
+ <div class="row recent-articles">
+ <h2>Recent Articles</h2>
+ {{ range first 3 (after 1 .Pages.ByPublishDate.Reverse) }}
+ <section class="recent-article">
+ <header>
+ <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+ </header>
+ <p>{{ .Description }}</p>
+ </section>
+ {{ end }}
+ </div>
+{{ end }}
+{{< /code >}}
+
+[`first`]: /functions/collections/first/
+[`slice`]: /functions/collections/slice/
--- /dev/null
- This function appends all elements, excluding the last, to the last element. This allows [pipe](/getting-started/glossary/#pipeline) constructs as shown below.
+---
+title: collections.Append
+description: Appends one or more elements to a slice and returns the resulting slice.
+categories: []
+keywords: []
+action:
+ aliases: [append]
+ related:
+ - functions/collections/Merge
+ returnType: any
+ signatures:
+ - collections.Append ELEMENT [ELEMENT...] COLLECTION
+ - collections.Append COLLECTION1 COLLECTION2
+aliases: [/functions/append]
+---
+
++This function appends all elements, excluding the last, to the last element. This allows [pipe](g) constructs as shown below.
+
+Append a single element to a slice:
+
+```go-html-template
+{{ $s := slice "a" "b" }}
+{{ $s }} → [a b]
+
+{{ $s = $s | append "c" }}
+{{ $s }} → [a b c]
+```
+
+Append two elements to a slice:
+
+```go-html-template
+{{ $s := slice "a" "b" }}
+{{ $s }} → [a b]
+
+{{ $s = $s | append "c" "d" }}
+{{ $s }} → [a b c d]
+```
+
+Append two elements, as a slice, to a slice. This produces the same result as the previous example:
+
+```go-html-template
+{{ $s := slice "a" "b" }}
+{{ $s }} → [a b]
+
+{{ $s = $s | append (slice "c" "d") }}
+{{ $s }} → [a b c d]
+```
+
+Start with an empty slice:
+
+```go-html-template
+{{ $s := slice }}
+{{ $s }} → []
+
+{{ $s = $s | append "a" }}
+{{ $s }} → [a]
+
+{{ $s = $s | append "b" "c" }}
+{{ $s }} → [a b c]
+
+{{ $s = $s | append (slice "d" "e") }}
+{{ $s }} → [a b c d e]
+```
+
+If you start with a slice of a slice:
+
+```go-html-template
+{{ $s := slice (slice "a" "b") }}
+{{ $s }} → [[a b]]
+
+{{ $s = $s | append (slice "c" "d") }}
+{{ $s }} → [[a b] [c d]]
+```
+
+To create a slice of slices, starting with an empty slice:
+
+```go-html-template
+{{ $s := slice }}
+{{ $s }} → []
+
+{{ $s = $s | append (slice (slice "a" "b")) }}
+{{ $s }} → [[a b]]
+
+{{ $s = $s | append (slice "c" "d") }}
+{{ $s }} → [[a b] [c d]]
+```
+
+Although the elements in the examples above are strings, you can use the `append` function with any data type, including Pages. For example, on the home page of a corporate site, to display links to the two most recent press releases followed by links to the four most recent articles:
+
+```go-html-template
+{{ $p := where site.RegularPages "Type" "press-releases" | first 2 }}
+{{ $p = $p | append (where site.RegularPages "Type" "articles" | first 4) }}
+
+{{ with $p }}
+ <ul>
+ {{ range . }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
--- /dev/null
-
+---
+title: collections.Dictionary
+description: Returns a map composed of the given key-value pairs.
+categories: []
+keywords: []
+action:
+ aliases: [dict]
+ related:
+ - functions/collections/Slice
+ returnType: map[string]any
+ signatures: ['collections.Dictionary [VALUE...]']
+aliases: [/functions/dict]
+---
+
+Specify the key-value pairs as individual arguments:
+
+```go-html-template
+{{ $m := dict "a" 1 "b" 2 }}
+```
+
+The above produces this data structure:
+
+```json
+{
+ "a": 1,
+ "b": 2
+}
+```
+
+To create an empty map:
+
+```go-html-template
+{{ $m := dict }}
+```
+
+Note that the `key` can be either a `string` or a `string slice`. The latter is useful to create a deeply nested structure, e.g.:
+
+```go-html-template
+{{ $m := dict (slice "a" "b" "c") "value" }}
+```
+
+The above produces this data structure:
+
+```json
+{
+ "a": {
+ "b": {
+ "c": "value"
+ }
+ }
+}
+```
--- /dev/null
- The `SET` can be an [array], [slice], or [string].
-
- [array]: /getting-started/glossary/#array
- [slice]: /getting-started/glossary/#slice
- [string]: /getting-started/glossary/#string
+---
+title: collections.In
+description: Reports whether the given value is a member of the given set.
+categories: []
+keywords: []
+action:
+ aliases: [in]
+ related:
+ - functions/strings/Contains
+ - functions/strings/ContainsAny
+ - functions/strings/ContainsNonSpace
+ - functions/strings/HasPrefix
+ - functions/strings/HasSuffix
+ returnType: bool
+ signatures: [collections.In SET VALUE]
+aliases: [/functions/in]
+---
+
++The `SET` can be an [array](g), [slice](g), or [string](g).
+
+```go-html-template
+{{ $s := slice "a" "b" "c" }}
+{{ in $s "b" }} → true
+```
+
+```go-html-template
+{{ $s := slice 1 2 3 }}
+{{ in $s 2 }} → true
+```
+
+```go-html-template
+{{ $s := slice 1.11 2.22 3.33 }}
+{{ in $s 2.22 }} → true
+```
+
+```go-html-template
+{{ $s := "abc" }}
+{{ in $s "b" }} → true
+```
--- /dev/null
- The `collections.NewScratch` function creates a locally scoped [scratch pad] to store and manipulate data. To create a scratch pad that is attached to a `Page` object, use the [`Scratch`] or [`Store`] method.
+---
+title: collections.NewScratch
+description: Returns a locally scoped "scratch pad" to store and manipulate data.
+categories: []
+keywords: []
+action:
+ aliases: [newScratch]
+ related:
+ - methods/page/scratch
+ - methods/page/store
+ - methods/shortcode/scratch
+ returnType: maps.Scratch
+ signatures: [collections.NewScratch ]
+---
+
- [scratch pad]: /getting-started/glossary/#scratch-pad
++The `collections.NewScratch` function creates a locally scoped [scratch pad](g) to store and manipulate data. To create a scratch pad that is attached to a `Page` object, use the [`Scratch`] or [`Store`] method.
+
+[`Scratch`]: /methods/page/scratch/
+[`Store`]: /methods/page/store/
+
+## Methods
+
+###### Set
+
+Sets the value of a given key.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.Set "greeting" "Hello" }}
+```
+
+###### Get
+
+Gets the value of a given key.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.Set "greeting" "Hello" }}
+{{ $s.Get "greeting" }} → Hello
+```
+
+###### Add
+
+Adds a given value to existing value(s) of the given key.
+
+For single values, `Add` accepts values that support Go's `+` operator. If the first `Add` for a key is an array or slice, the following adds will be appended to that list.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.Set "greeting" "Hello" }}
+{{ $s.Add "greeting" "Welcome" }}
+{{ $s.Get "greeting" }} → HelloWelcome
+```
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.Set "total" 3 }}
+{{ $s.Add "total" 7 }}
+{{ $s.Get "total" }} → 10
+```
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.Set "greetings" (slice "Hello") }}
+{{ $s.Add "greetings" (slice "Welcome" "Cheers") }}
+{{ $s.Get "greetings" }} → [Hello Welcome Cheers]
+```
+
+###### SetInMap
+
+Takes a `key`, `mapKey` and `value` and adds a map of `mapKey` and `value` to the given `key`.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.SetInMap "greetings" "english" "Hello" }}
+{{ $s.SetInMap "greetings" "french" "Bonjour" }}
+{{ $s.Get "greetings" }} → map[english:Hello french:Bonjour]
+```
+
+###### DeleteInMap
+
+Takes a `key` and `mapKey` and removes the map of `mapKey` from the given `key`.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.SetInMap "greetings" "english" "Hello" }}
+{{ $s.SetInMap "greetings" "french" "Bonjour" }}
+{{ $s.DeleteInMap "greetings" "english" }}
+{{ $s.Get "greetings" }} → map[french:Bonjour]
+```
+
+###### GetSortedMapValues
+
+Returns an array of values from `key` sorted by `mapKey`.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.SetInMap "greetings" "english" "Hello" }}
+{{ $s.SetInMap "greetings" "french" "Bonjour" }}
+{{ $s.GetSortedMapValues "greetings" }} → [Hello Bonjour]
+```
+
+###### Delete
+
+Removes the given key.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.Set "greeting" "Hello" }}
+{{ $s.Delete "greeting" }}
+```
+
+###### Values
+
+Returns the raw backing map. Do not use with `Scratch` or `Store` methods on a `Page` object due to concurrency issues.
+
+```go-html-template
+{{ $s := newScratch }}
+{{ $s.SetInMap "greetings" "english" "Hello" }}
+{{ $s.SetInMap "greetings" "french" "Bonjour" }}
+
+{{ $map := $s.Values }}
+```
--- /dev/null
- : (`any`) A [page collection] or a [slice] of [maps].
-
- [maps]: /getting-started/glossary/#map
- [page collection]: /getting-started/glossary/#page-collection
- [slice]: /getting-started/glossary/#slice
+---
+title: collections.Where
+description: Returns the given collection, removing elements that do not satisfy the comparison condition.
+categories: []
+keywords: []
+action:
+ aliases: [where]
+ related: []
+ returnType: any
+ signatures: ['collections.Where COLLECTION KEY [OPERATOR] VALUE']
+toc: true
+aliases: [/functions/where]
+---
+
+The `where` function returns the given collection, removing elements that do not satisfy the comparison condition. The comparison condition is composed of the `KEY`, `OPERATOR`, and `VALUE` arguments:
+
+```text
+collections.Where COLLECTION KEY [OPERATOR] VALUE
+ --------------------
+ comparison condition
+```
+
+Hugo will test for equality if you do not provide an `OPERATOR` argument. For example:
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Section" "books" }}
+{{ $books := where .Site.Data.books "genres" "suspense" }}
+```
+
+## Arguments
+
+The where function takes three or four arguments. The `OPERATOR` argument is optional.
+
+COLLECTION
- : (`string`) The key of the page or map value to compare with `VALUE`. With page collections, commonly used comparison keys are `Section`, `Type`, and `Params`. To compare with a member of the page `Params` map, [chain] the subkey as shown below:
++: (`any`) A [page collection](g) or a [slice](g) of [maps](g).
+
+KEY
- [chain]: /getting-started/glossary/#chain
-
++: (`string`) The key of the page or map value to compare with `VALUE`. With page collections, commonly used comparison keys are `Section`, `Type`, and `Params`. To compare with a member of the page `Params` map, [chain](g) the subkey as shown below:
+
+```go-html-template
+{{ $result := where .Site.RegularPages "Params.foo" "bar" }}
+```
+
- Compare the value of the given field to a [`string`]:
-
- [`string`]: /getting-started/glossary/#string
+OPERATOR
+: (`string`) The logical comparison [operator](#operators).
+
+VALUE
+: (`any`) The value with which to compare. The values to compare must have comparable data types. For example:
+
+Comparison|Result
+:--|:--
+`"123" "eq" "123"`|`true`
+`"123" "eq" 123`|`false`
+`false "eq" "false"`|`false`
+`false "eq" false`|`true`
+
+When one or both of the values to compare is a slice, use the `in`, `not in`, or `intersect` operators as described below.
+
+## Operators
+
+Use any of the following logical operators:
+
+`=`, `==`, `eq`
+: (`bool`) Reports whether the given field value is equal to `VALUE`.
+
+`!=`, `<>`, `ne`
+: (`bool`) Reports whether the given field value is not equal to `VALUE`.
+
+`>=`, `ge`
+: (`bool`) Reports whether the given field value is greater than or equal to `VALUE`.
+
+`>`, `gt`
+: `true` Reports whether the given field value is greater than `VALUE`.
+
+`<=`, `le`
+: (`bool`) Reports whether the given field value is less than or equal to `VALUE`.
+
+`<`, `lt`
+: (`bool`) Reports whether the given field value is less than `VALUE`.
+
+`in`
+: (`bool`) Reports whether the given field value is a member of `VALUE`. Compare string to slice, or string to string. See [details](/functions/collections/in).
+
+`not in`
+: (`bool`) Reports whether the given field value is not a member of `VALUE`. Compare string to slice, or string to string. See [details](/functions/collections/in).
+
+`intersect`
+: (`bool`) Reports whether the given field value (a slice) contains one or more elements in common with `VALUE`. See [details](/functions/collections/intersect).
+
+`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 %}}
+The examples below perform comparisons within a page collection, but the same comparisons are applicable to a slice of maps.
+{{% /note %}}
+
+## String comparison
+
- Compare the value of the given field to an [`int`] or [`float`]:
-
- [`int`]: /getting-started/glossary/#int
- [`float`]: /getting-started/glossary/#float
++Compare the value of the given field to a [`string`](g):
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Section" "eq" "books" }}
+{{ $pages := where .Site.RegularPages "Section" "ne" "books" }}
+```
+
+## Numeric comparison
+
- Compare the value of the given field to a [`bool`]:
-
- [`bool`]: /getting-started/glossary/#bool
++Compare the value of the given field to an [`int`](g) or [`float`](g):
+
+```go-html-template
+{{ $books := where site.RegularPages "Section" "eq" "books" }}
+
+{{ $pages := where $books "Params.price" "eq" 42 }}
+{{ $pages := where $books "Params.price" "ne" 42.67 }}
+{{ $pages := where $books "Params.price" "ge" 42 }}
+{{ $pages := where $books "Params.price" "gt" 42.67 }}
+{{ $pages := where $books "Params.price" "le" 42 }}
+{{ $pages := where $books "Params.price" "lt" 42.67 }}
+```
+
+## Boolean comparison
+
- Compare a [`scalar`] to a [`slice`].
-
- [`scalar`]: /getting-started/glossary/#scalar
- [`slice`]: /getting-started/glossary/#slice
++Compare the value of the given field to a [`bool`](g):
+
+```go-html-template
+{{ $books := where site.RegularPages "Section" "eq" "books" }}
+
+{{ $pages := where $books "Params.fiction" "eq" true }}
+{{ $pages := where $books "Params.fiction" "eq" false }}
+{{ $pages := where $books "Params.fiction" "ne" true }}
+{{ $pages := where $books "Params.fiction" "ne" false }}
+```
+
+## Member comparison
+
- With custom front matter dates, the comparison depends on the front matter data format (TOML, YAML, or JSON).
++Compare a [`scalar`](g) to a [`slice`](g).
+
+For example, to return a collection of pages where the `color` page parameter is either "red" or "yellow":
+
+```go-html-template
+{{ $fruit := where site.RegularPages "Section" "eq" "fruit" }}
+
+{{ $colors := slice "red" "yellow" }}
+{{ $pages := where $fruit "Params.color" "in" $colors }}
+```
+
+To return a collection of pages where the "color" page parameter is neither "red" nor "yellow":
+
+```go-html-template
+{{ $fruit := where site.RegularPages "Section" "eq" "fruit" }}
+
+{{ $colors := slice "red" "yellow" }}
+{{ $pages := where $fruit "Params.color" "not in" $colors }}
+```
+
+## Intersection comparison
+
+Compare a [`slice`] to a [`slice`], returning collection elements with common values. This is frequently used when comparing taxonomy terms.
+
+For example, to return a collection of pages where any of the terms in the "genres" taxonomy are "suspense" or "romance":
+
+```go-html-template
+{{ $books := where site.RegularPages "Section" "eq" "books" }}
+
+{{ $genres := slice "suspense" "romance" }}
+{{ $pages := where $books "Params.genres" "intersect" $genres }}
+```
+
+## Regular expression comparison
+
+{{< new-in 0.116.0 >}}
+
+To return a collection of pages where the "author" page parameter begins with either "victor" or "Victor":
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Params.author" "like" `(?i)^victor` }}
+```
+
+{{% include "functions/_common/regular-expressions.md" %}}
+
+{{% note %}}
+Use the `like` operator to compare string values. Comparing other data types will result in an empty collection.
+{{% /note %}}
+
+## Date comparison
+
+### Predefined dates
+
+There are four predefined front matter dates: [`date`], [`publishDate`], [`lastmod`], and [`expiryDate`]. Regardless of the front matter data format (TOML, YAML, or JSON) these are [`time.Time`] values, allowing precise comparisons.
+
+[`date`]: /methods/page/date/
+[`publishdate`]: /methods/page/publishdate/
+[`lastmod`]: /methods/page/lastmod/
+[`expirydate`]: /methods/page/expirydate/
+[`time.Time`]: https://pkg.go.dev/time#Time
+
+For example, to return a collection of pages that were created before the current year:
+
+```go-html-template
+{{ $startOfYear := time.AsTime (printf "%d-01-01" now.Year) }}
+{{ $pages := where .Site.RegularPages "Date" "lt" $startOfYear }}
+```
+
+### Custom dates
+
- 2. Create a collection using a nil comparison
- 3. Subtract the second collection from the first collection using the [`collections.Complement`] function.
++With custom front matter dates, the comparison depends on the front matter data format (TOML, YAML, or JSON).
+
+{{% note %}}
+Using TOML for pages with custom front matter dates enables precise date comparisons.
+{{% /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.
+
+In the TOML example below, note that the event date is not quoted.
+
+{{< code file="content/events/2024-user-conference.md" >}}
++++
+title = '2024 User Conference"
+eventDate = 2024-04-01
++++
+{{< /code >}}
+
+To return a collection of future events:
+
+```go-html-template
+{{ $events := where .Site.RegularPages "Type" "events" }}
+{{ $futureEvents := where $events "Params.eventDate" "gt" now }}
+```
+
+When working with YAML or JSON, or quoted TOML values, custom dates are strings; you cannot compare them with `time.Time` values. String comparisons may be possible if the custom date layout is consistent from one page to the next. To be safe, filter the pages by ranging through the collection:
+
+```go-html-template
+{{ $events := where .Site.RegularPages "Type" "events" }}
+{{ $futureEvents := slice }}
+{{ range $events }}
+ {{ if gt (time.AsTime .Params.eventDate) now }}
+ {{ $futureEvents = $futureEvents | append . }}
+ {{ end }}
+{{ end }}
+```
+
+## Nil comparison
+
+To return a collection of pages where the "color" parameter is present in front matter, compare to `nil`:
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Params.color" "ne" nil }}
+```
+
+To return a collection of pages where the "color" parameter is not present in front matter, compare to `nil`:
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Params.color" "eq" nil }}
+```
+
+In both examples above, note that `nil` is not quoted.
+
+## Nested comparison
+
+These are equivalent:
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Type" "tutorials" }}
+{{ $pages = where $pages "Params.level" "eq" "beginner" }}
+```
+
+```go-html-template
+{{ $pages := where (where .Site.RegularPages "Type" "tutorials") "Params.level" "eq" "beginner" }}
+```
+
+## Portable section comparison
+
+Useful for theme authors, avoid hardcoding section names by using the `where` function with the [`MainSections`] method on a `Site` object.
+
+[`MainSections`]: /methods/site/mainsections/
+
+```go-html-template
+{{ $pages := where .Site.RegularPages "Section" "in" .Site.MainSections }}
+```
+
+With this construct, a theme author can instruct users to specify their main sections in the site configuration:
+
+{{< code-toggle file=hugo >}}
+[params]
+mainSections = ['blog','galleries']
+{{< /code-toggle >}}
+
+If `params.mainSections` is not defined in the site configuration, the `MainSections` method returns a slice with one element---the top level section with the most pages.
+
+## Boolean/undefined comparison
+
+Consider this site content:
+
+```text
+content/
+├── posts/
+│ ├── _index.md
+│ ├── post-1.md <-- front matter: exclude = false
+│ ├── post-2.md <-- front matter: exclude = true
+│ └── post-3.md <-- front matter: exclude not defined
+└── _index.md
+```
+
+The first two pages have an "exclude" field in front matter, but the last page does not. When testing for _equality_, the third page is _excluded_ from the result. When testing for _inequality_, the third page is _included_ in the result.
+
+### Equality test
+
+This template:
+
+```go-html-template
+<ul>
+ {{ range where .Site.RegularPages "Params.exclude" "eq" false }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li><a href="/posts/post-1/">Post 1</a></li>
+</ul>
+```
+
+This template:
+
+```go-html-template
+<ul>
+ {{ range where .Site.RegularPages "Params.exclude" "eq" true }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li><a href="/posts/post-2/">Post 2</a></li>
+</ul>
+```
+
+### Inequality test
+
+This template:
+
+```go-html-template
+<ul>
+ {{ range where .Site.RegularPages "Params.exclude" "ne" false }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li><a href="/posts/post-2/">Post 2</a></li>
+ <li><a href="/posts/post-3/">Post 3</a></li>
+</ul>
+```
+
+This template:
+
+```go-html-template
+<ul>
+ {{ range where .Site.RegularPages "Params.exclude" "ne" true }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li><a href="/posts/post-1/">Post 1</a></li>
+ <li><a href="/posts/post-3/">Post 3</a></li>
+</ul>
+```
+
+To exclude a page with an undefined field from a boolean _inequality_ test:
+
+1. Create a collection using a boolean comparison
++1. Create a collection using a nil comparison
++1. Subtract the second collection from the first collection using the [`collections.Complement`] function.
+
+[`collections.Complement`]: /functions/collections/complement/
+
+This template:
+
+```go-html-template
+{{ $p1 := where .Site.RegularPages "Params.exclude" "ne" true }}
+{{ $p2 := where .Site.RegularPages "Params.exclude" "eq" nil }}
+<ul>
+ {{ range $p1 | complement $p2 }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li><a href="/posts/post-1/">Post 1</a></li>
+</ul>
+```
+
+This template:
+
+```go-html-template
+{{ $p1 := where .Site.RegularPages "Params.exclude" "ne" false }}
+{{ $p2 := where .Site.RegularPages "Params.exclude" "eq" nil }}
+<ul>
+ {{ range $p1 | complement $p2 }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li><a href="/posts/post-1/">Post 2</a></li>
+</ul>
+```
--- /dev/null
- [^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your resources directory to your repository.
+---
+title: css.Sass
+description: Transpiles Sass to CSS.
+categories: []
+keywords: []
+action:
+ aliases: [toCSS]
+ related:
+ - functions/resources/Fingerprint
+ - functions/resources/Minify
+ - functions/css/PostCSS
+ - functions/resources/PostProcess
+ returnType: resource.Resource
+ signatures: ['css.Sass [OPTIONS] RESOURCE']
+toc: true
+---
+
+{{< new-in 0.128.0 >}}
+
+```go-html-template
+{{ with resources.Get "sass/main.scss" }}
+ {{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
+ {{ with . | toCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended and extended/deploy editions, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language.
+
+Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
+[indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax
+
+## Options
+
+transpiler
+: (`string`) The transpiler to use, either `libsass` (default) or `dartsass`. Hugo's extended and extended/deploy editions include the LibSass transpiler. To use the Dart Sass transpiler, see the [installation instructions](#dart-sass) below.
+
+targetPath
+: (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`.
+
+vars
+: (`map`) A map of key-value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/).
+
+```scss
+// LibSass
+@import "hugo:vars";
+
+// Dart Sass
+@use "hugo:vars" as v;
+```
+
+outputStyle
+: (`string`) Output styles available to LibSass include `nested` (default), `expanded`, `compact`, and `compressed`. Output styles available to Dart Sass include `expanded` (default) and `compressed`.
+
+precision
+: (`int`) Precision of floating point math. Not applicable to Dart Sass.
+
+enableSourceMap
+: (`bool`) If `true`, generates a source map.
+
+sourceMapIncludeSources
+: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass.
+
+includePaths
+: (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements.
+
+```go-html-template
+{{ $opts := dict
+ "transpiler" "dartsass"
+ "targetPath" "css/style.css"
+ "vars" site.Params.styles
+ "enableSourceMap" (not hugo.IsProduction)
+ "includePaths" (slice "node_modules/bootstrap/scss")
+}}
+{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end }}
+```
+
+silenceDeprecations
+: (`slice`) {{< new-in 0.139.0 >}} A slice of deprecation IDs to silence. The deprecation IDs are printed to in the warning message, e.g "import" in `WARN Dart Sass: DEPRECATED [import] ...`. This is for Dart Sass only.
+
+## Dart Sass
+
+The extended version of Hugo includes [LibSass] to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of [Dart Sass].
+
+Use the latest features of the Sass language by installing Dart Sass in your development and production environments.
+
+### Installation overview
+
+Dart Sass is compatible with Hugo v0.114.0 and later.
+
+If you have been using Embedded Dart Sass[^1] with Hugo v0.113.0 and earlier, uninstall Embedded Dart Sass, then install Dart Sass. If you have installed both, Hugo will use Dart Sass.
+
+If you install Hugo as a [Snap package] there is no need to install Dart Sass. The Hugo Snap package includes Dart Sass.
+
+[^1]: In 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass.
+
+### Installing in a development environment
+
+When you install Dart Sass somewhere in your PATH, Hugo will find it.
+
+OS|Package manager|Site|Installation
+:--|:--|:--|:--
+Linux|Homebrew|[brew.sh]|`brew install sass/sass/sass`
+Linux|Snap|[snapcraft.io]|`sudo snap install dart-sass`
+macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass`
+Windows|Chocolatey|[chocolatey.org]|`choco install sass`
+Windows|Scoop|[scoop.sh]|`scoop install sass`
+
+You may also install [prebuilt binaries] for Linux, macOS, and Windows.
+
+Run `hugo env` to list the active transpilers.
+
+### Installing in a production environment
+
+For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries.
+
- HUGO_VERSION: 0.137.1
- DART_SASS_VERSION: 1.80.6
++[^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your `resources` directory to your repository.
+
+#### GitHub Pages
+
+To install Dart Sass for your builds on GitHub Pages, add this step to the GitHub Pages workflow file:
+
+```yaml
+- name: Install Dart Sass
+ run: sudo snap install dart-sass
+```
+
+If you are using GitHub Pages for the first time with your repository, GitHub provides a [starter workflow] for Hugo that includes Dart Sass. This is the simplest way to get started.
+
+#### GitLab Pages
+
+To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file should look something like this:
+
+```yaml
+variables:
- HUGO_VERSION = "0.137.1"
- DART_SASS_VERSION = "1.80.6"
++ HUGO_VERSION: 0.141.0
++ DART_SASS_VERSION: 1.83.4
+ GIT_DEPTH: 0
+ GIT_STRATEGY: clone
+ GIT_SUBMODULE_STRATEGY: recursive
+ TZ: America/Los_Angeles
+image:
+ name: golang:1.20-buster
+pages:
+ script:
+ # Install Dart Sass
+ - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - cp -r dart-sass/* /usr/local/bin
+ - rm -rf dart-sass*
+ # Install Hugo
+ - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ - apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ # Build
+ - hugo --gc --minify
+ artifacts:
+ paths:
+ - public
+ rules:
+ - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+```
+
+#### Netlify
+
+To install Dart Sass for your builds on Netlify, the `netlify.toml` file should look something like this:
+
+```toml
+[build.environment]
++HUGO_VERSION = "0.141.0"
++DART_SASS_VERSION = "1.83.4"
++NODE_VERSION = "22"
+TZ = "America/Los_Angeles"
+
+[build]
+publish = "public"
+command = """\
+ curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ export PATH=/opt/build/repo/dart-sass:$PATH && \
+ hugo --gc --minify \
+ """
+```
+
+### Example
+
+To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `css.Sass`. For example:
+
+```go-html-template
+{{ with resources.Get "sass/main.scss" }}
+ {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
+ {{ with . | toCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+### Miscellaneous
+
+If you build Hugo from source and run `mage test -v`, the test will fail if you install Dart Sass as a Snap package. This is due to the Snap package's strict confinement model.
+
+[brew.sh]: https://brew.sh/
+[chocolatey.org]: https://community.chocolatey.org/packages/sass
+[ci/cd]: https://en.wikipedia.org/wiki/CI/CD
+[dart sass]: https://sass-lang.com/dart-sass
+[libsass]: https://sass-lang.com/libsass
+[prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest
+[scoop.sh]: https://scoop.sh/#/apps?q=sass
+[site configuration]: /getting-started/configuration/#configure-build
+[snap package]: /installation/linux/#snap
+[snapcraft.io]: https://snapcraft.io/dart-sass
+[starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml
--- /dev/null
- The example above publishes the minified CSS file to public/css/main.css.
+---
+title: css.TailwindCSS
+description: Processes the given resource with the Tailwind CSS CLI.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/Fingerprint
+ - functions/resources/Minify
+ - functions/css/PostCSS
+ returnType: resource.Resource
+ signatures: ['css.TailwindCSS [OPTIONS] RESOURCE']
+toc: true
+---
+
+{{< new-in 0.128.0 >}}
+
+{{% todo %}}remove this admonition when feature is stable.{{% /todo %}}
+
+{{% note %}}
+This is an experimental feature pending the release of TailwindCSS v4.0.
+
+The functionality, configuration requirements, and documentation are subject to change at any time and may be not compatible with prior releases.
+{{% /note %}}
+
+## Prerequisites
+
+To use this function you must install the Tailwind CSS CLI v4.0 or later. You may install the CLI as an npm package or as a standalone executable. See the [Tailwind CSS documentation] for details.
+
+[Tailwind CSS documentation]: https://tailwindcss.com/docs/installation
+
+{{% note %}}
+Prior to the release of Tailwind CSS v4.0 you must install [v4.0.0-alpha.26](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.26) or later.
+
+`npm install --save-dev tailwindcss@next @tailwindcss/cli@next`
+
+{{% /note %}}
+
+## Options
+
+minify
+: (`bool`) Whether to optimize and minify the output. Default is `false`.
+
+optimize
+: (`bool`) Whether to optimize the output without minifying. Default is `false`.
+
+inlineImports
+: (`bool`) Whether to enable inlining of `@import` statements. Inlining is performed recursively, but currently once only per file. It is not possible to import the same file in different scopes (root, media query, etc.). Note that this import routine does not care about the CSS specification, so you can have `@import` statements anywhere in the file. Default is `false`.
+
+skipInlineImportsNotFound
+: (`bool`) When `inlineImports` is enabled, we fail the build if an import cannot be resolved. Enable this option to allow the build to continue and leave the import statement in place. Note that the inline importer does not process URL location or imports with media queries, so those will be left as-is even without enabling this option. Default is `false`.
+
+## Example
+
+Define a [cache buster] in your site configuration:
+
+[cache buster]: /getting-started/configuration-build/#configure-cache-busters
+
+{{< code-toggle file=hugo >}}
+[[build.cachebusters]]
+source = 'layouts/.*'
+target = 'css'
+{{< /code-toggle >}}
+
+Process the resource:
+
+```go-html-template
+{{ with resources.Get "css/main.css" }}
+ {{ $opts := dict "minify" true }}
+ {{ with . | css.TailwindCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
++The example above publishes the minified CSS file to `public/css/main.css`.
+
+See [this repository] for more information about the integration with Tailwind CSS v4.0.
+
+[this repository]: https://github.com/bep/hugo-testing-tailwindcss-v4
--- /dev/null
- Instead, use [`transform.Unmarshal`] with a [global], [page], or [remote] resource.
+---
+title: data.GetCSV
+description: Returns an array of arrays from a local or remote CSV file, or an error if the file does not exist.
+categories: []
+keywords: []
+action:
+ aliases: [getCSV]
+ related:
+ - functions/data/GetJSON
+ - functions/resources/Get
+ - functions/resources/GetRemote
+ - methods/page/Resources
+ returnType: '[][]string'
+ signatures: ['data.GetCSV SEPARATOR INPUT... [OPTIONS]']
+toc: true
+expiryDate: 2025-02-19 # deprecated 2024-02-19
+---
+
+{{% deprecated-in 0.123.0 %}}
- [global]: /getting-started/glossary/#global-resource
- [page]: /getting-started/glossary/#page-resource
++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]: /getting-started/glossary/#remote-resource
+[remote data example]: /functions/resources/getremote/#remote-data
- You must not place CSV files in the project's data directory.
+{{% /deprecated-in %}}
+
+Given the following directory structure:
+
+```text
+my-project/
+└── other-files/
+ └── pets.csv
+```
+
+Access the data with either of the following:
+
+```go-html-template
+{{ $data := getCSV "," "other-files/pets.csv" }}
+{{ $data := getCSV "," "other-files/" "pets.csv" }}
+```
+
+{{% note %}}
+When working with local data, the file path is relative to the working directory.
+
- {{ $u := "https://example.org/pets.csv" }}
- {{ with resources.GetRemote $u }}
++You must not place CSV files in the project's `data` directory.
+{{% /note %}}
+
+Access remote data with either of the following:
+
+```go-html-template
+{{ $data := getCSV "," "https://example.org/pets.csv" }}
+{{ $data := getCSV "," "https://example.org/" "pets.csv" }}
+```
+
+The resulting data structure is an array of arrays:
+
+```json
+[
+ ["name","type","breed","age"],
+ ["Spot","dog","Collie","3"],
+ ["Felix","cat","Malicious","7"]
+]
+```
+
+## Options
+
+Add headers to the request by providing an options map:
+
+```go-html-template
+{{ $opts := dict "Authorization" "Bearer abcd" }}
+{{ $data := getCSV "," "https://example.org/pets.csv" $opts }}
+```
+
+Add multiple headers using a slice:
+
+```go-html-template
+{{ $opts := dict "X-List" (slice "a" "b" "c") }}
+{{ $data := getCSV "," "https://example.org/pets.csv" $opts }}
+```
+
+## Global resource alternative
+
+Consider using the [`resources.Get`] function with [`transform.Unmarshal`] when accessing a global resource.
+
+```text
+my-project/
+└── assets/
+ └── data/
+ └── pets.csv
+```
+
+```go-html-template
+{{ $data := dict }}
+{{ $p := "data/pets.csv" }}
+{{ with resources.Get $p }}
+ {{ $opts := dict "delimiter" "," }}
+ {{ $data = . | transform.Unmarshal $opts }}
+{{ else }}
+ {{ errorf "Unable to get resource %q" $p }}
+{{ end }}
+```
+
+## Page resource alternative
+
+Consider using the [`Resources.Get`] method with [`transform.Unmarshal`] when accessing a page resource.
+
+```text
+my-project/
+└── content/
+ └── posts/
+ └── my-pets/
+ ├── index.md
+ └── pets.csv
+```
+
+```go-html-template
+{{ $data := dict }}
+{{ $p := "pets.csv" }}
+{{ with .Resources.Get $p }}
+ {{ $opts := dict "delimiter" "," }}
+ {{ $data = . | transform.Unmarshal $opts }}
+{{ else }}
+ {{ errorf "Unable to get resource %q" $p }}
+{{ end }}
+```
+
+## Remote resource alternative
+
+Consider using the [`resources.GetRemote`] function with [`transform.Unmarshal`] when accessing a remote resource to improve error handling and cache control.
+
+```go-html-template
+{{ $data := dict }}
- {{ else }}
++{{ $url := "https://example.org/pets.csv" }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $u }}
++ {{ else with .Value }}
+ {{ $opts := dict "delimiter" "," }}
+ {{ $data = . | transform.Unmarshal $opts }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+{{ end }}
+```
+
+[`Resources.Get`]: /methods/page/resources/
+[`resources.GetRemote`]: /functions/resources/getremote/
+[`resources.Get`]: /functions/resources/get/
+[`transform.Unmarshal`]: /functions/transform/unmarshal/
--- /dev/null
- Instead, use [`transform.Unmarshal`] with a [global], [page], or [remote] resource.
+---
+title: data.GetJSON
+description: Returns a JSON object from a local or remote JSON file, or an error if the file does not exist.
+categories: []
+keywords: []
+action:
+ aliases: [getJSON]
+ related:
+ - functions/data/GetCSV
+ - functions/resources/Get
+ - functions/resources/GetRemote
+ - methods/page/Resources
+ returnType: any
+ signatures: ['data.GetJSON INPUT... [OPTIONS]']
+toc: true
+expiryDate: 2025-02-19 # deprecated 2024-02-19
+---
+
+{{% deprecated-in 0.123.0 %}}
- [global]: /getting-started/glossary/#global-resource
- [page]: /getting-started/glossary/#page-resource
++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]: /getting-started/glossary/#remote-resource
+[remote data example]: /functions/resources/getremote/#remote-data
- {{ $u := "https://example.org/books.json" }}
- {{ with resources.GetRemote $u }}
+{{% /deprecated-in %}}
+
+Given the following directory structure:
+
+```text
+my-project/
+└── other-files/
+ └── books.json
+```
+
+Access the data with either of the following:
+
+```go-html-template
+{{ $data := getJSON "other-files/books.json" }}
+{{ $data := getJSON "other-files/" "books.json" }}
+```
+
+{{% note %}}
+When working with local data, the file path is relative to the working directory.
+{{% /note %}}
+
+Access remote data with either of the following:
+
+```go-html-template
+{{ $data := getJSON "https://example.org/books.json" }}
+{{ $data := getJSON "https://example.org/" "books.json" }}
+```
+
+The resulting data structure is a JSON object:
+
+```json
+[
+ {
+ "author": "Victor Hugo",
+ "rating": 5,
+ "title": "Les Misérables"
+ },
+ {
+ "author": "Victor Hugo",
+ "rating": 4,
+ "title": "The Hunchback of Notre Dame"
+ }
+]
+```
+
+## Options
+
+Add headers to the request by providing an options map:
+
+```go-html-template
+{{ $opts := dict "Authorization" "Bearer abcd" }}
+{{ $data := getJSON "https://example.org/books.json" $opts }}
+```
+
+Add multiple headers using a slice:
+
+```go-html-template
+{{ $opts := dict "X-List" (slice "a" "b" "c") }}
+{{ $data := getJSON "https://example.org/books.json" $opts }}
+```
+
+## Global resource alternative
+
+Consider using the [`resources.Get`] function with [`transform.Unmarshal`] when accessing a global resource.
+
+```text
+my-project/
+└── assets/
+ └── data/
+ └── books.json
+```
+
+```go-html-template
+{{ $data := dict }}
+{{ $p := "data/books.json" }}
+{{ with resources.Get $p }}
+ {{ $data = . | transform.Unmarshal }}
+{{ else }}
+ {{ errorf "Unable to get resource %q" $p }}
+{{ end }}
+```
+
+## Page resource alternative
+
+Consider using the [`Resources.Get`] method with [`transform.Unmarshal`] when accessing a page resource.
+
+```text
+my-project/
+└── content/
+ └── posts/
+ └── reading-list/
+ ├── books.json
+ └── index.md
+```
+
+```go-html-template
+{{ $data := dict }}
+{{ $p := "books.json" }}
+{{ with .Resources.Get $p }}
+ {{ $data = . | transform.Unmarshal }}
+{{ else }}
+ {{ errorf "Unable to get resource %q" $p }}
+{{ end }}
+```
+
+## Remote resource alternative
+
+Consider using the [`resources.GetRemote`] function with [`transform.Unmarshal`] when accessing a remote resource to improve error handling and cache control.
+
+```go-html-template
+{{ $data := dict }}
- {{ else }}
++{{ $url := "https://example.org/books.json" }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $u }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+{{ end }}
+```
+
+[`Resources.Get`]: /methods/page/resources/
+[`resources.GetRemote`]: /functions/resources/getremote/
+[`resources.Get`]: /functions/resources/get/
+[`transform.Unmarshal`]: /functions/transform/unmarshal/
--- /dev/null
- Use the `debug.Timer` function to determine execution time for a block of code, useful for finding performance bottle necks in templates.
+---
+title: debug.Timer
+description: Creates a named timer that reports elapsed time to the console.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: debug.Timer
+ signatures: [debug.Timer NAME]
+---
+
+{{< new-in 0.120.0 >}}
+
++Use the `debug.Timer` function to determine execution time for a block of code, useful for finding performance bottlenecks in templates.
+
+The timer starts when you instantiate it, and stops when you call its `Stop` method.
+
+```go-html-template
+{{ $t := debug.Timer "TestSqrt" }}
+{{ range seq 2000 }}
+ {{ $f := math.Sqrt . }}
+{{ end }}
+{{ $t.Stop }}
+```
+
+Use the `--logLevel info` command line flag when you build the site.
+
+```sh
+hugo --logLevel info
+```
+
+The results are displayed in the console at the end of the build. You can have as many timers as you want and if you don't stop them, they will be stopped at the end of build.
+
+```text
+INFO timer: name TestSqrt count 1002 duration 2.496017496s average 2.491035ms median 2.282291ms
+```
--- /dev/null
- {{ $u := "https://api.github.com/repos/gohugoio/hugo/readme" }}
- {{ with resources.GetRemote $u }}
+---
+title: encoding.Base64Decode
+description: Returns the base64 decoding of the given content.
+categories: []
+keywords: []
+action:
+ aliases: [base64Decode]
+ related:
+ - functions/encoding/Base64Encode
+ returnType: string
+ signatures: [encoding.Base64Decode INPUT]
+aliases: [/functions/base64Decode]
+---
+
+```go-html-template
+{{ "SHVnbw==" | base64Decode }} → Hugo
+```
+
+Use the `base64Decode` function to decode responses from APIs. For example, the result of this call to GitHub's API contains the base64-encoded representation of the repository's README file:
+
+```text
+https://api.github.com/repos/gohugoio/hugo/readme
+```
+
+To retrieve and render the content:
+
+```go-html-template
- {{ else }}
++{{ $url := "https://api.github.com/repos/gohugoio/hugo/readme" }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $u }}
++ {{ else with .Value}}
+ {{ with . | transform.Unmarshal }}
+ {{ .content | base64Decode | markdownify }}
+ {{ end }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+{{ end }}
+```
--- /dev/null
-
+---
+title: fmt.Warnf
+description: Log a WARNING from a template.
+categories: []
+keywords: []
+action:
+ aliases: [warnf]
+ related:
+ - functions/fmt/Errorf
+ - functions/fmt/Erroridf
+ - functions/fmt/Warnidf
+ returnType: string
+ signatures: ['fmt.Warnf FORMAT [INPUT]']
+aliases: [/functions/warnf]
+---
+
+{{% include "functions/fmt/_common/fmt-layout.md" %}}
+
+The `warnf` function evaluates the format string, then prints the result to the WARNING log. Hugo prints each unique message once to avoid flooding the log with duplicate warnings.
+
+```go-html-template
+{{ warnf "The %q shortcode was unable to find %s. See %s" .Name $file .Position }}
+```
+
+Use the [`warnidf`] function to allow optional suppression of specific warnings.
+
+To prevent suppression of duplicate messages when using `warnf` for debugging, make each message unique with the [`math.Counter`] function. For example:
+
+```go-html-template
+{{ range site.RegularPages }}
+ {{ .Section | warnf "%#[2]v [%[1]d]" math.Counter }}
+{{ end }}
+```
+
+[`math.Counter`]: /functions/math/counter/
+
+[`warnidf`]: /functions/fmt/warnidf/
--- /dev/null
- {{< new-in 0.111.0 >}}
-
+---
+title: page
+description: Provides global access to a Page object.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/global/site
+ returnType:
+ signatures: [page]
+toc: true
+aliases: [/functions/page]
+---
+
- But when you are deeply nested inside of a [content view], [partial], or [render hook], it is not always practical or possible to access the `Page` object.
+At the top level of a template that receives a `Page` object in context, these are equivalent:
+
+```go-html-template
+{{ .Params.foo }}
+{{ .Page.Params.foo }}
+{{ page.Params.foo }}
+```
+
+When a `Page` object is not in context, you can use the global `page` function:
+
+```go-html-template
+{{ page.Params.foo }}
+```
+
+{{% note %}}
+Do not use the global `page` function in shortcodes, partials called by shortcodes, or cached partials. See [warnings](#warnings) below.
+{{% /note %}}
+
+## Explanation
+
+Hugo almost always passes a `Page` as the data context into the top level template (e.g., `single.html`). The one exception is the multihost sitemap template. This means that you can access the current page with the `.` in the template.
+
- [content view]: /getting-started/glossary/#content-view
- [partial]: /getting-started/glossary/#partial
- [render hook]: /getting-started/glossary/#render-hook
- [shortcode]: getting-started/glossary/#shortcode
++But when you are deeply nested inside of a [content view](g), [partial](g), or [render hook](g), it is not always practical or possible to access the `Page` object.
+
+Use the global `page` function to access the `Page` object from anywhere in any template.
+
+## Warnings
+
+### Be aware of top-level context
+
+The global `page` function accesses the `Page` object passed into the top-level template.
+
+With this content structure:
+
+```text
+content/
+├── posts/
+│ ├── post-1.md
+│ ├── post-2.md
+│ └── post-3.md
+└── _index.md <-- title is "My Home Page"
+```
+
+And this code in the home template:
+
+```go-html-template
+{{ range site.Sections }}
+ {{ range .Pages }}
+ {{ page.Title }}
+ {{ end }}
+{{ end }}
+```
+
+The rendered output will be:
+
+```text
+My Home Page
+My Home Page
+My Home Page
+```
+
+In the example above, the global `page` function accesses the `Page` object passed into the home template; it does not access the `Page` object of the iterated pages.
+
+### Be aware of caching
+
+Do not use the global `page` function in:
+
+- Shortcodes
+- Partials called by shortcodes
+- Partials cached by the [`partialCached`] function
+
+Hugo caches rendered shortcodes. If you use the global `page` function within a shortcode, and the page content is rendered in two or more templates, the cached shortcode may be incorrect.
+
+Consider this section template:
+
+```go-html-template
+{{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ .Summary }}
+{{ end }}
+```
+
+When you call the [`Summary`] method, Hugo renders the page content including shortcodes. In this case, within a shortcode, the global `page` function accesses the `Page` object of the section page, not the content page.
+
+If Hugo renders the section page before a content page, the cached rendered shortcode will be incorrect. You cannot control the rendering sequence due to concurrency.
+
+[`Summary`]: /methods/page/summary/
+[`partialCached`]: /functions/partials/includecached/
--- /dev/null
- At the top of a page template, the [context] (the dot) is a `Page` object. Within the `range` block, the context is bound to each successive element.
+---
+title: range
+description: Iterates over a non-empty collection, binds context (the dot) to successive elements, and executes the block.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/go-template/break
+ - functions/go-template/continue
+ - functions/go-template/else
+ - functions/go-template/end
+ returnType:
+ signatures: [range COLLECTION]
+aliases: [/functions/range]
+toc: true
+---
+
+{{% include "functions/go-template/_common/truthy-falsy.md" %}}
+
+```go-html-template
+{{ $s := slice "foo" "bar" "baz" }}
+{{ range $s }}
+ {{ . }} → foo bar baz
+{{ end }}
+```
+
+Use with the [`else`] statement:
+
+```go-html-template
+{{ $s := slice "foo" "bar" "baz" }}
+{{ range $s }}
+ <p>{{ . }}</p>
+{{ else }}
+ <p>The collection is empty</p>
+{{ end }}
+```
+
+Within a range block:
+
+- Use the [`continue`] statement to stop the innermost iteration and continue to the next iteration
+- Use the [`break`] statement to stop the innermost iteration and bypass all remaining iterations
+
+## Understanding context
+
- [context]: /getting-started/glossary/#context
++At the top of a page template, the [context](g) (the dot) is a `Page` object. Within the `range` block, the context is bound to each successive element.
+
+With this contrived example that uses the [`seq`] function to generate a slice of integers:
+
+```go-html-template
+{{ range seq 3 }}
+ {{ .Title }}
+{{ end }}
+```
+
+Hugo will throw an error:
+
+ can't evaluate field Title in type int
+
+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 %}}
+Use the `$` to get the context passed into the template.
+{{% /note %}}
+
+This template will render the page title three times:
+
+```go-html-template
+{{ range seq 3 }}
+ {{ $.Title }}
+{{ end }}
+```
+
+{{% note %}}
+Gaining a thorough understanding of context is critical for anyone writing template code.
+{{% /note %}}
+
+[`seq`]: /functions/collections/seq/
+
+## Array or slice of scalars
+
+This template code:
+
+```go-html-template
+{{ $s := slice "foo" "bar" "baz" }}
+{{ range $s }}
+ <p>{{ . }}</p>
+{{ end }}
+```
+
+Is rendered to:
+
+```html
+<p>foo</p>
+<p>bar</p>
+<p>baz</p>
+```
+
+This template code:
+
+```go-html-template
+{{ $s := slice "foo" "bar" "baz" }}
+{{ range $v := $s }}
+ <p>{{ $v }}</p>
+{{ end }}
+```
+
+Is rendered to:
+
+```html
+<p>foo</p>
+<p>bar</p>
+<p>baz</p>
+```
+
+This template code:
+
+```go-html-template
+{{ $s := slice "foo" "bar" "baz" }}
+{{ range $k, $v := $s }}
+ <p>{{ $k }}: {{ $v }}</p>
+{{ end }}
+```
+
+Is rendered to:
+
+```html
+<p>0: foo</p>
+<p>1: bar</p>
+<p>2: baz</p>
+```
+
+## Array or slice of maps
+
+This template code:
+
+```go-html-template
+{{ $m := slice
+ (dict "name" "John" "age" 30)
+ (dict "name" "Will" "age" 28)
+ (dict "name" "Joey" "age" 24)
+}}
+{{ range $m }}
+ <p>{{ .name }} is {{ .age }}</p>
+{{ end }}
+```
+
+Is rendered to:
+
+```html
+<p>John is 30</p>
+<p>Will is 28</p>
+<p>Joey is 24</p>
+```
+
+## Array or slice of pages
+
+This template code:
+
+```go-html-template
+{{ range where site.RegularPages "Type" "articles" }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
+
+Is rendered to:
+
+```html
+<h2><a href="/articles/article-3/">Article 3</a></h2>
+<h2><a href="/articles/article-2/">Article 2</a></h2>
+<h2><a href="/articles/article-1/">Article 1</a></h2>
+```
+
+## Maps
+
+This template code:
+
+```go-html-template
+{{ $m := dict "name" "John" "age" 30 }}
+{{ range $k, $v := $m }}
+ <p>key = {{ $k }} value = {{ $v }}</p>
+{{ end }}
+```
+
+Is rendered to:
+
+```go-html-template
+<p>key = age value = 30</p>
+<p>key = name value = John</p>
+```
+
+Unlike ranging over an array or slice, Hugo sorts by key when ranging over a map.
+
+{{% include "functions/go-template/_common/text-template.md" %}}
+
+[`else`]: /functions/go-template/else/
+[`break`]: /functions/go-template/break/
+[`continue`]: /functions/go-template/continue/
--- /dev/null
- The `return` statement is a custom addition to Go's [text/template] package. Used within partial templates, the `return` statement terminates template execution and returns the given value, if any.
+---
+title: return
+description: Used within partial templates, terminates template execution and returns the given value, if any.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/partials/Include
+ - functions/partials/IncludeCached
+ returnType: any
+ signatures: ['return [VALUE]']
+toc: true
+---
+
- The returned value may be of any data type including, but not limited to, [`bool`], [`float`], [`int`], [`map`], [`resource`], [`slice`], and [`string`].
++The `return` statement is a non-standard extension to Go's [text/template package]. Used within partial templates, the `return` statement terminates template execution and returns the given value, if any.
+
- [`bool`]: /getting-started/glossary/#bool
- [`float`]: /getting-started/glossary/#float
- [`int`]: /getting-started/glossary/#int
- [`map`]: /getting-started/glossary/#map
- [`resource`]: /getting-started/glossary/#resource
- [`slice`]: /getting-started/glossary/#slice
- [`string`]: /getting-started/glossary/#string
- [text/template]: https://pkg.go.dev/text/template
-
++The returned value may be of any data type including, but not limited to, [`bool`](g), [`float`](g), [`int`](g), [`map`](g), [`resource`](g), [`slice`](g), or [`string`](g).
+
+A `return` statement without a value returns an empty string of type `template.HTML`.
+
+{{% 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 %}}
+
+## Example
+
+By way of example, let's create a partial template that _renders_ HTML, describing whether the given number is odd or even:
+
+{{< code file="layouts/partials/odd-or-even.html" >}}
+{{ if math.ModBool . 2 }}
+ <p>{{ . }} is even</p>
+{{ else }}
+ <p>{{ . }} is odd</p>
+{{ end }}
+{{< /code >}}
+
+When called, the partial renders HTML:
+
+```go-html-template
+{{ partial "odd-or-even.html" 42 }} → <p>42 is even</p>
+```
+
+Instead of rendering HTML, let's create a partial that _returns_ a boolean value, reporting whether the given number is even:
+
+{{< code file="layouts/partials/is-even.html" >}}
+{{ return math.ModBool . 2 }}
+{{< /code >}}
+
+With this template:
+
+```go-html-template
+{{ $number := 42 }}
+{{ if partial "is-even.html" $number }}
+ <p>{{ $number }} is even</p>
+{{ else }}
+ <p>{{ $number }} is odd</p>
+{{ end }}
+```
+
+Hugo renders:
+
+```html
+<p>42 is even</p>
+```
+
+See additional examples in the [partial templates] section.
+
+[partial templates]: /templates/partial/#returning-a-value-from-a-partial
+
+## Usage
+
+{{% note %}}
+Unlike `return` statements in other languages, Hugo executes the first occurrence of the `return` statement regardless of its position within logical blocks.
+{{% /note %}}
+
+A partial that returns a value must contain only one `return` statement, placed at the end of the template.
+
+For example:
+
+{{< code file="layouts/partials/is-even.html" >}}
+{{ $result := false }}
+{{ if math.ModBool . 2 }}
+ {{ $result = "even" }}
+{{ else }}
+ {{ $result = "odd" }}
+{{ end }}
+{{ return $result }}
+{{< /code >}}
+
+{{% note %}}
+The construct below is incorrect; it contains more than one `return` statement.
+{{% /note %}}
+
+{{< code file="layouts/partials/do-not-do-this.html" >}}
+{{ if math.ModBool . 2 }}
+ {{ return "even" }}
+{{ else }}
+ {{ return "odd" }}
+{{ end }}
+{{< /code >}}
--- /dev/null
--- /dev/null
++---
++title: try
++description: Returns a TryValue object after evaluating the given expression.
++categories: []
++keywords: []
++action:
++ aliases: []
++ related: []
++ returnType: TryValue
++ signatures: ['try EXPRESSION']
++toc: true
++---
++
++{{< new-in 0.141.0 >}}
++
++The `try` statement is a non-standard extension to Go's [text/template] package. It introduces a mechanism for handling errors within templates, mimicking the `try-catch` constructs found in other programming languages.
++
++[text/template]: https://pkg.go.dev/text/template
++
++## Methods
++
++The `TryValue` object encapsulates the result of evaluating the expression, and provides two methods:
++
++Err
++: (`string`) Returns a string representation of the error thrown by the expression, if an error occurred, or returns `nil` if the expression evaluated without errors.
++
++Value
++: (`any`) Returns the result of the expression if the evaluation was successful, or returns `nil` if an error occurred while evaluating the expression.
++
++## Explanation
++
++By way of example, let's divide a number by zero:
++
++```go-html-template
++{{ $x := 1 }}
++{{ $y := 0 }}
++{{ $result := div $x $y }}
++{{ printf "%v divided by %v equals %v" $x $y .Value }}
++```
++
++As expected, the example above throws an error and fails the build:
++
++```terminfo
++Error: error calling div: can't divide the value by 0
++```
++
++Instead of failing the build, we can catch the error and emit a warning:
++
++```go-html-template
++{{ $x := 1 }}
++{{ $y := 0 }}
++{{ with try (div $x $y) }}
++ {{ with .Err }}
++ {{ warnf "%s" . }}
++ {{ else }}
++ {{ printf "%v divided by %v equals %v" $x $y .Value }}
++ {{ end }}
++{{ end }}
++```
++
++The error thrown by the expression is logged to the console as a warning:
++
++```terminfo
++WARN error calling div: can't divide the value by 0
++```
++
++Now let's change the arguments to avoid dividing by zero:
++
++```go-html-template
++{{ $x := 42 }}
++{{ $y := 6 }}
++{{ with try (div $x $y) }}
++ {{ with .Err }}
++ {{ warnf "%s" . }}
++ {{ else }}
++ {{ printf "%v divided by %v equals %v" $x $y .Value }}
++ {{ end }}
++{{ end }}
++```
++
++Hugo renders the above to:
++
++```html
++42 divided by 6 equals 7
++```
++
++## Example
++
++Error handling is essential when using the [`resources.GetRemote`] function to capture remote resources such as data or images. When calling this function, if the HTTP request fails, Hugo will fail the build.
++
++[`resources.GetRemote`]: /functions/resources/getremote/
++
++Instead of failing the build, we can catch the error and emit a warning:
++
++```go-html-template
++{{ $url := "https://broken-example.org/images/a.jpg" }}
++{{ with try (resources.GetRemote $url) }}
++ {{ with .Err }}
++ {{ warnf "%s" . }}
++ {{ else with .Value }}
++ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ else }}
++ {{ warnf "Unable to get remote resource %q" $url }}
++ {{ end }}
++{{ end }}
++```
++In the above, note that the [context](g) within the last conditional block is the `TryValue` object returned by the `try` statement. At this point neither the `Err` nor `Value` methods returned anything, so the current context is not useful. Use the `$` to access the [template context] if needed.
++
++[template context]: /templates/introduction/#template-context
++
++{{% note %}}
++Hugo does not classify an HTTP response with status code 404 as an error. In this case `resources.GetRemote` returns nil.
++{{% /note %}}
--- /dev/null
- At the top of a page template, the [context] (the dot) is a `Page` object. Inside of the `with` block, the context is bound to the value passed to the `with` statement.
+---
+title: with
+description: Binds context (the dot) to the expression and executes the block if expression is truthy.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/go-template/if
+ - functions/go-template/else
+ - functions/go-template/end
+ - functions/collections/IsSet
+ returnType:
+ signatures: [with EXPR]
+aliases: [/functions/with]
+toc: true
+---
+
+{{% include "functions/go-template/_common/truthy-falsy.md" %}}
+
+```go-html-template
+{{ $var := "foo" }}
+{{ with $var }}
+ {{ . }} → foo
+{{ end }}
+```
+
+Use with the [`else`] statement:
+
+```go-html-template
+{{ $var := "foo" }}
+{{ with $var }}
+ {{ . }} → foo
+{{ else }}
+ {{ print "var is falsy" }}
+{{ end }}
+```
+
+Use `else with` to check multiple conditions:
+
+```go-html-template
+{{ $v1 := 0 }}
+{{ $v2 := 42 }}
+{{ with $v1 }}
+ {{ . }}
+{{ else with $v2 }}
+ {{ . }} → 42
+{{ else }}
+ {{ print "v1 and v2 are falsy" }}
+{{ end }}
+```
+
+Initialize a variable, scoped to the current block:
+
+```go-html-template
+{{ with $var := 42 }}
+ {{ . }} → 42
+ {{ $var }} → 42
+{{ end }}
+{{ $var }} → undefined
+```
+
+## Understanding context
+
- [context]: /getting-started/glossary/#context
-
++At the top of a page template, the [context](g) (the dot) is a `Page` object. Inside of the `with` block, the context is bound to the value passed to the `with` statement.
+
+With this contrived example:
+
+```go-html-template
+{{ with 42 }}
+ {{ .Title }}
+{{ end }}
+```
+
+Hugo will throw an error:
+
+ can't evaluate field Title in type int
+
+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 %}}
+Use the `$` to get the context passed into the template.
+{{% /note %}}
+
+This template will render the page title as desired:
+
+```go-html-template
+{{ with 42 }}
+ {{ $.Title }}
+{{ end }}
+```
+
+{{% note %}}
+Gaining a thorough understanding of context is critical for anyone writing template code.
+{{% /note %}}
+
+{{% include "functions/go-template/_common/text-template.md" %}}
+
+[`else`]: /functions/go-template/else/
--- /dev/null
- The `hugo.Environment` function returns the current running [environment] as defined through the `--environment` command line flag.
+---
+title: hugo.Environment
+description: Returns the current running environment.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/hugo/IsDevelopment
+ - functions/hugo/IsProduction
+ returnType: string
+ signatures: [hugo.Environment]
+---
+
-
- [environment]: /getting-started/glossary/#environment
++The `hugo.Environment` function returns the current running [environment](g) as defined through the `--environment` command line flag.
+
+```go-html-template
+{{ hugo.Environment }} → production
+```
+
+Command line examples:
+
+Command|Environment
+:--|:--
+`hugo`|`production`
+`hugo --environment staging`|`staging`
+`hugo server`|`development`
+`hugo server --environment staging`|`staging`
--- /dev/null
- {{ hugo.Generator }} → <meta name="generator" content="Hugo 0.137.1">
+---
+title: hugo.Generator
+description: Renders an HTML meta element identifying the software that generated the site.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: template.HTML
+ signatures: [hugo.Generator]
+---
+
+```go-html-template
++{{ hugo.Generator }} → <meta name="generator" content="Hugo 0.141.0">
+```
--- /dev/null
- The global `hugo.Store` function creates a persistent [scratch pad] to store and manipulate data. To create a locally scoped, use the [`newScratch`] function.
+---
+title: hugo.Store
+description: Returns a global, persistent "scratch pad" to store and manipulate data.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/store
+ - methods/site/store
+ - functions/collections/NewScratch
+ returnType: maps.Scratch
+ signatures: [hugo.Store]
+toc: true
+---
+
+{{< new-in 0.139.0 >}}
+
- [scratch pad]: /getting-started/glossary/#scratch-pad
++The global `hugo.Store` function creates a persistent [scratch pad](g) to store and manipulate data. To create a locally scoped, use the [`newScratch`] function.
+
+[`Scratch`]: /functions/hugo/scratch/
+[`newScratch`]: /functions/collections/newscratch/
- If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop] variable:
-
- [noop]: /getting-started/glossary/#noop
+
+## Methods
+
+###### Set
+
+Sets the value of a given key.
+
+```go-html-template
+{{ hugo.Store.Set "greeting" "Hello" }}
+```
+
+###### Get
+
+Gets the value of a given key.
+
+```go-html-template
+{{ hugo.Store.Set "greeting" "Hello" }}
+{{ hugo.Store.Get "greeting" }} → Hello
+```
+
+###### Add
+
+Adds a given value to existing value(s) of the given key.
+
+For single values, `Add` accepts values that support Go's `+` operator. If the first `Add` for a key is an array or slice, the following adds will be appended to that list.
+
+```go-html-template
+{{ hugo.Store.Set "greeting" "Hello" }}
+{{ hugo.Store.Add "greeting" "Welcome" }}
+{{ hugo.Store.Get "greeting" }} → HelloWelcome
+```
+
+```go-html-template
+{{ hugo.Store.Set "total" 3 }}
+{{ hugo.Store.Add "total" 7 }}
+{{ hugo.Store.Get "total" }} → 10
+```
+
+```go-html-template
+{{ hugo.Store.Set "greetings" (slice "Hello") }}
+{{ hugo.Store.Add "greetings" (slice "Welcome" "Cheers") }}
+{{ hugo.Store.Get "greetings" }} → [Hello Welcome Cheers]
+```
+
+###### SetInMap
+
+Takes a `key`, `mapKey` and `value` and adds a map of `mapKey` and `value` to the given `key`.
+
+```go-html-template
+{{ hugo.Store.SetInMap "greetings" "english" "Hello" }}
+{{ hugo.Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ hugo.Store.Get "greetings" }} → map[english:Hello french:Bonjour]
+```
+
+###### DeleteInMap
+
+Takes a `key` and `mapKey` and removes the map of `mapKey` from the given `key`.
+
+```go-html-template
+{{ hugo.Store.SetInMap "greetings" "english" "Hello" }}
+{{ hugo.Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ hugo.Store.DeleteInMap "greetings" "english" }}
+{{ hugo.Store.Get "greetings" }} → map[french:Bonjour]
+```
+
+###### GetSortedMapValues
+
+Returns an array of values from `key` sorted by `mapKey`.
+
+```go-html-template
+{{ hugo.Store.SetInMap "greetings" "english" "Hello" }}
+{{ hugo.Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ hugo.Store.GetSortedMapValues "greetings" }} → [Hello Bonjour]
+```
+
+###### Delete
+
+Removes the given key.
+
+```go-html-template
+{{ hugo.Store.Set "greeting" "Hello" }}
+{{ hugo.Store.Delete "greeting" }}
+```
+
+## Determinate values
+
+The `Store` method is often used to set scratch pad values within a shortcode, a partial template called by a shortcode, or by a Markdown render hook. In all three cases, the scratch pad values are indeterminate until Hugo renders the page content.
+
++If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop](g) variable:
+
+```go-html-template
+{{ $noop := .Content }}
+{{ hugo.Store.Get "mykey" }}
+```
+
+You can also trigger content rendering with the `ContentWithoutSummary`, `FuzzyWordCount`, `Len`, `Plain`, `PlainWords`, `ReadingTime`, `Summary`, `Truncated`, and `WordCount` methods. For example:
+
+```go-html-template
+{{ $noop := .WordCount }}
+{{ hugo.Store.Get "mykey" }}
+```
--- /dev/null
- {{ hugo.Version }} → 0.137.1
+---
+title: hugo.Version
+description: Returns the current version of the Hugo binary.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: hugo.VersionString
+ signatures: [hugo.Version]
+---
+
+```go-html-template
++{{ hugo.Version }} → 0.141.0
+```
--- /dev/null
-
- {{< new-in 0.112.0 >}}
+---
+title: hugo.WorkingDir
+description: Returns the project working directory.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: string
+ signatures: [hugo.WorkingDir]
+---
+
+```go-html-template
+{{ hugo.WorkingDir }} → /home/user/projects/my-hugo-site
+```
--- /dev/null
- This is a legacy function, superseded by the [`Width`] and [`Height`] methods for [global], [page], and [remote] resources. See the [image processing] section for details.
+---
+title: images.Config
+description: Returns an image.Config structure from the image at the specified path, relative to the working directory.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: image.Config
+ signatures: [images.Config PATH]
+aliases: [/functions/imageconfig]
+---
+
+See [image processing] for an overview of Hugo's image pipeline.
+
+[image processing]: /content-management/image-processing/
+
+```go-html-template
+{{ $ic := images.Config "/static/images/a.jpg" }}
+
+{{ $ic.Width }} → 600 (int)
+{{ $ic.Height }} → 400 (int)
+```
+
+Supported image formats include GIF, JPEG, PNG, TIFF, and WebP.
+
+{{% note %}}
- [global]: /getting-started/glossary/#global-resource
++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/
- [page]: /getting-started/glossary/#page-resource
- [remote]: /getting-started/glossary/#remote-resource
+[image processing]: /content-management/image-processing/
+{{% /note %}}
--- /dev/null
- 2. Output the image to a lossless format such as GIF or PNG
+---
+title: images.Dither
+description: Returns an image filter that dithers an image.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/images/Filter
+ - functions/images/Process
+ - methods/resource/Colors
+ - methods/resource/Filter
+ returnType: images.filter
+ signatures: ['images.Dither [OPTIONS]']
+toc: true
+---
+
+{{< new-in 0.123.0 >}}
+
+## Options
+
+colors
+: (`string array`) A slice of two or more colors that make up the dithering palette, each expressed as an RGB or RGBA [hexadecimal] value, with or without a leading hash mark. The default values are opaque black (`000000ff`) and opaque white (`ffffffff`).
+
+[hexadecimal]: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
+
+method
+: (`string`) The dithering method. See the [dithering methods](#dithering-methods) section below for a list of the available methods. Default is `FloydSteinberg`.
+
+serpentine
+: (`bool`) Applicable to error diffusion dithering methods, serpentine controls whether the error diffusion matrix is applied in a serpentine manner, meaning that it goes right-to-left every other line. This greatly reduces line-type artifacts. Default is `true`.
+
+strength
+: (`float`) The strength at which to apply the dithering matrix, typically a value in the range [0, 1]. A value of `1.0` applies the dithering matrix at 100% strength (no modification of the dither matrix). The `strength` is inversely proportional to contrast; reducing the strength increases the contrast. Setting `strength` to a value such as `0.8` can be useful to reduce noise in the dithered image. Default is `1.0`.
+
+## Usage
+
+Create the options map:
+
+```go-html-template
+{{ $opts := dict
+ "colors" (slice "222222" "808080" "dddddd")
+ "method" "ClusteredDot4x4"
+ "strength" 0.85
+}}
+```
+
+Create the filter:
+
+```go-html-template
+{{ $filter := images.Dither $opts }}
+```
+
+Or create the filter using the default settings:
+
+```go-html-template
+{{ $filter := images.Dither }}
+```
+
+{{% include "functions/images/_common/apply-image-filter.md" %}}
+
+## Dithering methods
+
+See the [Go documentation] for descriptions of each of the dithering methods below.
+
+[Go documentation]: https://pkg.go.dev/github.com/makeworld-the-better-one/dither/v2#pkg-variables
+
+Error diffusion dithering methods:
+
+- Atkinson
+- Burkes
+- FalseFloydSteinberg
+- FloydSteinberg
+- JarvisJudiceNinke
+- Sierra
+- Sierra2
+- Sierra2_4A
+- Sierra3
+- SierraLite
+- Simple2D
+- StevenPigeon
+- Stucki
+- TwoRowSierra
+
+Ordered dithering methods:
+
+- ClusteredDot4x4
+- ClusteredDot6x6
+- ClusteredDot6x6_2
+- ClusteredDot6x6_3
+- ClusteredDot8x8
+- ClusteredDotDiagonal16x16
+- ClusteredDotDiagonal6x6
+- ClusteredDotDiagonal8x8
+- ClusteredDotDiagonal8x8_2
+- ClusteredDotDiagonal8x8_3
+- ClusteredDotHorizontalLine
+- ClusteredDotSpiral5x5
+- ClusteredDotVerticalLine
+- Horizontal3x5
+- Vertical5x3
+
+## Example
+
+This example uses the default dithering options.
+
+{{< img
+ src="images/examples/zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="Dither"
+ filterArgs=""
+ example=true
+>}}
+
+## Recommendations
+
+Regardless of dithering method, do both of the following to obtain the best results:
+
+1. Scale the image _before_ dithering
-
++1. Output the image to a lossless format such as GIF or PNG
+
+The example below does both of these, and it sets the dithering palette to the three most dominant colors in the image.
+
- 2. Converts the image to grayscale
- 3. Dithers the image using the default (`FloydSteinberg`) dithering method with a grayscale palette
- 4. Converts the image to the PNG format
+```go-html-template
+{{ with resources.Get "original.jpg" }}
+ {{ $opts := dict
+ "method" "ClusteredDotSpiral5x5"
+ "colors" (first 3 .Colors)
+ }}
+ {{ $filters := slice
+ (images.Process "resize 800x")
+ (images.Dither $opts)
+ (images.Process "png")
+ }}
+ {{ with . | images.Filter $filters }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ end }}
+```
+
+For best results, if the dithering palette is grayscale, convert the image to grayscale before dithering.
+
+```go-html-template
+{{ $opts := dict "colors" (slice "222" "808080" "ddd") }}
+{{ $filters := slice
+ (images.Process "resize 800x")
+ (images.Grayscale)
+ (images.Dither $opts)
+ (images.Process "png")
+}}
+{{ with images.Filter $filters . }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+The example above:
+
+1. Resizes the image to be 800 px wide
++1. Converts the image to grayscale
++1. Dithers the image using the default (`FloydSteinberg`) dithering method with a grayscale palette
++1. Converts the image to the PNG format
--- /dev/null
--- /dev/null
++---
++title: images.Mask
++description: Returns an image filter that applies a mask to the source image.
++categories: []
++keywords: []
++action:
++ aliases: []
++ related:
++ - functions/images/Filter
++ - methods/resource/Filter
++ returnType: images.filter
++ signatures: [images.Mask RESOURCE]
++toc: true
++---
++
++{{< new-in 0.141.0 >}}
++
++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 %}}
++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 %}}
++
++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:
++
++```go-html-template
++{{ $filter := images.Process "#00ff00" }}
++```
++
++[site configuration]: /content-management/image-processing/#imaging-configuration
++
++## Usage
++
++Create a slice of filters, one for WebP conversion and the other for mask application:
++
++```go-html-template
++{{ $filter1 := images.Process "webp" }}
++{{ $filter2 := images.Mask (resources.Get "images/mask.png") }}
++{{ $filters := slice $filter1 $filter2 }}
++```
++
++Apply the filters using the [`images.Filter`] function:
++
++```go-html-template
++{{ with resources.Get "images/original.jpg" }}
++ {{ with . | images.Filter $filters }}
++ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ end }}
++{{ end }}
++```
++
++You can also apply the filter using the [`Filter`] method on a 'Resource' object:
++
++```go-html-template
++{{ with resources.Get "images/original.jpg" }}
++ {{ with .Filter $filters }}
++ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ end }}
++{{ end }}
++```
++
++[`images.Filter`]: /functions/images/filter/
++[`Filter`]: /methods/resource/filter/
++
++## Example
++
++Mask
++
++{{< img
++ src="images/examples/mask.png"
++ example=false
++>}}
++
++{{< img
++ src="images/examples/zion-national-park.jpg"
++ alt="Zion National Park"
++ filter="mask"
++ filterArgs="images/examples/mask.png"
++ example=true
++>}}
--- /dev/null
- The overlay image can be a [global resource], a [page resource], or a [remote resource].
-
- [global resource]: /getting-started/glossary/#global-resource
- [page resource]: /getting-started/glossary/#page-resource
- [remote resource]: /getting-started/glossary/#remote-resource
+---
+title: images.Overlay
+description: Returns an image filter that overlays the source image at the given coordinates, relative to the upper left corner.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/images/Filter
+ - methods/resource/Filter
+ returnType: images.filter
+ signatures: [images.Overlay RESOURCE X Y]
+toc: true
+---
+
+## Usage
+
+Capture the overlay image as a resource:
+
+```go-html-template
+{{ $overlay := "" }}
+{{ $path := "images/logo.png" }}
+{{ with resources.Get $path }}
+ {{ $overlay = . }}
+{{ else }}
+ {{ errorf "Unable to get resource %q" $path }}
+{{ end }}
+```
+
++The overlay image can be a [global resource](g), a [page resource](g), or a [remote resource](g).
+
+Create the filter:
+
+```go-html-template
+{{ $filter := images.Overlay $overlay 20 20 }}
+```
+
+{{% include "functions/images/_common/apply-image-filter.md" %}}
+
+## Example
+
+{{< img
+ src="images/examples/zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="Overlay"
+ filterArgs="images/logos/logo-64x64.png,20,20"
+ example=true
+>}}
--- /dev/null
-
+---
+title: images.Process
+description: Returns an image filter that processes the given image using the given specification.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/images/Filter
+ - methods/resource/Filter
+ - methods/resource/Process
+ returnType: images.filter
+ signatures: [images.Process SPEC]
+toc: true
+---
+
+{{< new-in 0.119.0 >}}
+
+This filter has the same options as the [`Process`] method on a `Resource` object, but using it as a filter may be more effective if you need to apply multiple filters to an image.
+
+[`Process`]: /methods/resource/process/
+
+The process specification is a space-delimited, case-insensitive list of one or more of the following in any sequence:
+
+action
+: Specify zero or one of `crop`, `fill`, `fit`, or `resize`. If you specify an action you must also provide dimensions. See [details](content-management/image-processing/#image-processing-methods).
+
+```go-html-template
+{{ $filter := images.Process "resize 300x" }}
+```
+
+dimensions
+: Required if you specify an action. Provide width _or_ height when using `resize`, else provide both width _and_ height. See [details](/content-management/image-processing/#dimensions).
+
+```go-html-template
+{{ $filter := images.Process "crop 200x200" }}
+```
+
+anchor
+: Use with the `crop` or `fill` action. Specify zero or one of `TopLeft`, `Top`, `TopRight`, `Left`, `Center`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`, or `Smart`. Default is `Smart`. See [details](/content-management/image-processing/#anchor).
+
+```go-html-template
+{{ $filter := images.Process "crop 200x200 center" }}
+```
+
+rotation
+: Typically specify zero or one of `r90`, `r180`, or `r270`. Also supports arbitrary rotation angles. See [details](/content-management/image-processing/#rotation).
+
+```go-html-template
+{{ $filter := images.Process "r90" }}
+{{ $filter := images.Process "crop 200x200 center r90" }}
+```
+
+target format
+: Specify zero or one of `gif`, `jpeg`, `png`, `tiff`, or `webp`. See [details](/content-management/image-processing/#target-format).
+
+```go-html-template
+{{ $filter := images.Process "webp" }}
+{{ $filter := images.Process "crop 200x200 center r90 webp" }}
+```
+
+quality
+: Applicable to JPEG and WebP images. Optionally specify `qN` where `N` is an integer in the range [0, 100]. Default is `75`. See [details](/content-management/image-processing/#quality).
+
+```go-html-template
+{{ $filter := images.Process "q50" }}
+{{ $filter := images.Process "crop 200x200 center r90 webp q50" }}
+```
+
+hint
+: Applicable to WebP images and equivalent to the `-preset` flag for the [`cwebp`] encoder. Specify zero or one of `drawing`, `icon`, `photo`, `picture`, or `text`. Default is `photo`. See [details](/content-management/image-processing/#hint).
+
+[`cwebp`]: https://developers.google.com/speed/webp/docs/cwebp
+
+```go-html-template
+{{ $filter := images.Process "webp" "icon" }}
+{{ $filter := images.Process "crop 200x200 center r90 webp q50 icon" }}
+```
+
+background color
+: When converting a PNG or WebP with transparency to a format that does not support transparency, optionally specify a background color using a 3-digit or a 6-digit hexadecimal color code. Default is `#ffffff` (white). See [details](/content-management/image-processing/#background-color).
+
+```go-html-template
+{{ $filter := images.Process "jpeg #000" }}
+{{ $filter := images.Process "crop 200x200 center r90 q50 jpeg #000" }}
+```
+
+resampling filter
+: Typically specify zero or one of `Box`, `Lanczos`, `CatmullRom`, `MitchellNetravali`, `Linear`, or `NearestNeighbor`. Other resampling filters are available. See [details](/content-management/image-processing/#resampling-filter).
+
+```go-html-template
+{{ $filter := images.Process "resize 300x lanczos" }}
+{{ $filter := images.Process "resize 300x r90 q50 jpeg #000 lanczos" }}
+```
+
+## Usage
+
+Create a filter:
+
+```go-html-template
+{{ $filter := images.Process "resize 256x q40 webp" }}
+```
+
+{{% include "functions/images/_common/apply-image-filter.md" %}}
+
+## Example
+
+{{< img
+ src="images/examples/zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="Process"
+ filterArgs="resize 256x q40 webp"
+ example=true
+>}}
--- /dev/null
- [related documentation]: /content-management/shortcodes/#qr
+---
+title: images.QR
+description: Encodes the given text into a QR code using the specified options, returning an image resource.
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: images.ImageResource
+ signatures: ['images.QR TEXT OPTIONS']
+toc: true
+math: true
+---
+
+{{< new-in 0.141.0 >}}
+
+The `images.QR` function encodes the given text into a [QR code] using the specified options, returning an image resource. The size of the generated image depends on three factors:
+
+- Data length: Longer text necessitates a larger image to accommodate the increased information density.
+- Error correction level: Higher error correction levels enhance the QR code's resistance to damage, but this typically results in a slightly larger image size to maintain readability.
+- Pixels per module: The number of image pixels assigned to each individual module (the smallest unit of the QR code) directly impacts the overall image size. A higher pixel count per module leads to a larger, higher-resolution image.
+
+Although the default option values are sufficient for most applications, you should test the rendered QR code both on-screen and in print.
+
+[QR code]: https://en.wikipedia.org/wiki/QR_code
+
+## Options
+
+level
+: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
+
+Error correction level|Redundancy
+:--|:--|:--
+low|20%
+medium|38%
+quartile|55%
+high|65%
+
+scale
+: (`int`) The number of image pixels per QR code module. Must be greater than or equal to `2`. Default is `4`.
+
+targetDir
+: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image. Use Unix-style slashes (`/`) to separarate path segments. If empty or not provided, the image is placed directly in the `publishDir` root. Hugo automatically creates the necessary subdirectories if they don't exist.
+
+[`publishDir`]: /getting-started/configuration/#publishdir
+
+## Examples
+
+To create a QR code using the default values for `level` and `scale`:
+
+```go-html-template
+{{ $text := "https://gohugo.io" }}
+{{ with images.QR $text }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+{{< qr text="https://gohugo.io" class="qrcode" />}}
+
+Specify `level`, `scale`, and `targetDir` as needed to achieve the desired result:
+
+```go-html-template
+{{ $text := "https://gohugo.io" }}
+{{ $opts := dict
+ "level" "high"
+ "scale" 3
+ "targetDir" "codes"
+}}
+{{ with images.QR $text $opts }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+{{< qr text="https://gohugo.io" level="high" scale=3 targetDir="codes" class="qrcode" />}}
+
+## Scale
+
+As you decrease the size of a QR code, the maximum distance at which it can be reliably scanned by a device also decreases.
+
+In the example above, we set the `scale` to `2`, resulting in a QR code where each module consists of 2x2 pixels. While this might be sufficient for on-screen display, it's likely to be problematic when printed at 600 dpi.
+
+\[ \frac{2\:px}{module} \times \frac{1\:inch}{600\:px} \times \frac{25.4\:mm}{1\:inch} = \frac{0.085\:mm}{module} \]
+
+This module size is half of the commonly recommended minimum of 0.170 mm.\
+If the QR code will be printed, use the default `scale` value of `4` pixels per module.
+
+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 %}}
+Always test the rendered QR code both on-screen and in print.
+{{% /note %}}
+
+## Shortcode
+
+Call the `qr` shortcode to insert a QR code into your content.
+
+Use the self-closing syntax to pass the text as an argument:
+
+```text
+{{</* qr text="https://gohugo.io" /*/>}}
+```
+
+Or insert the text between the opening and closing tags:
+
+```text
+{{</* qr */>}}
+https://gohugo.io
+{{</* /qr */>}}
+```
+
+The `qr` shortcode accepts several arguments including `level` and `scale`. See the [related documentation] for details.
+
++[related documentation]: /shortcodes/qr/
--- /dev/null
- : (`resource.Resource`) The font can be a [global resource], a [page resource], or a [remote resource]. Default is [Go Regular], a proportional sans-serif TrueType font.
+---
+title: images.Text
+description: Returns an image filter that adds text to an image.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/images/Filter
+ - methods/resource/Filter
+ returnType: images.filter
+ signatures: ['images.Text TEXT [OPTIONS]']
+toc: true
+---
+
+## Options
+
+Although none of the options are required, at a minimum you will want to set the `size` to be some reasonable percentage of the image height.
+
++alignx
++ {{< new-in 0.141.0 >}}
++: (`string`) The horizontal alignment of the text relative to the horizontal offset, one of `left`, `center`, or `right`. Default is `left`.
++
+color
+: (`string`) The font color, either a 3-digit or 6-digit hexadecimal color code. Default is `#ffffff` (white).
+
+font
- alignx
- {{< new-in 0.141.0 >}}
- : (`string`) The horizontal alignment of the text relative to the `x` position. One of `left`, `center`, or `right`. Default is `left`.
++: (`resource.Resource`) The font can be a [global resource](g), a [page resource](g), or a [remote resource](g). Default is [Go Regular], a proportional sans-serif TrueType font.
+
+[Go Regular]: https://go.dev/blog/go-fonts#sans-serif
+
+linespacing
+: (`int`) The number of pixels between each line. For a line height of 1.4, set the `linespacing` to 0.4 multiplied by the `size`. Default is `2`.
+
+size
+: (`int`) The font size in pixels. Default is `20`.
+
+x
+: (`int`) The horizontal offset, in pixels, relative to the left of the image. Default is `10`.
+
+y
+: (`int`) The vertical offset, in pixels, relative to the top of the image. Default is `10`.
+
- [global resource]: /getting-started/glossary/#global-resource
- [page resource]: /getting-started/glossary/#page-resource
- [remote resource]: /getting-started/glossary/#remote-resource
++## Usage
+
- ## Usage
++Set the text and paths:
+
- {{ $path := "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf" }}
- {{ with resources.GetRemote $path }}
++```go-html-template
++{{ $text := "Zion National Park" }}
++{{ $fontPath := "https://github.com/google/fonts/raw/main/ofl/lato/Lato-Regular.ttf" }}
++{{ $imagePath := "images/original.jpg" }}
++```
+
+Capture the font as a resource:
+
+```go-html-template
+{{ $font := "" }}
- {{ else }}
++{{ with try (resources.GetRemote $fontPath) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get resource %q" $path }}
++ {{ else with .Value }}
+ {{ $font = . }}
++ {{ else }}
++ {{ errorf "Unable to get resource %s" $fontPath }}
+ {{ end }}
- Create the options map:
+{{ end }}
+```
+
- {{ $opts := dict
- "color" "#fbfaf5"
- "font" $font
- "linespacing" 8
- "size" 40
- "x" 25
- "y" 190
- }}
++Create the filter, centering the text horizontally and vertically:
+
+```go-html-template
- Set the text:
++{{ $r := "" }}
++{{ $filter := "" }}
++{{ with $r = resources.Get $imagePath }}
++ {{ $opts := dict
++ "alignx" "center"
++ "color" "#fbfaf5"
++ "font" $font
++ "linespacing" 8
++ "size" 60
++ "x" (mul .Width 0.5 | int)
++ "y" (mul .Height 0.5 | int)
++ }}
++ {{ $filter = images.Text $text $opts }}
++{{ else }}
++ {{ errorf "Unable to get resource %s" $imagePath }}
++{{ end }}
+```
+
- {{ $text := "Zion National Park" }}
++Apply the filter using the [`images.Filter`] function:
+
+```go-html-template
- Create the filter:
++{{ with $r }}
++ {{ with . | images.Filter $filter }}
++ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ end }}
++{{ end }}
+```
+
- {{ $filter := images.Text $text $opts }}
++You can also apply the filter using the [`Filter`] method on a `Resource` object:
+
+```go-html-template
- {{% include "functions/images/_common/apply-image-filter.md" %}}
++{{ with $r }}
++ {{ with .Filter $filter }}
++ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ end }}
++{{ end }}
+```
+
++[`images.Filter`]: /functions/images/filter/
++[`Filter`]: /methods/resource/filter/
+
+## Example
+
+{{< img
+ src="images/examples/zion-national-park.jpg"
+ alt="Zion National Park"
+ filter="Text"
+ filterArgs="Zion National Park,25,190,40,1.2,#fbfaf5"
+ example=true
+>}}
--- /dev/null
-
+---
+title: js.Batch
+description: Build JavaScript bundle groups with global code splitting and flexible hooks/runners setup.
+weight: 50
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/js/Build
+ - functions/js/Babel
+ - functions/resources/Fingerprint
+ - functions/resources/Minify
+ returnType: js.Batcher
+ signatures: ['js.Batch [ID]']
+toc: true
+---
+
+{{% note %}}
+For a runnable example of this feature, see [this test and demo repo](https://github.com/bep/hugojsbatchdemo/).
+{{% /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:
+
+* [Group]
+ * [Script]
+ * [SetOptions]
+ * [Instance]
+ * [SetOptions]
+ * [Runner]
+ * [SetOptions]
+ * [Config]
+ * [SetOptions]
+
-
+## Group
+
+The `Group` method take an `ID` (`string`) as argument. No slashes. It returns an object with these methods:
+
-
+#### Script
+
+The `Script` method takes an `ID` (`string`) as argument. No slashes. It returns an [OptionsSetter] that can be used to set [script options] for this script.
+
+```go-html-template
+{{ with js.Batch "js/mybatch" }}
+ {{ with .Group "mygroup" }}
+ {{ with .Script "myscript" }}
+ {{ .SetOptions (dict "resource" (resources.Get "myscript.js")) }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+`SetOptions` takes a [script options] map. Note that if you want the script to be handled by a [runner], you need to set the `export` option to match what you want to pass on to the runner (default is `*`).
+
+#### Instance
+
+The `Instance` method takes two `string` arguments `SCRIPT_ID` and `INSTANCE_ID`. No slashes. It returns an [OptionsSetter] that can be used to set [params options] for this instance.
+
+```go-html-template
+{{ with js.Batch "js/mybatch" }}
+ {{ with .Group "mygroup" }}
+ {{ with .Instance "myscript" "myinstance" }}
+ {{ .SetOptions (dict "params" (dict "param1" "value1")) }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+`SetOptions` takes a [params options] map. The instance options will be passed to any [runner] script in the same group, as JSON.
+
-
+#### Runner
+
+The `Runner` method takes an `ID` (`string`) as argument. No slashes. It returns an [OptionsSetter] that can be used to set [script options] for this runner.
+
+```go-html-template
+{{ with js.Batch "js/mybatch" }}
+ {{ with .Group "mygroup" }}
+ {{ with .Runner "myrunner" }}
+ {{ .SetOptions (dict "resource" (resources.Get "myrunner.js")) }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+`SetOptions` takes a [script options] map.
+
+The runner will receive a data structure with all instances for that group with a live binding of the [JavaScript import] of the defined `export`.
+
+The runner script's export must be a function that takes one argument, the group data structure. An example of a group data structure as JSON is:
+
+```json
+{
+ "id": "leaflet",
+ "scripts": [
+ {
+ "id": "mapjsx",
+ "binding": JAVASCRIPT_BINDING,
+ "instances": [
+ {
+ "id": "0",
+ "params": {
+ "c": "h-64",
+ "lat": 48.8533173846729,
+ "lon": 2.3497416090232535,
+ "r": "map.jsx",
+ "title": "Cathédrale Notre-Dame de Paris",
+ "zoom": 23
+ }
+ },
+ {
+ "id": "1",
+ "params": {
+ "c": "h-64",
+ "lat": 59.96300872062237,
+ "lon": 10.663529183196863,
+ "r": "map.jsx",
+ "title": "Holmenkollen",
+ "zoom": 3
+ }
+ }
+ ]
+ }
+ ]
+}
+```
+
+Below is an example of a runner script that uses React to render elements. Note that the export (`default`) must match the `export` option in the [script options] (`default` is the default value for runner scripts) (runnable versions of examples on this page can be found at [js.Batch Demo Repo]):
+
-
-
+```js
+import * as ReactDOM from 'react-dom/client';
+import * as React from 'react';
+
+export default function Run(group) {
+ console.log('Running react-create-elements.js', group);
+ const scripts = group.scripts;
+ for (const script of scripts) {
+ for (const instance of script.instances) {
+ /* This is a convention in this project. */
+ let elId = `${script.id}-${instance.id}`;
+ let el = document.getElementById(elId);
+ if (!el) {
+ console.warn(`Element with id ${elId} not found`);
+ continue;
+ }
+ const root = ReactDOM.createRoot(el);
+ const reactEl = React.createElement(script.binding, instance.params);
+ root.render(reactEl);
+ }
+ }
+}
+```
+
- These are mostly the same as for [js.Build], but note that:
+#### Config
+
+Returns an [OptionsSetter] that can be used to set [build options] for the batch.
+
- The example above uses [`Resources.Mount`] to resolve a folder inside `assets` relative to the page bundle.
++These are mostly the same as for `js.Build`, but note that:
+
+* `targetPath` is set automatically (there may be multiple outputs).
+* `format` must be `esm`, currently the only format supporting [code splitting].
+* `params` will be available in the `@params/config` namespace in the scripts. This way you can import both the [script] or [runner] params and the [config] params with:
+
+```js
+import * as params from "@params";
+import * as config from "@params/config";
+```
+
+Setting the `Config` for a batch can be done from any template (including shortcode templates), but will only be set once (the first will win):
+
+```go-html-template
+{{ with js.Batch "js/mybatch" }}
+ {{ with .Config }}
+ {{ .SetOptions (dict
+ "target" "es2023"
+ "format" "esm"
+ "jsx" "automatic"
+ "loaders" (dict ".png" "dataurl")
+ "minify" true
+ "params" (dict "param1" "value1")
+ )
+ }}
+ {{ end }}
+{{ end }}
+```
+
+## Options
+
+### Build Options
+
+format
+: (`string`) Currently only `esm` is supported in [ESBuild's code splitting].
+
+{{% include "./_common/options.md" %}}
+
+### Script Options
+
+resource
+: The resource to build. This can be a file resource or a virtual resource.
+
+export
+: The export to bind the runner to. Set it to `*` to export the [entire namespace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import). Default is `default` for [runner] scripts and `*` for other [scripts](#script).
+
+importContext
+: An additional context for resolving imports. Hugo will always check this one first before falling back to `assets` and `node_modules`. A common use of this is to resolve imports inside a page bundle. See [import context](#import-context).
+
+params
+: A map of parameters that will be passed to the script as JSON. These gets bound to the `@params` namespace:
+```js
+import * as params from '@params';
+```
+
+### Script Options
+
+### Params Options
+
+params
+: A map of parameters that will be passed to the script as JSON.
+
+### Import Context
+
+Hugo will, by default, first try to resolve any import in [assets](/hugo-pipes/introduction/#asset-directory) and, if not found, let [ESBuild] resolve it (e.g. from `node_modules`). The `importContext` option can be used to set the first context for resolving imports. A common use of this is to resolve imports inside a [page bundle](/content-management/page-bundles/).
+
+```go-html-template
+{{ $common := resources.Match "/js/headlessui/*.*" }}
+{{ $importContext := (slice $.Page ($common.Mount "/js/headlessui" ".")) }}
+```
+
+You can pass any object that implements [Resource.Get](/methods/page/resources/#get). Pass a slice to set multiple contexts.
+
-
++The example above uses [`Resources.Mount`] to resolve a directory inside `assets` relative to the page bundle.
+
+### OptionsSetter
+
+An `OptionsSetter` is a special object that is returned once only. This means that you should wrap it with [with]:
+
+```go-html-template
+{{ with .Script "myscript" }}
+ {{ .SetOptions (dict "resource" (resources.Get "myscript.js"))}}
+{{ end }}
+```
+
+## Build
+
+The `Build` method returns an object with the following structure:
+
+* Groups (map)
+ * [`Resources`]
+
+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 %}}
+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 %}}
+
+```go-html-template
+{{ $group := .group }}
+{{ with (templates.Defer (dict "key" $group "data" $group )) }}
+ {{ with (js.Batch "js/mybatch") }}
+ {{ with .Build }}
+ {{ with index .Groups $ }}
+ {{ range . }}
+ {{ $s := . }}
+ {{ if eq $s.MediaType.SubType "css" }}
+ <link href="{{ $s.RelPermalink }}" rel="stylesheet" />
+ {{ else }}
+ <script src="{{ $s.RelPermalink }}" type="module"></script>
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
- 2. Only one execution order of imports, see [this comment](https://github.com/evanw/esbuild/issues/399#issuecomment-735355932)
+## Known Issues
+
+In the official documentation for [ESBuild's code splitting], there's a warning note in the header. The two issues are:
+
+* `esm` is currently the only implemented output format. This means that it will not work for very old browsers. See [caniuse](https://caniuse.com/?search=ESM).
+* There's a known import ordering issue.
+
+We have not seen the ordering issue as a problem during our [extensive testing](https://github.com/bep/hugojsbatchdemo) of this new feature with different libraries. There are two main cases:
+
+1. Undefined execution order of imports, see [this comment](https://github.com/evanw/esbuild/issues/399#issuecomment-1458680887)
- [`Resource`]: https://gohugo.io/methods/resource/
++1. Only one execution order of imports, see [this comment](https://github.com/evanw/esbuild/issues/399#issuecomment-735355932)
+
+Many would say that both of the above are [code smells](https://en.wikipedia.org/wiki/Code_smell). The first one has a simple workaround in Hugo. Define the import order in its own script and make sure it gets passed early to ESBuild, e.g. by putting it in a script group with a name that comes early in the alphabet.
+
+```js
+import './lib2.js';
+import './lib1.js';
+
+console.log('entrypoints-workaround.js');
+
+```
+
+[build options]: #build-options
- [js.Build]: https://gohugo.io/hugo-pipes/js/#options
- [map]: https://gohugo.io/functions/collections/dictionary/
++[`Resource`]: /methods/resource/
+[`Resources`]: /methods/page/resources/
+[`Resources.Mount`]: /methods/page/resources/#mount
+[`templates.Defer`]: /functions/templates/defer/
+[code splitting]: https://esbuild.github.io/api/#splitting
+[config]: #config
+[ESBuild's code splitting]: https://esbuild.github.io/api/#splitting
+[ESBuild]: https://github.com/evanw/esbuild
+[group]: #group
+[instance]: #instance
+[JavaScript import]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
+[js.Batch Demo Repo]: https://github.com/bep/hugojsbatchdemo/
- [page bundles]: https://gohugo.io/content-management/page-bundles/
++[map]: /functions/collections/dictionary/
+[OptionsSetter]: #optionssetter
- [with]: https://gohugo.io/functions/go-template/with/
++[page bundles]: /content-management/page-bundles/
+[params options]: #params-options
+[runner]: #runner
+[script options]: #script-options
+[script]: #script
+[SetOptions]: #optionssetter
++[with]: /functions/go-template/with/
--- /dev/null
- ### Import JS code from /assets
+---
+title: js.Build
+description: Bundles, transpiles, tree shakes, and minifies JavaScript resources.
+weight: 30
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/js/Babel
+ - functions/resources/Fingerprint
+ - functions/resources/Minify
+ returnType: resource.Resource
+ signatures: ['js.Build [OPTIONS] RESOURCE']
+toc: true
+---
+
+The `js.Build` function uses the [evanw/esbuild] package to:
+
+- Bundle
+- Transpile (TypeScript and JSX)
+- Tree shake
+- Minify
+- Create source maps
+
+[evanw/esbuild]: https://github.com/evanw/esbuild
+
+```go-html-template
+{{ with resources.Get "js/main.js" }}
+ {{ if hugo.IsDevelopment }}
+ {{ with . | js.Build }}
+ <script src="{{ .RelPermalink }}"></script>
+ {{ end }}
+ {{ else }}
+ {{ $opts := dict "minify" true }}
+ {{ with . | js.Build $opts | fingerprint }}
+ <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+## Options
+
+targetPath
+: (`string`) If not set, the source path will be used as the base target path.
+Note that the target path's extension may change if the target MIME type is different, e.g. when the source is TypeScript.
+
+format
+: (`string`) The output format. One of: `iife`, `cjs`, `esm`. Default is `iife`, a self-executing function, suitable for inclusion as a `<script>` tag.
+
+{{% include "./_common/options.md" %}}
+
- Any imports in a file outside `/assets` or that does not resolve to a component inside `/assets` will be resolved by [ESBuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
++### Import JS code from the assets directory
+
+`js.Build` has full support for the virtual union file system in [Hugo Modules](/hugo-modules/). You can see some simple examples in this [test project](https://github.com/gohugoio/hugoTestProjectJSModImports), but in short this means that you can do this:
+
+```js
+import { hello } from 'my/module';
+```
+
+And it will resolve to the top-most `index.{js,ts,tsx,jsx}` inside `assets/my/module` in the layered file system.
+
+```js
+import { hello3 } from 'my/module/hello3';
+```
+
+Will resolve to `hello3.{js,ts,tsx,jsx}` inside `assets/my/module`.
+
+Any imports starting with `.` is resolved relative to the current file:
+
+```js
+import { hello4 } from './lib';
+```
+
+For other files (e.g. `JSON`, `CSS`) you need to use the relative path including any extension, e.g:
+
+```js
+import * as data from 'my/module/data.json';
+```
+
- Any imports in a file outside `/assets` or that does not resolve to a component inside `/assets` will be resolved by [esbuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
++Any imports in a file outside `assets` or that does not resolve to a component inside `assets` will be resolved by [ESBuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
+
+Also note the new `params` option that can be passed from template to your JS files, e.g.:
+
+```go-html-template
+{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
+```
+And then in your JS file:
+
+```js
+import * as params from '@params';
+```
+
+Hugo will, by default, generate a `assets/jsconfig.json` file that maps the imports. This is useful for navigation/intellisense help inside code editors, but if you don't need/want it, you can [turn it off](/getting-started/configuration/#configure-build).
+
+## Node.js dependencies
+
+Use the `js.Build` function to include Node.js dependencies.
+
- The start directory for resolving npm packages (aka. packages that live inside a `node_modules` folder) is always the main project folder.
++Any imports in a file outside `assets` or that does not resolve to a component inside `assets` will be resolved by [esbuild](https://esbuild.github.io/) with the **project directory** as the resolve directory (used as the starting point when looking for `node_modules` etc.). Also see [hugo mod npm pack](/commands/hugo_mod_npm_pack/). If you have any imported npm dependencies in your project, you need to make sure to run `npm install` before you run `hugo`.
+
++The start directory for resolving npm packages (aka. packages that live inside a `node_modules` directory) is always the main project directory.
+
+{{% 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 %}}
+
+## Examples
+
+```go-html-template
+{{ $built := resources.Get "js/index.js" | js.Build "main.js" }}
+```
+
+Or with options:
+
+```go-html-template
+{{ $externals := slice "react" "react-dom" }}
+{{ $defines := dict "process.env.NODE_ENV" `"development"` }}
+
+{{ $opts := dict "targetPath" "main.js" "externals" $externals "defines" $defines }}
+{{ $built := resources.Get "scripts/main.js" | js.Build $opts }}
+<script src="{{ $built.RelPermalink }}" defer></script>
+```
--- /dev/null
- Note that this is meant for small data sets, e.g. configuration settings. For larger data, please put/mount the files into `/assets` and import them directly.
+---
+_comment: Do not remove front matter.
+---
+
+params
+: (`map` or `slice`) Params that can be imported as JSON in your JS files, e.g.
+
+```go-html-template
+{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
+```
+And then in your JS file:
+
+```js
+import * as params from '@params';
+```
+
-
++Note that this is meant for small data sets, e.g. configuration settings. For larger data, please put/mount the files into `assets` and import them directly.
+
+minify
+: (`bool`)Let `js.Build` handle the minification.
+
+loaders
+: (`map`) {{< new-in "0.140.0" >}} Configuring a loader for a given file type lets you load that file type with an import statement or a require call. For example configuring the .png file extension to use the data URL loader means importing a .png file gives you a data URLcontaining the contents of that image. Loaders available are `none`, `base64`, `binary`, `copy`, `css`, `dataurl`, `default`, `empty`, `file`, `global-css`, `js`, `json`, `jsx`, `local-css`, `text`, `ts`, `tsx`. See https://esbuild.github.io/api/#loader
+
+inject
+: (`slice`) This option allows you to automatically replace a global variable with an import from another file. The path names must be relative to `assets`. See https://esbuild.github.io/api/#inject
+
+shims
+: (`map`) This option allows swapping out a component with another. A common use case is to load dependencies like React from a CDN (with _shims_) when in production, but running with the full bundled `node_modules` dependency during development:
+
+```go-html-template
+{{ $shims := dict "react" "js/shims/react.js" "react-dom" "js/shims/react-dom.js" }}
+{{ $js = $js | js.Build dict "shims" $shims }}
+```
+
+The _shim_ files may look like these:
+
+```js
+// js/shims/react.js
+module.exports = window.React;
+```
+
+```js
+// js/shims/react-dom.js
+module.exports = window.ReactDOM;
+```
+
+With the above, these imports should work in both scenarios:
+
+```js
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+```
+
+target
+: (`string`) The language target. One of: `es5`, `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020` or `esnext`. Default is `esnext`.
+
+platform {{< new-in 0.140.0 >}}
+: (`string`) One of `browser`, `node`, `neutral`. Default is `browser`. See https://esbuild.github.io/api/#platform
+
+externals
+: (`slice`) External dependencies. Use this to trim dependencies you know will never be executed. See https://esbuild.github.io/api/#external
+
+defines
+: (`map`) Allow to define a set of string replacement to be performed when building. Should be a map where each key is to be replaced by its value.
+
+```go-html-template
+{{ $defines := dict "process.env.NODE_ENV" `"development"` }}
+```
+
+sourceMap
+: (`string`) Whether to generate `inline`, `linked` or `external` source maps from esbuild. Linked and external source maps will be written to the target with the output file name + ".map". When `linked` a `sourceMappingURL` will also be written to the output file. By default, source maps are not created. Note that the `linked` option was added in Hugo 0.140.0.
+
+sourcesContent {{< new-in 0.140.0 >}}
+: (`bool`) Whether to include the content of the source files in the source map. By default, this is `true`.
+
- ```
+JSX {{< new-in 0.124.0 >}}
+: (`string`) How to handle/transform JSX syntax. One of: `transform`, `preserve`, `automatic`. Default is `transform`. Notably, the `automatic` transform was introduced in React 17+ and will cause the necessary JSX helper functions to be imported automatically. See https://esbuild.github.io/api/#jsx
+
+JSXImportSource {{< new-in 0.124.0 >}}
+: (`string`) Which library to use to automatically import its JSX helper functions from. This only works if `JSX` is set to `automatic`. The specified library needs to be installed through npm and expose certain exports. See https://esbuild.github.io/api/#jsx-import-source
+
+The combination of `JSX` and `JSXImportSource` is helpful if you want to use a non-React JSX library like Preact, e.g.:
+
+```go-html-template
+{{ $js := resources.Get "js/main.jsx" | js.Build (dict "JSX" "automatic" "JSXImportSource" "preact") }}
+```
+
+With the above, you can use Preact components and JSX without having to manually import `h` and `Fragment` every time:
+
+```jsx
+import { render } from 'preact';
+
+const App = () => <>Hello world!</>;
+
+const container = document.getElementById('app');
+if (container) render(<App />, container);
++```
--- /dev/null
- Create translation tables in the i18n directory, naming each file according to [RFC 5646]. Translation tables may be JSON, TOML, or YAML. For example:
+---
+title: lang.Translate
+description: Translates a string using the translation tables in the i18n directory.
+categories: []
+keywords: []
+action:
+ aliases: [T, i18n]
+ related: []
+ returnType: string
+ signatures: ['lang.Translate KEY [CONTEXT]']
+toc: true
+aliases: [/functions/i18n]
+---
+
+The `lang.Translate` function returns the value associated with given key as defined in the translation table for the current language.
+
+If the key is not found in the translation table for the current language, the `lang.Translate` function falls back to the translation table for the [`defaultContentLanguage`].
+
+[`defaultContentLanguage`]: /getting-started/configuration/#defaultcontentlanguage
+
+If the key is not found in the translation table for the `defaultContentLanguage`, the `lang.Translate` function returns an empty string.
+
+{{% 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 %}}
+
+## Translation tables
+
++Create translation tables in the `i18n` directory, naming each file according to [RFC 5646]. Translation tables may be JSON, TOML, or YAML. For example:
+
+```text
+i18n/en.toml
+i18n/en-US.toml
+```
+
+The base name must match the language key as defined in your site configuration.
+
+Artificial languages with private use subtags as defined in [RFC 5646 § 2.2.7] are also supported. You may omit the `art-x-` prefix for brevity. For example:
+
+```text
+i18n/art-x-hugolang.toml
+i18n/hugolang.toml
+```
+
+Private use subtags must not exceed 8 alphanumeric characters.
+
+[RFC 5646]: https://datatracker.ietf.org/doc/html/rfc5646
+[RFC 5646 § 2.2.7]: https://datatracker.ietf.org/doc/html/rfc5646#section-2.2.7
+
+## Simple translations
+
+Let's say your multilingual site supports two languages, English and Polish. Create a translation table for each language in the `i18n` directory.
+
+```text
+i18n/
+├── en.toml
+└── pl.toml
+```
+
+The English translation table:
+
+{{< code-toggle file=i18n/en >}}
+privacy = 'privacy'
+security = 'security'
+{{< /code-toggle >}}
+
+The Polish translation table:
+
+{{< code-toggle file=i18n/pl >}}
+privacy = 'prywatność'
+security = 'bezpieczeństwo'
+{{< /code-toggle >}}
+
+{{% note %}}
+The examples below use the `T` alias for brevity.
+{{% /note %}}
+
+When viewing the English language site:
+
+```go-html-template
+{{ T "privacy" }} → privacy
+{{ T "security" }} → security
+````
+
+When viewing the Polish language site:
+
+```go-html-template
+{{ T "privacy" }} → prywatność
+{{ T "security" }} → bezpieczeństwo
+```
+
+## Translations with pluralization
+
+Let's say your multilingual site supports two languages, English and Polish. Create a translation table for each language in the `i18n` directory.
+
+```text
+i18n/
+├── en.toml
+└── pl.toml
+```
+
+The Unicode [CLDR Plural Rules chart] describes the pluralization categories for each language.
+
+[CLDR Plural Rules chart]: https://www.unicode.org/cldr/charts/43/supplemental/language_plural_rules.html
+
+The English translation table:
+
+{{< code-toggle file=i18n/en >}}
+[day]
+one = 'day'
+other = 'days'
+
+[day_with_count]
+one = '{{ . }} day'
+other = '{{ . }} days'
+{{< /code-toggle >}}
+
+The Polish translation table:
+
+{{< code-toggle file=i18n/pl >}}
+[day]
+one = 'miesiąc'
+few = 'miesiące'
+many = 'miesięcy'
+other = 'miesiąca'
+
+[day_with_count]
+one = '{{ . }} miesiąc'
+few = '{{ . }} miesiące'
+many = '{{ . }} miesięcy'
+other = '{{ . }} miesiąca'
+{{< /code-toggle >}}
+
+{{% note %}}
+The examples below use the `T` alias for brevity.
+{{% /note %}}
+
+When viewing the English language site:
+
+```go-html-template
+{{ T "day" 0 }} → days
+{{ T "day" 1 }} → day
+{{ T "day" 2 }} → days
+{{ T "day" 5 }} → days
+
+{{ T "day_with_count" 0 }} → 0 days
+{{ T "day_with_count" 1 }} → 1 day
+{{ T "day_with_count" 2 }} → 2 days
+{{ T "day_with_count" 5 }} → 5 days
+````
+
+When viewing the Polish language site:
+
+```go-html-template
+{{ T "day" 0 }} → miesięcy
+{{ T "day" 1 }} → miesiąc
+{{ T "day" 2 }} → miesiące
+{{ T "day" 5 }} → miesięcy
+
+{{ T "day_with_count" 0 }} → 0 miesięcy
+{{ T "day_with_count" 1 }} → 1 miesiąc
+{{ T "day_with_count" 2 }} → 2 miesiące
+{{ T "day_with_count" 5 }} → 5 miesięcy
+```
+
+In the pluralization examples above, we passed an integer in context (the second argument). You can also pass a map in context, providing a `count` key to control pluralization.
+
+Translation table:
+
+{{< code-toggle file=i18n/en >}}
+[age]
+one = '{{ .name }} is {{ .count }} year old.'
+other = '{{ .name }} is {{ .count }} years old.'
+{{< /code-toggle >}}
+
+Template code:
+
+```go-html-template
+{{ T "age" (dict "name" "Will" "count" 1) }} → Will is 1 year old.
+{{ T "age" (dict "name" "John" "count" 3) }} → John is 3 years old.
+```
+
+{{% note %}}
+Translation tables may contain both simple translations and translations with pluralization.
+{{% /note %}}
+
+## Reserved keys
+
+Hugo uses the [go-i18n] package to look up values in translation tables. This package reserves the following keys for internal use:
+
+[go-i18n]: https://github.com/nicksnyder/go-i18n
+
+id
+: (`string`) Uniquely identifies the message.
+
+description
+: (`string`) Describes the message to give additional context to translators that may be relevant for translation.
+
+hash
+: (`string`) Uniquely identifies the content of the message that this message was translated from.
+
+leftdelim
+: (`string`) The left Go template delimiter.
+
+rightdelim
+: (`string`) The right Go template delimiter.
+
+zero
+: (`string`) The content of the message for the [CLDR] plural form "zero".
+
+one
+: (`string`) The content of the message for the [CLDR] plural form "one".
+
+two
+: (`string`) The content of the message for the [CLDR] plural form "two".
+
+few
+: (`string`) The content of the message for the [CLDR] plural form "few".
+
+many
+: (`string`) The content of the message for the [CLDR] plural form "many".
+
+other
+: (`string`) The content of the message for the [CLDR] plural form "other".
+
+[CLDR]: https://www.unicode.org/cldr/charts/43/supplemental/language_plural_rules.html
+
+If you need to provide a translation for one of the reserved keys, you can prepend the word with an underscore. For example:
+
+{{< code-toggle file=i18n/es >}}
+_description = 'descripción'
+_few = 'pocos'
+_many = 'muchos'
+_one = 'uno'
+_other = 'otro'
+_two = 'dos'
+_zero = 'cero'
+{{< /code-toggle >}}
+
+Then in your templates:
+
+```go-html-template
+{{ T "_description" }} → descripción
+{{ T "_few" }} → pocos
+{{ T "_many" }} → muchos
+{{ T "_one" }} → uno
+{{ T "_two" }} → dos
+{{ T "_zero" }} → cero
+{{ T "_other" }} → otro
+```
--- /dev/null
- {{< new-in 0.112.0 >}}
-
+---
+title: math.Abs
+description: Returns the absolute value of the given number.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: float64
+ signatures: [math.Abs VALUE]
+---
+
+```go-html-template
+{{ math.Abs -2.1 }} → 2.1
+```
--- /dev/null
- If one of the numbers is a [`float`], the result is a `float`.
+---
+title: math.Add
+description: Adds two or more numbers.
+categories: []
+keywords: []
+action:
+ aliases: [add]
+ related:
+ - functions/math/Div
+ - functions/math/Mul
+ - functions/math/Product
+ - functions/math/Sub
+ - functions/math/Sum
+ returnType: any
+ signatures: [math.Add VALUE VALUE...]
+---
+
- [`float`]: /getting-started/glossary/#float
-
++If one of the numbers is a [`float`](g), the result is a `float`.
+
+```go-html-template
+{{ add 12 3 2 }} → 17
+```
+
+You can also use the `add` function to concatenate strings.
+
+```go-html-template
+{{ add "hu" "go" }} → hugo
+```
--- /dev/null
- If one of the numbers is a [`float`], the result is a `float`.
+---
+title: math.Div
+description: Divides the first number by one or more numbers.
+categories: []
+keywords: []
+action:
+ aliases: [div]
+ related:
+ - functions/math/Add
+ - functions/math/Mul
+ - functions/math/Product
+ - functions/math/Sub
+ - functions/math/Sum
+ returnType: any
+ signatures: [math.Div VALUE VALUE...]
+---
+
-
- [`float`]: /getting-started/glossary/#float
++If one of the numbers is a [`float`](g), the result is a `float`.
+
+```go-html-template
+{{ div 12 3 2 }} → 2
+```
--- /dev/null
- If one of the numbers is a [`float`], the result is a `float`.
+---
+title: math.Mul
+description: Multiplies two or more numbers.
+categories: []
+keywords: []
+action:
+ aliases: [mul]
+ related:
+ - functions/math/Add
+ - functions/math/Div
+ - functions/math/Product
+ - functions/math/Sub
+ - functions/math/Sum
+ returnType: any
+ signatures: [math.Mul VALUE VALUE...]
+---
+
-
- [`float`]: /getting-started/glossary/#float
++If one of the numbers is a [`float`](g), the result is a `float`.
+
+```go-html-template
+{{ mul 12 3 2 }} → 72
+```
--- /dev/null
- The `math.Rand` function returns a pseudo-random number in the [half-open interval] [0.0, 1.0).
+---
+title: math.Rand
+description: Returns a pseudo-random number in the half-open interval [0.0, 1.0).
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: float64
+ signatures: [math.Rand]
+---
+
+{{< new-in 0.121.2 >}}
+
- To generate a random integer in the [closed interval] [0, 5]:
++The `math.Rand` function returns a pseudo-random number in the half-open [interval](g) [0.0, 1.0).
+
+```go-html-template
+{{ math.Rand }} → 0.6312770459590062
+```
+
-
- [closed interval]: /getting-started/glossary/#interval
- [half-open interval]: /getting-started/glossary/#interval
++To generate a random integer in the closed interval [0, 5]:
+
+```go-html-template
+{{ math.Rand | mul 6 | math.Floor }}
+```
+
+To generate a random integer in the closed interval [1, 6]:
+
+```go-html-template
+{{ math.Rand | mul 6 | math.Ceil }}
+```
+
+To generate a random float, with one digit after the decimal point, in the closed interval [0, 4.9]:
+
+```go-html-template
+{{ div (math.Rand | mul 50 | math.Floor) 10 }}
+```
+
+To generate a random float, with one digit after the decimal point, in the closed interval [0.1, 5.0]:
+
+```go-html-template
+{{ div (math.Rand | mul 50 | math.Ceil) 10 }}
+```
--- /dev/null
- If one of the numbers is a [`float`], the result is a `float`.
+---
+title: math.Sub
+description: Subtracts one or more numbers from the first number.
+categories: []
+keywords: []
+action:
+ aliases: [sub]
+ related:
+ - functions/math/Add
+ - functions/math/Div
+ - functions/math/Mul
+ - functions/math/Product
+ - functions/math/Sum
+ returnType: any
+ signatures: [math.Sub VALUE VALUE...]
+---
+
-
- [`float`]: /getting-started/glossary/#float
++If one of the numbers is a [`float`](g), the result is a `float`.
+
+```go-html-template
+{{ sub 12 3 2 }} → 7
+```
--- /dev/null
- Use the `openapi3.Unmarshal` function with [global], [page], or [remote] resources.
+---
+title: openapi3.Unmarshal
+description: Unmarshals the given resource into an OpenAPI 3 document.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: openapi3.OpenAPIDocument
+ signatures: ['openapi3.Unmarshal RESOURCE']
+---
+
- [global]: /getting-started/glossary/#global-resource
- [page]: /getting-started/glossary/#page-resource
- [remote]: /getting-started/glossary/#remote-resource
++Use the `openapi3.Unmarshal` function with [global resources](g), [page resources](g), or [remote resources](g).
+
- {{ with resources.GetRemote $url }}
+[OpenAPI]: https://www.openapis.org/
+
+For example, to work with a remote [OpenAPI] definition:
+
+```go-html-template
+{{ $url := "https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.json" }}
+{{ $api := "" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $api = . | openapi3.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
-
+{{ end }}
+```
+
+To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $api }}</pre>
+```
+
+To list the GET and POST operations for each of the API paths:
+
+```go-html-template
+{{ range $path, $details := $api.Paths }}
+ <p>{{ $path }}</p>
+ <dl>
+ {{ with $details.Get }}
+ <dt>GET</dt>
+ <dd>{{ .Summary }}</dd>
+ {{ end }}
+ {{ with $details.Post }}
+ <dt>POST</dt>
+ <dd>{{ .Summary }}</dd>
+ {{ end }}
+ </dl>
+{{ end }}
+```
+
+Hugo renders this to:
+
+```html
+<p>/pets</p>
+<dl>
+ <dt>GET</dt>
+ <dd>List all pets</dd>
+ <dt>POST</dt>
+ <dd>Create a pet</dd>
+</dl>
+<p>/pets/{petId}</p>
+<dl>
+ <dt>GET</dt>
+ <dd>Info for a specific pet</dd>
+</dl>
+```
--- /dev/null
-
+---
+title: path.Join
+description: Replaces path separators with slashes (`/`), joins the given path elements into a single path, and returns the shortest path name equivalent to the result.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/path/Base
+ - functions/path/BaseName
+ - functions/path/Clean
+ - functions/path/Dir
+ - functions/path/Ext
+ - functions/path/Split
+ - functions/urls/JoinPath
+ returnType: string
+ signatures: [path.Join ELEMENT...]
+aliases: [/functions/path.join]
+---
+
+See Go's [`path.Join`] and [`path.Clean`] documentation for details.
+
+[`path.Clean`]: https://pkg.go.dev/path#Clean
+[`path.Join`]: https://pkg.go.dev/path#Join
+
+```go-html-template
+{{ path.Join "partial" "news.html" }} → partial/news.html
+{{ path.Join "partial/" "news.html" }} → partial/news.html
+{{ path.Join "foo/bar" "baz" }} → foo/bar/baz
+{{ path.Join "foo" "bar" "baz" }} → foo/bar/baz
+{{ path.Join "foo" "" "baz" }} → foo/baz
+{{ path.Join "foo" "." "baz" }} → foo/baz
+{{ path.Join "foo" ".." "baz" }} → baz
+{{ path.Join "/.." "foo" ".." "baz" }} → baz
+```
--- /dev/null
- 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.
+---
+title: resources.ByType
+description: Returns a collection of global resources of the given media type, or nil if none found.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/Get
+ - functions/resources/GetMatch
+ - functions/resources/GetRemote
+ - functions/resources/Match
+ - methods/page/Resources
+ returnType: resource.Resources
+ signatures: [resources.ByType MEDIATYPE]
+---
+
+The [media type] is typically one of `image`, `text`, `audio`, `video`, or `application`.
+
+```go-html-template
+{{ range resources.ByType "image" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+{{% 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 %}}
+
+[media type]: https://en.wikipedia.org/wiki/Media_type
--- /dev/null
- Hugo publishes the resource to the target path when you call its [`Publish`], [`Permalink`], or [`RelPermalink`] methods.
+---
+title: resources.Concat
+description: Returns a concatenated slice of resources.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related: []
+ returnType: resource.Resource
+ signatures: ['resources.Concat TARGETPATH [RESOURCE...]']
+---
+
+The `resources.Concat` function returns a concatenated slice of resources, caching the result using the target path as its cache key. Each resource must have the same [media type].
+
++Hugo publishes the resource to the target path when you call its [`Publish`], [`Permalink`], or [`RelPermalink`] method.
+
+[media type]: https://en.wikipedia.org/wiki/Media_type
+[`publish`]: /methods/resource/publish/
+[`permalink`]: /methods/resource/permalink/
+[`relpermalink`]: /methods/resource/relpermalink/
+
+```go-html-template
+{{ $plugins := resources.Get "js/plugins.js" }}
+{{ $global := resources.Get "js/global.js" }}
+{{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }}
+```
--- /dev/null
- 2. Executes the resource as a template, passing the current page in context
- 3. Publishes the resource to css/main.css
+---
+title: resources.ExecuteAsTemplate
+description: Returns a resource created from a Go template, parsed and executed with the given context.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/FromString
+ returnType: resource.Resource
+ signatures: [resources.ExecuteAsTemplate TARGETPATH CONTEXT RESOURCE]
+---
+
+The `resources.ExecuteAsTemplate` function returns a resource created from a Go template, parsed and executed with the given context, caching the result using the target path as its cache key.
+
+Hugo publishes the resource to the target path when you call its [`Publish`], [`Permalink`], or [`RelPermalink`] methods.
+
+[`publish`]: /methods/resource/publish/
+[`permalink`]: /methods/resource/permalink/
+[`relpermalink`]: /methods/resource/relpermalink/
+
+Let's say you have a CSS file that you wish to populate with values from your site configuration:
+
+{{< code file=assets/css/template.css lang=go-html-template >}}
+body {
+ background-color: {{ site.Params.style.bg_color }};
+ color: {{ site.Params.style.text_color }};
+}
+{{< /code >}}
+
+And your site configuration contains:
+
+{{< code-toggle file=hugo >}}
+[params.style]
+bg_color = '#fefefe'
+text_color = '#222'
+{{< /code-toggle >}}
+
+Place this in your baseof.html template:
+
+```go-html-template
+{{ with resources.Get "css/template.css" }}
+ {{ with resources.ExecuteAsTemplate "css/main.css" $ . }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ end }}
+{{ end }}
+```
+
+The example above:
+
+1. Captures the template as a resource
++1. Executes the resource as a template, passing the current page in context
++1. Publishes the resource to css/main.css
+
+The result is:
+
+{{< code file=public/css/main.css >}}
+body {
+ background-color: #fefefe;
+ color: #222;
+}
+{{< /code >}}
--- /dev/null
- 2. The resource's `.Data.Integrity` method returns a [Subresource Integrity] (SRI) value consisting of the name of the hash algorithm, one hyphen, and the base64-encoded hash sum
+---
+title: resources.Fingerprint
+description: Cryptographically hashes the content of the given resource.
+categories: []
+keywords: []
+action:
+ aliases: [fingerprint]
+ related:
+ - functions/resources/Minify
+ - functions/css/Sass
+ - functions/css/TailwindCSS
+ - functions/js/Build
+ - functions/js/Babel
+ returnType: resource.Resource
+ signatures: ['resources.Fingerprint [ALGORITHM] RESOURCE']
+---
+
+```go-html-template
+{{ with resources.Get "js/main.js" }}
+ {{ with . | fingerprint "sha256" }}
+ <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+ {{ end }}
+{{ end }}
+```
+
+Hugo renders this to something like:
+
+```html
+<script src="/js/main.62e...df1.js" integrity="sha256-Yuh...rfE=" crossorigin="anonymous"></script>
+```
+
+Although most commonly used with CSS and JavaScript resources, you can use the `resources.Fingerprint` function with any resource type.
+
+The hash algorithm may be one of `md5`, `sha256` (default), `sha384`, or `sha512`.
+
+After cryptographically hashing the resource content:
+
+1. The values returned by the `.Permalink` and `.RelPermalink` methods include the hash sum
++1. The resource's `.Data.Integrity` method returns a [Subresource Integrity] (SRI) value consisting of the name of the hash algorithm, one hyphen, and the base64-encoded hash sum
+
+[Subresource Integrity]: https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
--- /dev/null
- Let's say you need to publish a file named "site.json" in the root of your public directory, containing the build date, the Hugo version used to build the site, and the date that the content was last modified. For example:
+---
+title: resources.FromString
+description: Returns a resource created from a string.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/ExecuteAsTemplate
+ returnType: resource.Resource
+ signatures: [resources.FromString TARGETPATH STRING]
+---
+
+The `resources.FromString` function returns a resource created from a string, caching the result using the target path as its cache key.
+
+Hugo publishes the resource to the target path when you call its [`Publish`], [`Permalink`], or [`RelPermalink`] methods.
+
+[`publish`]: /methods/resource/publish/
+[`permalink`]: /methods/resource/permalink/
+[`relpermalink`]: /methods/resource/relpermalink/
+
- "build_date": "2024-02-19T12:27:05-08:00",
- "hugo_version": "0.137.1",
- "last_modified": "2024-02-19T12:01:42-08:00"
++Let's say you need to publish a file named "site.json" in the root of your `public` directory, containing the build date, the Hugo version used to build the site, and the date that the content was last modified. For example:
+
+```json
+{
- 2. Encodes the map as a JSON string using the [`jsonify`] function
- 3. Creates a resource from the JSON string using the `resources.FromString` function
- 4. Publishes the file to the root of the public directory using the resource's `.Publish` method
++ "build_date": "2025-01-16T19:14:41-08:00",
++ "hugo_version": "0.141.0",
++ "last_modified": "2025-01-16T19:14:46-08:00"
+}
+```
+
+Place this in your baseof.html template:
+
+```go-html-template
+{{ if .IsHome }}
+ {{ $rfc3339 := "2006-01-02T15:04:05Z07:00" }}
+ {{ $m := dict
+ "hugo_version" hugo.Version
+ "build_date" (now.Format $rfc3339)
+ "last_modified" (site.Lastmod.Format $rfc3339)
+ }}
+ {{ $json := jsonify $m }}
+ {{ $r := resources.FromString "site.json" $json }}
+ {{ $r.Publish }}
+{{ end }}
+```
+
+The example above:
+
+1. Creates a map with the relevant key-value pairs using the [`dict`] function
++1. Encodes the map as a JSON string using the [`jsonify`] function
++1. Creates a resource from the JSON string using the `resources.FromString` function
++1. Publishes the file to the root of the `public` directory using the resource's `.Publish` method
+
+Combine `resources.FromString` with [`resources.ExecuteAsTemplate`] if your string contains template actions. Rewriting the example above:
+
+```go-html-template
+{{ if .IsHome }}
+ {{ $string := `
+ {{ $rfc3339 := "2006-01-02T15:04:05Z07:00" }}
+ {{ $m := dict
+ "hugo_version" hugo.Version
+ "build_date" (now.Format $rfc3339)
+ "last_modified" (site.Lastmod.Format $rfc3339)
+ }}
+ {{ $json := jsonify $m }}
+ `
+ }}
+ {{ $r := resources.FromString "" $string }}
+ {{ $r = $r | resources.ExecuteAsTemplate "site.json" . }}
+ {{ $r.Publish }}
+{{ end }}
+```
+
+[`dict`]: /functions/collections/dictionary/
+[`jsonify`]: /functions/encoding/jsonify/
+[`resources.ExecuteAsTemplate`]: /functions/resources/executeastemplate/
--- /dev/null
- 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.
+---
+title: resources.Get
+description: Returns a global resource from the given path, or nil if none found.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/ByType
+ - functions/resources/GetMatch
+ - functions/resources/GetRemote
+ - functions/resources/Match
+ - methods/page/Resources
+ returnType: resource.Resource
+ signatures: [resources.Get PATH]
+---
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+{{% 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 %}}
--- /dev/null
- 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.
+---
+title: resources.GetMatch
+description: Returns the first global resource from paths matching the given glob pattern, or nil if none found.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/ByType
+ - functions/resources/Get
+ - functions/resources/GetRemote
+ - functions/resources/Match
+ - methods/page/Resources
+ returnType: resource.Resource
+ signatures: [resources.GetMatch PATTERN]
+---
+
+```go-html-template
+{{ with resources.GetMatch "images/*.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+{{% 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 %}}
+
+Hugo determines a match using a case-insensitive [glob pattern].
+
+{{% include "functions/_common/glob-patterns.md" %}}
+
+[glob pattern]: https://github.com/gobwas/glob#example
--- /dev/null
- {{ with resources.GetRemote $url }}
+---
+title: resources.GetRemote
+description: Returns a remote resource from the given URL, or nil if none found.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/data/GetCSV
+ - functions/data/GetJSON
+ - functions/resources/ByType
+ - functions/resources/Get
+ - functions/resources/GetMatch
+ - functions/resources/Match
+ - methods/page/Resources
+ returnType: resource.Resource
+ signatures: ['resources.GetRemote URL [OPTIONS]']
+toc: true
+---
+
+```go-html-template
+{{ $url := "https://example.org/images/a.jpg" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
- When retrieving remote data, use the [`transform.Unmarshal`] function to [unmarshal] the response.
+{{ end }}
+```
+
+## Options
+
+The `resources.GetRemote` function takes an optional map of options.
+
+```go-html-template
+{{ $url := "https://example.org/api" }}
+{{ $opts := dict
+ "headers" (dict "Authorization" "Bearer abcd")
+}}
+{{ $resource := resources.GetRemote $url $opts }}
+```
+
+If you need multiple values for the same header key, use a slice:
+
+```go-html-template
+{{ $url := "https://example.org/api" }}
+{{ $opts := dict
+ "headers" (dict "X-List" (slice "a" "b" "c"))
+}}
+{{ $resource := resources.GetRemote $url $opts }}
+```
+
+You can also change the request method and set the request body:
+
+```go-html-template
+{{ $url := "https://example.org/api" }}
+{{ $opts := dict
+ "method" "post"
+ "body" `{"complete": true}`
+ "headers" (dict "Content-Type" "application/json")
+}}
+{{ $resource := resources.GetRemote $url $opts }}
+```
+
+## Remote data
+
- [unmarshal]: /getting-started/glossary/#unmarshal
++When retrieving remote data, use the [`transform.Unmarshal`] function to [unmarshal](g) the response.
+
+[`transform.Unmarshal`]: /functions/transform/unmarshal/
- {{ with resources.GetRemote $url }}
+
+```go-html-template
+{{ $data := dict }}
+{{ $url := "https://example.org/books.json" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
- The [`Err`] method on a resource returned by the `resources.GetRemote` function returns an error message if the HTTP request fails, else nil. If you do not handle the error yourself, Hugo will fail the build.
+{{ end }}
+```
+
+{{% 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:
+
+`{{ $data = .Content | transform.Unmarshal }}`
+
+[Content-Type]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type
+{{% /note %}}
+
+## Error handling
+
- [`Err`]: /methods/resource/err/
++Use the [`try`] statement to capture HTTP request errors. If you do not handle the error yourself, Hugo will fail the build.
+
- Hugo does not classify an HTTP response with status code 404 as an error. In this case the function returns nil.
++[`try`]: /functions/go-template/try
+
+{{% note %}}
- {{ with resources.GetRemote $url }}
++Hugo does not classify an HTTP response with status code 404 as an error. In this case `resources.GetRemote` returns nil.
+{{% /note %}}
+
+```go-html-template
+{{ $url := "https://broken-example.org/images/a.jpg" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
- {{ with resources.GetRemote $url }}
+{{ end }}
+```
+
+To log an error as a warning instead of an error:
+
+```go-html-template
+{{ $url := "https://broken-example.org/images/a.jpg" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ warnf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
++ {{ else }}
++ {{ warnf "Unable to get remote resource %q" $url }}
+ {{ end }}
- {{ with resources.GetRemote $url }}
+{{ end }}
+```
+
+## HTTP response
+
+The [`Data`] method on a resource returned by the `resources.GetRemote` function returns information from the HTTP response.
+
+[`Data`]: /methods/resource/data/
+
+```go-html-template
+{{ $url := "https://example.org/images/a.jpg" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ with .Data }}
+ {{ .ContentLength }} → 42764
+ {{ .ContentType }} → image/jpeg
+ {{ .Status }} → 200 OK
+ {{ .StatusCode }} → 200
+ {{ .TransferEncoding }} → []
+ {{ end }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
+{{ end }}
+```
+
+ContentLength
+: (`int`) The content length in bytes.
+
+ContentType
+: (`string`) The content type.
+
+Status
+: (`string`) The HTTP status text.
+
+StatusCode
+: (`int`) The HTTP status code.
+
+TransferEncoding
+: (`string`) The transfer encoding.
+
+## Caching
+
+Resources returned from `resources.GetRemote` are cached to disk. See [configure file caches] for details.
+
+By default, Hugo derives the cache key from the arguments passed to the function, the URL and the options map, if any.
+
+Override the cache key by setting a `key` in the options map. Use this approach to have more control over how often Hugo fetches a remote resource.
+
+```go-html-template
+{{ $url := "https://example.org/images/a.jpg" }}
+{{ $cacheKey := print $url (now.Format "2006-01-02") }}
+{{ $resource := resources.GetRemote $url (dict "key" $cacheKey) }}
+```
+
+[configure file caches]: /getting-started/configuration/#configure-file-caches
+
+## Security
+
+To protect against malicious intent, the `resources.GetRemote` function inspects the server response including:
+
+- The [Content-Type] in the response header
+- The file extension, if any
+- The content itself
+
+If Hugo is unable to resolve the media type to an entry in its [allowlist], the function throws an error:
+
+```text
+ERROR error calling resources.GetRemote: failed to resolve media type...
+```
+
+For example, you will see the error above if you attempt to download an executable.
+
+Although the allowlist contains entries for common media types, you may encounter situations where Hugo is unable to resolve the media type of a file that you know to be safe. In these situations, edit your site configuration to add the media type to the allowlist. For example:
+
+{{< code-toggle file=hugo >}}
+[security.http]
+mediaTypes = ['^image/avif$','^application/vnd\.api\+json$']
+{{< /code-toggle >}}
+
+Note that the entry above is:
+
+- An _addition_ to the allowlist; it does not _replace_ the allowlist
+- An array of regular expressions
+
+[allowlist]: https://en.wikipedia.org/wiki/Whitelist
+[Content-Type]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type
--- /dev/null
- 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.
+---
+title: resources.Match
+description: Returns a collection of global resources from paths matching the given glob pattern, or nil if none found.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/resources/ByType
+ - functions/resources/Get
+ - functions/resources/GetMatch
+ - functions/resources/GetRemote
+ - methods/page/Resources
+ returnType: resource.Resources
+ signatures: [resources.Match PATTERN]
+---
+
+```go-html-template
+{{ range resources.Match "images/*.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+{{% 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 %}}
+
+Hugo determines a match using a case-insensitive [glob pattern].
+
+{{% include "functions/_common/glob-patterns.md" %}}
+
+[glob pattern]: https://github.com/gobwas/glob#example
--- /dev/null
- : Enable creation of the `hugo_stats.json` file when building the site. If you are only using this for the production build, consider placing it below [config/production].
+---
+title: resources.PostProcess
+description: Processes the given resource after the build.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/css/PostCSS
+ - functions/css/Sass
+ returnType: postpub.PostPublishedResource
+ signatures: [resources.PostProcess RESOURCE]
+toc: true
+---
+
+```go-html-template
+{{ with resources.Get "css/main.css" }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+Marking a resource with `resources.PostProcess` postpones transformations until the build has finished.
+
+Call `resources.PostProcess` when one or more of the steps in the transformation chain depends on the result of the build.
+
+A prime use case for this is purging unused CSS rules using the [PurgeCSS] plugin for the PostCSS Node.js package.
+
+## CSS Purging
+
+{{% note %}}
+There are several ways to set up CSS purging with PostCSS in Hugo. If you have a simple project, you should consider going the simpler route and drop the use of `resources.PostProcess` and just extract keywords from the templates. See the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/#app) for examples.
+{{% /note %}}
+
+Step 1
+: Install [Node.js].
+
+Step 2
+: Install the required Node.js packages in the root of your project:
+
+```sh
+npm i -D postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss
+```
+
+Step 3
+: Create a PostCSS configuration file in the root of your project. You must name this file `postcss.config.js` or another [supported file name]. For example:
+
+```js
+const autoprefixer = require('autoprefixer');
+const purgecss = require('@fullhuman/postcss-purgecss')({
+ content: ['./hugo_stats.json'],
+ defaultExtractor: content => {
+ const els = JSON.parse(content).htmlElements;
+ return [
+ ...(els.tags || []),
+ ...(els.classes || []),
+ ...(els.ids || []),
+ ];
+ },
+ // https://purgecss.com/safelisting.html
+ safelist: []
+});
+
+module.exports = {
+ plugins: [
+ autoprefixer,
+ process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null
+ ]
+};
+```
+
+{{% note %}}
+{{% include "functions/resources/_common/postcss-windows-warning.md" %}}
+{{% /note %}}
+
+Step 4
- : The absolute path to the publish directory (the `public` directory). Note that the value will always point to a directory on disk even when running `hugo server` in memory mode. If you write to this folder from PostCSS when running the server, you could run the server with one of these flags:
++: Enable creation of the `hugo_stats.json` file when building the site. If you are only using this for the production build, consider placing it below [`config/production`].
+
+{{< code-toggle file=hugo >}}
+[build.buildStats]
+enable = true
+{{< /code-toggle >}}
+
+See the [configure build] documentation for details and options.
+
+Step 5
+: Place your CSS file within the `assets/css` directory.
+
+Step 6
+: If the current environment is not `development`, process the resource with PostCSS:
+
+```go-html-template
+{{ with resources.Get "css/main.css" }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | postCSS | minify | fingerprint | resources.PostProcess }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+## Environment variables
+
+Hugo passes these environment variables to PostCSS, which allows you to do something like:
+
+```js
+process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : []
+```
+
+PWD
+: The absolute path to the project working directory.
+
+HUGO_ENVIRONMENT
+: The current Hugo environment, set with the `--environment` command line flag.
+Default is `production` for `hugo` and `development` for `hugo server`.
+
+HUGO_PUBLISHDIR
- [config/production]: /getting-started/configuration/#configuration-directory
++: The absolute path to the publish directory (the `public` directory). Note that the value will always point to a directory on disk even when running `hugo server` in memory mode. If you write to this directory from PostCSS when running the server, you could run the server with one of these flags:
+
+```sh
+hugo server --renderToDisk
+hugo server --renderStaticToDisk
+```
+
+Also, Hugo will add environment variables for all files mounted below `assets/_jsconfig`. A default mount will be set up with files in the project root matching this regexp: `(babel|postcss|tailwind)\.config\.js`.
+
+These will get environment variables named on the form `HUGO_FILE_:filename:` where `:filename:` is all upper case with periods replaced with underscore. This allows you to do something like:
+
+```js
+let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
+```
+
+## Limitations
+
+Do not use `resources.PostProcess` when running Hugo's built-in development server. The examples above specifically prevent this by verifying that the current environment is not "development".
+
+The `resources.PostProcess` function only works within templates that produce HTML files.
+
+You cannot manipulate the values returned from the resource’s methods. For example, the `strings.ToUpper` function in this example will not work as expected:
+
+```go-html-template
+{{ $css := resources.Get "css/main.css" }}
+{{ $css = $css | css.PostCSS | minify | fingerprint | resources.PostProcess }}
+{{ $css.RelPermalink | strings.ToUpper }}
+```
+
+[node.js]: https://nodejs.org/en/download
+[supported file name]: https://github.com/postcss/postcss-load-config#usage
++[`config/production`]: /getting-started/configuration/#configuration-directory
+[configure build]: /getting-started/configuration/#configure-build
+[purgecss]: https://github.com/FullHuman/purgecss#readme
--- /dev/null
- [^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your resources directory to your repository.
+---
+title: resources.ToCSS
+description: Transpiles Sass to CSS.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/resources/Fingerprint
+ - functions/resources/Minify
+ - functions/css/PostCSS
+ - functions/resources/PostProcess
+ returnType: resource.Resource
+ signatures: ['resources.ToCSS [OPTIONS] RESOURCE']
+toc: true
+expiryDate: 2025-06-24 # deprecated 2024-06-24
+---
+
+{{% deprecated-in 0.128.0 %}}
+Use [`css.Sass`] instead.
+
+[`css.Sass`]: /functions/css/sass/
+{{% /deprecated-in %}}
+
+```go-html-template
+{{ with resources.Get "sass/main.scss" }}
+ {{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
+ {{ with . | toCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended and extended/deploy editions, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language.
+
+Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
+[indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax
+
+## Options
+
+transpiler
+: (`string`) The transpiler to use, either `libsass` (default) or `dartsass`. Hugo's extended and extended/deploy editions include the LibSass transpiler. To use the Dart Sass transpiler, see the [installation instructions](#dart-sass) below.
+
+targetPath
+: (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`.
+
+vars
+: (`map`) A map of key-value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/).
+
+```scss
+// LibSass
+@import "hugo:vars";
+
+// Dart Sass
+@use "hugo:vars" as v;
+```
+
+outputStyle
+: (`string`) Output styles available to LibSass include `nested` (default), `expanded`, `compact`, and `compressed`. Output styles available to Dart Sass include `expanded` (default) and `compressed`.
+
+precision
+: (`int`) Precision of floating point math. Not applicable to Dart Sass.
+
+enableSourceMap
+: (`bool`) If `true`, generates a source map.
+
+sourceMapIncludeSources
+: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass.
+
+includePaths
+: (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements.
+
+```go-html-template
+{{ $opts := dict
+ "transpiler" "dartsass"
+ "targetPath" "css/style.css"
+ "vars" site.Params.styles
+ "enableSourceMap" (not hugo.IsProduction)
+ "includePaths" (slice "node_modules/bootstrap/scss")
+}}
+{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end }}
+```
+
+## Dart Sass
+
+The extended version of Hugo includes [LibSass] to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of [Dart Sass].
+
+Use the latest features of the Sass language by installing Dart Sass in your development and production environments.
+
+### Installation overview
+
+Dart Sass is compatible with Hugo v0.114.0 and later.
+
+If you have been using Embedded Dart Sass[^1] with Hugo v0.113.0 and earlier, uninstall Embedded Dart Sass, then install Dart Sass. If you have installed both, Hugo will use Dart Sass.
+
+If you install Hugo as a [Snap package] there is no need to install Dart Sass. The Hugo Snap package includes Dart Sass.
+
+[^1]: In 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass.
+
+### Installing in a development environment
+
+When you install Dart Sass somewhere in your PATH, Hugo will find it.
+
+OS|Package manager|Site|Installation
+:--|:--|:--|:--
+Linux|Homebrew|[brew.sh]|`brew install sass/sass/sass`
+Linux|Snap|[snapcraft.io]|`sudo snap install dart-sass`
+macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass`
+Windows|Chocolatey|[chocolatey.org]|`choco install sass`
+Windows|Scoop|[scoop.sh]|`scoop install sass`
+
+You may also install [prebuilt binaries] for Linux, macOS, and Windows.
+
+Run `hugo env` to list the active transpilers.
+
+### Installing in a production environment
+
+For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries.
+
- HUGO_VERSION: 0.137.1
- DART_SASS_VERSION: 1.80.6
++[^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your `resources` directory to your repository.
+
+#### GitHub Pages
+
+To install Dart Sass for your builds on GitHub Pages, add this step to the GitHub Pages workflow file:
+
+```yaml
+- name: Install Dart Sass
+ run: sudo snap install dart-sass
+```
+
+If you are using GitHub Pages for the first time with your repository, GitHub provides a [starter workflow] for Hugo that includes Dart Sass. This is the simplest way to get started.
+
+#### GitLab Pages
+
+To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file should look something like this:
+
+```yaml
+variables:
- HUGO_VERSION = "0.137.1"
- DART_SASS_VERSION = "1.80.6"
++ HUGO_VERSION: 0.141.0
++ DART_SASS_VERSION: 1.83.4
+ GIT_DEPTH: 0
+ GIT_STRATEGY: clone
+ GIT_SUBMODULE_STRATEGY: recursive
+ TZ: America/Los_Angeles
+image:
+ name: golang:1.20-buster
+pages:
+ script:
+ # Install Dart Sass
+ - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - cp -r dart-sass/* /usr/local/bin
+ - rm -rf dart-sass*
+ # Install Hugo
+ - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ - apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ # Build
+ - hugo --gc --minify
+ artifacts:
+ paths:
+ - public
+ rules:
+ - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+```
+
+#### Netlify
+
+To install Dart Sass for your builds on Netlify, the `netlify.toml` file should look something like this:
+
+```toml
+[build.environment]
++HUGO_VERSION = "0.141.0"
++DART_SASS_VERSION = "1.83.4"
++NODE_VERSION = "22"
+TZ = "America/Los_Angeles"
+
+[build]
+publish = "public"
+command = """\
+ curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ export PATH=/opt/build/repo/dart-sass:$PATH && \
+ hugo --gc --minify \
+ """
+```
+
+### Example
+
+To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `resources.ToCSS`. For example:
+
+```go-html-template
+{{ with resources.Get "sass/main.scss" }}
+ {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
+ {{ with . | toCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}">
+ {{ else }}
+ {{ with . | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+### Miscellaneous
+
+If you build Hugo from source and run `mage test -v`, the test will fail if you install Dart Sass as a Snap package. This is due to the Snap package's strict confinement model.
+
+[brew.sh]: https://brew.sh/
+[chocolatey.org]: https://community.chocolatey.org/packages/sass
+[ci/cd]: https://en.wikipedia.org/wiki/CI/CD
+[dart sass]: https://sass-lang.com/dart-sass
+[libsass]: https://sass-lang.com/libsass
+[prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest
+[scoop.sh]: https://scoop.sh/#/apps?q=sass
+[site configuration]: /getting-started/configuration/#configure-build
+[snap package]: /installation/linux/#snap
+[snapcraft.io]: https://snapcraft.io/dart-sass
+[starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml
--- /dev/null
- 2. The CSS3 rule production, such as `a[href=~"https:"].foo#bar`.
- 3. CSS3 declaration productions, such as `color: red; margin: 2px`.
- 4. The CSS3 value production, such as `rgba(0, 0, 255, 127)`.
+---
+title: safe.CSS
+description: Declares the given string as a safe CSS string.
+categories: []
+keywords: []
+action:
+ aliases: [safeCSS]
+ related:
+ - functions/safe/HTML
+ - functions/safe/HTMLAttr
+ - functions/safe/JS
+ - functions/safe/JSStr
+ - functions/safe/URL
+ returnType: template.CSS
+ signatures: [safe.CSS INPUT]
+toc: true
+aliases: [/functions/safecss]
+---
+
+## Introduction
+
+{{% include "functions/_common/go-html-template-package.md" %}}
+
+## Usage
+
+Use the `safe.CSS` function to encapsulate known safe content that matches any of:
+
+1. The CSS3 stylesheet production, such as `p { color: purple }`.
++1. The CSS3 rule production, such as `a[href=~"https:"].foo#bar`.
++1. CSS3 declaration productions, such as `color: red; margin: 2px`.
++1. The CSS3 value production, such as `rgba(0, 0, 255, 127)`.
+
+Use of this type presents a security risk: the encapsulated content should come from a trusted source, as it will be included verbatim in the template output.
+
+See the [Go documentation] for details.
+
+[Go documentation]: https://pkg.go.dev/html/template#CSS
+
+## Example
+
+Without a safe declaration:
+
+```go-html-template
+{{ $style := "color: red;" }}
+<p style="{{ $style }}">foo</p>
+```
+
+Hugo renders the above to:
+
+```html
+<p style="ZgotmplZ">foo</p>
+```
+
+{{% note %}}
+`ZgotmplZ` is a special value that indicates that unsafe content reached a CSS or URL context at runtime.
+{{% /note %}}
+
+To declare the string as safe:
+
+```go-html-template
+{{ $style := "color: red;" }}
+<p style="{{ $style | safeCSS }}">foo</p>
+```
+
+Hugo renders the above to:
+
+```html
+<p style="color: red;">foo</p>
+```
--- /dev/null
- {{< new-in 0.111.0 >}}
-
+---
+title: strings.ContainsNonSpace
+description: Reports whether the given string contains any non-space characters as defined by Unicode.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/strings/Contains
+ - functions/strings/ContainsAny
+ - functions/strings/HasPrefix
+ - functions/strings/HasSuffix
+ - functions/collections/In
+ returnType: bool
+ signatures: [strings.ContainsNonSpace STRING]
+aliases: [/functions/strings.containsnonspace]
+---
+
+Whitespace characters include `\t`, `\n`, `\v`, `\f`, `\r`, and characters in the [Unicode Space Separator] category.
+
+[Unicode Space Separator]: https://www.compart.com/en/unicode/category/Zs
+
+```go-html-template
+{{ strings.ContainsNonSpace "\n" }} → false
+{{ strings.ContainsNonSpace " " }} → false
+{{ strings.ContainsNonSpace "\n abc" }} → true
+```
--- /dev/null
- The START and END arguments represent the endpoints of a [half-open interval], a concept that may be difficult to grasp when first encountered. You may find that the [`strings.Substr`] function is easier to understand.
+---
+title: strings.SliceString
+description: Returns a substring of the given string, beginning with the start position and ending before the end position.
+categories: []
+keywords: []
+action:
+ aliases: [slicestr]
+ related:
+ - functions/strings/Substr
+ returnType: string
+ signatures: ['strings.SliceString STRING [START] [END]']
+aliases: [/functions/slicestr]
+---
+
+The START and END positions are zero-based, where `0` represents the first character of the string. If START is not specified, the substring will begin at position `0`. If END is not specified, the substring will end after the last character.
+
+```go-html-template
+{{ slicestr "BatMan" }} → BatMan
+{{ slicestr "BatMan" 3 }} → Man
+{{ slicestr "BatMan" 0 3 }} → Bat
+```
+
- [half-open interval]: /getting-started/glossary/#interval
++The START and END arguments represent the endpoints of a half-open [interval](g), a concept that may be difficult to grasp when first encountered. You may find that the [`strings.Substr`] function is easier to understand.
+
+[`strings.Substr`]: /functions/strings/substr/
--- /dev/null
-
+---
+title: templates.Defer
+description: Defer execution of a template until after all sites and output formats have been rendered.
+categories: []
+keywords: []
+toc: true
+action:
+ aliases: []
+ related: []
+ returnType: string
+ signatures: [templates.Defer OPTIONS]
+aliases: [/functions/templates.defer]
+---
+
+{{< new-in "0.128.0" >}}
+
+In some rare use cases, you may need to defer the execution of a template until after all sites and output formats have been rendered. One such example could be [TailwindCSS](/functions/css/tailwindcss/) using the output of [hugo_stats.json](/getting-started/configuration/#configure-build) to determine which classes and other HTML identifiers are being used in the final output:
+
+```go-html-template
+{{ with (templates.Defer (dict "key" "global")) }}
+ {{ $t := debug.Timer "tailwindcss" }}
+ {{ with resources.Get "css/styles.css" }}
+ {{ $opts := dict
+ "inlineImports" true
+ "optimize" hugo.IsProduction
+ }}
+ {{ with . | css.TailwindCSS $opts }}
+ {{ if hugo.IsDevelopment }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" />
+ {{ else }}
+ {{ with . | minify | fingerprint }}
+ <link
+ rel="stylesheet"
+ href="{{ .RelPermalink }}"
+ integrity="{{ .Data.Integrity }}"
+ crossorigin="anonymous" />
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ end }}
+ {{ $t.Stop }}
+{{ end }}
+```
+
+{{% note %}}
+This function only works in combination with the `with` keyword.
+{{% /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 %}}
+
+For the above to work well when running the server (or `hugo -w`), you want to have a configuration similar to this:
+
+{{< code-toggle file=hugo >}}
+[module]
+[[module.mounts]]
+source = "hugo_stats.json"
+target = "assets/notwatching/hugo_stats.json"
+disableWatch = true
+[build.buildStats]
+enable = true
+[[build.cachebusters]]
+source = "assets/notwatching/hugo_stats\\.json"
+target = "styles\\.css"
+[[build.cachebusters]]
+source = "(postcss|tailwind)\\.config\\.js"
+target = "css"
+{{< /code-toggle >}}
+
+## Options
+
+The `templates.Defer` function takes a single argument, a map with the following optional keys:
+
+key (`string`)
+: The key to use for the deferred template. This will, combined with a hash of the template content, be used as a cache key. If this is not set, Hugo will execute the deferred template on every render. This is not what you want for shared resources like CSS and JavaScript.
+
+data (`map`)
+: Optional map to pass as data to the deferred template. This will be available in the deferred template as `.` or `$`.
+
+```go-html-template
+Language Outside: {{ site.Language.Lang }}
+Page Outside: {{ .RelPermalink }}
+I18n Outside: {{ i18n "hello" }}
+{{ $data := (dict "page" . )}}
+{{ with (templates.Defer (dict "data" $data )) }}
+ Language Inside: {{ site.Language.Lang }}
+ Page Inside: {{ .page.RelPermalink }}
+ I18n Inside: {{ i18n "hello" }}
+{{ end }}
+```
+
+The [Output Format](/templates/output-formats/), [Site](/methods/page/site/), and [language](/methods/site/language) will be the same, even if the execution is deferred. In the example above, this means that the `site.Language.Lang` and `.RelPermalink` will be the same on the inside and the outside of the deferred template.
--- /dev/null
- 2. The time zone provided as the second argument to the `time.AsTime` function
- 3. The time zone specified in your site configuration
- 4. The `Etc/UTC` time zone
-
+---
+title: time.AsTime
+description: Returns the given string representation of a date/time value as a time.Time value.
+categories: []
+keywords: []
+action:
+ aliases: [time]
+ related:
+ - functions/time/Duration
+ - functions/time/Format
+ - functions/time/Now
+ - functions/time/ParseDuration
+ returnType: time.Time
+ signatures: ['time.AsTime INPUT [TIMEZONE]']
+aliases: [/functions/time]
+toc: true
+---
+
+## Overview
+
+Hugo provides [functions] and [methods] to format, localize, parse, compare, and manipulate date/time values. Before you can do any of these with string representations of date/time values, you must first convert them to [`time.Time`] values using the `time.AsTime` function.
+
+```go-html-template
+{{ $t := "2023-10-15T13:18:50-07:00" }}
+{{ time.AsTime $t }} → 2023-10-15 13:18:50 -0700 PDT (time.Time)
+```
+
+## Parsable strings
+
+As shown above, the first argument must be a parsable string representation of a date/time value. For example:
+
+{{% include "functions/time/_common/parsable-date-time-strings.md" %}}
+
+To override the default time zone, set the [`timeZone`] in your site configuration or provide a second argument to the `time.AsTime` function. For example:
+
+```go-html-template
+{{ time.AsTime "15 Oct 2023" "America/Los_Angeles" }}
+```
+
+The list of valid time zones may be system dependent, but should include `UTC`, `Local`, or any location in the [IANA Time Zone database].
+
+The order of precedence for determining the time zone is:
+
+1. The time zone offset in the date/time string
- [`timeZone`]: https://gohugo.io/getting-started/configuration/#timezone
++1. The time zone provided as the second argument to the `time.AsTime` function
++1. The time zone specified in your site configuration
++1. The `Etc/UTC` time zone
+
+[IANA Time Zone database]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+[`time.Time`]: https://pkg.go.dev/time#Time
++[`timeZone`]: /getting-started/configuration/#timezone
+[functions]: /functions/time/
+[methods]: /methods/time/
--- /dev/null
-
+---
+title: time.Duration
+description: Returns a time.Duration value using the given time unit and number.
+categories: []
+keywords: []
+action:
+ aliases: [duration]
+ related:
+ - functions/time/AsTime
+ - functions/time/Format
+ - functions/time/Now
+ - functions/time/ParseDuration
+ returnType: time.Duration
+ signatures: [time.Duration TIME_UNIT NUMBER]
+aliases: [/functions/duration]
+---
+
+The `time.Duration` function returns a [`time.Duration`] value that you can use with any of the `Duration` [methods].
+
+This template:
+
+```go-html-template
+{{ $duration := time.Duration "hour" 24 }}
+{{ printf "There are %.0f seconds in one day." $duration.Seconds }}
+```
+
+Is rendered to:
+
+```text
+There are 86400 seconds in one day.
+```
+
+The time unit must be one of the following:
+
+Duration|Valid time units
+:--|:--
+hours|`hour`, `h`
+minutes|`minute`, `m`
+seconds|`second`, `s`
+milliseconds|`millisecond`, `ms`
+microseconds|`microsecond`, `us`, `µs`
+nanoseconds|`nanosecond`, `ns`
+
+[`time.Duration`]: https://pkg.go.dev/time#Duration
+[methods]: /methods/duration/
--- /dev/null
- 2. The time zone specified in your site configuration
- 3. The `Etc/UTC` time zone
+---
+title: time.Format
+description: Returns the given date/time as a formatted and localized string.
+categories: []
+keywords: []
+action:
+ aliases: [dateFormat]
+ related:
+ - functions/time/AsTime
+ - functions/time/Duration
+ - functions/time/Now
+ - functions/time/ParseDuration
+ returnType: string
+ signatures: [time.Format LAYOUT INPUT]
+aliases: [/functions/dateformat]
+toc: true
+---
+
+Use the `time.Format` function with `time.Time` values:
+
+```go-html-template
+{{ $t := time.AsTime "2023-10-15T13:18:50-07:00" }}
+{{ time.Format "2 Jan 2006" $t }} → 15 Oct 2023
+```
+
+Or use `time.Format` with a parsable string representation of a date/time value:
+
+```go-html-template
+{{ $t := "15 Oct 2023" }}
+{{ time.Format "January 2, 2006" $t }} → October 15, 2023
+```
+
+Examples of parsable string representations:
+
+{{% include "functions/time/_common/parsable-date-time-strings.md" %}}
+
+To override the default time zone, set the [`timeZone`] in your site configuration. The order of precedence for determining the time zone is:
+
+1. The time zone offset in the date/time string
- [`timeZone`]: https://gohugo.io/getting-started/configuration/#timezone
++1. The time zone specified in your site configuration
++1. The `Etc/UTC` time zone
+
++[`timeZone`]: /getting-started/configuration/#timezone
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
+
+## Localization
+
+Use the `time.Format` function to localize `time.Time` values for the current language and region.
+
+{{% include "functions/_common/locales.md" %}}
+
+Use the layout string as described above, or one of the tokens below. For example:
+
+```go-html-template
+{{ .Date | time.Format ":date_medium" }} → Jan 27, 2023
+```
+
+Localized to en-US:
+
+Token|Result
+:--|:--
+`:date_full`|`Friday, January 27, 2023`
+`:date_long`|`January 27, 2023`
+`:date_medium`|`Jan 27, 2023`
+`:date_short`|`1/27/23`
+`:time_full`|`11:44:58 pm Pacific Standard Time`
+`:time_long`|`11:44:58 pm PST`
+`:time_medium`|`11:44:58 pm`
+`:time_short`|`11:44 pm`
+
+Localized to de-DE:
+
+Token|Result
+:--|:--
+`:date_full`|`Freitag, 27. Januar 2023`
+`:date_long`|`27. Januar 2023`
+`:date_medium`|`27.01.2023`
+`:date_short`|`27.01.23`
+`:time_full`|`23:44:58 Nordamerikanische Westküsten-Normalzeit`
+`:time_long`|`23:44:58 PST`
+`:time_medium`|`23:44:58`
+`:time_short`|`23:44`
--- /dev/null
- To format and [localize] the value, pass it through the [`time.Format`] function:
+---
+title: time.Now
+description: Returns the current local time.
+categories: []
+keywords: []
+action:
+ aliases: [now]
+ related:
+ - functions/time/AsTime
+ - functions/time/Duration
+ - functions/time/Format
+ - functions/time/ParseDuration
+ returnType: time.Time
+ signatures: [time.Now]
+aliases: [/functions/now]
+---
+
+For example, when building a site on October 15, 2023 in the America/Los_Angeles time zone:
+
+```go-html-template
+{{ time.Now }}
+```
+
+This produces a `time.Time` value, with a string representation such as:
+
+```text
+2023-10-15 12:59:28.337140706 -0700 PDT m=+0.041752605
+```
+
-
++To format and [localize](g) the value, pass it through the [`time.Format`] function:
+
+```go-html-template
+{{ time.Now | time.Format "Jan 2006" }} → Oct 2023
+```
+
+The `time.Now` function returns a `time.Time` value, so you can chain any of the [time methods] to the resulting value. For example:
+
- [localize]: /getting-started/glossary/#localization
+```go-html-template
+{{ time.Now.Year }} → 2023 (int)
+{{ time.Now.Weekday.String }} → Sunday
+{{ time.Now.Month.String }} → October
+{{ time.Now.Unix }} → 1697400955 (int64)
+```
+
+[`time.Format`]: /functions/time/format/
+[time methods]: /methods/time/
--- /dev/null
-
+---
+title: time.ParseDuration
+description: Returns a time.Duration value by parsing the given duration string.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/time/AsTime
+ - functions/time/Duration
+ - functions/time/Format
+ - functions/time/Now
+ returnType: time.Duration
+ signatures: [time.ParseDuration DURATION]
+aliases: [/functions/time.parseduration]
+---
+
+The `time.ParseDuration` function returns a time.Duration value that you can use with any of the `Duration` [methods].
+
+A duration string is a possibly signed sequence of decimal numbers, each with optional fraction and a unit suffix, such as `300ms`, `-1.5h` or `2h45m`. Valid time units are `ns`, `us` (or `µs`), `ms`, `s`, `m`, `h`.
+
+This template:
+
+```go-html-template
+{{ $duration := time.ParseDuration "24h" }}
+{{ printf "There are %.0f seconds in one day." $duration.Seconds }}
+```
+
+Is rendered to:
+
+```text
+There are 86400 seconds in one day.
+```
+
+[`time.Duration`]: https://pkg.go.dev/time#Duration
+[methods]: /methods/duration/
--- /dev/null
-
+---
+title: transform.Emojify
+description: Runs a string through the Emoji emoticons processor.
+categories: []
+keywords: []
+action:
+ aliases: [emojify]
+ related: []
+ returnType: template.HTML
+ signatures: [transform.Emojify INPUT]
+aliases: [/functions/emojify]
+---
+
+`emojify` runs a passed string through the Emoji emoticons processor.
+
+See the list of [emoji shortcodes] for available emoticons.
+
+The `emojify` function can be called in your templates but not directly in your content files by default. For emojis in content files, set `enableEmoji` to `true` in your site's [configuration]. Then you can write emoji shorthand directly into your content files;
+
+```text
+I :heart: Hugo!
+```
+
+I :heart: Hugo!
+
+[configuration]: /getting-started/configuration/
+[emoji shortcodes]: /quick-reference/emojis/
+[sc]: /templates/shortcode/
+[scsource]: https://github.com/gohugoio/hugo/tree/master/docs/layouts/shortcodes
--- /dev/null
- signatures: ['transform.Highlight INPUT LANG [OPTIONS]']
+---
+title: transform.Highlight
+description: Renders code with a syntax highlighter.
+categories: []
+keywords: []
+action:
+ aliases: [highlight]
+ related:
+ - functions/transform/CanHighlight
+ - functions/transform/HighlightCodeBlock
+ returnType: template.HTML
- The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 available styles.
++ signatures: ['transform.Highlight CODE LANG [OPTIONS]']
+aliases: [/functions/highlight]
+toc: true
+---
+
- INPUT
- : The code to highlight.
++The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
++
++[chroma]: https://github.com/alecthomas/chroma
++[available styles]: https://xyproto.github.io/splash/docs/
+
+## Arguments
+
- : The language of the code to highlight. Choose from one of the [supported languages]. Case-insensitive.
++The `transform.Highlight` shortcode takes three arguments.
++
++CODE
++: (`string`) The code to highlight.
+
+LANG
- : A map or comma-separated list of zero or more options. Set default values in [site configuration].
-
- ## Options
-
- anchorLineNos
- : (`bool`) Whether to render each line number as an HTML anchor element, setting the `id` attribute of the surrounding `span` element to the line number. Irrelevant if `lineNos` is `false`. Default is `false`.
-
- codeFences
- : (`bool`) Whether to highlight fenced code blocks. Default is `true`.
-
- 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]. Falls back to a plain text lexer if unable to automatically detect the language. Default is `false`.
-
- [lexer]: /getting-started/glossary/#lexer
-
- {{% note %}}
- The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
- {{% /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.
-
- hl_inline
- : (`bool`) Whether to render the highlighted code without a wrapping container.Default is `false`.
-
- lineAnchors
- : (`string`) When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding `span` element. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`.
-
- lineNoStart
- : (`int`) The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. Default is `1`.
-
- lineNos
- : (`bool`) Whether to display a number at the beginning of each line. Default is `false`.
++: (`string`) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
+
+OPTIONS
- lineNumbersInTable
- : (`bool`) Whether to render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers, while the right table cell contains the code. Irrelevant if `lineNos` is `false`. Default is `true`.
-
- noClasses
- : (`bool`) Whether to use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and generate the CSS file using the `hugo gen chromastyles` command. Default is `true`.
-
- style
- : (`string`) The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. Default is `monokai`.
-
- tabWidth
- : (`int`) Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. Default is `4`.
-
- 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 %}}
- Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
-
- lineNos=inline
- : equivalent to `lineNos=true` and `lineNumbersInTable=false`
-
- lineNos=table
- : equivalent to `lineNos=true` and `lineNumbersInTable=true`
- {{% /note %}}
++: (`map or string`) A map or space-separate key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.
+
- [Chroma]: https://github.com/alecthomas/chroma
- [site configuration]: /getting-started/configuration-markup#highlight
- [style gallery]: https://xyproto.github.io/splash/docs/
- [supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages
++[site configuration]: /getting-started/configuration-markup#highlight
++[supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages
+
+## Examples
+
+```go-html-template
+{{ $input := `fmt.Println("Hello World!")` }}
+{{ transform.Highlight $input "go" }}
+
+{{ $input := `console.log('Hello World!');` }}
+{{ $lang := "js" }}
+{{ transform.Highlight $input $lang "lineNos=table, style=api" }}
+
+{{ $input := `echo "Hello World!"` }}
+{{ $lang := "bash" }}
+{{ $opts := dict "lineNos" "table" "style" "dracula" }}
+{{ transform.Highlight $input $lang $opts }}
+```
+
++## Options
++
++{{% include "functions/_common/highlighting-options" %}}
--- /dev/null
- description: Renders a math expression using KaTeX.
+---
+title: transform.ToMath
- keywords: [math,katex]
++description: Renders mathematical equations and expressions written in the LaTeX markup language.
+categories: []
- signatures: ['transform.ToMath EXPRESSION [OPTIONS]']
++keywords: [katex,latex,math,typesetting]
+action:
+ aliases: []
+ related:
+ - content-management/mathematics
+ returnType: types.Result[template.HTML]
- {{% note %}}
- This feature was introduced in Hugo 0.132.0 and is marked as experimental.
++ signatures: ['transform.ToMath INPUT [OPTIONS]']
+aliases: [/functions/tomath]
+toc: true
+---
+
+{{< new-in "0.132.0" >}}
+
- This does not mean that it's going to be removed, but this is our first use of WASI/Wasm in Hugo, and we need to see how it [works in the wild](https://github.com/gohugoio/hugo/issues/12736) before we can set it in stone.
- {{% /note %}}
++Hugo uses an embedded instance of the [KaTeX] display engine to render mathematical markup to HTML. You do not need to install the KaTeX display engine.
+
- ## Arguments
++[KaTeX]: https://katex.org/
+
- EXPRESSION
- : The math expression to render using KaTeX.
++```go-html-template
++{{ transform.ToMath "c = \\pm\\sqrt{a^2 + b^2}" }}
++```
+
- OPTIONS
- : A map of zero or more options.
++{{% note %}}
++By default, Hugo renders mathematical markup to [MathML], and does not require any CSS to display the result.
+
- ## Options
++[MathML]: https://developer.mozilla.org/en-US/docs/Web/MathML
+
- These are a subset of the [KaTeX options].
++To optimize rendering quality and accessibility, use the `htmlAndMathml` output option as described below. This approach requires an external stylesheet.
+
- output
- : (`string`). Determines the markup language of the output. One of `html`, `mathml`, or `htmlAndMathml`. Default is `mathml`.
++{{% /note %}}
+
- {{% comment %}}Indent to prevent splitting the description list.{{% / comment %}}
++```go-html-template
++{{ $opts := dict "output" "htmlAndMathml" }}
++{{ transform.ToMath "c = \\pm\\sqrt{a^2 + b^2}" $opts }}
++```
+
- With `html` and `htmlAndMathml` you must include KaTeX CSS within the `head` element of your base template. For example:
++## Options
+
- ```html
- <head>
- ...
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
- ...
- </head>
- ```
++Pass a map of options as the second argument to the `transform.ToMath` function. The options below are a subset of the KaTeX [rendering options].
+
- leqno
- : (`bool`) If `true` render with the equation numbers on the left. Default is `false`.
++[rendering options]: https://katex.org/docs/options.html
+
+displayMode
+: (`bool`) If `true` render in display mode, else render in inline mode. Default is `false`.
+
- macros
- : (`map`) A map of macros to be used in the math expression. Default is `{}`.
++errorColor
++: (`string`) The color of the error messages expressed as an RGB [hexadecimal color]. Default is `#cc0000`.
++
++[hexadecimal color]: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
+
+fleqn
+: (`bool`) If `true` render flush left with a 2em left margin. Default is `false`.
+
++macros
++: (`map`) A map of macros to be used in the math expression. Default is `{}`.
++
++ ```go-html-template
++ {{ $macros := dict
++ "\\addBar" "\\bar{#1}"
++ "\\bold" "\\mathbf{#1}"
++ }}
++ {{ $opts := dict "macros" $macros }}
++ {{ transform.ToMath "\\addBar{y} + \\bold{H}" $opts }}
++ ```
++
+minRuleThickness
+: (`float`) The minimum thickness of the fraction lines in `em`. Default is `0.04`.
+
- : (`bool`) If `true` throw a `ParseError` when KaTeX encounters an unsupported command or invalid LaTex. See [error handling]. Default is `true`.
++output
++: (`string`). Determines the markup language of the output, one of `html`, `mathml`, or `htmlAndMathml`. Default is `mathml`.
++
++ With `html` and `htmlAndMathml` you must include the KaTeX style sheet within the `head` element of your base template.
++
++ ```html
++ <link href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" rel="stylesheet">
+
+throwOnError
- errorColor
- : (`string`) The color of the error messages expressed as an RGB [hexadecimal color]. Default is `#cc0000`.
++: (`bool`) If `true` throw a `ParseError` when KaTeX encounters an unsupported command or invalid LaTeX. Default is `true`.
+
- ## Examples
++## Error handling
+
- ### Basic
++There are three ways to handle errors:
+
- ```go-html-template
- {{ transform.ToMath "c = \\pm\\sqrt{a^2 + b^2}" }}
- ```
++1. Let KaTeX throw an error and fail the build. This is the default behavior.
++1. Set the `throwOnError` option to `false` to make KaTeX render the expression as an error instead of throwing an error. See [options](#options).
++1. Handle the error in your template.
+
- ### Macros
++The example below demonstrates error handing within a template.
+
- ```go-html-template
- {{ $macros := dict
- "\\addBar" "\\bar{#1}"
- "\\bold" "\\mathbf{#1}"
- }}
- {{ $opts := dict "macros" $macros }}
- {{ transform.ToMath "\\addBar{y} + \\bold{H}" $opts }}
- ```
++## Example
+
- ## Error handling
++Instead of client-side JavaScript rendering of mathematical markup using MathJax or KaTeX, create a passthrough render hook which calls the `transform.ToMath` function.
+
- There are 3 ways to handle errors from KaTeX:
++###### Step 1
+
- 1. Let KaTeX throw an error and make the build fail. This is the default behavior.
- 1. Handle the error in your template. See the render hook example below.
- 1. Set the `throwOnError` option to `false` to make KaTeX render the expression as an error instead of throwing an error. See [options](#options).
++Enable and configure the Goldmark [passthrough extension] in your site configuration. The passthrough extension preserves raw Markdown within delimited snippets of text, including the delimiters themselves.
+
- {{< code file=layouts/_default/_markup/render-passthrough-inline.html copy=true >}}
- {{ with transform.ToMath .Inner }}
- {{ with .Err }}
- {{ errorf "Failed to render KaTeX: %q. See %s" . $.Position }}
- {{ else }}
- {{ . }}
++[passthrough extension]: /getting-started/configuration-markup/#passthrough
++
++{{< code-toggle file=hugo copy=true >}}
++[markup.goldmark.extensions.passthrough]
++enable = true
++
++[markup.goldmark.extensions.passthrough.delimiters]
++block = [['\[', '\]'], ['$$', '$$']]
++inline = [['\(', '\)']]
++{{< /code-toggle >}}
++
++{{% 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 %}}
+
- {{ end }}
- {{- /* chomp trailing newline */ -}}
++###### Step 2
++
++Create a [passthrough render hook] to capture and render the LaTeX markup.
++
++[passthrough render hook]: /render-hooks/passthrough/
++
++{{< code file=layouts/_default/_markup/render-passthrough.html copy=true >}}
++{{- $opts := dict "output" "htmlAndMathml" "displayMode" (eq .Type "block") }}
++{{- with try (transform.ToMath .Inner $opts) }}
++ {{- with .Err }}
++ {{ errorf "Unable to render mathematical markup to HTML using the transform.ToMath function. The KaTeX display engine threw the following error: %s: see %s." . $.Position }}
++ {{- else }}
++ {{- .Value }}
++ {{- $.Page.Store.Set "hasMath" true }}
++ {{- end }}
++{{- end -}}
++{{< /code >}}
++
++###### Step 3
++
++In your base template, conditionally include the KaTeX CSS within the head element.
++
++{{< code file=layouts/_default/baseof.html copy=true >}}
++<head>
++ {{ $noop := .WordCount }}
++ {{ if .Page.Store.Get "hasMath" }}
++ <link href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" rel="stylesheet">
+ {{ end }}
- [error handling]: #error-handling
- [KaTeX options]: https://katex.org/docs/options.html
- [hexadecimal color]: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
++</head>
+{{< /code >}}
+
++In the above, note the use of a [noop](g) statement to force content rendering before we check the value of `hasMath` with the `Store.Get` method.
++
++#### Step 4
++
++Add some mathematical markup to your content, then test.
++
++{{< code file=content/example.md >}}
++This is an inline \(a^*=x-b^*\) equation.
++
++These are block equations:
++
++\[a^*=x-b^*\]
++
++$$a^*=x-b^*$$
++{{< /code >}}
--- /dev/null
- The input can be a string or a [resource].
+---
+title: transform.Unmarshal
+description: Parses serialized data and returns a map or an array. Supports CSV, JSON, TOML, YAML, and XML.
+categories: []
+keywords: []
+action:
+ aliases: [unmarshal]
+ related:
+ - functions/transform/Remarshal
+ - functions/resources/Get
+ - functions/resources/GetRemote
+ - functions/encoding/Jsonify
+ returnType: any
+ signatures: ['transform.Unmarshal [OPTIONS] INPUT']
+toc: true
+aliases: [/functions/transform.unmarshal]
+---
+
- A global resource is a file within the assets directory, or within any directory mounted to the assets directory.
++The input can be a string or a [resource](g).
+
+## Unmarshal a string
+
+```go-html-template
+{{ $string := `
+title: Les Misérables
+author: Victor Hugo
+`}}
+
+{{ $book := unmarshal $string }}
+{{ $book.title }} → Les Misérables
+{{ $book.author }} → Victor Hugo
+```
+
+## Unmarshal a resource
+
+Use the `transform.Unmarshal` function with global, page, and remote resources.
+
+### Global resource
+
- {{ with resources.GetRemote $url }}
++A global resource is a file within the `assets` directory, or within any directory mounted to the `assets` directory.
+
+```text
+assets/
+└── data/
+ └── books.json
+```
+
+```go-html-template
+{{ $data := dict }}
+{{ $path := "data/books.json" }}
+{{ with resources.Get $path }}
+ {{ with . | transform.Unmarshal }}
+ {{ $data = . }}
+ {{ end }}
+{{ else }}
+ {{ errorf "Unable to get global resource %q" $path }}
+{{ end }}
+
+{{ range where $data "author" "Victor Hugo" }}
+ {{ .title }} → Les Misérables
+{{ end }}
+```
+
+### Page resource
+
+A page resource is a file within a [page bundle].
+
+```text
+content/
+├── post/
+│ └── book-reviews/
+│ ├── books.json
+│ └── index.md
+└── _index.md
+```
+
+```go-html-template
+{{ $data := dict }}
+{{ $path := "books.json" }}
+{{ with .Resources.Get $path }}
+ {{ with . | transform.Unmarshal }}
+ {{ $data = . }}
+ {{ end }}
+{{ else }}
+ {{ errorf "Unable to get page resource %q" $path }}
+{{ end }}
+
+{{ range where $data "author" "Victor Hugo" }}
+ {{ .title }} → Les Misérables
+{{ end }}
+```
+
+### Remote resource
+
+A remote resource is a file on a remote server, accessible via HTTP or HTTPS.
+
+```go-html-template
+{{ $data := dict }}
+{{ $url := "https://example.org/books.json" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
- {{ with resources.GetRemote $url }}
+{{ end }}
+
+{{ range where $data "author" "Victor Hugo" }}
+ {{ .title }} → Les Misérables
+{{ end }}
+```
+
+{{% 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:
+
+`{{ $data = .Content | transform.Unmarshal }}`
+
+[Content-Type]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type
+{{% /note %}}
+
+## Options
+
+When unmarshaling a CSV file, provide an optional map of options.
+
+delimiter
+: (`string`) The delimiter used, default is `,`.
+
+comment
+: (`string`) The comment character used in the CSV. If set, lines beginning with the comment character without preceding whitespace are ignored.
+
+lazyQuotes {{< new-in 0.122.0 >}}
+: (`bool`) If true, a quote may appear in an unquoted field and a non-doubled quote may appear in a quoted field. Default is `false`.
+
+```go-html-template
+{{ $csv := "a;b;c" | transform.Unmarshal (dict "delimiter" ";") }}
+```
+
+## Working with XML
+
+When unmarshaling an XML file, do not include the root node when accessing data. For example, after unmarshaling the RSS feed below, access the feed title with `$data.channel.title`.
+
+```xml
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+ <channel>
+ <title>Books on Example Site</title>
+ <link>https://example.org/books/</link>
+ <description>Recent content in Books on Example Site</description>
+ <language>en-US</language>
+ <atom:link href="https://example.org/books/index.xml" rel="self" type="application/rss+xml" />
+ <item>
+ <title>The Hunchback of Notre Dame</title>
+ <description>Written by Victor Hugo</description>
+ <link>https://example.org/books/the-hunchback-of-notre-dame/</link>
+ <pubDate>Mon, 09 Oct 2023 09:27:12 -0700</pubDate>
+ <guid>https://example.org/books/the-hunchback-of-notre-dame/</guid>
+ </item>
+ <item>
+ <title>Les Misérables</title>
+ <description>Written by Victor Hugo</description>
+ <link>https://example.org/books/les-miserables/</link>
+ <pubDate>Mon, 09 Oct 2023 09:27:11 -0700</pubDate>
+ <guid>https://example.org/books/les-miserables/</guid>
+ </item>
+ </channel>
+</rss>
+```
+
+Get the remote data:
+
+```go-html-template
+{{ $data := dict }}
+{{ $url := "https://example.org/books/index.xml" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ $data = . | transform.Unmarshal }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
- The title keys do not begin with an underscore or a letter---they are not valid [identifiers]. Use the [`index`] function to access the values:
+{{ end }}
+```
+
+Inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $data }}</pre>
+```
+
+List the book titles:
+
+```go-html-template
+{{ with $data.channel.item }}
+ <ul>
+ {{ range . }}
+ <li>{{ .title }}</li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+Hugo renders this to:
+
+```html
+<ul>
+ <li>The Hunchback of Notre Dame</li>
+ <li>Les Misérables</li>
+</ul>
+```
+
+### XML attributes and namespaces
+
+Let's add a `lang` attribute to the `title` nodes of our RSS feed, and a namespaced node for the ISBN number:
+
+```xml
+<?xml version="1.0" encoding="utf-8" standalone="yes"?>
+<rss version="2.0"
+ xmlns:atom="http://www.w3.org/2005/Atom"
+ xmlns:isbn="http://schemas.isbn.org/ns/1999/basic.dtd"
+>
+ <channel>
+ <title>Books on Example Site</title>
+ <link>https://example.org/books/</link>
+ <description>Recent content in Books on Example Site</description>
+ <language>en-US</language>
+ <atom:link href="https://example.org/books/index.xml" rel="self" type="application/rss+xml" />
+ <item>
+ <title lang="en">The Hunchback of Notre Dame</title>
+ <description>Written by Victor Hugo</description>
+ <isbn:number>9780140443530</isbn:number>
+ <link>https://example.org/books/the-hunchback-of-notre-dame/</link>
+ <pubDate>Mon, 09 Oct 2023 09:27:12 -0700</pubDate>
+ <guid>https://example.org/books/the-hunchback-of-notre-dame/</guid>
+ </item>
+ <item>
+ <title lang="fr">Les Misérables</title>
+ <description>Written by Victor Hugo</description>
+ <isbn:number>9780451419439</isbn:number>
+ <link>https://example.org/books/les-miserables/</link>
+ <pubDate>Mon, 09 Oct 2023 09:27:11 -0700</pubDate>
+ <guid>https://example.org/books/les-miserables/</guid>
+ </item>
+ </channel>
+</rss>
+```
+
+After retrieving the remote data, inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $data }}</pre>
+```
+
+Each item node looks like this:
+
+```json
+{
+ "description": "Written by Victor Hugo",
+ "guid": "https://example.org/books/the-hunchback-of-notre-dame/",
+ "link": "https://example.org/books/the-hunchback-of-notre-dame/",
+ "number": "9780140443530",
+ "pubDate": "Mon, 09 Oct 2023 09:27:12 -0700",
+ "title": {
+ "#text": "The Hunchback of Notre Dame",
+ "-lang": "en"
+ }
+}
+```
+
- [identifiers]: https://go.dev/ref/spec#Identifiers
- [resource]: /getting-started/glossary/#resource
++The title keys do not begin with an underscore or a letter---they are not valid [identifiers](g). Use the [`index`] function to access the values:
+
+```go-html-template
+{{ with $data.channel.item }}
+ <ul>
+ {{ range . }}
+ {{ $title := index .title "#text" }}
+ {{ $lang := index .title "-lang" }}
+ {{ $ISBN := .number }}
+ <li>{{ $title }} ({{ $lang }}) {{ $ISBN }}</li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+Hugo renders this to:
+
+```html
+<ul>
+ <li>The Hunchback of Notre Dame (en) 9780140443530</li>
+ <li>Les Misérables (fr) 9780451419439</li>
+</ul>
+```
+
+[`index`]: /functions/collections/indexfunction/
+[page bundle]: /content-management/page-bundles/
--- /dev/null
- {{< new-in 0.112.0 >}}
-
+---
+title: urls.JoinPath
+description: Joins the provided elements into a URL string and cleans the result of any ./ or ../ elements. If the argument list is empty, JoinPath returns an empty string.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/path/Join
+ returnType: string
+ signatures: [urls.JoinPath ELEMENT...]
+aliases: [/functions/urls.joinpath]
+---
+
+```go-html-template
+{{ urls.JoinPath }} → "" (empty string)
+{{ urls.JoinPath "" }} → /
+{{ urls.JoinPath "a" }} → a
+{{ urls.JoinPath "a" "b" }} → a/b
+{{ urls.JoinPath "/a" "b" }} → /a/b
+{{ urls.JoinPath "https://example.org" "b" }} → https://example.org/b
+
+{{ urls.JoinPath (slice "a" "b") }} → a/b
+```
+
+Unlike the [`path.Join`] function, `urls.JoinPath` retains consecutive leading slashes.
+
+[`path.Join`]: /functions/path/join/
--- /dev/null
- : (`string`) The path to the page, relative to the content directory. Required.
+---
+title: urls.Ref
+description: Returns the absolute permalink to a page at the given path.
+categories: []
+keywords: []
+action:
+ aliases: [ref]
+ related:
+ - functions/urls/RelRef
+ - methods/page/Ref
+ - methods/page/RelRef
+ returnType: string
+ signatures:
+ - urls.Ref PAGE PATH
+ - urls.Ref PAGE OPTIONS
+aliases: [/functions/ref]
+---
+
+The first argument is the context of the page from which to resolve relative paths, typically the current page.
+
+The second argument is a path to a page, with or without a file extension, with or without an anchor. A path without a leading `/` is first resolved relative to the given context, then to the remainder of the site. Alternatively, provide an [options map](#options) instead of a path.
+
+```go-html-template
+{{ ref . "about" }}
+{{ ref . "about#anchor" }}
+{{ ref . "about.md" }}
+{{ ref . "about.md#anchor" }}
+{{ ref . "#anchor" }}
+{{ ref . "/blog/my-post" }}
+{{ ref . "/blog/my-post.md" }}
+```
+
+## Options
+
+Instead of specifying a path, you can also provide an options map:
+
+path
++: (`string`) The path to the page, relative to the `content` directory. Required.
+
+lang
+: (`string`) The language (site) to search for the page. Default is the current language. Optional.
+
+outputFormat
+: (`string`) The output format to search for the page. Default is the current output format. Optional.
+
+To return the absolute permalink to another language version of a page:
+
+```go-html-template
+{{ ref . (dict "path" "about.md" "lang" "fr") }}
+```
+
+To return the absolute permalink to another Output Format of a page:
+
+```go-html-template
+{{ ref . (dict "path" "about.md" "outputFormat" "rss") }}
+```
+
+By default, Hugo will throw an error and fail the build if it cannot resolve the path. You can change this to a warning in your site configuration, and specify a URL to return when the path cannot be resolved.
+
+{{< code-toggle file=hugo >}}
+refLinksErrorLevel = 'warning'
+refLinksNotFoundURL = '/some/other/url'
+{{< /code-toggle >}}
--- /dev/null
- : (`string`) The path to the page, relative to the content directory. Required.
+---
+title: urls.RelRef
+description: Returns the relative permalink to a page at the given path.
+categories: []
+keywords: []
+action:
+ aliases: [relref]
+ related:
+ - functions/urls/Ref
+ - methods/page/Ref
+ - methods/page/RelRef
+ returnType: string
+ signatures:
+ - urls.RelRef PAGE PATH
+ - urls.RelRef PAGE OPTIONS
+aliases: [/functions/relref]
+---
+
+The first argument is the context of the page from which to resolve relative paths, typically the current page.
+
+The second argument is a path to a page, with or without a file extension, with or without an anchor. A path without a leading `/` is first resolved relative to the given context, then to the remainder of the site. Alternatively, provide an [options map](#options) instead of a path.
+.
+```go-html-template
+{{ relref . "about" }}
+{{ relref . "about#anchor" }}
+{{ relref . "about.md" }}
+{{ relref . "about.md#anchor" }}
+{{ relref . "#anchor" }}
+{{ relref . "/blog/my-post" }}
+{{ relref . "/blog/my-post.md" }}
+```
+
+The permalink returned is relative to the protocol+host portion of the baseURL specified in the site configuration. For example:
+
+Code|baseURL|Permalink
+:--|:--|:--
+`{{ relref . "/about" }}`|`https://example.org/`|`/about/`
+`{{ relref . "/about" }}`|`https://example.org/x/`|`/x/about/`
+
+## Options
+
+Instead of specifying a path, you can also provide an options map:
+
+path
++: (`string`) The path to the page, relative to the `content` directory. Required.
+
+lang
+: (`string`) The language (site) to search for the page. Default is the current language. Optional.
+
+outputFormat
+: (`string`) The output format to search for the page. Default is the current output format. Optional.
+
+To return the relative permalink to another language version of a page:
+
+```go-html-template
+{{ relref . (dict "path" "about.md" "lang" "fr") }}
+```
+
+To return the relative permalink to another Output Format of a page:
+
+```go-html-template
+{{ relref . (dict "path" "about.md" "outputFormat" "rss") }}
+```
+
+By default, Hugo will throw an error and fail the build if it cannot resolve the path. You can change this to a warning in your site configuration, and specify a URL to return when the path cannot be resolved.
+
+{{< code-toggle file=hugo >}}
+refLinksErrorLevel = 'warning'
+refLinksNotFoundURL = '/some/other/url'
+{{< /code-toggle >}}
--- /dev/null
- Use the `urlize` function to create a link to a [term] page.
+---
+title: urls.URLize
+description: Returns the given string, sanitized for usage in a URL.
+categories: []
+keywords: []
+action:
+ aliases: [urlize]
+ related:
+ - functions/urls/Anchorize
+ returnType: string
+ signatures: [urls.URLize INPUT]
+aliases: [/functions/urlize]
+---
+
+{{% include "/functions/urls/_common/anchorize-vs-urlize.md" %}}
+
+## Example
+
- [term]: /getting-started/glossary/#term
++Use the `urlize` function to create a link to a [term page](g).
+
+Consider this site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+author = 'authors'
+{{< /code-toggle >}}
+
+And this front matter:
+
+{{< code-toggle file=content/books/les-miserables.md fm=true >}}
+title = 'Les Misérables'
+authors = ['Victor Hugo']
+{{< /code-toggle >}}
+
+The published site will have this structure:
+
+```text
+public/
+├── authors/
+│ ├── victor-hugo/
+│ │ └── index.html
+│ └── index.html
+├── books/
+│ ├── les-miserables/
+│ │ └── index.html
+│ └── index.html
+└── index.html
+```
+
+To create a link to the term page:
+
+```go-html-template
+{{ $taxonomy := "authors" }}
+{{ $term := "Victor Hugo" }}
+{{ with index .Site.Taxonomies $taxonomy (urlize $term) }}
+ <a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a>
+{{ end }}
+```
+
+To generate a list of term pages associated with a given content page, use the [`GetTerms`] method on a `Page` object.
+
+[`GetTerms`]: /methods/page/getterms/
--- /dev/null
- weight: 60
- weight: 60
+---
+title: Configure build
+description: Configure global build options.
+categories: [getting started,fundamentals]
+keywords: [build,buildStats,cache]
+menu:
+ docs:
+ parent: getting-started
- (`bool`) If `true`, turns off writing a `jsconfig.json` into your `/assets` folder with mapping of imports from running [js.Build](/hugo-pipes/js). This file is intended to help with intellisense/navigation inside code editors such as [VS Code](https://code.visualstudio.com/). Note that if you do not use `js.Build`, no file will be written.
++ weight: 70
++weight: 70
+slug: configuration-build
+toc: true
+---
+
+The `build` configuration section contains global build-related configuration options.
+
+{{< code-toggle config=build />}}
+
+#### buildStats
+
+See [Configure buildStats](#configure-build-stats).
+
+#### cachebusters
+
+See [Configure Cache Busters](#configure-cache-busters).
+
+#### noJSConfigInAssets
+
-
++(`bool`) If `true`, turns off writing a `jsconfig.json` into your `assets` directory with mapping of imports from running [js.Build](/hugo-pipes/js). This file is intended to help with intellisense/navigation inside code editors such as [VS Code](https://code.visualstudio.com/). Note that if you do not use `js.Build`, no file will be written.
+
+#### useResourceCacheWhen
+
+(`string`) When to use the cached resources in `/resources/_gen` for PostCSS and ToCSS. Valid values are `never`, `always` and `fallback`. The last value means that the cache will be tried if PostCSS/extended version is not available.
+
- {{< new-in 0.112.0 >}}
-
+## Configure cache busters
+
- Given that CSS purging is typically limited to production builds, place the `buildStats` object below [config/production].
+The `build.cachebusters` configuration option was added to support development using Tailwind 3.x's JIT compiler where a `build` configuration may look like this:
+
+{{< code-toggle file=hugo >}}
+[build]
+ [build.buildStats]
+ enable = true
+ [[build.cachebusters]]
+ source = "assets/watching/hugo_stats\\.json"
+ target = "styles\\.css"
+ [[build.cachebusters]]
+ source = "(postcss|tailwind)\\.config\\.js"
+ target = "css"
+ [[build.cachebusters]]
+ source = "assets/.*\\.(js|ts|jsx|tsx)"
+ target = "js"
+ [[build.cachebusters]]
+ source = "assets/.*\\.(.*)$"
+ target = "$1"
+{{< /code-toggle >}}
+
+When `buildStats` {{< new-in 0.115.1 >}} is enabled, Hugo writes a `hugo_stats.json` file on each build with HTML classes etc. that's used in the rendered output. Changes to this file will trigger a rebuild of the `styles.css` file. You also need to add `hugo_stats.json` to Hugo's server watcher. See [Hugo Starter Tailwind Basic](https://github.com/bep/hugo-starter-tailwind-basic) for a running example.
+
+source
+: A regexp matching file(s) relative to one of the virtual component directories in Hugo, typically `assets/...`.
+
+target
+: A regexp matching the keys in the resource cache that should be expired when `source` changes. You can use the matching regexp groups from `source` in the expression, e.g. `$1`.
+
+## Configure build stats
+
+{{< code-toggle config=build.buildStats />}}
+
+{{< new-in 0.115.1 >}}
+
+If `enable` is set to `true`, 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.
+
+[removing unused CSS]: /hugo-pipes/postprocess/#css-purging-with-postcss
+
+Exclude `class` attributes, `id` attributes, or tags from `hugo_stats.json` with the `disableClasses`, `disableIDs`, and `disableTags` keys.
+
+{{% note %}}
- [config/production]: /getting-started/configuration/#configuration-directory
++Given that CSS purging is typically limited to production builds, place the `buildStats` object below [`config/production`].
+
- 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.
++[`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 %}}
+
++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.
--- /dev/null
- weight: 50
- weight: 50
+---
+title: Configure markup
+description: Configure rendering of markup to HTML.
+categories: [getting started,fundamentals]
+keywords: [markup,markdown,goldmark,asciidoc,asciidoctor,highlighting]
+menu:
+ docs:
+ parent: getting-started
- 2. Enable the Hugo Goldmark Extras delete extension
++ weight: 60
++weight: 60
+slug: configuration-markup
+toc: true
+---
+
+## Default handler
+
+Hugo uses [Goldmark] to render Markdown to HTML.
+
+{{< code-toggle file=hugo >}}
+[markup]
+defaultMarkdownHandler = 'goldmark'
+{{< /code-toggle >}}
+
+Files with a `.md`, `.mdown`, or `.markdown` extension are processed as Markdown, provided that you have not specified a different [content format] using the `markup` field in front matter.
+
+To use a different renderer for Markdown files, specify one of `asciidocext`, `org`, `pandoc`, or `rst` in your site configuration.
+
+defaultMarkdownHandler|Description
+:--|:--
+`asciidocext`|[AsciiDoc]
+`goldmark`|[Goldmark]
+`org`|[Emacs Org Mode]
+`pandoc`|[Pandoc]
+`rst`|[reStructuredText]
+
+To use AsciiDoc, Pandoc, or reStructuredText you must install the relevant renderer and update your [security policy].
+
+{{% 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 %}}
+
+[asciidoc]: https://asciidoc.org/
+[content format]: /content-management/formats/#formats
+[emacs org mode]: https://orgmode.org/
+[goldmark]: https://github.com/yuin/goldmark/
+[pandoc]: https://pandoc.org/
+[restructuredtext]: https://docutils.sourceforge.io/rst.html
+[security policy]: /about/security/#security-policy
+
+## Goldmark
+
+This is the default configuration for the Goldmark Markdown renderer:
+
+{{< code-toggle config=markup.goldmark />}}
+
+### Goldmark extensions
+
+The extensions below, excluding Extras and Passthrough, are enabled by default.
+
+Extension|Documentation|Enabled
+:--|:--|:-:
+cjk|[Goldmark Extensions: CJK]|:heavy_check_mark:
+definitionList|[PHP Markdown Extra: Definition lists]|:heavy_check_mark:
+extras|[Hugo Goldmark Extensions: Extras]|
+footnote|[PHP Markdown Extra: Footnotes]|:heavy_check_mark:
+linkify|[GitHub Flavored Markdown: Autolinks]|:heavy_check_mark:
+passthrough|[Hugo Goldmark Extensions: Passthrough]|
+strikethrough|[GitHub Flavored Markdown: Strikethrough]|:heavy_check_mark:
+table|[GitHub Flavored Markdown: Tables]|:heavy_check_mark:
+taskList|[GitHub Flavored Markdown: Task list items]|:heavy_check_mark:
+typographer|[Goldmark Extensions: Typographer]|:heavy_check_mark:
+
+[GitHub Flavored Markdown: Autolinks]: https://github.github.com/gfm/#autolinks-extension-
+[GitHub Flavored Markdown: Strikethrough]: https://github.github.com/gfm/#strikethrough-extension-
+[GitHub Flavored Markdown: Tables]: https://github.github.com/gfm/#tables-extension-
+[GitHub Flavored Markdown: Task list items]: https://github.github.com/gfm/#task-list-items-extension-
+[Goldmark Extensions: CJK]: https://github.com/yuin/goldmark?tab=readme-ov-file#cjk-extension
+[Goldmark Extensions: Typographer]: https://github.com/yuin/goldmark?tab=readme-ov-file#typographer-extension
+[Hugo Goldmark Extensions: Extras]: https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#extras-extension
+[Hugo Goldmark Extensions: Passthrough]: https://github.com/gohugoio/hugo-goldmark-extensions?tab=readme-ov-file#passthrough-extension
+[PHP Markdown Extra: Definition lists]: https://michelf.ca/projects/php-markdown/extra/#def-list
+[PHP Markdown Extra: Footnotes]: https://michelf.ca/projects/php-markdown/extra/#footnotes
+
+#### Extras
+
+{{< new-in 0.126.0 >}}
+
+Enable [deleted text], [inserted text], [mark text], [subscript], and [superscript] elements in Markdown.
+
+Element|Markdown|Rendered
+:--|:--|:--
+Deleted text|`~~foo~~`|`<del>foo</del>`
+Inserted text|`++bar++`|`<ins>bar</ins>`
+Mark text|`==baz==`|`<mark>baz</mark>`
+Subscript|`H~2~O`|`H<sub>2</sub>O`
+Superscript|`1^st^`|`1<sup>st</sup>`
+
+[deleted text]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
+[inserted text]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
+[mark text]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
+[subscript]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
+[superscript]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
+
+To avoid a conflict when enabling the Hugo Goldmark Extras subscript extension, if you want to render subscript and strikethrough text concurrently you must:
+
+1. Disable the Goldmark strikethrough extension
- Enable the passthrough extension to include mathematical equations and expressions in Markdown using LaTeX or TeX typesetting syntax. See [mathematics in Markdown] for details.
++1. Enable the Hugo Goldmark Extras delete extension
+
+For example:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.extensions]
+strikethrough = false
+
+[markup.goldmark.extensions.extras.delete]
+enable = true
+
+[markup.goldmark.extensions.extras.subscript]
+enable = true
+{{< /code-toggle >}}
+
+#### Passthrough
+
+{{< new-in 0.122.0 >}}
+
++Enable the passthrough extension to include mathematical equations and expressions in Markdown using LaTeX markup. See [mathematics in Markdown] for details.
+
+[mathematics in Markdown]: content-management/mathematics/
+
+#### Typographer
+
+The Typographer extension replaces certain character combinations with HTML entities as specified below:
+
+Markdown|Replaced by|Description
+:--|:--|:--
+`...`|`…`|horizontal ellipsis
+`'`|`’`|apostrophe
+`--`|`–`|en dash
+`---`|`—`|em dash
+`«`|`«`|left angle quote
+`“`|`“`|left double quote
+`‘`|`‘`|left single quote
+`»`|`»`|right angle quote
+`”`|`”`|right double quote
+`’`|`’`|right single quote
+
+### Goldmark settings explained
+
+Most of the Goldmark settings above are self-explanatory, but some require explanation.
+
+###### duplicateResourceFiles
+
+{{< new-in 0.123.0 >}}
+
+(`bool`) If `true`, shared page resources on multilingual single-host sites will be duplicated for each language. See [multilingual page resources] for details. Default is `false`.
+
+[multilingual page resources]: /content-management/page-resources/#multilingual
+
+{{% 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 %}}
+
+###### parser.wrapStandAloneImageWithinParagraph
+
+(`bool`) If `true`, image elements without adjacent content will be wrapped within a `p` element when rendered. This is the default Markdown behavior. Set to `false` when using an [image render hook] to render standalone images as `figure` elements. Default is `true`.
+
+[image render hook]: /render-hooks/images/
+
+###### parser.autoHeadingIDType
+
+(`string`) The strategy used to automatically generate heading `id` attributes, one of `github`, `github-ascii` or `blackfriday`.
+
+- `github` produces GitHub-compatible `id` attributes
+- `github-ascii` drops any non-ASCII characters after accent normalization
+- `blackfriday` produces `id` attributes compatible with the Blackfriday Markdown renderer
+
+This is also the strategy used by the [anchorize](/functions/urls/anchorize) template function. Default is `github`.
+
+###### parser.attribute.block
+
+(`bool`) If `true`, enables [Markdown attributes] for block elements. Default is `false`.
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+###### parser.attribute.title
+
+(`bool`) If `true`, enables [Markdown attributes] for headings. Default is `true`.
+
+###### renderHooks.image.enableDefault
+
+{{< new-in 0.123.0 >}}
+
+(`bool`) If `true`, enables Hugo's [embedded image render hook]. Default is `false`.
+
+[embedded image render hook]: /render-hooks/images/#default
+
+{{% 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 %}}
+
+###### renderHooks.link.enableDefault
+
+{{< new-in 0.123.0 >}}
+
+(`bool`) If `true`, enables Hugo's [embedded link render hook]. Default is `false`.
+
+[embedded link render hook]: /render-hooks/links/#default
+
+{{% 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 %}}
+
+###### renderer.hardWraps
+
+(`bool`) If `true`, Goldmark replaces newline characters within a paragraph with `br` elements. Default is `false`.
+
+###### renderer.unsafe
+
+(`bool`) If `true`, Goldmark renders raw HTML mixed within the Markdown. This is unsafe unless the content is under your control. Default is `false`.
+
+## AsciiDoc
+
+This is the default configuration for the AsciiDoc renderer:
+
+{{< code-toggle config=markup.asciidocExt />}}
+
+### AsciiDoc settings explained
+
+###### attributes
+
+(`map`) A map of key-value pairs, each a document attribute. See Asciidoctor’s [attributes].
+
+[attributes]: https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#attributes-and-substitutions
+
+###### backend
+
+(`string`) The backend output file format. Default is `html5`.
+
+###### extensions
+
+(`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 %}}
+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 %}}
+
+###### failureLevel
+
+(`string`) The minimum logging level that triggers a non-zero exit code (failure). Default is `fatal`.
+
+###### noHeaderOrFooter
+
+(`bool`) If `true`, outputs an embeddable document, which excludes the header, the footer, and everything outside the body of the document. Default is `true`.
+
+###### preserveTOC
+
+(`bool`) If `true`, preserves the table of contents (TOC) rendered by Asciidoctor. By default, to make the TOC compatible with existing themes, Hugo removes the TOC rendered by Asciidoctor. To render the TOC, use the [`TableOfContents`] method on a `Page` object in your templates. Default is `false`.
+
+[`TableOfContents`]: /methods/page/tableofcontents/
+
+###### safeMode
+
+(`string`) The safe mode level, one of `unsafe`, `safe`, `server`, or `secure`. Default is `unsafe`.
+
+###### sectionNumbers
+
+(`bool`) If `true`, numbers each section title. Default is `false`.
+
+###### trace
+
+(`bool`) If `true`, include backtrace information on errors. Default is `false`.
+
+###### verbose
+
+(`bool`)If `true`, verbosely prints processing information and configuration file checks to stderr. Default is `false`.
+
+###### workingFolderCurrent
+
+(`bool`) If `true`, sets the working directory to be the same as that of the AsciiDoc file being processed, allowing [includes] to work with relative paths. Set to `true` to render diagrams with the [asciidoctor-diagram] extension. Default is `false`.
+
+[asciidoctor-diagram]: https://asciidoctor.org/docs/asciidoctor-diagram/
+[includes]: https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/#includes
+
+### AsciiDoc configuration example
+
+{{< code-toggle file=hugo >}}
+[markup.asciidocExt]
+ extensions = ["asciidoctor-html5s", "asciidoctor-diagram"]
+ workingFolderCurrent = true
+ [markup.asciidocExt.attributes]
+ my-base-url = "https://example.com/"
+ my-attribute-name = "my value"
+{{< /code-toggle >}}
+
+### AsciiDoc syntax highlighting
+
+Follow the steps below to enable syntax highlighting.
+
+Step 1
+: Set the `source-highlighter` attribute in your site configuration. For example:
+
+{{< code-toggle file=hugo >}}
+[markup.asciidocExt.attributes]
+source-highlighter = 'rouge'
+{{< /code-toggle >}}
+
+Step 2
+: Generate the highlighter CSS. For example:
+
+```text
+rougify style monokai.sublime > assets/css/syntax.css
+```
+
+Step 3
+: In your base template add a link to the CSS file:
+
+{{< code file=layouts/_default/baseof.html >}}
+<head>
+ ...
+ {{ with resources.Get "css/syntax.css" }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+ {{ end }}
+ ...
+</head>
+{{< /code >}}
+
+Then add the code to be highlighted to your markup:
+
+```text
+[#hello,ruby]
+----
+require 'sinatra'
+
+get '/hi' do
+ "Hello World!"
+end
+----
+```
+
+### AsciiDoc troubleshooting
+
+Run `hugo --logLevel debug` to examine Hugo's call to the Asciidoctor executable:
+
+```txt
+INFO 2019/12/22 09:08:48 Rendering book-as-pdf.adoc with C:\Ruby26-x64\bin\asciidoctor.bat using asciidoc args [--no-header-footer -r asciidoctor-html5s -b html5s -r asciidoctor-diagram --base-dir D:\prototypes\hugo_asciidoc_ddd\docs -a outdir=D:\prototypes\hugo_asciidoc_ddd\build -] ...
+```
+
+## Highlight
+
+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 />}}
+
+For `style`, see these galleries:
+
+* [Short snippets](https://xyproto.github.io/splash/docs/all.html)
+* [Long snippets](https://xyproto.github.io/splash/docs/longer/all.html)
+
+For CSS, see [Generate Syntax Highlighter CSS](/content-management/syntax-highlighting/#generate-syntax-highlighter-css).
+
+## Table of contents
+
+This is the default configuration for the table of contents, applicable to Goldmark and Asciidoctor:
+
+{{< code-toggle config=markup.tableOfContents />}}
+
+###### startLevel
+
+(`int`) Heading levels less than this value will be excluded from the table of contents. For example, to exclude `h1` elements from the table of contents, set this value to `2`. Default is `2`.
+
+###### endLevel
+
+(`int`) Heading levels greater than this value will be excluded from the table of contents. For example, to exclude `h4`, `h5`, and `h6` elements from the table of contents, set this value to `3`. Default is `3`.
+
+###### ordered
+
+(`bool`) If `true`, generates an ordered list instead of an unordered list. Default is `false`.
--- /dev/null
- weight: 40
- weight: 40
+---
+title: Configure Hugo
+linkTitle: Configuration
+description: How to configure your Hugo site.
+categories: [getting started,fundamentals]
+keywords: [configuration,toml,yaml,json]
+menu:
+ docs:
+ parent: getting-started
- Instead of a single site configuration file, split your configuration by [environment], root configuration key, and language. For example:
-
- [environment]: /getting-started/glossary/#environment
++ weight: 50
++weight: 50
+toc: true
+aliases: [/overview/source-directory/,/overview/configuration/]
+---
+
+## Configuration file
+
+Create a site configuration file in the root of your project directory, naming it `hugo.toml`, `hugo.yaml`, or `hugo.json`, with that order of precedence.
+
+```text
+my-project/
+└── hugo.toml
+```
+
+{{% 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 %}}
+
+A simple example:
+
+{{< code-toggle file=hugo >}}
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'ABC Widgets, Inc.'
+[params]
+subtitle = 'The Best Widgets on Earth'
+[params.contact]
+email = 'info@example.org'
+phone = '+1 202-555-1212'
+{{< /code-toggle >}}
+
+To use a different configuration file when building your site, use the `--config` flag:
+
+```sh
+hugo --config other.toml
+```
+
+Combine two or more configuration files, with left-to-right precedence:
+
+```sh
+hugo --config a.toml,b.yaml,c.json
+```
+
+{{% 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 %}}
+
+## Configuration directory
+
- 2. You want to use different Google tag IDs for your production and staging environments. For example:
++Instead of a single site configuration file, split your configuration by [environment](g), root configuration key, and language. For example:
+
+```text
+my-project/
+└── config/
+ ├── _default/
+ │ ├── hugo.toml
+ │ ├── menus.en.toml
+ │ ├── menus.de.toml
+ │ └── params.toml
+ └── production/
+ └── params.toml
+```
+
+The root configuration keys are `build`, `caches`, `cascade`, `deployment`, `frontmatter`, `imaging`, `languages`, `markup`, `mediatypes`, `menus`, `minify`, `module`, `outputformats`, `outputs`, `params`, `permalinks`, `privacy`, `related`, `security`, `segments`, `server`, `services`, `sitemap`, and `taxonomies`.
+
+### Omit the root key
+
+When splitting the configuration by root key, omit the root key in the given file. For example, these are equivalent:
+
+{{< code-toggle file=hugo >}}
+[params]
+foo = 'bar'
+{{< /code-toggle >}}
+
+{{< code-toggle file=params >}}
+foo = 'bar'
+{{< /code-toggle >}}
+
+### Recursive parsing
+
+Hugo parses the `config` directory recursively, allowing you to organize the files into subdirectories. For example:
+
+```text
+my-project/
+└── config/
+ └── _default/
+ ├── navigation/
+ │ ├── menus.de.toml
+ │ └── menus.en.toml
+ └── hugo.toml
+```
+
+### Example
+
+```text
+my-project/
+└── config/
+ ├── _default/
+ │ ├── hugo.toml
+ │ ├── menus.en.toml
+ │ ├── menus.de.toml
+ │ └── params.toml
+ ├── production/
+ │ ├── hugo.toml
+ │ └── params.toml
+ └── staging/
+ ├── hugo.toml
+ └── params.toml
+```
+
+Considering the structure above, when running `hugo --environment staging`, Hugo will use every setting from `config/_default` and merge `staging`'s on top of those.
+
+Let's take an example to understand this better. Let's say you are using Google Analytics for your website. This requires you to specify a [Google tag ID] in your site configuration:
+
+[Google tag ID]: https://support.google.com/tagmanager/answer/12326985?hl=en
+
+{{< code-toggle file=hugo copy=false >}}
+[services.googleAnalytics]
+ID = 'G-XXXXXXXXX'
+{{< /code-toggle >}}
+
+Now consider the following scenario:
+
+1. You don't want to load the analytics code when running `hugo server`.
- 2. `config/production/hugo.toml`
++1. You want to use different Google tag IDs for your production and staging environments. For example:
+
+ - `G-PPPPPPPPP` for production
+ - `G-SSSSSSSSS` for staging
+
+To satisfy these requirements, configure your site as follows:
+
+1. `config/_default/hugo.toml`
+
+ Exclude the `services.googleAnalytics` section. This will prevent loading of the analytics code when you run `hugo server`.
+
+ By default, Hugo sets its `environment` to `development` when running `hugo server`. In the absence of a `config/development` directory, Hugo uses the `config/_default` directory.
+
- 3. `config/staging/hugo.toml`
++1. `config/production/hugo.toml`
+
+ Include this section only:
+
+ {{< code-toggle file=hugo copy=false >}}
+ [services.googleAnalytics]
+ ID = 'G-PPPPPPPPP'
+ {{< /code-toggle >}}
+
+ You do not need to include other parameters in this file. Include only those parameters that are specific to your production environment. Hugo will merge these parameters with the default configuration.
+
+ By default, Hugo sets its `environment` to `production` when running `hugo`. The analytics code will use the `G-PPPPPPPPP` tag ID.
+
- (`string slice`) Disable rendering of the specified page [kinds], any of `404`, `home`, `page`, `robotstxt`, `rss`, `section`, `sitemap`, `taxonomy`, or `term`.
-
- [kinds]: /getting-started/glossary/#page-kind
++1. `config/staging/hugo.toml`
+
+ Include this section only:
+
+ {{< code-toggle file=hugo copy=false >}}
+ [services.googleAnalytics]
+ ID = 'G-SSSSSSSSS'
+ {{< /code-toggle >}}
+
+ You do not need to include other parameters in this file. Include only those parameters that are specific to your staging environment. Hugo will merge these parameters with the default configuration.
+
+ To build your staging site, run `hugo --environment staging`. The analytics code will use the `G-SSSSSSSSS` tag ID.
+
+## Merge configuration from themes
+
+The configuration value for `_merge` can be one of:
+
+none
+: No merge.
+
+shallow
+: Only add values for new keys.
+
+deep
+: Add values for new keys, merge existing.
+
+Note that you don't need to be so verbose as in the default setup below; a `_merge` value higher up will be inherited if not set.
+
+{{< code-toggle file=hugo dataKey="config_helpers.mergeStrategy" skipHeader=true />}}
+
+## All configuration settings
+
+###### archetypeDir
+
+(`string`) The directory where Hugo finds archetype files (content templates). Default is `archetypes`. {{% module-mounts-note %}}
+
+###### assetDir
+
+(`string`) The directory where Hugo finds asset files used in [Hugo Pipes](/hugo-pipes/). Default is `assets`. {{% module-mounts-note %}}
+
+###### baseURL
+
+(`string`) The absolute URL (protocol, host, path, and trailing slash) of your published site (e.g., `https://www.example.org/docs/`).
+
+###### build
+
+See [Configure Build](#configure-build).
+
+###### buildDrafts
+
+(`bool`) Include drafts when building. Default is `false`.
+
+###### buildExpired
+
+(`bool`) Include content already expired. Default is `false`.
+
+###### buildFuture
+
+(`bool`) Include content with a future publication date. Default is `false`.
+
+###### caches
+
+See [Configure File Caches](#configure-file-caches).
+
+###### canonifyURLs
+
+(`bool`) See [details](/content-management/urls/#canonical-urls) before enabling this feature. Default is `false`.
+
+###### capitalizeListTitles
+
+{{< new-in 0.123.3 >}}
+
+(`bool`) Whether to capitalize automatic list titles. Applicable to section, taxonomy, and term pages. Default is `true`. You can change the capitalization style in your site configuration to one of `ap`, `chicago`, `go`, `firstupper`, or `none`. See [details].
+
+[details]: /getting-started/configuration/#configure-title-case
+
+###### cascade
+
+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 %}}
+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 %}}
+
+###### cleanDestinationDir
+
+(`bool`) When building, removes files from destination not found in static directories. Default is `false`.
+
+###### contentDir
+
+(`string`) The directory from where Hugo reads content files. Default is `content`. {{% module-mounts-note %}}
+
+###### copyright
+
+(`string`) Copyright notice for your site, typically displayed in the footer.
+
+###### dataDir
+
+(`string`) The directory from where Hugo reads data files. Default is `data`. {{% module-mounts-note %}}
+
++###### defaultOutputFormat
++(`string`) The default output format for the site. If unspecified, the first available format in the defined order (by weight, then alphabetically) will be used.
++
+###### defaultContentLanguage
+
+(`string`) Content without language indicator will default to this language. Default is `en`.
+
+###### defaultContentLanguageInSubdir
+
+(`bool`) Render the default content language in subdir, e.g. `content/en/`. The site root `/` will then redirect to `/en/`. Default is `false`.
+
+###### disableAliases
+
+(`bool`) Will disable generation of alias redirects. Note that even if `disableAliases` is set, the aliases themselves are preserved on the page. The motivation with this is to be able to generate 301 redirects in an `.htaccess`, a Netlify `_redirects` file or similar using a custom output format. Default is `false`.
+
+###### disableDefaultLanguageRedirect
+
+{{< new-in 0.140.0 >}}
+
+(`bool`) Disables generation of redirect to the default language when DefaultContentLanguageInSubdir is `true`. Default is `false`.
+
+###### disableHugoGeneratorInject
+
+(`bool`) Hugo will, by default, inject a generator meta tag in the HTML head on the _home page only_. You can turn it off, but we would really appreciate if you don't, as this is a good way to watch Hugo's popularity on the rise. Default is `false`.
+
+###### disableKinds
+
-
++(`string slice`) Disable rendering of the specified page [kinds](g), any of `404`, `home`, `page`, `robotstxt`, `rss`, `section`, `sitemap`, `taxonomy`, or `term`.
+
+###### disableLanguages
+
+See [disable a language](/content-management/multilingual/#disable-a-language).
+
+###### disableLiveReload
+
+(`bool`) Disable automatic live reloading of browser window. Default is `false`.
+
+###### disablePathToLower
+
+(`bool`) Do not convert the url/path to lowercase. Default is `false`.
+
+###### enableEmoji
+
+(`bool`) Enable Emoji emoticons support for page content; see the [emoji shortcode quick reference guide](/quick-reference/emojis/). Default is `false`.
+
+###### enableGitInfo
+
+(`bool`) Enable `.GitInfo` object for each page (if the Hugo site is versioned by Git). This will then update the `Lastmod` parameter for each page using the last git commit date for that content file. Default is `false`.
+
+###### enableMissingTranslationPlaceholders
+
+(`bool`) Show a placeholder instead of the default value or an empty string if a translation is missing. Default is `false`.
+
+###### enableRobotsTXT
+
+(`bool`) Enable generation of `robots.txt` file. Default is `false`.
+
+###### environment
+
+(`string`) Build environment. Default is `production` when running `hugo` and `development` when running `hugo server`. See [Configuration directory](https://gohugo.io/getting-started/configuration/#configuration-directory).
+###### frontmatter
+
+See [Front matter Configuration](#configure-front-matter).
+
+###### hasCJKLanguage
+
+(`bool`) If true, auto-detect Chinese/Japanese/Korean Languages in the content. This will make `.Summary` and `.WordCount` behave correctly for CJK languages. Default is `false`.
+
+###### ignoreCache
+
+(`bool`) Ignore the cache directory. Default is `false`.
+
+###### ignoreLogs
+(`string slice`) A slice of message identifiers corresponding to warnings and errors you wish to suppress. See [`erroridf`] and [`warnidf`].
+
+[`erroridf`]: /functions/fmt/erroridf/
+[`warnidf`]: /functions/fmt/warnidf/
+
+###### ignoreVendorPaths
+
+(`string`) Ignore vendored modules that match the given [Glob] pattern within the `_vendor` directory.
+
+[Glob]: https://github.com/gobwas/glob?tab=readme-ov-file#example]
+
+###### imaging
+
+See [image processing configuration](/content-management/image-processing/#imaging-configuration).
+
+###### languageCode
+
+(`string`) A language tag as defined by [RFC 5646](https://datatracker.ietf.org/doc/html/rfc5646). This value is used to populate:
+
+- The `<language>` element in the embedded [RSS template]({{% eturl rss %}})
+- The `lang` attribute of the `<html>` element in the embedded [alias template]({{% eturl alias %}})
+- The `og:locale` `meta` element in the embedded [Open Graph template]({{% eturl opengraph %}})
+
+When present in the root of the configuration, this value is ignored if one or more language keys exists. Please specify this value independently for each language key.
+
+###### languages
+
+See [Configure Languages](/content-management/multilingual/#configure-languages).
+
+###### layoutDir
+
+(`string`) The directory that contains templates. Default is `layouts`.
+
+###### markup
+
+See [Configure Markup](/getting-started/configuration-markup).
+
+###### mediaTypes
+
+See [Configure Media Types](/templates/output-formats/#media-types).
+
+###### menus
+
+See [Menus](/content-management/menus/#define-in-site-configuration).
+
+###### minify
+
+See [Configure Minify](#configure-minify).
+
+###### module
+
+Module configuration see [module configuration](/hugo-modules/configuration/).
+
+###### newContentEditor
+
+(`string`) The editor to use when creating new content.
+
+###### noBuildLock
+
+(`bool`) Don't create `.hugo_build.lock` file. Default is `false`.
+
+###### noChmod
+
+(`bool`) Don't sync permission mode of files. Default is `false`.
+
+###### noTimes
+
+(`bool`) Don't sync modification time of files. Default is `false`.
+
+###### outputFormats
+
+See [custom output formats].
+
+###### page
+
+See [configure page](#configure-page).
+
+###### pagination
+
+See [configure pagination](/templates/pagination/#configuration).
+
+###### panicOnWarning
+
+(`bool`) Whether to panic on first WARNING. Default is `false`.
+
+###### permalinks
+
+See [Content Management](/content-management/urls/#permalinks).
+
+###### pluralizeListTitles
+
+(`bool`) Whether to pluralize automatic list titles. Applicable to section pages. Default is `true`.
+
+###### printI18nWarnings
+
+(`bool`) Whether to log WARNINGs for each missing translation. Default is `false`.
+
+###### printPathWarnings
+
+(`bool`) Whether to log WARNINGs when Hugo publishes two or more files to the same path. Default is `false`.
+
+###### printUnusedTemplates
+
+(`bool`) Whether to log WARNINGs for each unused template. Default is `false`.
+
+###### publishDir
+
+(`string`) The directory where Hugo will write the final static site (the HTML files etc.). Default is `public`.
+
+###### refLinksErrorLevel
+
+(`string`) When using `ref` or `relref` to resolve page links and a link cannot be resolved, it will be logged with this log level. Valid values are `ERROR` (default) or `WARNING`. Any `ERROR` will fail the build (`exit -1`). Default is `ERROR`.
+
+###### refLinksNotFoundURL
+
+(`string`) URL to be used as a placeholder when a page reference cannot be found in `ref` or `relref`. Is used as-is.
+
+###### related
+
+See [Related Content](/content-management/related/#configure-related-content).
+
+###### relativeURLs
+
+(`bool`) See [details](/content-management/urls/#relative-urls) before enabling this feature. Default is `false`.
+
+###### removePathAccents
+
+(`bool`) Removes [non-spacing marks](https://www.compart.com/en/unicode/category/Mn) from [composite characters](https://en.wikipedia.org/wiki/Precomposed_character) in content paths. Default is `false`.
+
+```text
+content/post/hügó.md → https://example.org/post/hugo/
+```
+
+###### renderSegments
+
+{{< new-in 0.124.0 >}}
+
+(`string slice`) A list of segments to render. If not set, everything will be rendered. This is more commonly set in a CLI flag, e.g. `hugo --renderSegments segment1,segment2`. The segment names must match the names in the [segments](#configure-segments) configuration.
+
+###### sectionPagesMenu
+
+See [Menus](/content-management/menus/#define-automatically).
+
+###### security
+
+See [Security Policy](/about/security/#security-policy).
+
+###### segments
+
+See [Segments](#configure-segments).
+
+###### sitemap
+
+Default [sitemap configuration](/templates/sitemap/#configuration).
+
+###### summaryLength
+
+(`int`) Applicable to [automatic summaries], the minimum number of words to render when calling the [`Summary`] method on a `Page` object. In this case the `Summary` method returns the content, truncated to the paragraph closest to the `summaryLength`.
+
+[automatic summaries]: /content-management/summaries/#automatic-summary
+[`Summary`]: /methods/page/summary/
+
+###### taxonomies
+
+See [Configure Taxonomies](/content-management/taxonomies#configure-taxonomies).
+
+###### templateMetrics
+
+(`bool`) Whether to print template execution metrics to the console. Default is `false`. See [Template metrics](/troubleshooting/performance/#template-metrics).
+
+###### templateMetricsHints
+
+(`bool`) Whether to print template execution improvement hints to the console. Applicable when `templateMetrics` is `true`. Default is `false`. See [Template metrics](/troubleshooting/performance/#template-metrics).
+
+###### theme
+
+See [module configuration](/hugo-modules/configuration/#module-configuration-imports) for how to import a theme.
+
+###### themesDir
+
+(`string`) The directory where Hugo reads the themes from. Default is `themes`.
+
+###### timeout
+
+(`string`) Timeout for generating page contents, specified as a [duration](https://pkg.go.dev/time#Duration) or in seconds. *Note:* this is used to bail out of recursive content generation. You might need to raise this limit if your pages are slow to generate (e.g., because they require large image processing or depend on remote contents). Default is `30s`.
+
+###### timeZone
+
+(`string`) The time zone used to parse dates without time zone offsets, including front matter date fields and values passed to the [`time.AsTime`] and [`time.Format`] template functions. The list of valid values may be system dependent, but should include `UTC`, `Local`, and any location in the [IANA Time Zone Database]. For example, `America/Los_Angeles` and `Europe/Oslo` are valid time zones.
+
+[`time.AsTime`]: /functions/time/astime/
+[`time.Format`]: /functions/time/format/
+[IANA Time Zone Database]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+
+###### title
+
+(`string`) Site title.
+
+###### titleCaseStyle
+
+(`string`) Default is `ap`. See [Configure Title Case](#configure-title-case).
+
+###### uglyURLs
+
+(`bool` or `map`) Whether to generate uglyURLs. Default is `false`. See [details](/content-management/urls/#appearance).
+
+###### watch
+
+(`bool`) Watch filesystem for changes and recreate as needed. Default is `false`.
+
+{{% 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
+hugo config | grep emoji
+```
+
+which shows output like
+
+```txt
+enableemoji: true
+```
+{{% /note %}}
+
+## Configure page
+
+{{< new-in 0.133.0 >}}
+
+These methods on a `Page` object navigate to the next or previous page within a page collection, relative to the current page:
+
+- [Next](/methods/page/next/)
+- [NextInSection](/methods/page/nextinsection/)
+- [Prev](/methods/page/prev/)
+- [PrevInSection](/methods/page/previnsection/)
+
+Hugo determines the _next_ and _previous_ page by sorting a page collection according to this sorting hierarchy:
+
+Field|Precedence|Sort direction
+:--|:--|:--
+[`weight`]|1|descending
+[`date`]|2|descending
+[`linkTitle`]|3|descending
+[`path`]|4|descending
+
+[`date`]: /methods/page/date/
+[`weight`]: /methods/page/weight/
+[`linkTitle`]: /methods/page/linktitle/
+[`path`]: /methods/page/path/
+
+The sort direction in the table above corresponds to these default site configuration values:
+
+{{< code-toggle config=page />}}
+
+To sort all fields in ascending order:
+
+{{< code-toggle file=hugo >}}
+[page]
+ nextPrevInSectionSortOrder = 'asc'
+ nextPrevSortOrder = 'asc'
+{{< /code-toggle >}}
+
+{{% 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 %}}
+
+## Configure build
+
+See [Configure Build](/getting-started/configuration-build/).
+
-
+## Configure server
+
+This is only relevant when running `hugo server`, and it allows to set HTTP headers during development, which allows you to test out your Content Security Policy and similar. The configuration format matches [Netlify's](https://docs.netlify.com/routing/headers/#syntax-for-the-netlify-configuration-file) with slightly more powerful [Glob matching](https://github.com/gobwas/glob):
+
+{{< code-toggle file=hugo >}}
+[server]
+[[server.headers]]
+for = "/**"
+
+[server.headers.values]
+X-Frame-Options = "DENY"
+X-XSS-Protection = "1; mode=block"
+X-Content-Type-Options = "nosniff"
+Referrer-Policy = "strict-origin-when-cross-origin"
+Content-Security-Policy = "script-src localhost:1313"
+{{< /code-toggle >}}
+
+Since this is "development only", it may make sense to put it below the `development` environment:
+
+{{< code-toggle file=config/development/server >}}
+[[headers]]
+for = "/**"
+
+[headers.values]
+X-Frame-Options = "DENY"
+X-XSS-Protection = "1; mode=block"
+X-Content-Type-Options = "nosniff"
+Referrer-Policy = "strict-origin-when-cross-origin"
+Content-Security-Policy = "script-src localhost:1313"
+{{< /code-toggle >}}
+
+You can also specify simple redirects rules for the server. The syntax is again similar to Netlify's.
+
+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 >}}
+[[redirects]]
+from = "/myspa/**"
+to = "/myspa/"
+status = 200
+force = false
+{{< /code-toggle >}}
+
+Setting `force=true` will make a redirect even if there is existing content in the path. Note that before Hugo 0.76 `force` was the default behavior, but this is inline with how Netlify does it.
+
+## 404 server error page {#_404-server-error-page}
+
+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 >}}
+[[redirects]]
+from = "/**"
+to = "/404.html"
+status = 404
+{{< /code-toggle >}}
+
+With a multilingual site, define the redirect for the default content language last:
+
+{{< code-toggle file=config/development/server >}}
+defaultContentLanguage = 'en'
+defaultContentLanguageInSubdir = false
+[[redirects]]
+from = '/fr/**'
+to = '/fr/404.html'
+status = 404
+
+[[redirects]] # Default language must be last.
+from = '/**'
+to = '/404.html'
+status = 404
+{{< /code-toggle >}}
+
+If you are serving the default content language from a subdirectory:
+
+{{< code-toggle file=config/development/server >}}
+defaultContentLanguage = 'en'
+defaultContentLanguageInSubdir = true
+[[redirects]]
+from = '/fr/**'
+to = '/fr/404.html'
+status = 404
+
+[[redirects]] # Default language must be last.
+from = '/**'
+to = '/en/404.html'
+status = 404
+{{< /code-toggle >}}
+
- : (`string`) Overrides the default [environment], typically one of `development`, `staging`, or `production`.
-
- [environment]: /getting-started/glossary/#environment
+## Configure title case
+
+By default, Hugo follows the capitalization rules published in the [Associated Press Stylebook] when creating automatic section titles, and when transforming strings with the [`strings.Title`] function.
+
+Change this behavior by setting `titleCaseStyle` in your site configuration to any of the values below:
+
+ap
+: Use the capitalization rules published in the [Associated Press Stylebook].
+
+chicago
+: Use the capitalization rules published in the [Chicago Manual of Style].
+
+go
+: Capitalize the first letter of every word.
+
+firstupper
+: Capitalize the first letter of the first word.
+
+none
+: Disable transformation of automatic section titles, and disable the transformation performed by the `strings.Title` function. This is useful if you would prefer to manually capitalize section titles as needed, and to bypass opinionated theme usage of the `strings.Title` function.
+
+[`strings.Title`]: /functions/strings/title/
+[Associated Press Stylebook]: https://www.apstylebook.com/
+[Chicago Manual of Style]: https://www.chicagomanualofstyle.org/home.html
+[site configuration]: /getting-started/configuration/#configure-title-case
+
+## Configuration environment variables
+
+DART_SASS_BINARY
+: (`string`) The absolute path to the Dart Sass executable. By default, Hugo searches for the executable in each of the paths in the `PATH` environment variable.
+
+HUGO_ENVIRONMENT
-
++: (`string`) Overrides the default [environment](g), typically one of `development`, `staging`, or `production`.
+
+HUGO_FILE_LOG_FORMAT
+: (`string`) A format string for the file path, line number, and column number displayed when reporting errors, or when calling the `Position` method from a shortcode or Markdown render hook. Valid tokens are `:file`, `:line`, and `:col`. Default is `:file::line::col`.
+
+{{< new-in 0.123.0 >}}
+
+HUGO_MEMORYLIMIT
+: (`int`) The maximum amount of system memory, in gigabytes, that Hugo can use while rendering your site. Default is 25% of total system memory.
+
+HUGO_NUMWORKERMULTIPLIER
+: (`int`) The number of workers used in parallel processing. Default is the number of logical CPUs.
+
+## Configure with environment variables
+
+Configuration key-values can be defined through operating system environment variables.
+
+For example, the following command will effectively set a website's title on Unix-like systems:
+
+```txt
+$ 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 %}}
+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 %}}
+
+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 %}}
+This works, but we recommend you use the newer and more powerful [includeFiles and excludeFiles](/hugo-modules/configuration/#module-configuration-mounts) mount options.
+{{% /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.
+
+To ignore files ending with `.foo` or `.boo`:
+
+{{< code-toggle file=hugo >}}
+ignoreFiles = ['\.foo$', '\.boo$']
+{{< /code-toggle >}}
+
+To ignore a file using the absolute file path:
+
+{{< code-toggle file=hugo >}}
+ignoreFiles = ['^/home/user/project/content/test\.md$']
+{{< /code-toggle >}}
+
+## Configure front matter
+
+### Configure dates
+
+Dates are important in Hugo, and you can configure how Hugo assigns dates to your content pages. You do this by adding a `frontmatter` section to your `hugo.toml`.
+
+The default configuration is:
+
+{{< 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`:
+
+{{< code-toggle file=hugo >}}
+[frontmatter]
+date = ["myDate", ":default"]
+{{< /code-toggle >}}
+
+The `:default` is a shortcut to the default settings. The above will set `.Date` to the date value in `myDate` if present, if not we will look in `date`,`publishDate`, `lastmod` and pick the first valid date.
+
+In the list to the right, values starting with ":" are date handlers with a special meaning (see below). The others are just names of date parameters (case insensitive) in your front matter configuration. Also note that Hugo have some built-in aliases to the above: `lastmod` => `modified`, `publishDate` => `pubdate`, `published` and `expiryDate` => `unpublishdate`. With that, as an example, using `pubDate` as a date in front matter, will, by default, be assigned to `.PublishDate`.
+
+The special date handlers are:
+
+`:fileModTime`
+: Fetches the date from the content file's last modification timestamp.
+
+An example:
+
+{{< code-toggle file=hugo >}}
+[frontmatter]
+lastmod = ["lastmod", ":fileModTime", ":default"]
+{{< /code-toggle >}}
+
+The above will try first to extract the value for `.Lastmod` starting with the `lastmod` front matter parameter, then the content file's modification timestamp. The last, `:default` should not be needed here, but Hugo will finally look for a valid date in `:git`, `date` and then `publishDate`.
+
+`:filename`
+: Fetches the date from the content file's file name. For example, `2018-02-22-mypage.md` will extract the date `2018-02-22`. Also, if `slug` is not set, `mypage` will be used as the value for `.Slug`.
+
+An example:
+
+{{< code-toggle file=hugo >}}
+[frontmatter]
+date = [":filename", ":default"]
+{{< /code-toggle >}}
+
+The above will try first to extract the value for `.Date` from the file name, then it will look in front matter parameters `date`, `publishDate` and lastly `lastmod`.
+
+`:git`
+: This is the Git author date for the last revision of this content file. This will only be set if `--enableGitInfo` is set or `enableGitInfo = true` is set in site configuration.
+
+## Configure minify
+
+See the [tdewolff/minify] project page for details.
+
+[tdewolff/minify]: https://github.com/tdewolff/minify
+
+Default configuration:
+
+{{< 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 />}}
+
+You can override any of these cache settings in your own `hugo.toml`.
+
+### The keywords explained
+
+cacheDir
+: (`string`) See [Configure cacheDir](#configure-cachedir).
+
+project
+: (`string`) The base directory name of the current Hugo project. This means that, in its default setting, every project will have separated file caches, which means that when you do `hugo --gc` you will not touch files related to other Hugo projects running on the same PC.
+
+resourceDir
+: (`string`) This is the value of the `resourceDir` configuration option.
+
+maxAge
+: (`string`) This is the duration before a cache entry will be evicted, -1 means forever and 0 effectively turns that particular cache off. Uses Go's `time.Duration`, so valid values are `"10s"` (10 seconds), `"10m"` (10 minutes) and `"10h"` (10 hours).
+
+dir
+: (`string`) The absolute path to where the files for this cache will be stored. Allowed starting placeholders are `:cacheDir` and `:resourceDir` (see above).
+
+## Configure cacheDir
+
+This is the directory where Hugo by default will store its file caches. See [Configure File Caches](#configure-file-caches).
+
+This can be set using the `cacheDir` config option or via the OS environment variable `HUGO_CACHEDIR`.
+
+If this is not set, Hugo will use, in order of preference:
+
+1. If running on Netlify: `/opt/build/cache/hugo_cache/`. This means that if you run your builds on Netlify, all caches configured with `:cacheDir` will be saved and restored on the next build. For other CI vendors, please read their documentation. For an CircleCI example, see [this configuration](https://github.com/bep/hugo-sass-test/blob/6c3960a8f4b90e8938228688bc49bdcdd6b2d99e/.circleci/config.yml).
+1. In a `hugo_cache` directory below the OS user cache directory as defined by Go's [os.UserCacheDir](https://pkg.go.dev/os#UserCacheDir). On Unix systems, this is `$XDG_CACHE_HOME` as specified by [basedir-spec-latest](https://specifications.freedesktop.org/basedir-spec/basedir-spec-latest.html) if non-empty, else `$HOME/.cache`. On MacOS, this is `$HOME/Library/Caches`. On Windows, this is`%LocalAppData%`. On Plan 9, this is `$home/lib/cache`. {{< new-in 0.116.0 >}}
+1. In a `hugo_cache_$USER` directory below the OS temp dir.
+
+If you want to know the current value of `cacheDir`, you can run `hugo config`, e.g: `hugo config | grep cachedir`.
+
+[`.Site.Params`]: /method/site/params/
+[directory structure]: /getting-started/directory-structure/
+[lookup order]: /templates/lookup-order/
+[custom output formats]: /templates/output-formats/
+[templates]: /templates/
+[static-files]: /content-management/static-files/
+
- : The [kind] of the page.
+## Configure HTTP cache
+
+{{< new-in 0.127.0 >}}
+
+Note that this configuration is currently only relevant when using the [resources.GetRemote] function.
+
+The caching in Hugo is layered:
+
+```goat {.w-40}
+ .-----------.
+| dynacache |
+ '-----+-----'
+ |
+ v
+ .----------.
+| HTTP cache |
+ '-----+----'
+ |
+ v
+ .----------.
+| file cache |
+ '-----+----'
+```
+
+Dynacache
+: A in memory LRU cache that gets evicted on changes, [Cache Buster](/getting-started/configuration-build/#configure-cache-busters) matches and in low memory situations.
+
+HTTP Cache
+: Enables HTTP cache behavior (RFC 9111) for remote resources. This works best for resources with properly set up HTTP cache headers. The HTTP cache uses the [file cache] to store and serve cached resources.
+
+File Cache
+: See [file cache].
+
+The default HTTP cache disables everything:
+
+{{< code-toggle config=HTTPCache />}}
+
+caching
+: Enabled RFC 9111 cache behavior _for_ a configured set of resources. Stale resources will be refreshed from the [file cache] even if their configured TTL isn't reached.
+
+polling
+: Enables polling _for_ a set of resources. Note that you can enable polling for resources even if HTTP caching is disabled. This setting is only used when in watch mode (e.g. `hugo server`). When a changed resource is detected, that change triggers a rebuild of pages using that resource.
+
+[resources.GetRemote]: /functions/resources/getremote/
+[file cache]: #configure-file-caches
+
+## Configure segments
+
+{{< new-in 0.124.0 >}}
+
+{{% 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 %}}
+
+* 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.
+* Each filter in a section (`exclude` or `include`) is ORed together, each matcher in a filter is ANDed together.
+
+The fields that can be used in the filters are:
+
+path
+: The logical page [path].
+
+lang
+: The [page language].
+
+kind
- : The [output format] of the page.
++: The [kind](g) of the page.
+
+output
- [kind]: /getting-started/glossary/#page-kind
- [output format]: /getting-started/glossary/#output-format
- [type]: /getting-started/glossary/#content-type
++: The [output format](g) of the page.
+
+It is recommended to put coarse grained filters (e.g. for language and output format) in the excludes section, e.g.:
+
+{{< code-toggle file=hugo >}}
+[segments.segment1]
+ [[segments.segment1.excludes]]
+ lang = "n*"
+ [[segments.segment1.excludes]]
+ lang = "en"
+ output = "rss"
+ [[segments.segment1.includes]]
+ kind = "{home,term,taxonomy}"
+ [[segments.segment1.includes]]
+ path = "{/docs,/docs/**}"
+{{< /code-toggle >}}
+
+With the above you can render only the pages in `segment1` by configuring the [renderSegments](#rendersegments) or setting the `--renderSegments` flag:
+
+```bash
+hugo --renderSegments segment1
+```
+
+Multiple segments can be configured, and the `--renderSegments` flag can take a comma separated list of segments.
+
+Some use cases for this feature:
+
+* Splitting builds of big sites.
+* Enable faster builds during development by only rendering a subset of the site.
+* Partial rebuilds, e.g. render the home page and the "news section" every hour, render the entire site once a week.
+* Render only e.g. the JSON output format to push to e.g. a search index.
+
+[path]: /methods/page/path/
+[page language]: /methods/page/language/
--- /dev/null
- weight: 30
- weight: 30
+---
+title: Directory structure
+description: Each Hugo project is a directory, with subdirectories that contribute to the content, structure, behavior, and presentation of your site.
+categories: [getting started,fundamentals]
+keywords: [source, organization, directories]
+menu:
+ docs:
+ parent: getting-started
- The layouts directory contains templates to transform content, data, and resources into a complete website. See [details](/templates/).
++ weight: 40
++weight: 40
+toc: true
+aliases: [/overview/source-directory/]
+---
+
+## Site skeleton
+
+Hugo generates a project skeleton when you create a new site. For example, this command:
+
+```sh
+hugo new site my-site
+```
+
+Creates this directory structure:
+
+```txt
+my-site/
+├── archetypes/
+│ └── default.md
+├── assets/
+├── content/
+├── data/
+├── i18n/
+├── layouts/
+├── static/
+├── themes/
+└── hugo.toml <-- site configuration
+```
+
+Depending on requirements, you may wish to organize your site configuration into subdirectories:
+
+```txt
+my-site/
+├── archetypes/
+│ └── default.md
+├── assets/
+├── config/ <-- site configuration
+│ └── _default/
+│ └── hugo.toml
+├── content/
+├── data/
+├── i18n/
+├── layouts/
+├── static/
+└── themes/
+```
+
+When you build your site, Hugo creates a `public` directory, and typically a `resources` directory as well:
+
+```txt
+my-site/
+├── archetypes/
+│ └── default.md
+├── assets/
+├── config/
+│ └── _default/
+│ └── hugo.toml
+├── content/
+├── data/
+├── i18n/
+├── layouts/
+├── public/ <-- created when you build your site
+├── resources/ <-- created when you build your site
+├── static/
+└── themes/
+```
+
+## Directories
+
+Each of the subdirectories contributes to the content, structure, behavior, or presentation of your site.
+
+###### archetypes
+
+The `archetypes` directory contains templates for new content. See [details](/content-management/archetypes/).
+
+###### assets
+
+The `assets` directory contains global resources typically passed through an asset pipeline. This includes resources such as images, CSS, Sass, JavaScript, and TypeScript. See [details](/hugo-pipes/introduction/).
+
+###### config
+
+The `config` directory contains your site configuration, possibly split into multiple subdirectories and files. For projects with minimal configuration or projects that do not need to behave differently in different environments, a single configuration file named `hugo.toml` in the root of the project is sufficient. See [details](/getting-started/configuration/#configuration-directory).
+
+###### content
+
+The `content` directory contains the markup files (typically Markdown) and page resources that comprise the content of your site. See [details](/content-management/organization/).
+
+###### data
+
+The `data` directory contains data files (JSON, TOML, YAML, or XML) that augment content, configuration, localization, and navigation. See [details](/content-management/data-sources/).
+
+###### i18n
+
+The `i18n` directory contains translation tables for multilingual sites. See [details](/content-management/multilingual/).
+
+###### layouts
+
- The `static` directory contains files that will be copied to the public directory when you build your site. For example: `favicon.ico`, `robots.txt`, and files that verify site ownership. Before the introduction of [page bundles](/getting-started/glossary/#page-bundle) and [asset pipelines](/hugo-pipes/introduction/), the `static` directory was also used for images, CSS, and JavaScript.
++The `layouts` directory contains templates to transform content, data, and resources into a complete website. See [details](/templates/).
+
+###### public
+
+The `public` directory contains the published website, generated when you run the `hugo` or `hugo server` commands. Hugo recreates this directory and its content as needed. See [details](/getting-started/usage/#build-your-site).
+
+###### resources
+
+The `resources` directory contains cached output from Hugo's asset pipelines, generated when you run the `hugo` or `hugo server` commands. By default this cache directory includes CSS and images. Hugo recreates this directory and its content as needed.
+
+###### static
+
- The `themes` directory contains one or more [themes](/getting-started/glossary/#theme), each in its own subdirectory.
++The `static` directory contains files that will be copied to the `public` directory when you build your site. For example: `favicon.ico`, `robots.txt`, and files that verify site ownership. Before the introduction of [page bundles](g) and [asset pipelines](/hugo-pipes/introduction/), the `static` directory was also used for images, CSS, and JavaScript.
+
+###### themes
+
- 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.
++The `themes` directory contains one or more [themes](g), each in its own subdirectory.
+
+## Union file system
+
+Hugo creates a union file system, allowing you to mount two or more directories to the same location. For example, let's say your home directory contains a Hugo project in one directory, and shared content in another:
+
+```text
+home/
+└── user/
+ ├── my-site/
+ │ ├── content/
+ │ │ ├── books/
+ │ │ │ ├── _index.md
+ │ │ │ ├── book-1.md
+ │ │ │ └── book-2.md
+ │ │ └── _index.md
+ │ ├── themes/
+ │ │ └── my-theme/
+ │ └── hugo.toml
+ └── shared-content/
+ └── films/
+ ├── _index.md
+ ├── film-1.md
+ └── film-2.md
+```
+
+You can include the shared content when you build your site using mounts. In your site configuration:
+
+{{< code-toggle file=hugo >}}
+[[module.mounts]]
+source = 'content'
+target = 'content'
+
+[[module.mounts]]
+source = '/home/user/shared-content'
+target = 'content'
+{{< /code-toggle >}}
+
+{{% 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 %}}
+
+After mounting, the union file system has this structure:
+
+```text
+home/
+└── user/
+ └── my-site/
+ ├── content/
+ │ ├── books/
+ │ │ ├── _index.md
+ │ │ ├── book-1.md
+ │ │ └── book-2.md
+ │ ├── films/
+ │ │ ├── _index.md
+ │ │ ├── film-1.md
+ │ │ └── film-2.md
+ │ └── _index.md
+ ├── themes/
+ │ └── my-theme/
+ └── hugo.toml
+```
+
+{{% 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 %}}
+
+You can mount directories to `archetypes`, `assets`, `content`, `data`, `i18n`, `layouts`, and `static`. See [details](/hugo-modules/configuration/#module-configuration-mounts).
+
+You can also mount directories from Git repositories using Hugo Modules. See [details](/hugo-modules/).
+
+## Theme skeleton
+
+Hugo generates a functional theme skeleton when you create a new theme. For example, this command:
+
+```text
+hugo new theme my-theme
+```
+
+Creates this directory structure (subdirectories not shown):
+
+```text
+my-theme/
+├── archetypes/
+├── assets/
+├── content/
+├── data/
+├── i18n/
+├── layouts/
+├── static/
+├── LICENSE
+├── README.md
+├── hugo.toml
+└── theme.toml
+```
+
+Using the union file system described above, Hugo mounts each of these directories to the corresponding location in the project. When two files have the same path, the file in the project directory takes precedence. This allows you, for example, to override a theme's template by placing a copy in the same location within the project directory.
+
+If you are simultaneously using components from two or more themes or modules, and there's a path collision, the first mount takes precedence.
--- /dev/null
- weight: 70
- weight: 70
+---
+title: External learning resources
+description: Use these third-party resources to learn Hugo.
+categories: [getting started]
+keywords: [books, tutorials, learning, usage]
+menu:
+ docs:
+ parent: getting-started
-
++ weight: 90
++weight: 90
+toc: true
+---
+
+## Books
+
+### Hugo In Action
+
+Hugo in Action is a step-by-step guide to using Hugo to create static websites. Working with a complete example website and source code samples, you'll learn how to build and host a low-maintenance, high-performance site that will wow your users and stay stable without relying on a third-party server.
+
+[{{< img src="hugo-in-action.png" alt="Book cover: Hugo in Action" filter="process" filterArgs="resize x350 webp">}}](https://www.manning.com/books/hugo-in-action/)
+
+Author: Atishay Jain\
+Publisher: [Manning Publications](https://www.manning.com/books/hugo-in-action/)\
+Publication date: March 2022\
+Length: 488 pages\
+ISBN: 9781617297007
+
-
+### Build Websites with Hugo
+
+In this book, you'll use Hugo to build a personal portfolio site that you can use to showcase your skills and thoughts to the world. You'll build the basic skeleton, develop a custom theme, and use content templates to generate new pages quickly. You'll use internal and external data sources to embed content into your site, and render some of your content in JSON and RSS. You'll add a blog section with posts and integrate Disqus with your site, and then make your site searchable.
+
+[{{< img src="build-websites-with-hugo.png" alt="Book cover: Build Websites with Hugo" filter="process" filterArgs="resize x350 webp">}}](https://pragprog.com/titles/bhhugo/build-websites-with-hugo/)
+
-
+Author: Brian P. Hogan\
+Publisher: [Pragmatic Bookshelf](https://pragprog.com/titles/bhhugo/build-websites-with-hugo/)\
+Publication date: May 2020\
+Length: 154 pages\
+ISBN: 9781680507263
+
+## Videos
+
+### Hugo Beginner Tutorial Series
+
+Welcome to this introduction to Hugo tutorial. The goal of this series is to take you from a lion cub with basic web design knowledge to creating your first Hugo website. In this series you’ll learn how to set up a Hugo site, the basics of usingHugo layouts, partials, and templating, set up a blog, and finally use data files. By the end of this series you’ll have the foundational knowledge to build your own Hugo sites.
+
+1. [Getting set up in Hugo](https://cloudcannon.com/tutorials/hugo-beginner-tutorial/)
+1. [Layouts in Hugo](https://cloudcannon.com/tutorials/hugo-beginner-tutorial/layouts-in-hugo/)
+1. [Hugo Partials](https://cloudcannon.com/tutorials/hugo-beginner-tutorial/hugo-partials/)
+1. [Hugo templating basics](https://cloudcannon.com/tutorials/hugo-beginner-tutorial/hugo-templating-basics/)
+1. [Blogging in Hugo](https://cloudcannon.com/tutorials/hugo-beginner-tutorial/blogging-in-hugo/)
+1. [Using Data in Hugo](https://cloudcannon.com/tutorials/hugo-beginner-tutorial/using-data-in-hugo/)
+
+Creator: Mike Neumegen\
+Affiliation: [CloudCannon](https://cloudcannon.com/)\
+Creation date: April 2022
+
+#### Hugo Static Site Generator
+
+This course covers the basics of using the Hugo static site generator. Work your way through the articles and we'll teach you everything you need to know to create a professional and scalable website or blog!
+
+1. [Introduction](https://www.giraffeacademy.com/static-site-generators/hugo/)
+1. [Windows Installation](https://www.giraffeacademy.com/static-site-generators/hugo/installing-hugo-on-windows/)
+1. [Mac Installation](https://www.giraffeacademy.com/static-site-generators/hugo/installing-hugo-on-mac/)
+1. [Creating A New Site](https://www.giraffeacademy.com/static-site-generators/hugo/hugo-directory-structure/)
+1. [Installing & Using Themes](https://www.giraffeacademy.com/static-site-generators/hugo/installing-using-themes/)
+1. [Content Organization](https://www.giraffeacademy.com/static-site-generators/hugo/content-organization/)
+1. [Front Matter](https://www.giraffeacademy.com/static-site-generators/hugo/front-matter/)
+1. [Archetypes](https://www.giraffeacademy.com/static-site-generators/hugo/archetypes/)
+1. [Shortcodes](https://www.giraffeacademy.com/static-site-generators/hugo/archetypes/)
+1. [Taxonomies](https://www.giraffeacademy.com/static-site-generators/hugo/taxonomies/)
+1. [Template Basics](https://www.giraffeacademy.com/static-site-generators/hugo/introduction-to-templates/)
+1. [List Page Templates](https://www.giraffeacademy.com/static-site-generators/hugo/list-page-templates/)
+1. [Single Page Templates](https://www.giraffeacademy.com/static-site-generators/hugo/single-page-templates/)
+1. [Home Page Templates](https://www.giraffeacademy.com/static-site-generators/hugo/home-page-templates/)
+1. [Section Templates](https://www.giraffeacademy.com/static-site-generators/hugo/section-templates/)
+1. [Block Templates](https://www.giraffeacademy.com/static-site-generators/hugo/block-templates/)
+1. [Variables](https://www.giraffeacademy.com/static-site-generators/hugo/variables/)
+1. [Functions](https://www.giraffeacademy.com/static-site-generators/hugo/functions/)
+1. [Conditionals](https://www.giraffeacademy.com/static-site-generators/hugo/conditionals/)
+1. [Data Templates](https://www.giraffeacademy.com/static-site-generators/hugo/data-templates/)
+1. [Partial Templates](https://www.giraffeacademy.com/static-site-generators/hugo/partial-templates/)
+1. [Shortcode Templates](https://www.giraffeacademy.com/static-site-generators/hugo/shortcode-templates/)
+1. [Building & Hosting](https://www.giraffeacademy.com/static-site-generators/hugo/building-&-hosting/)
+
+Creator: Mike Dane\
+Affiliation: [Giraffe Academy](https://www.giraffeacademy.com/)\
+Creation date: September 2017
--- /dev/null
--- /dev/null
++---
++title: Glossary of terms
++description: Terms commonly used throughout the documentation.
++categories: [getting started]
++keywords: [glossary]
++menu:
++ docs:
++ parent: getting-started
++ weight: 80
++weight: 80
++layout: single
++build:
++ render: always
++ list: always
++cascade:
++ build:
++ render: never
++ list: local
++---
++
++{{% glossary %}}
--- /dev/null
--- /dev/null
++---
++title: action
++---
++
++See [template action](g).
--- /dev/null
--- /dev/null
++---
++title: archetype
++---
++
++An archetype is a template for new content. See [details](/content-management/archetypes/).
--- /dev/null
--- /dev/null
++---
++title: argument
++---
++
++A [scalar](g), [array](g), [slice](g), [map](g), or [object](g) passed to a [function](g), [method](g), or [shortcode](g).
--- /dev/null
--- /dev/null
++---
++title: array
++---
++
++A numbered sequence of [elements](g). Unlike Go's [slice](g) data type, an array has a fixed length. Elements within an array can be [scalars](g), slices, [maps](g), pages, or other arrays. See the [Go documentation](https://go.dev/ref/spec#Array_types) for details.
--- /dev/null
--- /dev/null
++---
++title: bool
++---
++
++See [boolean](g).
--- /dev/null
--- /dev/null
++---
++title: boolean
++---
++
++A data type with two possible values, either `true` or `false`.
--- /dev/null
--- /dev/null
++---
++title: branch bundle
++---
++
++A directory that contains an `_index.md` file and zero or more [resources](g). 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` files are also branch bundles. This includes the home page. See [details](/content-management/page-bundles/).
--- /dev/null
--- /dev/null
++---
++title: build
++---
++
++To generate a static site that includes HTML files and assets such as images, CSS, and JavaScript. The build process includes rendering and resource transformations.
--- /dev/null
--- /dev/null
++---
++title: bundle
++---
++
++See [page bundle](g).
--- /dev/null
--- /dev/null
++---
++title: cache
++---
++
++A software component that stores data so that future requests for the same data are faster.
--- /dev/null
--- /dev/null
++---
++title: chain
++---
++
++Within a template, to connect one or more [identifiers](g) with a dot. An identifier can represent a method, object, or field. For example, `.Site.Params.author.name` or `.Date.UTC.Hour`.
--- /dev/null
--- /dev/null
++---
++title: CJK
++---
++
++A collective term for the Chinese, Japanese, and Korean languages. See [details](https://en.wikipedia.org/wiki/CJK_characters).
--- /dev/null
--- /dev/null
++---
++title: CLI
++---
++
++Command line interface.
--- /dev/null
--- /dev/null
++---
++title: collection
++---
++
++An [array](g), [slice](g), or [map](g).
--- /dev/null
--- /dev/null
++---
++title: content adapter
++---
++
++A template that dynamically creates pages when building a site. For example, use a content adapter to create pages from a remote data source such as JSON, TOML, YAML, or XML. See [details](/content-management/content-adapters/).
--- /dev/null
--- /dev/null
++---
++title: content format
++---
++
++A markup language for creating content. Typically Markdown, but may also be HTML, AsciiDoc, Org, Pandoc, or reStructuredText. See [details](/content-management/formats/).
--- /dev/null
--- /dev/null
++---
++title: content type
++---
++
++A classification of content inferred from the top-level directory name or the `type` set in [front matter](g). Pages in the root of the `content` directory, including the home page, are of type "page". Accessed via `.Page.Type` in [templates](g). See [details](/content-management/types/)
--- /dev/null
--- /dev/null
++---
++title: content view
++---
++
++A template called with the `.Page.Render` method. See [details](/templates/content-view/).
--- /dev/null
--- /dev/null
++---
++title: context
++---
++
++Represented by a dot "." within a [template action](g), context is the current location in a data structure. For example, while iterating over a [collection](g) of pages, the context within each iteration is the page's data structure. The context received by each template depends on template type and/or how it was called. See [details](/templates/introduction/#context).
--- /dev/null
--- /dev/null
++---
++title: default sort order
++---
++
++The default sort order for page collections. Hugo sorts by [weight](g), then by date (descending), then by link title, and then by file path.
--- /dev/null
--- /dev/null
++---
++title: element
++---
++
++A member of a slice or array.
--- /dev/null
--- /dev/null
++---
++title: environment
++---
++
++Typically one of `development`, `staging`, or `production`, each environment may exhibit different behavior depending on configuration and template logic. For example, in a production environment you might minify and fingerprint CSS, but that probably doesn't make sense in a development environment.
++
++When running the built-in development server with the `hugo server` command, the environment is set to `development`. When building your site with the `hugo` command, the environment is set to `production`. To override the environment value, use the `--environment` command line flag or the `HUGO_ENVIRONMENT` environment variable.
++
++To determine the current environment within a template, use the [`hugo.Environment`] function.
++
++[`hugo.Environment`]: /functions/hugo/environment/
--- /dev/null
--- /dev/null
++---
++title: field
++---
++
++A predefined key-value pair in front matter such as `date` or `title`. See also [parameter](g).
--- /dev/null
--- /dev/null
++---
++title: flag
++---
++
++An option passed to a command-line program, beginning with one or two hyphens. See [details](/commands/hugo/).
--- /dev/null
--- /dev/null
++---
++title: float
++alias: true
++---
++
++See [floating point](g).
--- /dev/null
--- /dev/null
++---
++title: floating point
++---
++
++A numeric data type with a fractional component. For example, `3.14159`.
--- /dev/null
--- /dev/null
++---
++title: fragment
++---
++
++The final segment of a URL, beginning with a hash (`#`) mark, that references an `id` attribute of an HTML element on the page.
--- /dev/null
--- /dev/null
++---
++title: front matter
++---
++
++Metadata at the beginning of each content page, separated from the content by format-specific delimiters. See [details](/content-management/front-matter/).
--- /dev/null
--- /dev/null
++---
++title: function
++---
++
++Used within a [template action](g), a function takes one or more [arguments](g) and returns a value. Unlike [methods](g), functions are not associated with an [object](g). See [details](/functions/).
--- /dev/null
--- /dev/null
++---
++title: global resource
++---
++
++A file within the `assets` directory, or within any directory [mounted](/hugo-modules/configuration/#module-configuration-mounts) to the `assets` directory. Capture one or more global resources using the [`resources.Get`], [`resources.GetMatch`], [`resources.Match`], or [`resources.ByType`] functions.
++
++[`resources.Get`]: /functions/resources/get/
++[`resources.GetMatch`]: /functions/resources/getmatch/
++[`resources.Match`]: /functions/resources/match/
++[`resources.ByType`]: /functions/resources/byType/
--- /dev/null
--- /dev/null
++---
++title: headless bundle
++---
++
++An unpublished leaf or branch bundle whose content and resources you can include in other pages. See [build options](/content-management/build-options/).
--- /dev/null
--- /dev/null
++---
++title: identifier
++---
++
++A string that represents a variable, method, object, or field. It must conform to Go's [language specification](https://go.dev/ref/spec#Identifiers), beginning with a letter or underscore, followed by zero or more letters, digits, or underscores.
--- /dev/null
--- /dev/null
++---
++title: int
++---
++
++See [integer](g).
--- /dev/null
--- /dev/null
++---
++title: integer
++---
++
++A numeric data type without a fractional component. For example, `42`.
--- /dev/null
--- /dev/null
++---
++title: internationalization
++---
++
++Software design and development efforts that enable [localization](g). See the [W3C definition](https://www.w3.org/International/questions/qa-i18n). Abbreviated i18n.
--- /dev/null
--- /dev/null
++---
++title: interpreted string literal
++---
++
++Interpreted string literals are character sequences between double quotes, as in "foo". Within the quotes, any character may appear except a newline and an unescaped double quote. The text between the quotes forms the value of the literal, with backslash escapes interpreted. See [details](https://go.dev/ref/spec#String_literals).
--- /dev/null
--- /dev/null
++---
++title: interval
++---
++
++An [interval](https://en.wikipedia.org/wiki/Interval_(mathematics)) is a range of numbers between two endpoints: closed, open, or half-open.
++
++- A _closed_ interval, denoted by brackets, includes its endpoints. For example, [0, 1] is the interval where `0 <= x <= 1`.
++
++- An _open_ interval, denoted by parentheses, excludes its endpoints. For example, (0, 1) is the interval where `0 < x < 1`.
++
++- A _half-open_ interval includes only one of its endpoints. For example, (0, 1] is the _left-open_ interval where `0 < x <= 1`, while [0, 1) is the _right-open_ interval where `0 <= x < 1`.
--- /dev/null
--- /dev/null
++---
++title: kind
++---
++
++See [page kind](g).
--- /dev/null
--- /dev/null
++---
++title: layout
++---
++
++See [template](g).
--- /dev/null
--- /dev/null
++---
++title: leaf bundle
++---
++
++A directory that contains an index.md file and zero or more [resources](g). Analogous to a physical leaf, a leaf bundle is at the end of a branch. It has no descendants. See [details](/content-management/page-bundles/).
--- /dev/null
--- /dev/null
++---
++title: lexer
++---
++
++A software component that identifies keywords, identifiers, operators, numbers, and other basic building blocks of a programming language within the input text.
--- /dev/null
--- /dev/null
++---
++title: list page
++---
++
++Any [page kind](g) that receives a page [collection](g) in [context](g). This includes the home page, [section pages](g), [taxonomy pages](g), and [term pages](g).
--- /dev/null
--- /dev/null
++---
++title: list template
++---
++
++Any template that renders a [list page](g). This includes [home](/templates/types/#home), [section](/templates/types/#section), [taxonomy](/templates/types/#taxonomy), and [term](/templates/types/#term) templates.
--- /dev/null
--- /dev/null
++---
++title: localization
++---
++
++Adaptation of a site to meet language and regional requirements. This includes translations, language-specific media, date and currency formats, etc. See [details](/content-management/multilingual/) and the [W3C definition](https://www.w3.org/International/questions/qa-i18n). Abbreviated l10n.
--- /dev/null
--- /dev/null
++---
++title: logical path
++---
++
++{{< new-in 0.123.0 >}}
++
++A page or page resource identifier derived from the file path, excluding its extension and language identifier. This value is neither a file path nor a URL. Starting with a file path relative to the `content` directory, Hugo determines the logical path by stripping the file extension and language identifier, converting to lower case, then replacing spaces with hyphens. See [examples](/methods/page/path/#examples).
--- /dev/null
--- /dev/null
++---
++title: map
++---
++
++An unordered group of elements, each indexed by a unique key. See the [Go documentation](https://go.dev/ref/spec#Map_types) for details.
--- /dev/null
--- /dev/null
++---
++title: Markdown attribute
++---
++
++A list of attributes, containing one or more key-value pairs, separated by spaces or commas, and wrapped by braces. Apply Markdown attributes to images and block-level elements including blockquotes, fenced code blocks, headings, horizontal rules, lists, paragraphs, and tables. See [details](/getting-started/configuration-markup/#goldmark).
--- /dev/null
--- /dev/null
++---
++title: marshal
++---
++
++To transform a data structure into a serialized object. For example, transforming a [map](g) into a JSON string. See [unmarshal](g).
--- /dev/null
--- /dev/null
++---
++title: method
++---
++
++Used within a [template action](g) and associated with an [object](g), a method takes zero or more [arguments](g) and either returns a value or performs an action. For example, `.IsHome` is a method on the `.Page` object which returns `true` if the current page is the home page. See also [function](g).
--- /dev/null
--- /dev/null
++---
++title: module
++---
++
++Like a [theme](g), a module is a packaged combination of [archetypes](g), assets, content, data, [templates](g), translation tables, static files, or configuration settings. A module may serve as the basis for a new site, or to augment an existing site. See [details](/hugo-modules/).
--- /dev/null
--- /dev/null
++---
++title: node
++---
++
++A class of [page kinds](g) including `home`, `section`, `taxonomy`, and `term`.
--- /dev/null
--- /dev/null
++---
++title: noop
++---
++
++An abbreviated form of "no operation", a _noop_ is a statement that does nothing.
--- /dev/null
--- /dev/null
++---
++title: object
++---
++
++A data structure with or without associated [methods](g).
--- /dev/null
--- /dev/null
++---
++title: ordered taxonomy
++---
++
++Created by invoking the [`Alphabetical`] or [`ByCount`] method on a [`Taxonomy`](g) object, which is a [map](g), an _ordered taxonomy_ is a [slice](g), where each element is an object that contains the [term](g) and a slice of its [weighted pages](g).
++
++[`Alphabetical`]: /methods/taxonomy/alphabetical/
++[`ByCount`]: /methods/taxonomy/bycount/
--- /dev/null
--- /dev/null
++---
++title: output format
++---
++
++Hugo generates one or more files per page when building a site. For example, when rendering home, [section](g), [taxonomy](g), and [term](g) pages, Hugo generates an HTML file and an RSS file. Both HTML and RSS are built-in _output formats_. Create multiple output formats, and control generation based on [page kind](g), or by enabling one or more output formats for one or more pages. See [details].
++
++[details]: /templates/output-formats/
--- /dev/null
--- /dev/null
++---
++title: page bundle
++---
++
++A directory that encapsulates both content and associated [resources](g). There are two types of page bundles: [leaf bundles](g) and [branch bundles](g). See [details](/content-management/page-bundles/).
--- /dev/null
--- /dev/null
++---
++title: page collection
++---
++
++A slice of `Page` objects.
--- /dev/null
--- /dev/null
++---
++title: page kind
++---
++
++A classification of pages, one of `home`, `page`, `section`, `taxonomy`, or `term`. See [details](/methods/page/kind/).
++
++Note that there are also `RSS`, `sitemap`, `robotsTXT`, and `404` page kinds, but these are only available during the rendering of each of these respective page's kind and therefore *not* available in any of the `Pages` collections.
--- /dev/null
--- /dev/null
++---
++title: page resource
++---
++
++A file within a [page bundle](g). Capture one or more page resources using any of the [`Resources`] methods on a `Page` object.
++
++[`Resources`]: /methods/page/resources/#methods
--- /dev/null
--- /dev/null
++---
++title: pager
++---
++
++Created during [pagination](g), a pager contains a subset of a list page and navigation links to other pagers.
--- /dev/null
--- /dev/null
++---
++title: paginate
++---
++
++To split a list page into two or more subsets.
--- /dev/null
--- /dev/null
++---
++title: pagination
++---
++
++The process of [paginating](g) a list page. See [details](/templates/pagination/).
--- /dev/null
--- /dev/null
++---
++title: paginator
++---
++
++A collection of [pagers](g).
--- /dev/null
--- /dev/null
++---
++title: parameter
++---
++
++Typically, a user-defined key-value pair at the site or page level, but may also refer to a configuration setting or an [argument](g). See also [field](g).
--- /dev/null
--- /dev/null
++---
++title: partial
++---
++
++A [template](g) called from any other template including [shortcodes](g), [render hooks](g), and other partials. A partial either renders something or returns something. A partial can also call itself, for example, to [walk](g) a data structure.
--- /dev/null
--- /dev/null
++---
++title: permalink
++---
++
++The absolute URL of a published resource or a rendered page, including scheme and host.
--- /dev/null
--- /dev/null
++---
++title: pipe
++---
++
++See [pipeline](g).
--- /dev/null
--- /dev/null
++---
++title: pipeline
++---
++
++Within a [template action](g), a pipeline is a possibly chained sequence of values, [function](g) calls, or [method](g) calls. Functions and methods in the pipeline may take multiple [arguments](g).
++
++A pipeline may be *chained* by separating a sequence of commands with pipeline characters "|". In a chained pipeline, the result of each command is passed as the last argument to the following command. The output of the final command in the pipeline is the value of the pipeline. See the [Go documentation](https://pkg.go.dev/text/template#hdr-Pipelines) for details.
--- /dev/null
--- /dev/null
++---
++title: publish
++---
++
++See [build](g).
--- /dev/null
--- /dev/null
++---
++title: raw string literal
++---
++
++Raw string literals are character sequences between backticks, as in \`bar\`. Within the backticks, any character may appear except a backtick. Backslashes have no special meaning and the string may contain newlines. Carriage return characters (`\r`) inside raw string literals are discarded from the raw string value. See [details](https://go.dev/ref/spec#String_literals).
--- /dev/null
--- /dev/null
++---
++title: regular page
++---
++
++Content with the "page" [page kind](g). See also [section page](g).
--- /dev/null
--- /dev/null
++---
++title: relative permalink
++---
++
++The host-relative URL of a published resource or a rendered page.
--- /dev/null
--- /dev/null
++---
++title: remote resource
++---
++
++A file on a remote server, accessible via HTTP or HTTPS with the [`resources.GetRemote`](/functions/resources/getremote) function.
--- /dev/null
--- /dev/null
++---
++title: render hook
++---
++
++A [template](g) that overrides standard Markdown rendering. See [details](/render-hooks).
--- /dev/null
--- /dev/null
++---
++title: resource type
++---
++
++The main type of a resource's [media type]. Content files such as Markdown, HTML, AsciiDoc, Pandoc, reStructuredText, and Emacs Org Mode have resource type `page`. Other resource types include `image`, `video`, etc. Retrieve the resource type using the [`ResourceType`] method on a `Resource` object.
++
++[media type]: /methods/resource/mediatype/
++[`ResourceType`]: /methods/resource/resourcetype/
--- /dev/null
--- /dev/null
++---
++title: resource
++---
++
++Any file consumed by the build process to augment or generate content, structure, behavior, or presentation. For example: images, videos, content snippets, CSS, Sass, JavaScript, and data.
++
++Hugo supports three types of resources: [global resources](g), [page resources](g), and [remote resources](g).
--- /dev/null
--- /dev/null
++---
++title: scalar
++---
++
++A _scalar_ is a single value, one of [string](g), [integer](g), [floating point](g), or [boolean](g).
--- /dev/null
--- /dev/null
++---
++title: scratch pad
++---
++
++Conceptually, a [map](g) with [methods](g) to set, get, update, and delete values. Attach the data structure to a `Page` or `Site` object using the [`Store`] method, or create a locally scoped scratch pad using the [`newScratch`] function.
++
++[`Store`]: /methods/page/store/
++[`newScratch`]: /functions/collections/newscratch/
--- /dev/null
--- /dev/null
++---
++title: section page
++---
++
++Content with the "section" [page kind](g). Typically a listing of [regular pages](g) and/or other section pages within the current [section](g).
--- /dev/null
--- /dev/null
++---
++title: section
++---
++
++A section is a top-level content directory, or any content directory with an `_index.md` file. A content directory with an `_index.md` file is also known as a [branch bundle](g). Section templates receive one or more page [collections](g) in [context](g). See [details](/content-management/sections/).
--- /dev/null
--- /dev/null
++---
++title: shortcode
++---
++
++A [template](g) called from within Markdown, taking zero or more [arguments](g). See [details](/content-management/shortcodes/).
--- /dev/null
--- /dev/null
++---
++title: slice
++---
++
++A numbered sequence of elements. Unlike Go's [array](g) data type, slices are dynamically sized. [Elements](g) within a slice can be [scalars](g), [arrays](g), [maps](g), pages, or other slices. See the [Go documentation](https://go.dev/ref/spec#Slice_types) for details.
--- /dev/null
--- /dev/null
++---
++title: string
++---
++
++A sequence of bytes. For example, `"What is 6 times 7?"`.
--- /dev/null
--- /dev/null
++---
++title: taxonomic weight
++---
++
++Defined in front matter and unique to each taxonomy, this [weight](g) determines the sort order of page collections contained within a [`Taxonomy`](g) object. See [details](/content-management/taxonomies/#order-taxonomies).
--- /dev/null
--- /dev/null
++---
++title: taxonomy object
++---
++
++A [map](g) of [terms](g) and the [weighted pages](g) associated with each term.
--- /dev/null
--- /dev/null
++---
++title: taxonomy page
++---
++
++Content with the "taxonomy" [page kind](g). Typically a listing of [terms](g) within a given [taxonomy](g).
--- /dev/null
--- /dev/null
++---
++title: taxonomy
++---
++
++A group of related [terms](g) used to classify content. For example, a "colors" taxonomy might include the terms "red", "green", and "blue". See [details](/content-management/taxonomies/).
--- /dev/null
--- /dev/null
++---
++title: template action
++---
++
++A data evaluation or control structure within a [template](g), delimited by "{{" and "}}". See the [Go documentation](https://pkg.go.dev/text/template#hdr-Actions) for details.
--- /dev/null
--- /dev/null
++---
++title: template
++---
++
++A file with [template actions](g), located within the `layouts` directory of a project, theme, or module. See [details](/templates/).
--- /dev/null
--- /dev/null
++---
++title: term page
++---
++
++Content with the "term" [page kind](g). Typically a listing of [regular pages](g) and [section pages](g) with a given [term](g).
--- /dev/null
--- /dev/null
++---
++title: term
++---
++
++A member of a [taxonomy](g), used to classify content. See [details](/content-management/taxonomies/).
--- /dev/null
--- /dev/null
++---
++title: theme
++---
++
++A packaged combination of [archetypes](g), assets, content, data, [templates](g), translation tables, static files, or configuration settings. A theme may serve as the basis for a new site, or to augment an existing site. See also [module](g).
--- /dev/null
--- /dev/null
++---
++title: token
++---
++
++An identifier within a format string, beginning with a colon and replaced with a value when rendered. For example, use tokens in format strings for both [permalinks](/content-management/urls/#permalinks) and [dates](/functions/time/format/#localization).
--- /dev/null
--- /dev/null
++---
++title: type
++---
++
++See [content type](g).
--- /dev/null
--- /dev/null
++---
++title: unmarshal
++---
++
++To transform a serialized object into a data structure. For example, transforming a JSON file into a [map](g) that you can access within a template. See [marshal](g).
--- /dev/null
--- /dev/null
++---
++title: variable
++---
++
++A user-defined [identifier](g) prepended with a `$` symbol, representing a value of any data type, initialized or assigned within a [template action](g). For example, `$foo` and `$bar` are variables.
--- /dev/null
--- /dev/null
++---
++title: walk
++---
++
++To recursively traverse a nested data structure. For example, rendering a multilevel menu.
--- /dev/null
--- /dev/null
++---
++title: weight
++---
++
++Used to position an element within a collection sorted by weight. Assign weights using non-zero integers. Lighter items float to the top, while heavier items sink to the bottom. Unweighted or zero-weighted elements are placed at the end of the collection. Weights are typically assigned to pages, menu entries, languages, and output formats.
--- /dev/null
--- /dev/null
++---
++title: weighted page
++---
++
++Contained within a [`Taxonomy`](g) object, a weighted page is a [map](g) with two elements: a `Page` object, and its [taxonomic weight](g) as defined in front matter. Access the elements using the `Page` and `Weight` keys.
--- /dev/null
--- /dev/null
++---
++title: zero time
++---
++
++The _zero time_ is January 1, 0001, 00:00:00 UTC. Formatted per [RFC3339](https://www.rfc-editor.org/rfc/rfc3339) the _zero time_ is 0001-01-01T00:00:00-00:00.
--- /dev/null
- 2. Add content
- 3. Configure the site
- 4. Publish the site
+---
+title: Quick start
+description: Learn to create a Hugo site in minutes.
+categories: [getting started]
+keywords: [quick start,usage]
+menu:
+ docs:
+ parent: getting-started
+ weight: 20
+weight: 20
+toc: true
+aliases: [/quickstart/,/overview/quickstart/]
+minVersion: v0.128.0
+---
+
+In this tutorial you will:
+
+1. Create a site
-
- 2. Set the `languageCode` to your language and region.
-
- 3. Set the `title` for your production site.
++1. Add content
++1. Configure the site
++1. Publish the site
+
+## Prerequisites
+
+Before you begin this tutorial you must:
+
+1. [Install Hugo] (extended or extended/deploy edition, {{% param "minVersion" %}} or later)
+1. [Install Git]
+
+You must also be comfortable working from the command line.
+
+## Create a site
+
+### Commands
+
+{{% note %}}
+**If you are a Windows user:**
+
+- Do not use the Command Prompt
+- Do not use Windows PowerShell
+- Run these commands from [PowerShell] or a Linux terminal such as WSL or Git Bash
+
+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 %}}
+
+Verify that you have installed Hugo {{% param "minVersion" %}} or later.
+
+```text
+hugo version
+```
+
+Run these commands to create a Hugo site with the [Ananke] theme. The next section provides an explanation of each command.
+
+```text
+hugo new site quickstart
+cd quickstart
+git init
+git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
+echo "theme = 'ananke'" >> hugo.toml
+hugo server
+```
+
+View your site at the URL displayed in your terminal. Press `Ctrl + C` to stop Hugo's development server.
+
+### Explanation of commands
+
+Create the [directory structure] for your project in the `quickstart` directory.
+
+```text
+hugo new site quickstart
+```
+
+Change the current directory to the root of your project.
+
+```text
+cd quickstart
+```
+
+Initialize an empty Git repository in the current directory.
+
+```text
+git init
+```
+
+Clone the [Ananke] theme into the `themes` directory, adding it to your project as a [Git submodule].
+
+```text
+git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
+```
+
+Append a line to the site configuration file, indicating the current theme.
+
+```text
+echo "theme = 'ananke'" >> hugo.toml
+```
+
+Start Hugo's development server to view the site.
+
+```text
+hugo server
+```
+
+Press `Ctrl + C` to stop Hugo's development server.
+
+## Add content
+
+Add a new page to your site.
+
+```text
+hugo new content content/posts/my-first-post.md
+```
+
+Hugo created the file in the `content/posts` directory. Open the file with your editor.
+
+```text
++++
+title = 'My First Post'
+date = 2024-01-14T07:07:07+01:00
+draft = true
++++
+```
+
+Notice the `draft` value in the [front matter] is `true`. By default, Hugo does not publish draft content when you build the site. Learn more about [draft, future, and expired content].
+
+Add some [Markdown] to the body of the post, but do not change the `draft` value.
+
+[markdown]: https://commonmark.org/help/
+
+```text
++++
+title = 'My First Post'
+date = 2024-01-14T07:07:07+01:00
+draft = true
++++
+## Introduction
+
+This is **bold** text, and this is *emphasized* text.
+
+Visit the [Hugo](https://gohugo.io) website!
+```
+
+Save the file, then start Hugo’s development server to view the site. You can run either of the following commands to include draft content.
+
+```text
+hugo server --buildDrafts
+hugo server -D
+```
+
+View your site at the URL displayed in your terminal. Keep the development server running as you continue to add and change content.
+
+When satisfied with your new content, set the front matter `draft` parameter to `false`.
+
+{{% 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 %}}
+
+## Configure the site
+
+With your editor, open the [site configuration] file (`hugo.toml`) in the root of your project.
+
+```text
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'My New Hugo Site'
+theme = 'ananke'
+```
+
+Make the following changes:
+
+1. Set the `baseURL` for your production site. This value must begin with the protocol and end with a slash, as shown above.
++1. Set the `languageCode` to your language and region.
++1. Set the `title` for your production site.
+
+Start Hugo's development server to see your changes, remembering to include draft content.
+
+```text
+hugo server -D
+```
+
+{{% 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].
+
+[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 %}}
+
+## Publish the site
+
+In this step you will _publish_ your site, but you will not _deploy_ it.
+
+When you _publish_ your site, Hugo creates the entire static site in the `public` directory in the root of your project. This includes the HTML files, and assets such as images, CSS files, and JavaScript files.
+
+When you publish your site, you typically do _not_ want to include [draft, future, or expired content]. The command is simple.
+
+```text
+hugo
+```
+
+To learn how to _deploy_ your site, see the [hosting and deployment] section.
+
+## Ask for help
+
+Hugo's [forum] is an active community of users and developers who answer questions, share knowledge, and provide examples. A quick search of over 20,000 topics will often answer your question. Please be sure to read about [requesting help] before asking your first question.
+
+## Other resources
+
+For other resources to help you learn Hugo, including books and video tutorials, see the [external learning resources](/getting-started/external-learning-resources/) page.
+
+[Ananke]: https://github.com/theNewDynamic/gohugo-theme-ananke
+[directory structure]: /getting-started/directory-structure/
+[draft, future, and expired content]: /getting-started/usage/#draft-future-and-expired-content
+[draft, future, or expired content]: /getting-started/usage/#draft-future-and-expired-content
+[external learning resources]:/getting-started/external-learning-resources/
+[forum]: https://discourse.gohugo.io/
+[forum]: https://discourse.gohugo.io/
+[front matter]: /content-management/front-matter/
+[Git submodule]: https://git-scm.com/book/en/v2/Git-Tools-Submodules
+[hosting and deployment]: /hosting-and-deployment/
+[Install Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+[Install Hugo]: /installation/
+[Requesting Help]: https://discourse.gohugo.io/t/requesting-help/9132
+[Requesting Help]: https://discourse.gohugo.io/t/requesting-help/9132
+[site configuration]: /getting-started/configuration/
--- /dev/null
- Depending on your needs, you may wish to manually clear the contents of the public directory before every build.
+---
+title: Basic usage
+description: Hugo's command line interface (CLI) is fully featured but simple to use, even for those with limited experience working from the command line.
+categories: [getting started]
+keywords: [usage,livereload,command,flags]
+menu:
+ docs:
+ parent: getting-started
+ weight: 30
+weight: 30
+toc: true
+aliases: [/overview/usage/,/extras/livereload/,/doc/usage/,/usage/]
+---
+
+## Test your installation
+
+After [installing] Hugo, test your installation by running:
+
+```sh
+hugo version
+```
+
+You should see something like:
+
+```text
+hugo v0.123.0-3c8a4713908e48e6523f058ca126710397aa4ed5+extended linux/amd64 BuildDate=2024-02-19T16:32:38Z VendorInfo=gohugoio
+```
+
+## Display available commands
+
+To see a list of the available commands and flags:
+
+```sh
+hugo help
+```
+
+To get help with a subcommand, use the `--help` flag. For example:
+
+```sh
+hugo server --help
+```
+
+## Build your site
+
+To build your site, `cd` into your project directory and run:
+
+```sh
+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 %}}
+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.
+
- Hugo publishes descendants of draft, future, and expired [node] pages. To prevent publication of these descendants, use the [`cascade`] front matter field to cascade [build options] to the descendant pages.
++Depending on your needs, you may wish to manually clear the contents of the `public` directory before every build.
+{{% /note %}}
+
+## Draft, future, and expired content
+
+Hugo allows you to set `draft`, `date`, `publishDate`, and `expiryDate` in the [front matter] of your content. By default, Hugo will not publish content when:
+
+- The `draft` value is `true`
+- The `date` is in the future
+- The `publishDate` is in the future
+- The `expiryDate` is in the past
+
+{{< new-in 0.123.0 >}}
+
+{{% note %}}
- [node]: /getting-started/glossary/#node
++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
- 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 %}}
+
+You can override the default behavior when running `hugo` or `hugo server` with command line flags:
+
+```sh
+hugo --buildDrafts # or -D
+hugo --buildExpired # or -E
+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 %}}
+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 %}}
+
+## Develop and test your site
+
+To view your site while developing layouts or creating content, `cd` into your project directory and run:
+
+```sh
+hugo server
+```
+
+The [`hugo server`] command builds your site and serves your pages using a minimal HTTP server. When you run `hugo server` it will display the URL of your local site:
+
+```text
+Web Server is available at http://localhost:1313/
+```
+
+While the server is running, it watches your project directory for changes to assets, configuration, content, data, layouts, translations, and static files. When it detects a change, the server rebuilds your site and refreshes your browser using [LiveReload].
+
+Most Hugo builds are so fast that you may not notice the change unless you are looking directly at your browser.
+
+### LiveReload
+
+While the server is running, Hugo injects JavaScript into the generated HTML pages. The LiveReload script creates a connection from the browser to the server via web sockets. You do not need to install any software or browser plugins, nor is any configuration required.
+
+### Automatic redirection
+
+When editing content, if you want your browser to automatically redirect to the page you last modified, run:
+
+```sh
+hugo server --navigateToChanged
+```
+
+## Deploy your site
+
+{{% note %}}
- This builds your site, publishing the files to the public directory. The directory structure will look something like this:
++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 %}}
+
+When you are ready to deploy your site, run:
+
+```sh
+hugo
+```
+
- [^1]: The Git repository contains the entire project directory, typically excluding the public directory because the site is built _after_ the push.
++This builds your site, publishing the files to the `public` directory. The directory structure will look something like this:
+
+```text
+public/
+├── categories/
+│ ├── index.html
+│ └── index.xml <-- RSS feed for this section
+├── posts/
+│ ├── my-first-post/
+│ │ └── index.html
+│ ├── index.html
+│ └── index.xml <-- RSS feed for this section
+├── tags/
+│ ├── index.html
+│ └── index.xml <-- RSS feed for this section
+├── index.html
+├── index.xml <-- RSS feed for the site
+└── sitemap.xml
+```
+
+In a simple hosting environment, where you typically `ftp`, `rsync`, or `scp` your files to the root of a virtual host, the contents of the `public` directory are all that you need.
+
+Most of our users deploy their sites using a CI/CD workflow, where a push[^1] to their GitHub or GitLab repository triggers a build and deployment. Popular providers include [AWS Amplify], [CloudCannon], [Cloudflare Pages], [GitHub Pages], [GitLab Pages], and [Netlify].
+
+Learn more in the [hosting and deployment] section.
+
++[^1]: The Git repository contains the entire project directory, typically excluding the `public` directory because the site is built _after_ the push.
+
+[`--destination`]: /commands/hugo/#options
+[`hugo server`]: /commands/hugo_server/
+[`hugo`]: /commands/hugo/
+[`publishDir`]: /getting-started/configuration/#publishdir
+[AWS Amplify]: https://aws.amazon.com/amplify/
+[CloudCannon]: https://cloudcannon.com/
+[Cloudflare Pages]: https://pages.cloudflare.com/
+[commands]: /commands/
+[front matter]: /content-management/front-matter/
+[GitHub Pages]: https://pages.github.com/
+[GitLab Pages]: https://docs.gitlab.com/ee/user/project/pages/
+[hosting and deployment]: /hosting-and-deployment/
+[hosting]: /hosting-and-deployment/
+[installing]: /installation/
+[LiveReload]: https://github.com/livereload/livereload-js
+[Netlify]: https://www.netlify.com/
--- /dev/null
- hugo && rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR} # this will delete everything on the server that's not in the local public folder
+---
+title: Deploy with Rsync
+description: If you have access to your web host with SSH, you can use a simple rsync one-liner to incrementally deploy your entire Hugo website.
+categories: [hosting and deployment]
+keywords: [deployment,rsync]
+menu:
+ docs:
+ parent: hosting-and-deployment
+toc: true
+aliases: [/tutorials/deployment-with-rsync/]
+---
+
+## Assumptions
+
+* A web host running a web server. This could be a shared hosting environment or a VPS.
+* Access to your web host with SSH
+* A functional static website built with Hugo
+
+The spoiler is that you can deploy your entire website with a command that looks like the following:
+
+```txt
+hugo && rsync -avz --delete public/ www-data@ftp.topologix.fr:~/www/
+```
+
+As you will see, we'll put this command in a shell script file, which makes building and deployment as easy as executing `./deploy`.
+
+## Copy Your SSH Key to your host
+
+To make logging in to your server more secure and less interactive, you can upload your SSH key. If you have already installed your SSH key to your server, you can move on to the next section.
+
+First, install the ssh client. On Debian distributions, use the following command:
+
+{{< code file=install-openssh.sh >}}
+sudo apt-get install openssh-client
+{{< /code >}}
+
+Then generate your ssh key. First, create the `.ssh` directory in your home directory if it doesn't exist:
+
+```txt
+~$ cd && mkdir .ssh & cd .ssh
+```
+
+Next, execute this command to generate a new keypair called `rsa_id`:
+
+```txt
+~/.ssh/$ ssh-keygen -t rsa -q -C "For SSH" -f rsa_id
+```
+
+You'll be prompted for a passphrase, which is an extra layer of protection. Enter the passphrase you'd like to use, and then enter it again when prompted, or leave it blank if you don't want to have a passphrase. Not using a passphrase will let you transfer files non-interactively, as you won't be prompted for a password when you log in, but it is slightly less secure.
+
+To make logging in easier, add a definition for your web host to the file `~/.ssh/config` with the following command, replacing `HOST` with the IP address or hostname of your web host, and `USER` with the username you use to log in to your web host when transferring files:
+
+```txt
+~/.ssh/$ cat >> config <<EOF
+Host HOST
+ Hostname HOST
+ Port 22
+ User USER
+ IdentityFile ~/.ssh/rsa_id
+EOF
+```
+
+Then copy your ssh public key to the remote server with the `ssh-copy-id` command:
+
+```txt
+~/.ssh/$ ssh-copy-id -i rsa_id.pub USER@HOST.com
+```
+
+Now you can easily connect to the remote server:
+
+```txt
+~$ ssh user@host
+Enter passphrase for key '/home/mylogin/.ssh/rsa_id':
+```
+
+Now that you can log in with your SSH key, let's create a script to automate deployment of your Hugo site.
+
+## Shell script
+
+Create a new script called `deploy` the root of your Hugo tree:
+
+```txt
+~/websites/topologix.fr$ editor deploy
+```
+
+Add the following content. Replace the `USER`, `HOST`, and `DIR` values with your own values:
+
+```sh
+#!/bin/sh
+USER=my-user
+HOST=my-server.com
+DIR=my/directory/to/topologix.fr/ # the directory where your website files should go
+
++hugo && rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR} # this will delete everything on the server that's not in the local public directory
+
+exit 0
+```
+
+Note that `DIR` is the relative path from the remote user's home. If you have to specify a full path (for instance `/var/www/mysite/`) you must change `~/${DIR}` to `${DIR}` inside the command-line. For most cases you should not have to.
+
+Save and close, and make the `deploy` file executable:
+
+```txt
+~/websites/topologix.fr$ chmod +x deploy
+```
+
+Now you only have to enter the following command to deploy and update your website:
+
+```txt
+~/websites/topologix.fr$ ./deploy
+```
+
+Your site builds and deploys:
+
+```txt
+Started building sites ...
+Built site for language en:
+0 draft content
+0 future content
+0 expired content
+5 pages created
+0 non-page files copied
+0 paginator pages created
+0 tags created
+0 categories created
+total in 56 ms
+sending incremental file list
+404.html
+index.html
+index.xml
+sitemap.xml
+posts/
+posts/index.html
+
+sent 9,550 bytes received 1,708 bytes 7,505.33 bytes/sec
+total size is 966,557 speedup is 85.86
+```
+
+You can incorporate other processing tasks into this deployment script as well.
--- /dev/null
- 2. Use the following values during creation:
+---
+title: Host on 21YunBox
+description: Host your Hugo site with 21YunBox's blazing fast Chinese CDN, fully-managed SSL and auto deploys from Gitee.
+categories: [hosting and deployment]
+keywords: [hosting,21yunbox]
+menu:
+ docs:
+ parent: hosting-and-deployment
+toc: true
+---
+
+[21YunBox](https://www.21yunbox.com) is a fully-managed cloud platform dedicated to make web deployment easy within the Chinese Great Firewall where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place. It provides blazing fast Chinese CDN, continuous deployment, one-click HTTPS and [other services like managed databases and backend web services](https://www.21yunbox.com/docs/), providing an avenue to launch web projects in China.
+
+21YunBox includes the following features:
+
+- Continuous, automatic builds & deploys from GitHub and Gitee
+- Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org)
+- Instant cache invalidation with a blazing fast, Chinese CDN
+- Unlimited [custom domains](https://www.21yunbox.com/docs/#/custom-domains)
+- Automatic [Brotli compression](https://en.wikipedia.org/wiki/Brotli) for faster sites
+- Native HTTP/2 support
+- Automatic HTTP → HTTPS redirects
+- Custom URL redirects and rewrites
+
+## Prerequisites
+
+This guide assumes you already have a Hugo project to deploy. If you need a project, use the [Quick Start](/getting-started/quick-start/) to get started or fork 21YunBox's [Hugo Example](https://gitee.com/eryiyunbox-examples/hello-hugo) before continuing.
+
+## Setup
+
+You can set up a Hugo site on 21YunBox in two quick steps:
+
+1. Create a new web service on 21YunBox, and give 21YunBox permission to access your GitHub or Gitee repo.
++1. Use the following values during creation:
+
+ | Field | Value |
+ | --------------------- | ------------------------------------------------ |
+ | **Environment** | `Static Site` |
+ | **Build Command** | `hugo --gc --minify` (or your own build command) |
+ | **Publish Directory** | `./public` (or your own output directory) |
+
+That's it! Your site will be live on your 21YunBox URL (which looks like `yoursite.21yunbox.com`) as soon as the build is done.
+
+## Continuous deploys
+
+Now that 21YunBox is connected to your repo, it will automatically build and publish your site any time you push to GitHub.
+
+Every deploy automatically and instantly invalidates the CDN cache, so your users can always access the latest content on your site.
+
+## Custom domains
+
+Add your own domains to your site easily using 21YunBox's [custom domains](https://www.21yunbox.com/docs/#/custom-domains) guide.
+
+## Support
+
+Click [here](https://www.21yunbox.com/docs/#/contact) to contact with 21YunBox' experts if you need help.
--- /dev/null
- 2. [Install Git]
- 3. [Create a Hugo site] and test it locally with `hugo server`
- 4. Commit the changes to your local repository
- 5. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account
+---
+title: Host on AWS Amplify
+description: Host your site on AWS Amplify with continuous deployment.
+categories: [hosting and deployment]
+keywords: [hosting]
+menu:
+ docs:
+ parent: hosting-and-deployment
+toc: true
+---
+
+## Prerequisites
+
+Please complete the following tasks before continuing:
+
+1. [Create an AWS account]
++1. [Install Git]
++1. [Create a Hugo site] and test it locally with `hugo server`
++1. Commit the changes to your local repository
++1. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account
+
+[Bitbucket]: https://bitbucket.org/product
+[Create a Hugo site]: /getting-started/quick-start/
+[Create an AWS account]: https://aws.amazon.com/resources/create-account/
+[GitHub]: https://github.com
+[GitLab]: https://about.gitlab.com/
+[Install Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+
+## Procedure
+
+This procedure will enable continuous deployment from a GitHub repository. The procedure is essentially the same if you are using GitLab or Bitbucket.
+
+Step 1
+: Create a file named `amplify.yml` in the root of your project.
+
+```sh
+touch amplify.yml
+```
+
+Step 2
+: Copy and paste the YAML below into the file you created. Change the application versions and time zone as needed.
+
+{{< code file=amplify.yml copy=true >}}
+version: 1
+env:
+ variables:
+ # Application versions
+ DART_SASS_VERSION: 1.81.0
+ GO_VERSION: 1.23.3
+ HUGO_VERSION: 0.139.3
+ # Time zone
+ TZ: America/Los_Angeles
+ # Cache
+ HUGO_CACHEDIR: ${PWD}/.hugo
+ NPM_CONFIG_CACHE: ${PWD}/.npm
+frontend:
+ phases:
+ preBuild:
+ commands:
+ # Install Dart Sass
+ - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - sudo tar -C /usr/local/bin -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - export PATH=/usr/local/bin/dart-sass:$PATH
+
+ # Install Go
+ - curl -LJO https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz
+ - sudo tar -C /usr/local -xf go${GO_VERSION}.linux-amd64.tar.gz
+ - rm go${GO_VERSION}.linux-amd64.tar.gz
+ - export PATH=/usr/local/go/bin:$PATH
+
+ # Install Hugo
+ - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
+ - sudo tar -C /usr/local/bin -xf hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
+ - rm hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
+ - export PATH=/usr/local/bin:$PATH
+
+ # Check installed versions
+ - go version
+ - hugo version
+ - node -v
+ - npm -v
+ - sass --embedded --version
+
+ # Install Node.JS dependencies
+ - "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci --prefer-offline || true"
+
+ # https://github.com/gohugoio/hugo/issues/9810
+ - git config --add core.quotepath false
+ build:
+ commands:
+ - hugo --gc --minify
+ artifacts:
+ baseDirectory: public
+ files:
+ - '**/*'
+ cache:
+ paths:
+ - ${HUGO_CACHEDIR}/**/*
+ - ${NPM_CONFIG_CACHE}/**/*
+{{< /code >}}
+
+Step 3
+: Commit and push the change to your GitHub repository.
+
+```sh
+git add -A
+git commit -m "Create amplify.yml"
+git push
+```
+
+Step 4
+: Log in to your AWS account, navigate to the [Amplify Console], then press the **Deploy an app** button.
+
+[Amplify Console]: https://console.aws.amazon.com/amplify/apps
+
+Step 5
+: Choose a source code provider, then press the **Next** button.
+
+ 
+
+Step 6
+: Authorize AWS Amplify to access your GitHub account.
+
+ 
+
+Step 7
+: Select your personal account or relevant organization.
+
+ 
+
+Step 8
+: Authorize access to one or more repositories.
+
+ 
+
+Step 9
+: Select a repository and branch, then press the **Next** button.
+
+ 
+
+Step 10
+: On the "App settings" page, scroll to the bottom then press the **Next** button. Amplify reads the `amplify.yml` file you created in Steps 1-3 instead of using the values on this page.
+
+Step 11
+: On the "Review" page, scroll to the bottom then press the **Save and deploy** button.
+
+Step 12
+: When your site has finished deploying, press the **Visit deployed URL** button to view your published site.
+
+ 
--- /dev/null
- 2. [Install Git]
- 3. [Create a Hugo site] and test it locally with `hugo server`.
+---
+title: Host on GitHub Pages
+description: Host your site on GitHub Pages with continuous deployment using project, user, or organization pages.
+categories: [hosting and deployment]
+keywords: [hosting]
+menu:
+ docs:
+ parent: hosting-and-deployment
+toc: true
+aliases: [/tutorials/github-pages-blog/]
+---
+
+## Prerequisites
+
+Please complete the following tasks before continuing:
+
+1. [Create a GitHub account]
- HUGO_VERSION: 0.137.1
++1. [Install Git]
++1. [Create a Hugo site] and test it locally with `hugo server`.
+
+[Create a GitHub account]: https://github.com/signup
+[Install Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+[Create a Hugo site]: /getting-started/quick-start/
+
+## Types of sites
+
+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 %}}
+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 %}}
+
+[GitHub Pages documentation]: https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites
+
+## Procedure
+
+Step 1
+: Create a GitHub repository.
+
+Step 2
+: Push your local repository to GitHub.
+
+Step 3
+: Visit your GitHub repository. From the main menu choose **Settings** > **Pages**. In the center of your screen you will see this:
+
+
+{style="max-width: 280px"}
+
+Step 4
+: Change the **Source** to `GitHub Actions`. The change is immediate; you do not have to press a Save button.
+
+
+{style="max-width: 280px"}
+
+Step 5
+: Create a file named `hugo.yaml` in a directory named `.github/workflows`.
+
+```text
+mkdir -p .github/workflows
+touch hugo.yaml
+```
+
+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 >}}
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+ # Runs on pushes targeting the default branch
+ push:
+ branches:
+ - main
+
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+ group: "pages"
+ cancel-in-progress: false
+
+# Default to bash
+defaults:
+ run:
+ shell: bash
+
+jobs:
+ # Build job
+ build:
+ runs-on: ubuntu-latest
+ env:
++ HUGO_VERSION: 0.141.0
+ steps:
+ - name: Install Hugo CLI
+ run: |
+ wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+ && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+ - name: Install Dart Sass
+ run: sudo snap install dart-sass
+ - name: Checkout
+ uses: actions/checkout@v4
+ with:
+ submodules: recursive
+ fetch-depth: 0
+ - name: Setup Pages
+ id: pages
+ uses: actions/configure-pages@v5
+ - name: Install Node.js dependencies
+ run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+ - name: Build with Hugo
+ env:
+ HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
+ HUGO_ENVIRONMENT: production
+ TZ: America/Los_Angeles
+ run: |
+ hugo \
+ --gc \
+ --minify \
+ --baseURL "${{ steps.pages.outputs.base_url }}/"
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v3
+ with:
+ path: ./public
+
+ # Deployment job
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ needs: build
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4
+{{< /code >}}
+
+Step 7
+: Commit and push the change to your GitHub repository.
+
+```sh
+git add -A
+git commit -m "Create hugo.yaml"
+git push
+```
+
+Step 8
+: From GitHub's main menu, choose **Actions**. You will see something like this:
+
+
+{style="max-width: 350px"}
+
+Step 9
+: When GitHub has finished building and deploying your site, the color of the status indicator will change to green.
+
+
+{style="max-width: 350px"}
+
+Step 10
+: Click on the commit message as shown above. You will see this:
+
+
+{style="max-width: 611px"}
+
+Under the deploy step, you will see a link to your live site.
+
+In the future, whenever you push a change from your local repository, GitHub will rebuild your site and deploy the changes.
+
+## Customize the workflow
+
+The example workflow above includes this step, which typically takes 10‑15 seconds:
+
+```yaml
+- name: Install Dart Sass
+ run: sudo snap install dart-sass
+```
+
+You may remove this step if your site, themes, and modules do not transpile Sass to CSS using the [Dart Sass] transpiler.
+
+[Dart Sass]: /hugo-pipes/transpile-sass-to-css/#dart-sass
+
+## Other resources
+
+- [Learn more about GitHub Actions](https://docs.github.com/en/actions)
+- [Caching dependencies to speed up workflows](https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows)
+- [Manage a custom domain for your GitHub Pages site](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages)
--- /dev/null
- 2. [Install Git]
- 3. [Create a Hugo site] and test it locally with `hugo server`
- 4. Commit the changes to your local repository
- 5. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account
+---
+title: Host on Netlify
+description: Host your site on Netlify with continuous deployment.
+categories: [hosting and deployment]
+keywords: [hosting]
+menu:
+ docs:
+ parent: hosting-and-deployment
+toc: true
+---
+
+## Prerequisites
+
+Please complete the following tasks before continuing:
+
+1. [Create a Netlify account]
- HUGO_VERSION = "0.137.1"
++1. [Install Git]
++1. [Create a Hugo site] and test it locally with `hugo server`
++1. Commit the changes to your local repository
++1. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account
+
+[Bitbucket]: https://bitbucket.org/product
+[Create a Hugo site]: /getting-started/quick-start/
+[Create a Netlify account]: https://app.netlify.com/signup
+[GitHub]: https://github.com
+[GitLab]: https://about.gitlab.com/
+[Install Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
+
+## Procedure
+
+This procedure will enable continuous deployment from a GitHub repository. The procedure is essentially the same if you are using GitLab or Bitbucket.
+
+Step 1
+: Log in to your Netlify account, navigate to the Sites page, press the **Add new site** button, and choose "Import an existing project" from the dropdown menu.
+
+Step 2
+: Select your deployment method.
+
+ 
+
+Step 3
+: Authorize Netlify to connect with your GitHub account by pressing the **Authorize Netlify** button.
+
+ 
+
+Step 4
+: Press the **Configure Netlify on GitHub** button.
+
+ 
+
+Step 5
+: Install the Netlify app by selecting your GitHub account.
+
+ 
+
+Step 6
+: Press the **Install** button.
+
+ 
+
+Step 7
+: Click on the site's repository from the list.
+
+ 
+
+Step 8
+: Set the site name and branch from which to deploy.
+
+ 
+
+Step 9
+: Define the build settings, press the **Add environment variables** button, then press the **New variable** button.
+
+ 
+
+Step 10
+: Create a new environment variable named `HUGO_VERSION` and set the value to the [latest version].
+
+[latest version]: https://github.com/gohugoio/hugo/releases/latest
+
+ 
+
+Step 11
+: Press the "Deploy my new site" button at the bottom of the page.
+
+ 
+
+Step 12
+: At the bottom of the screen, wait for the deploy to complete, then click on the deploy log entry.
+
+ 
+
+Step 13
+: Press the **Open production deploy** button to view the live site.
+
+ 
+
+## Configuration file
+
+In the procedure above we configured our site using the Netlify user interface. Most site owners find it easier to use a configuration file checked into source control.
+
+Create a new file named netlify.toml in the root of your project directory. In its simplest form, the configuration file might look like this:
+
+{{< code file=netlify.toml >}}
+[build.environment]
- HUGO_VERSION = "0.137.1"
- DART_SASS_VERSION = "1.80.6"
++HUGO_VERSION = "0.141.0"
++NODE_VERSION = "22"
+TZ = "America/Los_Angeles"
+
+[build]
+publish = "public"
+command = "hugo --gc --minify"
+{{< /code >}}
+
+If your site requires Dart Sass to transpile Sass to CSS, the configuration file should look something like this:
+
+{{< code file=netlify.toml >}}
+[build.environment]
++HUGO_VERSION = "0.141.0"
++DART_SASS_VERSION = "1.83.4"
++NODE_VERSION = "22"
+TZ = "America/Los_Angeles"
+
+[build]
+publish = "public"
+command = """\
+ curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ export PATH=/opt/build/repo/dart-sass:$PATH && \
+ hugo --gc --minify \
+ """
+{{< /code >}}
--- /dev/null
-
+---
+title: Hugo Deploy
+description: Deploy your site directly to a Google Cloud Storage bucket, an AWS S3 bucket, or an Azure Storage container.
+categories: [hosting and deployment]
+keywords: [deployment,s3,gcs,azure]
+menu:
+ docs:
+ parent: hosting-and-deployment
+ weight: 20
+weight: 20
+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 %}}
+This feature requires the Hugo extended/deploy edition. See the [installation] section for details.
+
+[installation]: /installation/
+{{% /note %}}
+
+## Assumptions
+
+* You have completed the [Quick Start] or have a Hugo website you are ready to deploy and share with the world.
+* You have an account with the service provider ([Google Cloud](https://cloud.google.com/), [AWS](https://aws.amazon.com), or [Azure](https://azure.microsoft.com)) that you want to deploy to.
+* You have authenticated.
+ * Google Cloud: [Install the CLI](https://cloud.google.com/sdk) and run [`gcloud auth login`](https://cloud.google.com/sdk/gcloud/reference/auth/login).
+ * AWS: [Install the CLI](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html) and run [`aws configure`](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html).
+ * Azure: [Install the CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli) and run [`az login`](https://docs.microsoft.com/en-us/cli/azure/authenticate-azure-cli).
+ * NOTE: Each service supports alternatives for authentication, including using environment variables. See [here](https://gocloud.dev/howto/blob/#services) for more details.
+* You have created a bucket to deploy to. If you want your site to be
+ public, be sure to configure the bucket to be publicly readable as a static website.
+ * Google Cloud: [create a bucket](https://cloud.google.com/storage/docs/creating-buckets) and [host a static website](https://cloud.google.com/storage/docs/hosting-static-website)
+ * Amazon S3: [create a bucket](https://docs.aws.amazon.com/AmazonS3/latest/gsg/CreatingABucket.html) and [host a static website](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html)
+ * Microsoft Azure: [create a storage container](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-portal) and [host a static website](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website)
+
-
+## Configuring your first deployment
+
+In the configuration file for your site, add a `[deployment]` section
+and a `[[deployment.targets]]` subsection. The only required parameters are
+the name and URL:
+
+```toml
+[deployment]
+
+[[deployment.targets]]
+# An arbitrary name for this target.
+name = "production"
+
+# URL specifies the Go Cloud Development Kit URL to deploy to. Examples:
+URL = "<FILL ME IN>"
+
+# Google Cloud Storage -- see https://gocloud.dev/howto/blob/#gcs
+#URL = "gs://<Bucket Name>"
+
+# Amazon Web Services S3; see https://gocloud.dev/howto/blob/#s3
+#URL = "s3://<Bucket Name>?region=<AWS region>"
+
+# For S3-compatible endpoints, see https://gocloud.dev/howto/blob/#s3-compatible
+#URL = "s3://<Bucket Name>?endpoint=https://my.minio.instance&awssdk=v2&use_path_style=true&disable_https=false
+
+# Microsoft Azure Blob Storage; see https://gocloud.dev/howto/blob/#azure
+#URL = "azblob://$web"
+
+```
+
+## Deploy
+
+To deploy to a target:
+
+```bash
+hugo deploy [--target=<target name>]
+```
+
+The deploy process recursively walks through your local publish directory
+(`public` by default) and syncs it to the destination bucket, to ensure
+that the local and remote contents match.
+
+If you don't specify a target, Hugo will deploy to the first target in your
+configuration.
+
+See `hugo help deploy` or [the deploy command-line documentation][commandline] for more command-line options.
+
-
+### How the file list works
+
+The first thing `hugo deploy` does is create file lists for local and remote by
+traversing the local publish directory and remote bucket.
+
+For both local and remote, the file list includes and excludes files according to
+the [deployment target's configuration][config] --
+* If the configuration specifies an `include` pattern, all files
+ are skipped by default except those matching the pattern.
+* If the configuration specifies an `exclude` pattern, files matching the
+ pattern are skipped.
+
-
-
+{{% note %}}
+When creating the local file list, a few additional skips apply: first, Hugo always
+skips files named `.DS_Store`.
+
+Second, Hugo always skips local hidden directories
+(directories with names starting with a period, e.g. `.git`) and does not
+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 %}}
+
- # You can use a "prefix=" query parameter to target a subfolder of the bucket:
- #URL = "gs://<Bucket Name>?prefix=a/subfolder/"
+### How the local and remote file lists are compared
+
+In the second step, Hugo compares the two file lists to figure out what changes
+actually need to be made on the remote. File names are compared first; if the
+local and remote files both exist then the sizes and md5sums are compared. Any
+difference means that the file will be (re-)uploaded.
+
+Specifying the `--force` flag will ensure all files are re-uploaded even
+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 %}}
+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 %}}
+
+If the [`--confirm` or `--dryRun` flags][commandline] are given, Hugo displays
+what differences it has found and either pauses or stops here.
+
+### How synchronization works
+
+Hugo applies the list of changes to the remote storage bucket. Missing and/or
+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 %}}
+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 %}}
+
+## Advanced configuration
+
+Here's a full example deployment configuration:
+
+```toml
+[deployment]
+
+# By default, files are uploaded in an arbitrary order.
+# If you specify an `order` list, files that match regular expressions
+# in this list will be uploaded first, in the specified order.
+order = [".jpg$", ".gif$"]
+
+[[deployment.targets]]
+# Define one or more targets, e.g., staging and production.
+# Each target gets its own [[deployment.targets]] section.
+
+# An arbitrary name for this target.
+name = "mydeployment"
+# The Go Cloud Development Kit URL to deploy to. Examples:
+URL = "<FILL ME IN>"
+
+# GCS; see https://gocloud.dev/howto/blob/#gcs
+#URL = "gs://<Bucket Name>"
+
+# S3; see https://gocloud.dev/howto/blob/#s3
+# For S3-compatible endpoints, see https://gocloud.dev/howto/blob/#s3-compatible
+#URL = "s3://<Bucket Name>?region=<AWS region>"
+
+# Azure Blob Storage; see https://gocloud.dev/howto/blob/#azure
+#URL = "azblob://$web"
+
++# You can use a "prefix=" query parameter to target a subdirectory of the bucket:
++#URL = "gs://<Bucket Name>?prefix=a/subdirectory/"
+
+# If you are using a CloudFront CDN, deploy will invalidate the cache as needed.
+#cloudFrontDistributionID = "<FILL ME IN>"
+
+# Include or exclude specific files when deploying to this target:
+# If exclude is non-empty, and a local or remote file's path matches it, that file is not synced.
+# If include is non-empty, and a local or remote file's path does not match it, that file is not synced.
+# Note: local files that don't pass the include/exclude filters are not uploaded to remote,
+# and remote files that don't pass the include/exclude filters are not deleted.
+#
+# The pattern syntax is documented here: https://godoc.org/github.com/gobwas/glob#Glob
+# Patterns should be written with forward slashes as separator.
+#
+#include = "**.html" # would only include files with ".html" suffix
+#exclude = "**.{jpg, png}" # would exclude files with ".jpg" or ".png" suffix
+
+# Map any file named "<dir>/index.html" to the remote file "<dir>/". This does
+# not affect the root "index.html" file, and it does not affect matchers below.
+# This works when deploying to key-value cloud storage systems, such as Amazon
+# S3 (general purpose buckets, not directory buckets), Google Cloud Storage, and
+# Azure Blob Storage. This makes it so the canonical URL will match the object
+# key in cloud storage, except for the root index.html file.
+#
+#stripIndexHTML = true
+
+
+#######################
+[[deployment.matchers]]
+# Matchers enable special caching, content type and compression behavior for
+# specified file types. You can include any number of matcher blocks; the first one
+# matching a given file pattern will be used.
+
+# See https://golang.org/pkg/regexp/syntax/ for pattern syntax.
+# Pattern searching is stopped on first match.
+# This is not affected by stripIndexHTML, above.
+pattern = "<FILL ME IN>"
+
+# If true, Hugo will gzip the file before uploading it to the bucket.
+# With many storage services, this will save on storage and bandwidth costs
+# for uncompressed file types.
+#gzip = false
+
+# If true, Hugo always re-uploads this file even if size and md5 match.
+# This is useful if Hugo isn't reliably able to determine whether to re-upload
+# the file on its own.
+#force = false
+
+# Content-type header to configure for this file when served.
+# By default this can be determined from the file extension.
+#contentType = ""
+
+# Cache-control header to configure for this file when served.
+# The default is the empty string.
+#cacheControl = ""
+
+# Content-encoding header to configure for this file when served.
+# By default, if gzip is True, this will be filled with "gzip".
+#contentEncoding = ""
+
+
+# Samples:
+
+[[deployment.matchers]]
+# Cache static assets for 1 year.
+pattern = "^.+\\.(js|css|svg|ttf)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = true
+
+[[deployment.matchers]]
+pattern = "^.+\\.(png|jpg)$"
+cacheControl = "max-age=31536000, no-transform, public"
+gzip = false
+
+[[deployment.matchers]]
+# Set custom content type for /sitemap.xml
+pattern = "^sitemap\\.xml$"
+contentType = "application/xml"
+gzip = true
+
+[[deployment.matchers]]
+pattern = "^.+\\.(html|xml|json)$"
+gzip = true
+```
+
+[Quick Start]: /getting-started/quick-start/
+[commandline]: /commands/hugo_deploy/
+[config]: #advanced-configuration
--- /dev/null
- - [https://github.com/bep/docuapi](https://github.com/bep/docuapi) is a theme that has been ported to Hugo Modules while testing this feature. It is a good example of a non-Hugo-project mounted into Hugo’s folder structure. It even shows a JS Bundler implementation in regular Go templates.
+---
+title: Hugo Modules
+linkTitle: In this section
+description: How to use Hugo Modules.
+categories: []
+keywords: []
+menu:
+ docs:
+ identifier: hugo-modules-in-this-section
+ parent: modules
+ weight: 10
+weight: 10
+toc: true
+aliases: [/themes/overview/,/themes/]
+---
+
+**Hugo Modules** are the core building blocks in Hugo. A _module_ can be your main project or a smaller module providing one or more of the 7 component types defined in Hugo: **static**, **content**, **layouts**, **data**, **assets**, **i18n**, and **archetypes**.
+
+You can combine modules in any combination you like, and even mount directories from non-Hugo projects, forming a big, virtual union file system.
+
+Hugo Modules are powered by Go Modules. For more information about Go Modules, see:
+
+- [https://go.dev/wiki/Modules](https://go.dev/wiki/Modules)
+- [https://go.dev/blog/using-go-modules](https://go.dev/blog/using-go-modules)
+
+Some example projects:
+
++- [https://github.com/bep/docuapi](https://github.com/bep/docuapi) is a theme that has been ported to Hugo Modules while testing this feature. It is a good example of a non-Hugo-project mounted into Hugo's directory structure. It even shows a JS Bundler implementation in regular Go templates.
+- [https://github.com/bep/my-modular-site](https://github.com/bep/my-modular-site) is a very simple site used for testing.
--- /dev/null
- : Can be either a valid Go Module module path, e.g. `github.com/gohugoio/myShortcodes`, or the directory name for the module as stored in your themes folder.
+---
+title: Configure Hugo modules
+description: This page describes the configuration options for a module.
+categories: [hugo modules]
+keywords: [modules,themes]
+menu:
+ docs:
+ parent: modules
+ weight: 20
+weight: 20
+toc: true
+---
+
+## Module configuration: top level
+
+{{< code-toggle file=hugo >}}
+[module]
+noProxy = 'none'
+noVendor = ''
+private = '*.*'
+proxy = 'direct'
+replacements = ''
+vendorClosest = false
+workspace = 'off'
+{{< /code-toggle >}}
+
+noProxy
+: (`string`) Comma separated glob list matching paths that should not use the proxy configured above.
+
+noVendor
+: (`string`) A optional Glob pattern matching module paths to skip when vendoring, e.g. "github.com/**"
+
+private
+: (`string`) Comma separated glob list matching paths that should be treated as private.
+
+proxy
+: (`string`) Defines the proxy server to use to download remote modules. Default is `direct`, which means "git clone" and similar.
+
+vendorClosest
+: (`bool`) When enabled, we will pick the vendored module closest to the module using it. The default behavior is to pick the first. Note that there can still be only one dependency of a given module path, so once it is in use it cannot be redefined. Default is `false`.
+
+workspace
+: (`string`) The workspace file to use. This enables Go workspace mode. Note that this can also be set via OS env, e.g. `export HUGO_MODULE_WORKSPACE=/my/hugo.work` This only works with Go 1.18+. In Hugo `v0.109.0` we changed the default to `off` and we now resolve any relative work file names relative to the working directory.
+
+replacements
+: (`string`) A comma-separated list of mappings from module paths to directories, e.g. `github.com/bep/my-theme -> ../..,github.com/bep/shortcodes -> /some/path`. This is mostly useful for temporary local development of a module, in which case you might want to save it as an environment variable, e.g: `env HUGO_MODULE_REPLACEMENTS="github.com/bep/my-theme -> ../.."`. Relative paths are relative to [themesDir](/getting-started/configuration/#all-configuration-settings). Absolute paths are allowed.
+
+Note that the above terms maps directly to their counterparts in Go Modules. Some of these setting may be natural to set as OS environment variables. To set the proxy server to use, as an example:
+
+```txt
+env HUGO_MODULE_PROXY=https://proxy.example.org hugo
+```
+
+{{< gomodules-info >}}
+
+## Module configuration: hugoVersion
+
+If your module requires a particular version of Hugo to work, you can indicate that in the `module` section and the user will be warned if using a too old/new version.
+
+{{< code-toggle file=hugo >}}
+[module]
+[module.hugoVersion]
+ min = ""
+ max = ""
+ extended = false
+
+{{< /code-toggle >}}
+
+Any of the above can be omitted.
+
+min
+: (`string`) The minimum Hugo version supported, e.g. `0.55.0`
+
+max
+: (`string`) The maximum Hugo version supported, e.g. `0.55.0`
+
+extended
+: (`bool`) Whether the extended version of Hugo is required.
+
+## Module configuration: imports
+
+{{< code-toggle file=hugo >}}
+[module]
+[[module.imports]]
+ path = "github.com/gohugoio/hugoTestModules1_linux/modh1_2_1v"
+ ignoreConfig = false
+ ignoreImports = false
+ disable = false
+[[module.imports]]
+ path = "my-shortcodes"
+{{< /code-toggle >}}
+
+path
- : Do not mount any folder in this import.
++: Can be either a valid Go Module module path, e.g. `github.com/gohugoio/myShortcodes`, or the directory name for the module as stored in your `themes` directory.
+
+ignoreConfig
+: If enabled, any module configuration file, e.g. `hugo.toml`, will not be loaded. Note that this will also stop the loading of any transitive module dependencies.
+
+ignoreImports
+: If enabled, module imports will not be followed.
+
+disable
+: Set to `true` to disable the module while keeping any version info in the `go.*` files.
+
+noMounts
- : (`string`) Where it should be mounted into Hugo's virtual filesystem. It must start with one of Hugo's component folders: `static`, `content`, `layouts`, `data`, `assets`, `i18n`, or `archetypes`. E.g. `content/blog`.
++: Do not mount any directory in this import.
+
+noVendor
+: Never vendor this import (only allowed in main project).
+
+{{< gomodules-info >}}
+
+## Module configuration: mounts
+
+{{% 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 %}}
+When you add a mount, the default mount for the concerned target root is ignored: be sure to explicitly add it.
+{{% /note %}}
+
+### Default mounts
+
+{{< code-toggle file=hugo >}}
+[module]
+[[module.mounts]]
+ source="content"
+ target="content"
+[[module.mounts]]
+ source="static"
+ target="static"
+[[module.mounts]]
+ source="layouts"
+ target="layouts"
+[[module.mounts]]
+ source="data"
+ target="data"
+[[module.mounts]]
+ source="assets"
+ target="assets"
+[[module.mounts]]
+ source="i18n"
+ target="i18n"
+[[module.mounts]]
+ source="archetypes"
+ target="archetypes"
+{{< /code-toggle >}}
+
+source
+: (`string`) The source directory of the mount. For the main project, this can be either project-relative or absolute. For other modules it must be project-relative.
+
+target
++: (`string`) Where it should be mounted into Hugo's virtual filesystem. It must start with one of Hugo's component directories: `static`, `content`, `layouts`, `data`, `assets`, `i18n`, or `archetypes`. E.g. `content/blog`.
+
+disableWatch
+{{< new-in 0.128.0 >}}
+: (`bool`) Whether to disable watching in watch mode for this mount. Default is `false`.
+
+lang
+: (`string`) The language code, e.g. "en". Only relevant for `content` mounts, and `static` mounts when in multihost mode.
+
+includeFiles
+: (`string` or `string slice`) One or more [glob](https://github.com/gobwas/glob) patterns matching files or directories to include. If `excludeFiles` is not set, the files matching `includeFiles` will be the files mounted.
+
+The glob patterns are matched to the file names starting from the `source` root, they should have Unix styled slashes even on Windows, `/` matches the mount root and `**` can be used as a super-asterisk to match recursively down all directories, e.g `/posts/**.jpg`.
+
+The search is case-insensitive.
+
+excludeFiles
+: (`string` or `string slice`) One or more glob patterns matching files to exclude.
+
+### Example
+
+{{< code-toggle file=hugo >}}
+[module]
+[[module.mounts]]
+ source="content"
+ target="content"
+ excludeFiles="docs/*"
+[[module.mounts]]
+ source="node_modules"
+ target="assets"
+[[module.mounts]]
+ source="assets"
+ target="assets"
+{{< /code-toggle >}}
--- /dev/null
- The name used in the `theme` definition above must match a folder in `/your-site/themes`, e.g. `/your-site/themes/my-shortcodes`. There are plans to improve on this and get a URL scheme so this can be resolved automatically.
+---
+title: Theme components
+description: Hugo provides advanced theming support with Theme Components.
+categories: [hugo modules]
+keywords: [modules,themes]
+menu:
+ docs:
+ parent: modules
+ weight: 40
+weight: 40
+aliases: [/themes/customize/,/themes/customizing/]
+toc: true
+---
+
+{{% note %}}
+This section contain information that may be outdated and is in the process of being rewritten.
+{{% /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 >}}
+theme = ["my-shortcodes", "base-theme", "hyde"]
+{{< /code-toggle >}}
+
+You can even nest this, and have the theme component itself include theme components in its own `hugo.toml` (theme inheritance).[^1]
+
+The theme definition example above in `hugo.toml` creates a theme with 3 theme components with precedence from left to right.
+
+For any given file, data entry, etc., Hugo will look first in the project and then in `my-shortcodes`, `base-theme`, and lastly `hyde`.
+
+Hugo uses two different algorithms to merge the file systems, depending on the file type:
+
+* For `i18n` and `data` files, Hugo merges deeply using the translation ID and data key inside the files.
+* For `static`, `layouts` (templates), and `archetypes` files, these are merged on file level. So the left-most file will be chosen.
+
++The name used in the `theme` definition above must match a directory in `/your-site/themes`, e.g. `/your-site/themes/my-shortcodes`. There are plans to improve on this and get a URL scheme so this can be resolved automatically.
+
+Also note that a component that is part of a theme can have its own configuration file, e.g. `hugo.toml`. There are currently some restrictions to what a theme component can configure:
+
+* `params` (global and per language)
+* `menu` (global and per language)
+* `outputformats` and `mediatypes`
+
+The same rules apply here: The left-most parameter/menu etc. with the same ID will win. There are some hidden and experimental namespace support in the above, which we will work to improve in the future, but theme authors are encouraged to create their own namespaces to avoid naming conflicts.
+
+[^1]: For themes hosted on the [Hugo Themes Showcase](https://themes.gohugo.io/) components need to be added as git submodules that point to the directory `exampleSite/themes`
--- /dev/null
- 2. Import the theme:
+---
+title: Use Hugo Modules
+description: How to use Hugo Modules to build and manage your site.
+categories: [hugo modules]
+keywords: [modules,themes]
+menu:
+ docs:
+ parent: modules
+ weight: 30
+weight: 30
+aliases: [/themes/usage/,/themes/installing/,/installing-and-using-themes/]
+toc: true
+---
+
+## Prerequisite
+
+{{< gomodules-info >}}
+
+## Initialize a new module
+
+Use `hugo mod init` to initialize a new Hugo Module. If it fails to guess the module path, you must provide it as an argument, e.g.:
+
+```sh
+hugo mod init github.com/<your_user>/<your_project>
+```
+
+Also see the [CLI Doc](/commands/hugo_mod_init/).
+
+## Use a module for a theme
+
+The easiest way to use a Module for a theme is to import it in the configuration.
+
+1. Initialize the hugo module system: `hugo mod init github.com/<your_user>/<your_project>`
- `hugo mod vendor` will write all the module dependencies to a `_vendor` folder, which will then be used for all subsequent builds.
++1. Import the theme:
+
+{{< code-toggle file=hugo >}}
+[module]
+ [[module.imports]]
+ path = "github.com/spf13/hyde"
+{{< /code-toggle >}}
+
+## Update modules
+
+Modules will be downloaded and added when you add them as imports to your configuration, see [Module Imports](/hugo-modules/configuration/#module-configuration-imports).
+
+To update or manage versions, you can use `hugo mod get`.
+
+Some examples:
+
+### Update all modules
+
+```sh
+hugo mod get -u
+```
+
+### Update all modules recursively
+
+```sh
+hugo mod get -u ./...
+```
+
+### Update one module
+
+```sh
+hugo mod get -u github.com/gohugoio/myShortcodes
+```
+
+### Get a specific version
+
+```sh
+hugo mod get github.com/gohugoio/myShortcodes@v1.0.7
+```
+
+Also see the [CLI Doc](/commands/hugo_mod_get/).
+
+## Make and test changes in a module
+
+One way to do local development of a module imported in a project is to add a replace directive to a local directory with the source in `go.mod`:
+
+```sh
+replace github.com/bep/hugotestmods/mypartials => /Users/bep/hugotestmods/mypartials
+```
+
+If you have the `hugo server` running, the configuration will be reloaded and `/Users/bep/hugotestmods/mypartials` put on the watch list.
+
+Instead of modifying the `go.mod` files, you can also use the modules configuration [`replacements`](/hugo-modules/configuration/#module-configuration-top-level) option.
+
+## Print dependency graph
+
+Use `hugo mod graph` from the relevant module directory and it will print the dependency graph, including vendoring, module replacement or disabled status.
+
+E.g.:
+
+```txt
+hugo mod graph
+
+github.com/bep/my-modular-site github.com/bep/hugotestmods/mymounts@v1.2.0
+github.com/bep/my-modular-site github.com/bep/hugotestmods/mypartials@v1.0.7
+github.com/bep/hugotestmods/mypartials@v1.0.7 github.com/bep/hugotestmods/myassets@v1.0.4
+github.com/bep/hugotestmods/mypartials@v1.0.7 github.com/bep/hugotestmods/myv2@v1.0.0
+DISABLED github.com/bep/my-modular-site github.com/spf13/hyde@v0.0.0-20190427180251-e36f5799b396
+github.com/bep/my-modular-site github.com/bep/hugo-fresh@v1.0.1
+github.com/bep/my-modular-site in-themesdir
+```
+
+Also see the [CLI Doc](/commands/hugo_mod_graph/).
+
+## Vendor your modules
+
- * Vendoring will not store modules stored in your `themes` folder.
++`hugo mod vendor` will write all the module dependencies to a `_vendor` directory, which will then be used for all subsequent builds.
+
+Note that:
+
+* You can run `hugo mod vendor` on any level in the module tree.
++* Vendoring will not store modules stored in your `themes` directory.
+* Most commands accept a `--ignoreVendorPaths` flag, which will then not use the vendored modules in `_vendor` for the module paths matching the [Glob](https://github.com/gobwas/glob) pattern given.
+
+Also see the [CLI Doc](/commands/hugo_mod_vendor/).
+
+## Tidy go.mod, go.sum
+
+Run `hugo mod tidy` to remove unused entries in `go.mod` and `go.sum`.
+
+Also see the [CLI Doc](/commands/hugo_mod_clean/).
+
+## Clean module cache
+
+Run `hugo mod clean` to delete the entire modules cache.
+
+Note that you can also configure the `modules` cache with a `maxAge`, see [File Caches](/getting-started/configuration/#configure-file-caches).
+
+Also see the [CLI Doc](/commands/hugo_mod_clean/).
+
+## Module workspaces
+
+Workspace support was added in [Go 1.18](https://go.dev/blog/get-familiar-with-workspaces) and Hugo got solid support for it in the `v0.109.0` version.
+
+A common use case for a workspace is to simplify local development of a site with its theme modules.
+
+A workspace can be configured in a `*.work` file and activated with the [module.workspace](/hugo-modules/configuration/) setting, which for this use is commonly controlled via the `HUGO_MODULE_WORKSPACE` OS environment variable.
+
+See the [hugo.work](https://github.com/gohugoio/hugo/blob/master/docs/hugo.work) file in the Hugo Docs repo for an example:
+
+```text
+go 1.20
+
+use .
+use ../gohugoioTheme
+```
+
+Using the `use` directive, list all the modules you want to work on, pointing to its relative location. As in the example above, it's recommended to always include the main project (the ".") in the list.
+
+With that you can start the Hugo server with that workspace enabled:
+
+```sh
+HUGO_MODULE_WORKSPACE=hugo.work hugo server --ignoreVendorPaths "**"
+```
+
+The `--ignoreVendorPaths` flag is added above to ignore any of the vendored dependencies inside `_vendor`. If you don't use vendoring, you don't need that flag. But now the server is set up watching the files and directories in the workspace and you can see your local edits reloaded.
--- /dev/null
- : A file within the assets directory, or within any directory [mounted] to the assets directory.
+---
+title: Hugo Pipes
+linkTitle: Introduction
+description: Hugo Pipes is Hugo's asset processing set of functions.
+categories: [asset management]
+keywords: []
+menu:
+ docs:
+ parent: hugo-pipes
+ weight: 20
+weight: 20
+toc: true
+aliases: [/assets/]
+---
+
+## Find resources in assets
+
+This is about global and remote resources.
+
+global resource
- Asset files must be stored in the asset directory. This is `/assets` by default, but can be configured via the configuration file's `assetDir` key.
++: A file within the `assets` directory, or within any directory [mounted] to the `assets` directory.
+
+remote resource
+: A file on a remote server, accessible via HTTP or HTTPS.
+
+For `.Page` scoped resources, see the [page resources] section.
+
+[mounted]: /hugo-modules/configuration/#module-configuration-mounts
+[page resources]: /content-management/page-resources/
+
+## Get a resource
+
+In order to process an asset with Hugo Pipes, it must be retrieved as a resource.
+
+For global resources, use:
+
+- [`resources.ByType`](/functions/resources/bytype/)
+- [`resources.Get`](/functions/resources/get/)
+- [`resources.GetMatch`](/functions/resources/getmatch/)
+- [`resources.Match`](/functions/resources/match/)
+
+For remote resources, use:
+
+- [`resources.GetRemote`](/functions/resources/getremote/)
+
+See the [GoDoc Page](https://pkg.go.dev/github.com/gohugoio/hugo/tpl/resources) for the `resources` package for an up to date overview of all template functions in this namespace.
+
+## Copy a resource
+
+See the [`resources.Copy`](/functions/resources/copy/) function.
+
+## Asset directory
+
++Asset files must be stored in the asset directory. This is `assets` by default, but can be configured via the configuration file's `assetDir` key.
+
+## Asset publishing
+
+Hugo publishes assets to the `publishDir` (typically `public`) when you invoke `.Permalink`, `.RelPermalink`, or `.Publish`. You can use `.Content` to inline the asset.
+
+## Go Pipes
+
+For improved readability, the Hugo Pipes examples of this documentation will be written using [Go Pipes](/templates/introduction/#pipes):
+
+```go-html-template
+{{ $style := resources.Get "sass/main.scss" | css.Sass | resources.Minify | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.Permalink }}">
+```
+
+## Caching
+
+Hugo Pipes invocations are cached based on the entire *pipe chain*.
+
+An example of a pipe chain is:
+
+```go-html-template
+{{ $mainJs := resources.Get "js/main.js" | js.Build "main.js" | minify | fingerprint }}
+```
+
+The pipe chain is only invoked the first time it is encountered in a site build, and results are otherwise loaded from cache. As such, Hugo Pipes can be used in templates which are executed thousands or millions of times without negatively impacting the build performance.
--- /dev/null
-
+---
+title: JavaScript
+linkTitle: JavaScript building
+description: Bundle, transpile, tree shake, code split, and minify JavaScript resources.
+categories: [asset management]
+keywords: []
+menu:
+ docs:
+ parent: hugo-pipes
+ weight: 60
+weight: 60
+---
+
+See [JS functions](/functions/js/).
--- /dev/null
- 2. You cannot manipulate the values returned from the resource's methods. E.g. the `upper` in this example will not work as expected:
+---
+title: PostProcess
+description: Allows delaying of resource transformations to after the build.
+categories: [asset management]
+keywords: []
+menu:
+ docs:
+ parent: hugo-pipes
+ weight: 50
+weight: 50
+action:
+ aliases: []
+ returnType: postpub.PostPublishedResource
+ signatures: [resources.PostProcess RESOURCE]
+---
+
+## Usage
+
+Marking a resource with `resources.PostProcess` delays any transformations to after the build, typically because one or more of the steps in the transformation chain depends on the result of the build (e.g. files in `public`).
+
+A prime use case for this is [CSS purging with PostCSS](#css-purging-with-postcss).
+
+There are currently two limitations to this:
+
+1. This only works in `*.html` templates (i.e. templates that produces HTML files).
- The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [config/production](/getting-started/configuration/#configuration-directory).
++1. You cannot manipulate the values returned from the resource's methods. E.g. the `upper` in this example will not work as expected:
+
+ ```go-html-template
+ {{ $css := resources.Get "css/main.css" }}
+ {{ $css = $css | css.PostCSS | minify | fingerprint | resources.PostProcess }}
+ {{ $css.RelPermalink | upper }}
+ ```
+
+## CSS purging with PostCSS
+
+{{% note %}}
+There are several ways to set up CSS purging with PostCSS in Hugo. If you have a simple project, you should consider going the simpler route and drop the use of `resources.PostProcess` and just extract keywords from the templates. See the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/#app) for some examples.
+{{% /note %}}
+
- : The absolute path to the publish directory (the `public` directory). Note that the value will always point to a directory on disk even when running `hugo server` in memory mode. If you write to this folder from PostCSS when running the server, you could run the server with one of these flags:
++The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [`config/production`](/getting-started/configuration/#configuration-directory).
+
+{{< code-toggle file=hugo >}}
+[build.buildStats]
+ enable = true
+{{< /code-toggle >}}
+
+See the [configure build] documentation for details and options.
+
+[configure build]: /getting-started/configuration/#configure-build
+
+`postcss.config.js`
+
+```js
+const purgecss = require('@fullhuman/postcss-purgecss')({
+ content: [ './hugo_stats.json' ],
+ defaultExtractor: (content) => {
+ let els = JSON.parse(content).htmlElements;
+ return els.tags.concat(els.classes, els.ids);
+ }
+});
+
+module.exports = {
+ plugins: [
+ ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
+ ]
+ };
+```
+
+Note that in the example above, the "CSS purge step" will only be applied to the production build. This means that you need to do something like this in your head template to build and include your CSS:
+
+```go-html-template
+{{ $css := resources.Get "css/main.css" }}
+{{ $css = $css | css.PostCSS }}
+{{ if hugo.IsProduction }}
+{{ $css = $css | minify | fingerprint | resources.PostProcess }}
+{{ end }}
+<link href="{{ $css.RelPermalink }}" rel="stylesheet" />
+```
+
+## Hugo environment variables available in PostCSS
+
+These are the environment variables Hugo passes down to PostCSS (and Babel), which allows you do do `process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : []` and similar:
+
+PWD
+: The absolute path to the project working directory.
+
+HUGO_ENVIRONMENT
+: The value e.g. set with `hugo -e production` (defaults to `production` for `hugo` and `development` for `hugo server`).
+
+HUGO_PUBLISHDIR
++: The absolute path to the publish directory (the `public` directory). Note that the value will always point to a directory on disk even when running `hugo server` in memory mode. If you write to this directory from PostCSS when running the server, you could run the server with one of these flags:
+
+```sh
+hugo server --renderToDisk
+hugo server --renderStaticToDisk
+```
+
+Also, Hugo will add environment variables for all files mounted below `assets/_jsconfig`. A default mount will be set up with files in the project root matching this regexp: `(babel|postcss|tailwind)\.config\.js`.
+
+These will get environment variables named on the form `HUGO_FILE_:filename:` where `:filename:` is all upper case with periods replaced with underscore. This allows you to do this and similar:
+
+```js
+let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
+```
--- /dev/null
- [^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your resources directory to your repository.
+---
+title: ToCSS
+linkTitle: Transpile Sass to CSS
+description: Transpile Sass to CSS.
+categories: [asset management]
+keywords: []
+menu:
+ docs:
+ parent: hugo-pipes
+ returnType: resource.Resource
+ weight: 30
+weight: 30
+action:
+ aliases: [toCSS]
+ returnType: resource.Resource
+ signatures: ['css.Sass [OPTIONS] RESOURCE']
+toc: true
+aliases: [/hugo-pipes/transform-to-css/]
+---
+
+## Usage
+
+Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended and extended/deploy editions, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language.
+
+```go-html-template
+{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
+{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end }}
+```
+
+Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both.
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
+[indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax
+
+## Options
+
+transpiler
+: (`string`) The transpiler to use, either `libsass` (default) or `dartsass`. Hugo's extended and extended/deploy editions include the LibSass transpiler. To use the Dart Sass transpiler, see the [installation instructions](#dart-sass) below.
+
+targetPath
+: (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`.
+
+vars
+: (`map`) A map of key-value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/).
+
+```scss
+// LibSass
+@import "hugo:vars";
+
+// Dart Sass
+@use "hugo:vars" as v;
+```
+
+outputStyle
+: (`string`) Output styles available to LibSass include `nested` (default), `expanded`, `compact`, and `compressed`. Output styles available to Dart Sass include `expanded` (default) and `compressed`.
+
+precision
+: (`int`) Precision of floating point math. Not applicable to Dart Sass.
+
+enableSourceMap
+: (`bool`) If `true`, generates a source map.
+
+sourceMapIncludeSources
+: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass.
+
+includePaths
+: (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements.
+
+```go-html-template
+{{ $opts := dict
+ "transpiler" "dartsass"
+ "targetPath" "css/style.css"
+ "vars" site.Params.styles
+ "enableSourceMap" (not hugo.IsProduction)
+ "includePaths" (slice "node_modules/bootstrap/scss")
+}}
+{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end }}
+```
+
+## Dart Sass
+
+The extended version of Hugo includes [LibSass] to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of [Dart Sass].
+
+Use the latest features of the Sass language by installing Dart Sass in your development and production environments.
+
+### Installation overview
+
+Dart Sass is compatible with Hugo v0.114.0 and later.
+
+If you have been using Embedded Dart Sass[^1] with Hugo v0.113.0 and earlier, uninstall Embedded Dart Sass, then install Dart Sass. If you have installed both, Hugo will use Dart Sass.
+
+If you install Hugo as a [Snap package] there is no need to install Dart Sass. The Hugo Snap package includes Dart Sass.
+
+[^1]: In 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass.
+
+### Installing in a development environment
+
+When you install Dart Sass somewhere in your PATH, Hugo will find it.
+
+OS|Package manager|Site|Installation
+:--|:--|:--|:--
+Linux|Homebrew|[brew.sh]|`brew install sass/sass/sass`
+Linux|Snap|[snapcraft.io]|`sudo snap install dart-sass`
+macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass`
+Windows|Chocolatey|[chocolatey.org]|`choco install sass`
+Windows|Scoop|[scoop.sh]|`scoop install sass`
+
+You may also install [prebuilt binaries] for Linux, macOS, and Windows.
+
+Run `hugo env` to list the active transpilers.
+
+### Installing in a production environment
+
+For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries.
+
- HUGO_VERSION: 0.137.1
- DART_SASS_VERSION: 1.80.6
++[^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your `resources` directory to your repository.
+
+#### GitHub Pages
+
+To install Dart Sass for your builds on GitHub Pages, add this step to the GitHub Pages workflow file:
+
+```yaml
+- name: Install Dart Sass
+ run: sudo snap install dart-sass
+```
+
+If you are using GitHub Pages for the first time with your repository, GitHub provides a [starter workflow] for Hugo that includes Dart Sass. This is the simplest way to get started.
+
+#### GitLab Pages
+
+To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file should look something like this:
+
+```yaml
+variables:
- HUGO_VERSION = "0.137.1"
- DART_SASS_VERSION = "1.80.6"
++ HUGO_VERSION: 0.141.0
++ DART_SASS_VERSION: 1.83.4
+ GIT_DEPTH: 0
+ GIT_STRATEGY: clone
+ GIT_SUBMODULE_STRATEGY: recursive
+ TZ: America/Los_Angeles
+image:
+ name: golang:1.20-buster
+pages:
+ script:
+ # Install Dart Sass
+ - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+ - cp -r dart-sass/* /usr/local/bin
+ - rm -rf dart-sass*
+ # Install Hugo
+ - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ - apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+ # Build
+ - hugo --gc --minify
+ artifacts:
+ paths:
+ - public
+ rules:
+ - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+```
+
+#### Netlify
+
+To install Dart Sass for your builds on Netlify, the `netlify.toml` file should look something like this:
+
+```toml
+[build.environment]
++HUGO_VERSION = "0.141.0"
++DART_SASS_VERSION = "1.83.4"
++NODE_VERSION = "22"
+TZ = "America/Los_Angeles"
+
+[build]
+publish = "public"
+command = """\
+ curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \
+ export PATH=/opt/build/repo/dart-sass:$PATH && \
+ hugo --gc --minify \
+ """
+```
+
+### Example
+
+To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `css.Sass`. For example:
+
+```go-html-template
+{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }}
+{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ end }}
+```
+
+### Miscellaneous
+
+If you build Hugo from source and run `mage test -v`, the test will fail if you install Dart Sass as a Snap package. This is due to the Snap package's strict confinement model.
+
+[brew.sh]: https://brew.sh/
+[chocolatey.org]: https://community.chocolatey.org/packages/sass
+[ci/cd]: https://en.wikipedia.org/wiki/CI/CD
+[dart sass]: https://sass-lang.com/dart-sass
+[libsass]: https://sass-lang.com/libsass
+[prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest
+[scoop.sh]: https://scoop.sh/#/apps?q=sass
+[site configuration]: /getting-started/configuration/#configure-build
+[snap package]: /installation/linux/#snap
+[snapcraft.io]: https://snapcraft.io/dart-sass
+[starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml
--- /dev/null
- 2. Install using the Paludis package manager:
-
+---
+title: Linux
+description: Install Hugo on Linux.
+categories: [installation]
+keywords: []
+menu:
+ docs:
+ parent: installation
+ weight: 30
+weight: 30
+toc: true
+---
+
+## Editions
+
+{{% include "installation/_common/01-editions.md" %}}
+
+Unless your specific deployment needs require the extended/deploy edition, we recommend the extended edition.
+
+{{% include "installation/_common/02-prerequisites.md" %}}
+
+{{% include "installation/_common/03-prebuilt-binaries.md" %}}
+
+## Package managers
+
+### Snap
+
+[Snap] is a free and open-source package manager for Linux. Available for [most distributions], snap packages are simple to install and are automatically updated.
+
+The Hugo snap package is [strictly confined]. Strictly confined snaps run in complete isolation, up to a minimal access level that’s deemed always safe. The sites you create and build must be located within your home directory, or on removable media.
+
+To install the extended edition of Hugo:
+
+```sh
+sudo snap install hugo
+```
+
+To enable or revoke access to removable media:
+
+```sh
+sudo snap connect hugo:removable-media
+sudo snap disconnect hugo:removable-media
+```
+
+To enable or revoke access to SSH keys:
+
+```sh
+sudo snap connect hugo:ssh-keys
+sudo snap disconnect hugo:ssh-keys
+```
+
+[most distributions]: https://snapcraft.io/docs/installing-snapd
+[strictly confined]: https://snapcraft.io/docs/snap-confinement
+[Snap]: https://snapcraft.io/
+
+{{% include "installation/_common/homebrew.md" %}}
+
+## Repository packages
+
+Most Linux distributions maintain a repository for commonly installed applications.
+
+{{% 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 %}}
+
+### Alpine Linux
+
+To install the extended edition of Hugo on [Alpine Linux]:
+
+```sh
+doas apk add --no-cache --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community hugo
+```
+
+[Alpine Linux]: https://alpinelinux.org/
+
+### Arch Linux
+
+Derivatives of the [Arch Linux] distribution of Linux include [EndeavourOS], [Garuda Linux], [Manjaro], and others. To install the extended edition of Hugo:
+
+```sh
+sudo pacman -S hugo
+```
+
+[Arch Linux]: https://archlinux.org/
+[EndeavourOS]: https://endeavouros.com/
+[Manjaro]: https://manjaro.org/
+[Garuda Linux]: https://garudalinux.org/
+
+### Debian
+
+Derivatives of the [Debian] distribution of Linux include [elementary OS], [KDE neon], [Linux Lite], [Linux Mint], [MX Linux], [Pop!_OS], [Ubuntu], [Zorin OS], and others. To install the extended edition of Hugo:
+
+```sh
+sudo apt install hugo
+```
+
+You can also download Debian packages from the [latest release] page.
+
+[Debian]: https://www.debian.org/
+[Exherbo]: https://www.exherbolinux.org/
+[elementary OS]: https://elementary.io/
+[KDE neon]: https://neon.kde.org/
+[Linux Lite]: https://www.linuxliteos.com/
+[Linux Mint]: https://linuxmint.com/
+[MX Linux]: https://mxlinux.org/
+[Pop!_OS]: https://pop.system76.com/
+[Ubuntu]: https://ubuntu.com/
+[Zorin OS]: https://zorin.com/os/
+
+### Exherbo
+
+To install the extended edition of Hugo on [Exherbo]:
+
+1. Add this line to /etc/paludis/options.conf:
+
+ ```text
+ www-apps/hugo extended
+ ```
+
- 2. Build using the Portage package manager:
++1. Install using the Paludis package manager:
+
+ ```sh
+ cave resolve -x repository/heirecka
+ cave resolve -x hugo
+ ```
+
+### Fedora
+
+Derivatives of the [Fedora] distribution of Linux include [CentOS], [Red Hat Enterprise Linux], and others. To install the extended edition of Hugo:
+
+```sh
+sudo dnf install hugo
+```
+
+[CentOS]: https://www.centos.org/
+[Fedora]: https://getfedora.org/
+[Red Hat Enterprise Linux]: https://www.redhat.com/
+
+### Gentoo
+
+Derivatives of the [Gentoo] distribution of Linux include [Calculate Linux], [Funtoo], and others. To install the extended edition of Hugo:
+
+1. Specify the `extended` [USE] flag in /etc/portage/package.use/hugo:
+
+ ```text
+ www-apps/hugo extended
+ ```
+
++1. Build using the Portage package manager:
+
+ ```sh
+ sudo emerge www-apps/hugo
+ ```
+
+[Calculate Linux]: https://www.calculate-linux.org/
+[Funtoo]: https://www.funtoo.org/
+[Gentoo]: https://www.gentoo.org/
+[USE]: https://packages.gentoo.org/packages/www-apps/hugo
+
+### NixOS
+
+The NixOS distribution of Linux includes Hugo in its package repository. To install the extended edition of Hugo:
+
+```sh
+nix-env -iA nixos.hugo
+```
+
+### openSUSE
+
+Derivatives of the [openSUSE] distribution of Linux include [GeckoLinux], [Linux Karmada], and others. To install the extended edition of Hugo:
+
+```sh
+sudo zypper install hugo
+```
+
+[GeckoLinux]: https://geckolinux.github.io/
+[Linux Karmada]: https://linuxkamarada.com/
+[openSUSE]: https://www.opensuse.org/
+
+### Solus
+
+The [Solus] distribution of Linux includes Hugo in its package repository. To install the extended edition of Hugo:
+
+```sh
+sudo eopkg install hugo
+```
+
+[Solus]: https://getsol.us/
+
+### Void Linux
+
+To install the extended edition of Hugo on [Void Linux]:
+
+```sh
+sudo xbps-install -S hugo
+```
+
+[Void Linux]: https://voidlinux.org/
+
+{{% include "installation/_common/04-build-from-source.md" %}}
+
+## Comparison
+
+||Prebuilt binaries|Package managers|Repository packages|Build from source
+:--|:--:|:--:|:--:|:--:
+Easy to install?|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:
+Easy to upgrade?|:heavy_check_mark:|:heavy_check_mark:|varies|:heavy_check_mark:
+Easy to downgrade?|:heavy_check_mark:|:heavy_check_mark: [^1]|varies|:heavy_check_mark:
+Automatic updates?|:x:|varies [^2]|:x:|:x:
+Latest version available?|:heavy_check_mark:|:heavy_check_mark:|varies|:heavy_check_mark:
+
+[^1]: Easy if a previous version is still installed.
+[^2]: Snap packages are automatically updated. Homebrew requires advanced configuration.
--- /dev/null
-
+---
+title: PageRef
+description: Returns the `pageRef` property of the given menu entry.
+categories: []
+keywords: []
+action:
+ related:
+ - /methods/menu-entry/URL
+ returnType: string
+ signatures: [MENUENTRY.PageRef]
+toc: true
+---
+
+The use case for this method is rare.
+
+In almost also scenarios you should use the [`URL`] method instead.
+
+## Explanation
+
+If you specify a `pageRef` property when [defining a menu entry] in your site configuration, Hugo looks for a matching page when rendering the entry.
+
+If a matching page is found:
+
+- The [`URL`] method returns the page's relative permalink
+- The [`Page`] method returns the corresponding `Page` object
+- The [`HasMenuCurrent`] and [`IsMenuCurrent`] methods on a `Page` object return the expected values
+
+If a matching page is not found:
+
+- The [`URL`] method returns the entry's `url` property if set, else an empty string
+- The [`Page`] method returns nil
+- The [`HasMenuCurrent`] and [`IsMenuCurrent`] methods on a `Page` object return `false`
+
+{{% note %}}
+In almost also scenarios you should use the [`URL`] method instead.
+
+[`URL`]: /methods/menu-entry/url/
+{{% /note %}}
+
+[defining a menu entry]: /content-management/menus/#define-in-site-configuration
+[`Page`]: /methods/menu-entry/page/
+[`URL`]: /methods/menu-entry/url/
+[`IsMenuCurrent`]: /methods/page/ismenucurrent/
+[`HasMenuCurrent`]: /methods/page/hasmenucurrent/
+[`RelPermalink`]: /methods/page/relpermalink/
+
+## Example
+
+This example is contrived.
+
+{{% note %}}
+In almost also scenarios you should use the [`URL`] method instead.
+
+[`URL`]: /methods/menu-entry/url/
+{{% /note %}}
+
-
+Consider this content structure:
+
+```text
+content/
+├── products.md
+└── _index.md
+```
+
+And this menu definition:
+
+{{< code-toggle file=hugo >}}
+[[menus.main]]
+name = 'Products'
+pageRef = '/products'
+weight = 10
+[[menus.main]]
+name = 'Services'
+pageRef = '/services'
+weight = 20
+{{< /code-toggle >}}
+
+With this template code:
+
+{{< code file=layouts/partials/menu.html >}}
+<ul>
+ {{ range .Site.Menus.main }}
+ <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+Hugo render this HTML:
+
+```html
+<ul>
+ <li><a href="/products/">Products</a></li>
+ <li><a href="">Services</a></li>
+</ul>
+```
+
+In the above note that the `href` attribute of the second `anchor` element is blank because Hugo was unable to find the "services" page.
+
+With this template code:
+
+{{< code file=layouts/partials/menu.html >}}
+<ul>
+ {{ range .Site.Menus.main }}
+ <li><a href="{{ or .URL .PageRef }}">{{ .Name }}</a></li>
+ {{ end }}
+</ul>
+{{< /code >}}
+
+Hugo renders this HTML:
+
+```html
+<ul>
+ <li><a href="/products/">Products</a></li>
+ <li><a href="/services">Services</a></li>
+</ul>
+```
+
+In the above note that Hugo populates the `href` attribute of the second `anchor` element with the `pageRef` property as defined in the site configuration because the template code falls back to the `PageRef` method.
--- /dev/null
-
+---
+title: Params
+description: Returns the `params` property of the given menu entry.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: maps.Params
+ signatures: [MENUENTRY.Params]
+---
+
+When you define menu entries [in site configuration] or [in front matter], you can include a `params` key to attach additional information to the entry. For example:
+
+{{< code-toggle file=hugo >}}
+[[menus.main]]
+name = 'About'
+pageRef = '/about'
+weight = 10
+
+[[menus.main]]
+name = 'Contact'
+pageRef = '/contact'
+weight = 20
+
+[[menus.main]]
+name = 'Hugo'
+url = 'https://gohugo.io'
+weight = 30
+[menus.main.params]
+ rel = 'external'
+{{< /code-toggle >}}
+
+With this template:
+
+```go-html-template
+<ul>
+ {{ range .Site.Menus.main }}
+ <li>
+ <a href="{{ .URL }}" {{ with .Params.rel }}rel="{{ . }}"{{ end }}>
+ {{ .Name }}
+ </a>
+ </li>
+ {{ end }}
+</ul>
+```
+
+Hugo renders:
+
+```html
+<ul>
+ <li><a href="/about/">About</a></li>
+ <li><a href="/contact/">Contact</a></li>
+ <li><a href="https://gohugo.io" rel="external">Hugo</a></li>
+</ul>
+```
+
+See the [menu templates] section for more information.
+
+[menu templates]: /templates/menu/#menu-entry-parameters
+[in front matter]: /content-management/menus/#define-in-front-matter
+[in site configuration]: /content-management/menus/
--- /dev/null
-
+---
+title: URL
+description: Returns the relative permalink of the page associated with the given menu entry, else its `url` property.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: string
+ signatures: [MENUENTRY.URL]
+---
+
+For menu entries associated with a page, the `URL` method returns the page's [`RelPermalink`], otherwise it returns the entry's `url` property.
+
+```go-html-template
+<ul>
+ {{ range .Site.Menus.main }}
+ <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+ {{ end }}
+</ul>
+```
+
+[`RelPermalink`]: /methods/page/relpermalink/
--- /dev/null
- The `ByWeight` method returns the given menu with its entries sorted by [`weight`], then by `name`, then by `identifier`. This is the default sort order.
-
- [`weight`]: /getting-started/glossary/#weight
+---
+title: ByWeight
+description: Returns the given menu with its entries sorted by weight, then by name, then by identifier.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: navigation.Menu
+ signatures: [MENU.ByWeight]
+---
+
++The `ByWeight` method returns the given menu with its entries sorted by [`weight`](g), then by `name`, then by `identifier`. This is the default sort order.
+
+Consider this menu definition:
+
+{{< code-toggle file=hugo >}}
+[[menus.main]]
+identifier = 'about'
+name = 'About'
+pageRef = '/about'
+weight = 20
+
+[[menus.main]]
+identifier = 'services'
+name = 'Services'
+pageRef = '/services'
+weight = 10
+
+[[menus.main]]
+identifier = 'contact'
+name = 'Contact'
+pageRef = '/contact'
+weight = 30
+{{< /code-toggle >}}
+
+To sort the entries by `weight`, then by `name`, then by `identifier`:
+
+```go-html-template
+<ul>
+ {{ range .Site.Menus.main.ByWeight }}
+ <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Hugo renders this to:
+
+```html
+<ul>
+ <li><a href="/services/">Services</a></li>
+ <li><a href="/about/">About</a></li>
+ <li><a href="/contact">Contact</a></li>
+</ul>
+```
+
+{{% 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 %}}
+
+You can also sort menu entries using the [`sort`] function. For example, to sort by `weight` in descending order:
+
+```go-html-template
+<ul>
+ {{ range sort .Site.Menus.main "Weight" "desc" }}
+ <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+ {{ end }}
+</ul>
+```
+
+When using the sort function with menu entries, specify any of the following keys: `Identifier`, `Name`, `Parent`, `Post`, `Pre`, `Title`, `URL`, or `Weight`.
+
+[`sort`]: /functions/collections/sort/
--- /dev/null
- {{% include "methods/page/_common/output-format-definition.md" %}}
+---
+title: AlternativeOutputFormats
+description: Returns a slice of OutputFormat objects, excluding the current output format, each representing one of the output formats enabled for the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/OutputFormats
+ returnType: page.OutputFormats
+ signatures: [PAGE.AlternativeOutputFormats]
+---
+
++{{% glossary-term "output format" %}}
+
+The `AlternativeOutputFormats` method on a `Page` object returns a slice of `OutputFormat` objects, excluding the current output format, each representing one of the output formats enabled for the given page.. See [details](/templates/output-formats/).
+
+## Methods
+
+{{% include "methods/page/_common/output-format-methods.md" %}}
+
+## Example
+
+Generate a `link` element in the `<head>` of each page for each of the alternative output formats:
+
+```go-html-template
+<head>
+ ...
+ {{ $title := printf "%s | %s" .Title site.Title }}
+ {{ if .IsHome }}
+ {{ $title = site.Title }}
+ {{ end }}
+ {{ range .AlternativeOutputFormats -}}
+ {{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink $title | safeHTML }}
+ {{ end }}
+ ...
+</head>
+```
+
+On the site's home page, Hugo renders this to:
+
+```html
+<link rel="alternate" type="application/rss+xml" href="https://example.org/index.xml" title="ABC Widgets, Inc.">
+```
--- /dev/null
- A page bundle is a directory that encapsulates both content and associated [resources]. There are two types of page bundles: [leaf bundles] and [branch bundles]. See [details](/content-management/page-bundles/).
+---
+title: BundleType
+description: Returns the bundle type of the given page, or an empty string if the page is not a page bundle.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: string
+ signatures: [PAGE.BundleType]
+---
+
-
- [resources]: /getting-started/glossary/#resource
- [leaf bundles]: /getting-started/glossary/#leaf-bundle
- [branch bundles]: /getting-started/glossary/#branch-bundle
++A page bundle is a directory that encapsulates both content and associated [resources](g). There are two types of page bundles: [leaf bundles](g) and [branch bundles](g). See [details](/content-management/page-bundles/).
+
+The `BundleType` method on a `Page` object returns `branch` for branch bundles, `leaf` for leaf bundles, and an empty string if the page is not a page bundle.
+
+```text
+content/
+├── films/
+│ ├── film-1/
+│ │ ├── a.jpg
+│ │ └── index.md <-- leaf bundle
+│ ├── _index.md <-- branch bundle
+│ ├── b.jpg
+│ ├── film-2.md
+│ └── film-3.md
+└── _index.md <-- branch bundle
+```
+
+To get the value within a template:
+
+```go-html-template
+{{ .BundleType }}
+```
--- /dev/null
- The current section of a [section] page, [taxonomy] page, [term] page, or the home page, is itself.
-
- [section]: /getting-started/glossary/#section
- [taxonomy]: /getting-started/glossary/#taxonomy
- [term]: /getting-started/glossary/#term
+---
+title: CurrentSection
+description: Returns the Page object of the section in which the given page resides.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Ancestors
+ - methods/page/FirstSection
+ - methods/page/InSection
+ - methods/page/IsAncestor
+ - methods/page/IsDescendant
+ - methods/page/Parent
+ - methods/page/Sections
+ returnType: page.Page
+ signatures: [PAGE.CurrentSection]
+---
+
+{{% include "methods/page/_common/definition-of-section.md" %}}
+
+{{% note %}}
++The current section of a [section page](g), [taxonomy page](g), [term page](g), or the home page, is itself.
+{{% /note %}}
+
+Consider this content structure:
+
+```text
+content/
+├── auctions/
+│ ├── 2023-11/
+│ │ ├── _index.md <-- current section: 2023-11
+│ │ ├── auction-1.md
+│ │ └── auction-2.md <-- current section: 2023-11
+│ ├── 2023-12/
+│ │ ├── _index.md
+│ │ ├── auction-3.md
+│ │ └── auction-4.md
+│ ├── _index.md <-- current section: auctions
+│ ├── bidding.md
+│ └── payment.md <-- current section: auctions
+├── books/
+│ ├── _index.md <-- current section: books
+│ ├── book-1.md
+│ └── book-2.md <-- current section: books
+├── films/
+│ ├── _index.md <-- current section: films
+│ ├── film-1.md
+│ └── film-2.md <-- current section: films
+└── _index.md <-- current section: home
+```
+
+To create a link to the current section page:
+
+```go-html-template
+<a href="{{ .CurrentSection.RelPermalink }}">{{ .CurrentSection.LinkTitle }}</a>
+```
--- /dev/null
- The `Data` method on a `Page` object returns a unique data object for each [page kind].
-
- [page kind]: /getting-started/glossary/#page-kind
+---
+title: Data
+description: Returns a unique data object for each page kind.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: page.Data
+ signatures: [PAGE.Data]
+toc: true
+---
+
- The `Data` method is only useful within [taxonomy] and [term] templates.
++The `Data` method on a `Page` object returns a unique data object for each [page kind](g).
+
+{{% note %}}
- [term]: /getting-started/glossary/#term
- [taxonomy]: /getting-started/glossary/#taxonomy
++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`]
+
+[`Pages`]: /methods/page/pages/
+[`RegularPages`]: /methods/page/regularpages/
+[`RegularPagesRecursive`]: /methods/page/regularpagesrecursive/
- : (`page.Taxonomy`) Returns the `Taxonomy` object, consisting of a map of terms and the [weighted pages] associated with each term.
+{{% /note %}}
+
+The examples that follow are based on this site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+genre = 'genres'
+author = 'authors'
+{{< /code-toggle >}}
+
+And this content structure:
+
+```text
+content/
+├── books/
+│ ├── and-then-there-were-none.md --> genres: suspense
+│ ├── death-on-the-nile.md --> genres: suspense
+│ └── jamaica-inn.md --> genres: suspense, romance
+│ └── pride-and-prejudice.md --> genres: romance
+└── _index.md
+```
+
+## In a taxonomy template
+
+Use these methods on the `Data` object within a taxonomy template.
+
+Singular
+: (`string`) Returns the singular name of the taxonomy.
+
+```go-html-template
+{{ .Data.Singular }} → genre
+```
+
+Plural
+: (`string`) Returns the plural name of the taxonomy.
+
+```go-html-template
+{{ .Data.Plural }} → genres
+```
+
+Terms
- [weighted pages]: /getting-started/glossary/#weighted-page
++: (`page.Taxonomy`) Returns the `Taxonomy` object, consisting of a map of terms and the [weighted pages](g) associated with each term.
+
+```go-html-template
+{{ $taxonomyObject := .Data.Terms }}
+```
+
+{{% 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 %}}
+
+Learn more about [taxonomy templates].
+
+## In a term template
+
+Use these methods on the `Data` object within a term template.
+
+Singular
+: (`string`) Returns the singular name of the taxonomy.
+
+```go-html-template
+{{ .Data.Singular }} → genre
+```
+
+Plural
+: (`string`) Returns the plural name of the taxonomy.
+
+```go-html-template
+{{ .Data.Plural }} → genres
+```
+
+Term
+: (`string`) Returns the name of the term.
+
+```go-html-template
+{{ .Data.Term }} → suspense
+```
+
+Learn more about [term templates].
+
+[taxonomy templates]: /templates/types/#taxonomy
+[term templates]: /templates/types/#term
--- /dev/null
- By default, not all pages are backed by a file, including top level [section] pages, [taxonomy] pages, and [term] pages. By definition, you cannot retrieve file information when the file does not exist.
+---
+title: File
+description: For pages backed by a file, returns file information for the given page.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: hugolib.fileInfo
+ signatures: [PAGE.File]
+toc: true
+---
+
- To back one of the pages above with a file, create an _index.md file in the corresponding directory. For example:
++By default, not all pages are backed by a file, including top level [section pages](g), [taxonomy pages](g), and [term pages](g). By definition, you cannot retrieve file information when the file does not exist.
+
-
- [section]: /getting-started/glossary/#section
- [taxonomy]: /getting-started/glossary/#taxonomy
- [term]: /getting-started/glossary/#term
++To back one of the pages above with a file, create an `_index.md` file in the corresponding directory. For example:
+
+```text
+content/
+└── books/
+ ├── _index.md <-- the top level section page
+ ├── book-1.md
+ └── book-2.md
+```
+
+{{% note %}}
+Code defensively by verifying file existence as shown in the examples below.
+{{% /note %}}
+
+## Methods
+
+{{% note %}}
+The path separators (slash or backslash) in `Path`, `Dir`, and `Filename` depend on the operating system.
+{{% /note %}}
+
+###### BaseFileName
+
+(`string`) The file name, excluding the extension.
+
+```go-html-template
+{{ with .File }}
+ {{ .BaseFileName }}
+{{ end }}
+```
+
+###### ContentBaseName
+
+(`string`) If the page is a branch or leaf bundle, the name of the containing directory, else the `TranslationBaseName`.
+
+```go-html-template
+{{ with .File }}
+ {{ .ContentBaseName }}
+{{ end }}
+```
+
+###### Dir
+
+(`string`) The file path, excluding the file name, relative to the `content` directory.
+
+```go-html-template
+{{ with .File }}
+ {{ .Dir }}
+{{ end }}
+```
+
+###### Ext
+
+(`string`) The file extension.
+
+```go-html-template
+{{ with .File }}
+ {{ .Ext }}
+{{ end }}
+```
+
+###### Filename
+
+(`string`) The absolute file path.
+
+```go-html-template
+{{ with .File }}
+ {{ .Filename }}
+{{ end }}
+```
+
+###### IsContentAdapter
+
+{{< new-in 0.126.0 >}}
+
+(`bool`) Reports whether the file is a [content adapter].
+
+[content adapter]: /content-management/content-adapters/
+
+```go-html-template
+{{ with .File }}
+ {{ .IsContentAdapter }}
+{{ end }}
+```
+
+###### LogicalName
+
+(`string`) The file name.
+
+```go-html-template
+{{ with .File }}
+ {{ .LogicalName }}
+{{ end }}
+```
+
+###### Path
+
+(`string`) The file path, relative to the `content` directory.
+
+```go-html-template
+{{ with .File }}
+ {{ .Path }}
+{{ end }}
+```
+
+###### Section
+
+(`string`) The name of the top level section in which the file resides.
+
+```go-html-template
+{{ with .File }}
+ {{ .Section }}
+{{ end }}
+```
+
+###### TranslationBaseName
+
+(`string`) The file name, excluding the extension and language identifier.
+
+```go-html-template
+{{ with .File }}
+ {{ .TranslationBaseName }}
+{{ end }}
+```
+
+###### UniqueID
+
+(`string`) The MD5 hash of `.File.Path`.
+
+```go-html-template
+{{ with .File }}
+ {{ .UniqueID }}
+{{ end }}
+```
+
+## Examples
+
+Consider this content structure in a multilingual project:
+
+```text
+content/
+├── news/
+│ ├── b/
+│ │ ├── index.de.md <-- leaf bundle
+│ │ └── index.en.md <-- leaf bundle
+│ ├── a.de.md <-- regular content
+│ ├── a.en.md <-- regular content
+│ ├── _index.de.md <-- branch bundle
+│ └── _index.en.md <-- branch bundle
+├── _index.de.md
+└── _index.en.md
+```
+
+With the English language site:
+
+ |regular content|leaf bundle|branch bundle
+:--|:--|:--|:--
+BaseFileName|a.en|index.en|_index.en
+ContentBaseName|a|b|news
+Dir|news/|news/b/|news/
+Ext|md|md|md
+Filename|/home/user/...|/home/user/...|/home/user/...
+IsContentAdapter|false|false|false
+LogicalName|a.en.md|index.en.md|_index.en.md
+Path|news/a.en.md|news/b/index.en.md|news/_index.en.md
+Section|news|news|news
+TranslationBaseName|a|index|_index
+UniqueID|15be14b...|186868f...|7d9159d...
+
+## Defensive coding
+
+Some of the pages on a site may not be backed by a file. For example:
+
+- Top level section pages
+- Taxonomy pages
+- Term pages
+
+Without a backing file, Hugo will throw an error if you attempt to access a `.File` property. To code defensively, first check for file existence:
+
+```go-html-template
+{{ with .File }}
+ {{ .ContentBaseName }}
+{{ end }}
+```
--- /dev/null
- {{< new-in 0.111.0 >}}
-
- In a URL, whether absolute or relative, the [fragment] links to an `id` attribute of an HTML element on the page.
+---
+title: Fragments
+description: Returns a data structure of the fragments in the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/TableOfContents
+ returnType: tableofcontents.Fragments
+ signatures: [PAGE.Fragments]
+toc: true
+---
+
- Hugo assigns an `id` attribute to each Markdown [ATX] and [setext] heading within the page content. You can override the `id` with a [Markdown attribute] as needed. This creates the relationship between an entry in the [table of contents] (TOC) and a heading on the page.
++In a URL, whether absolute or relative, the [fragment](g) links to an `id` attribute of an HTML element on the page.
+
+```text
+/articles/article-1#section-2
+------------------- ---------
+ path fragment
+```
+
- Use the `Fragments` method on a `Page` object to create a table of contents with the `Fragments.ToHTML` method, or by [walking] the `Fragments.Map` data structure.
++Hugo assigns an `id` attribute to each Markdown [ATX] and [setext] heading within the page content. You can override the `id` with a [Markdown attribute](g) as needed. This creates the relationship between an entry in the [table of contents] (TOC) and a heading on the page.
+
-
++Use the `Fragments` method on a `Page` object to create a table of contents with the `Fragments.ToHTML` method, or by [walking](g) the `Fragments.Map` data structure.
+
+## Methods
+
+Headings
+: (`slice`) A slice of maps of all headings on the page, with first-level keys for each heading. Each map contains the following keys: `ID`, `Level`, `Title` and `Headings`. To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump .Fragments.Headings }}</pre>
+```
+
- : (`bool`) Reports whether one or more headings on the page has the given `id` attribute, useful for validating fragments within a link [render hook].
+HeadingsMap
+: (`map`) A nested map of all headings on the page. Each map contains the following keys: `ID`, `Level`, `Title` and `Headings`. To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump .Fragments.HeadingsMap }}</pre>
+```
+
+Identifiers
+: (`slice`) A slice containing the `id` of each heading on the page. To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump .Fragments.Identifiers }}</pre>
+```
+
+Identifiers.Contains ID
- [fragment]: /getting-started/glossary/#fragment
- [markdown attribute]: /getting-started/glossary/#markdown-attribute
++: (`bool`) Reports whether one or more headings on the page has the given `id` attribute, useful for validating fragments within a link [render hook](g).
+
+```go-html-template
+{{ .Fragments.Identifiers.Contains "section-2" }} → true
+```
+
+Identifiers.Count ID
+: (`int`) The number of headings on a page with the given `id` attribute, useful for detecting duplicates.
+
+```go-html-template
+{{ .Fragments.Identifiers.Count "section-2" }} → 1
+```
+
+ToHTML
+: (`template.HTML`) Returns a TOC as a nested list, either ordered or unordered, identical to the HTML returned by the [`TableOfContents`] method. This method take three arguments: the start level (`int`), the end level (`int`), and a boolean (`true` to return an ordered list, `false` to return an unordered list).
+
+Use this method when you want to control the start level, end level, or list type independently from the table of contents settings in your site configuration.
+
+```go-html-template
+{{ $startLevel := 2 }}
+{{ $endLevel := 3 }}
+{{ $ordered := true }}
+{{ .Fragments.ToHTML $startLevel $endLevel $ordered }}
+```
+
+Hugo renders this to:
+
+```html
+<nav id="TableOfContents">
+ <ol>
+ <li><a href="#section-1">Section 1</a>
+ <ol>
+ <li><a href="#section-11">Section 1.1</a></li>
+ <li><a href="#section-12">Section 1.2</a></li>
+ </ol>
+ </li>
+ <li><a href="#section-2">Section 2</a></li>
+ </ol>
+</nav>
+```
+
+{{% 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.
+{{% /note %}}
+
+[atx]: https://spec.commonmark.org/0.30/#atx-headings
- [walking]: /getting-started/glossary/#walk
+[setext]: https://spec.commonmark.org/0.30/#setext-headings
+[table of contents]: /methods/page/tableofcontents/
- [render hook]: /getting-started/glossary/#render-hook
+[`tableofcontents`]: /methods/page/tableofcontents/
--- /dev/null
- When using the `GetPage` method on the `Page` object, specify a path relative to the current directory or relative to the content directory.
+---
+title: GetPage
+description: Returns a Page object from the given path.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/site/GetPage
+ returnType: page.Page
+ signatures: [PAGE.GetPage PATH]
+aliases: [/functions/getpage]
+---
+
+The `GetPage` method is also available on a `Site` object. See [details].
+
+[details]: /methods/site/getpage/
+
++When using the `GetPage` method on the `Page` object, specify a path relative to the current directory or relative to the `content` directory.
+
+If Hugo cannot resolve the path to a page, the method returns nil. If the path is ambiguous, Hugo throws an error and fails the build.
+
+Consider this content structure:
+
+```text
+content/
+├── works/
+│ ├── paintings/
+│ │ ├── _index.md
+│ │ ├── starry-night.md
+│ │ └── the-mona-lisa.md
+│ ├── sculptures/
+│ │ ├── _index.md
+│ │ ├── david.md
+│ │ └── the-thinker.md
+│ └── _index.md
+└── _index.md
+```
+
+The examples below depict the result of rendering works/paintings/the-mona-lisa.md:
+
+{{< code file=layouts/works/single.html >}}
+{{ with .GetPage "starry-night" }}
+ {{ .Title }} → Starry Night
+{{ end }}
+
+{{ with .GetPage "./starry-night" }}
+ {{ .Title }} → Starry Night
+{{ end }}
+
+{{ with .GetPage "../paintings/starry-night" }}
+ {{ .Title }} → Starry Night
+{{ end }}
+
+{{ with .GetPage "/works/paintings/starry-night" }}
+ {{ .Title }} → Starry Night
+{{ end }}
+
+{{ with .GetPage "../sculptures/david" }}
+ {{ .Title }} → David
+{{ end }}
+
+{{ with .GetPage "/works/sculptures/david" }}
+ {{ .Title }} → David
+{{ end }}
+{{< /code >}}
--- /dev/null
- Inside of the `with` block, the [context] (the dot) is the section `Page` object, not the `Page` object passed into the template. If we were to use this syntax:
+---
+title: InSection
+description: Reports whether the given page is in the given section.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Ancestors
+ - methods/page/CurrentSection
+ - methods/page/FirstSection
+ - methods/page/IsAncestor
+ - methods/page/IsDescendant
+ - methods/page/Parent
+ - methods/page/Sections
+ returnType: bool
+ signatures: [PAGE.InSection SECTION]
+toc: true
+---
+
+The `InSection` method on a `Page` object reports whether the given page is in the given section. Note that the method returns `true` when comparing a page to a sibling.
+
+{{% include "methods/page/_common/definition-of-section.md" %}}
+
+With this content structure:
+
+```text
+content/
+├── auctions/
+│ ├── 2023-11/
+│ │ ├── _index.md
+│ │ ├── auction-1.md
+│ │ └── auction-2.md
+│ ├── 2023-12/
+│ │ ├── _index.md
+│ │ ├── auction-3.md
+│ │ └── auction-4.md
+│ ├── _index.md
+│ ├── bidding.md
+│ └── payment.md
+└── _index.md
+```
+
+When rendering the "auction-1" page:
+
+```go-html-template
+{{ with .Site.GetPage "/" }}
+ {{ $.InSection . }} → false
+{{ end }}
+
+{{ with .Site.GetPage "/auctions" }}
+ {{ $.InSection . }} → false
+{{ end }}
+
+{{ with .Site.GetPage "/auctions/2023-11" }}
+ {{ $.InSection . }} → true
+{{ end }}
+
+{{ with .Site.GetPage "/auctions/2023-11/auction-2" }}
+ {{ $.InSection . }} → true
+{{ end }}
+```
+
+In the examples above we are coding defensively using the [`with`] statement, returning nothing if the page does not exist. By adding an [`else`] clause we can do some error reporting:
+
+```go-html-template
+{{ $path := "/auctions/2023-11" }}
+{{ with .Site.GetPage $path }}
+ {{ $.InSection . }} → true
+{{ else }}
+ {{ errorf "Unable to find the section with path %s" $path }}
+{{ end }}
+ ```
+
+## Understanding context
+
- [context]: /getting-started/glossary/#context
++Inside of the `with` block, the [context](g) (the dot) is the section `Page` object, not the `Page` object passed into the template. If we were to use this syntax:
+
+```go-html-template
+{{ with .Site.GetPage "/auctions" }}
+ {{ .InSection . }} → true
+{{ end }}
+```
+
+The result would be wrong when rendering the "auction-1" page because we are comparing the section page to itself.
+
+{{% note %}}
+Use the `$` to get the context passed into the template.
+{{% /note %}}
+
+```go-html-template
+{{ with .Site.GetPage "/auctions" }}
+ {{ $.InSection . }} → true
+{{ end }}
+```
+
+{{% note %}}
+Gaining a thorough understanding of context is critical for anyone writing template code.
+{{% /note %}}
+
+[`with`]: /functions/go-template/with/
+[`else`]: /functions/go-template/else/
--- /dev/null
- Inside of the `with` block, the [context] (the dot) is the section `Page` object, not the `Page` object passed into the template. If we were to use this syntax:
+---
+title: IsAncestor
+description: Reports whether PAGE1 is an ancestor of PAGE2.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Ancestors
+ - methods/page/CurrentSection
+ - methods/page/FirstSection
+ - methods/page/InSection
+ - methods/page/IsDescendant
+ - methods/page/Parent
+ - methods/page/Sections
+ returnType: bool
+ signatures: [PAGE1.IsAncestor PAGE2]
+toc: true
+---
+
+{{% include "methods/page/_common/definition-of-section.md" %}}
+
+With this content structure:
+
+```text
+content/
+├── auctions/
+│ ├── 2023-11/
+│ │ ├── _index.md
+│ │ ├── auction-1.md
+│ │ └── auction-2.md
+│ ├── 2023-12/
+│ │ ├── _index.md
+│ │ ├── auction-3.md
+│ │ └── auction-4.md
+│ ├── _index.md
+│ ├── bidding.md
+│ └── payment.md
+└── _index.md
+```
+
+When rendering the "auctions" page:
+
+```go-html-template
+{{ with .Site.GetPage "/" }}
+ {{ $.IsAncestor . }} → false
+{{ end }}
+
+{{ with .Site.GetPage "/auctions" }}
+ {{ $.IsAncestor . }} → false
+{{ end }}
+
+{{ with .Site.GetPage "/auctions/2023-11" }}
+ {{ $.IsAncestor . }} → true
+{{ end }}
+
+{{ with .Site.GetPage "/auctions/2023-11/auction-2" }}
+ {{ $.IsAncestor . }} → true
+{{ end }}
+```
+
+In the examples above we are coding defensively using the [`with`] statement, returning nothing if the page does not exist. By adding an [`else`] clause we can do some error reporting:
+
+```go-html-template
+{{ $path := "/auctions/2023-11" }}
+{{ with .Site.GetPage $path }}
+ {{ $.IsAncestor . }} → true
+{{ else }}
+ {{ errorf "Unable to find the section with path %s" $path }}
+{{ end }}
+ ```
+
+## Understanding context
+
- [context]: /getting-started/glossary/#context
++Inside of the `with` block, the [context](g) (the dot) is the section `Page` object, not the `Page` object passed into the template. If we were to use this syntax:
+
+```go-html-template
+{{ with .Site.GetPage "/auctions" }}
+ {{ .IsAncestor . }} → true
+{{ end }}
+```
+
+The result would be wrong when rendering the "auction-1" page because we are comparing the section page to itself.
+
+{{% note %}}
+Use the `$` to get the context passed into the template.
+{{% /note %}}
+
+```go-html-template
+{{ with .Site.GetPage "/auctions" }}
+ {{ $.IsAncestor . }} → true
+{{ end }}
+```
+
+{{% note %}}
+Gaining a thorough understanding of context is critical for anyone writing template code.
+{{% /note %}}
+
+[`with`]: /functions/go-template/with/
+[`else`]: /functions/go-template/else/
--- /dev/null
- Inside of the `with` block, the [context] (the dot) is the section `Page` object, not the `Page` object passed into the template. If we were to use this syntax:
+---
+title: IsDescendant
+description: Reports whether PAGE1 is a descendant of PAGE2.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Ancestors
+ - methods/page/CurrentSection
+ - methods/page/FirstSection
+ - methods/page/InSection
+ - methods/page/IsAncestor
+ - methods/page/Parent
+ - methods/page/Sections
+ returnType: bool
+ signatures: [PAGE1.IsDescendant PAGE2]
+---
+
+{{% include "methods/page/_common/definition-of-section.md" %}}
+
+With this content structure:
+
+```text
+content/
+├── auctions/
+│ ├── 2023-11/
+│ │ ├── _index.md
+│ │ ├── auction-1.md
+│ │ └── auction-2.md
+│ ├── 2023-12/
+│ │ ├── _index.md
+│ │ ├── auction-3.md
+│ │ └── auction-4.md
+│ ├── _index.md
+│ ├── bidding.md
+│ └── payment.md
+└── _index.md
+```
+
+When rendering the "auctions" page:
+
+```go-html-template
+{{ with .Site.GetPage "/" }}
+ {{ $.IsDescendant . }} → true
+{{ end }}
+
+{{ with .Site.GetPage "/auctions" }}
+ {{ $.IsDescendant . }} → false
+{{ end }}
+
+{{ with .Site.GetPage "/auctions/2023-11" }}
+ {{ $.IsDescendant . }} → false
+{{ end }}
+
+{{ with .Site.GetPage "/auctions/2023-11/auction-2" }}
+ {{ $.IsDescendant . }} → false
+{{ end }}
+```
+
+In the examples above we are coding defensively using the [`with`] statement, returning nothing if the page does not exist. By adding an [`else`] clause we can do some error reporting:
+
+```go-html-template
+{{ $path := "/auctions/2023-11" }}
+{{ with .Site.GetPage $path }}
+ {{ $.IsDescendant . }} → true
+{{ else }}
+ {{ errorf "Unable to find the section with path %s" $path }}
+{{ end }}
+ ```
+
+## Understanding context
+
- [context]: /getting-started/glossary/#context
++Inside of the `with` block, the [context](g) (the dot) is the section `Page` object, not the `Page` object passed into the template. If we were to use this syntax:
+
+```go-html-template
+{{ with .Site.GetPage "/auctions" }}
+ {{ .IsDescendant . }} → true
+{{ end }}
+```
+
+The result would be wrong when rendering the "auction-1" page because we are comparing the section page to itself.
+
+{{% note %}}
+Use the `$` to get the context passed into the template.
+{{% /note %}}
+
+```go-html-template
+{{ with .Site.GetPage "/auctions" }}
+ {{ $.IsDescendant . }} → true
+{{ end }}
+```
+
+{{% note %}}
+Gaining a thorough understanding of context is critical for anyone writing template code.
+{{% /note %}}
+
+[`with`]: /functions/go-template/with/
+[`else`]: /functions/go-template/else/
--- /dev/null
- The `IsHome` method on a `Page` object returns `true` if the [page kind] is `home`.
+---
+title: IsHome
+description: Reports whether the given page is the home page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/IsNode
+ - methods/page/IsPage
+ - methods/page/IsSection
+ returnType: bool
+ signatures: [PAGE.IsHome]
+---
+
-
- [page kind]: /getting-started/glossary/#page-kind
++The `IsHome` method on a `Page` object returns `true` if the [page kind](g) is `home`.
+
+```text
+content/
+├── books/
+│ ├── book-1/
+│ │ └── index.md <-- kind = page
+│ ├── book-2.md <-- kind = page
+│ └── _index.md <-- kind = section
+└── _index.md <-- kind = home
+```
+
+```go-html-template
+{{ .IsHome }}
+```
--- /dev/null
- The `IsNode` method on a `Page` object returns `true` if the [page kind] is `home`, `section`, `taxonomy`, or `term`.
+---
+title: IsNode
+description: Reports whether the given page is a node.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/IsHome
+ - methods/page/IsPage
+ - methods/page/IsSection
+ returnType: bool
+ signatures: [PAGE.IsNode]
+---
+
- [page kind]: /getting-started/glossary/#page-kind
++The `IsNode` method on a `Page` object returns `true` if the [page kind](g) is `home`, `section`, `taxonomy`, or `term`.
+
+It returns `false` is the page kind is `page`.
+
+```text
+content/
+├── books/
+│ ├── book-1/
+│ │ └── index.md <-- kind = page, node = false
+│ ├── book-2.md <-- kind = page, node = false
+│ └── _index.md <-- kind = section, node = true
+├── tags/
+│ ├── fiction/
+│ │ └── _index.md <-- kind = term, node = true
+│ └── _index.md <-- kind = taxonomy, node = true
+└── _index.md <-- kind = home, node = true
+```
+
+```go-html-template
+{{ .IsNode }}
+```
--- /dev/null
- The `IsPage` method on a `Page` object returns `true` if the [page kind] is `page`.
+---
+title: IsPage
+description: Reports whether the given page is a regular page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/IsHome
+ - methods/page/IsNode
+ - methods/page/IsSection
+ returnType: bool
+ signatures: [PAGE.IsPage]
+---
+
-
- [page kind]: /getting-started/glossary/#page-kind
++The `IsPage` method on a `Page` object returns `true` if the [page kind](g) is `page`.
+
+```text
+content/
+├── books/
+│ ├── book-1/
+│ │ └── index.md <-- kind = page
+│ ├── book-2.md <-- kind = page
+│ └── _index.md <-- kind = section
+└── _index.md <-- kind = home
+```
+
+```go-html-template
+{{ .IsPage }}
+```
--- /dev/null
- The `IsSection` method on a `Page` object returns `true` if the [page kind] is `section`.
+---
+title: IsSection
+description: Reports whether the given page is a section page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/IsHome
+ - methods/page/IsNode
+ - methods/page/IsPage
+ returnType: bool
+ signatures: [PAGE.IsSection]
+---
+
-
- [page kind]: /getting-started/glossary/#page-kind
++The `IsSection` method on a `Page` object returns `true` if the [page kind](g) is `section`.
+
+```text
+content/
+├── books/
+│ ├── book-1/
+│ │ └── index.md <-- kind = page
+│ ├── book-2.md <-- kind = page
+│ └── _index.md <-- kind = section
+└── _index.md <-- kind = home
+```
+
+```go-html-template
+{{ .IsSection }}
+```
--- /dev/null
- When rendering content/en/books/book-1.md:
+---
+title: IsTranslated
+description: Reports whether the given page has one or more translations.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Translations
+ - methods/page/AllTranslations
+ - methods/page/TranslationKey
+ returnType: bool
+ signatures: [PAGE.IsTranslated]
+---
+
+With this site configuration:
+
+{{< code-toggle file=hugo >}}
+defaultContentLanguage = 'en'
+
+[languages.en]
+contentDir = 'content/en'
+languageCode = 'en-US'
+languageName = 'English'
+weight = 1
+
+[languages.de]
+contentDir = 'content/de'
+languageCode = 'de-DE'
+languageName = 'Deutsch'
+weight = 2
+{{< /code-toggle >}}
+
+And this content:
+
+```text
+content/
+├── de/
+│ ├── books/
+│ │ └── book-1.md
+│ └── _index.md
+├── en/
+│ ├── books/
+│ │ ├── book-1.md
+│ │ └── book-2.md
+│ └── _index.md
+└── _index.md
+```
+
- When rendering content/en/books/book-2.md:
++When rendering `content/en/books/book-1.md`:
+
+```go-html-template
+{{ .IsTranslated }} → true
+```
+
++When rendering `content/en/books/book-2.md`:
+
+```go-html-template
+{{ .IsTranslated }} → false
+```
--- /dev/null
- The [page kind] is one of `home`, `page`, `section`, `taxonomy`, or `term`.
+---
+title: Kind
+description: Returns the kind of the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Type
+ returnType: string
+ signatures: [PAGE.Kind]
+---
+
-
- [page kind]: /getting-started/glossary/#page-kind
++The [page kind](g) is one of `home`, `page`, `section`, `taxonomy`, or `term`.
+
+```text
+content/
+├── books/
+│ ├── book-1/
+│ │ └── index.md <-- kind = page
+│ ├── book-2.md <-- kind = page
+│ └── _index.md <-- kind = section
+├── tags/
+│ ├── fiction/
+│ │ └── _index.md <-- kind = term
+│ └── _index.md <-- kind = taxonomy
+└── _index.md <-- kind = home
+```
+
+To get the value within a template:
+
+```go-html-template
+{{ .Kind }}
+```
--- /dev/null
- {{% include "methods/page/_common/output-format-definition.md" %}}
+---
+title: OutputFormats
+description: Returns a slice of OutputFormat objects, each representing one of the output formats enabled for the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/AlternativeOutputFormats
+ returnType: '[]OutputFormat'
+ signatures: [PAGE.OutputFormats]
+toc: true
+---
+
++{{% glossary-term "output format" %}}
+
+The `OutputFormats` method on a `Page` object returns a slice of `OutputFormat` objects, each representing one of the output formats enabled for the given page. See [details](/templates/output-formats/).
+
+## Methods
+
+{{% include "methods/page/_common/output-format-methods.md" %}}
+
+## Example
+
+To link to the RSS feed for the current page:
+
+```go-html-template
+{{ with .OutputFormats.Get "rss" -}}
+ <a href="{{ .RelPermalink }}">RSS Feed</a>
+{{ end }}
+```
+
+On the site's home page, Hugo renders this to:
+
+```html
+<a href="/index.xml">RSS Feed</a>
+```
+
+Please see the [link to output formats] section to understand the importance of the construct above.
+
+[link to output formats]: /templates/output-formats/#link-to-output-formats
--- /dev/null
- This is a convenience method, useful within partial templates that are called from both [shortcodes] and page templates.
+---
+title: Page
+description: Returns the Page object of the given page.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: page.Page
+ signatures: [PAGE.Page]
+---
+
- When the shortcode calls the partial, it passes the current [context] (the dot). The context includes identifiers such as `Page`, `Params`, `Inner`, and `Name`.
++This is a convenience method, useful within partial templates that are called from both [shortcodes](g) and page templates.
+
+{{< code file=layouts/shortcodes/foo.html >}}
+{{ partial "my-partial.html" . }}
+{{< /code >}}
+
-
-
- [context]: getting-started/glossary/#context
- [shortcodes]: /getting-started/glossary/#shortcode
++When the shortcode calls the partial, it passes the current [context](g) (the dot). The context includes identifiers such as `Page`, `Params`, `Inner`, and `Name`.
+
+{{< code file=layouts/_default/single.html >}}
+{{ 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 >}}
+The page title is: {{ .Page.Title }}
+{{< /code >}}
+
+To handle both scenarios, the partial template must be able to access the `Page` object with `Page.Page`.
+
+{{% note %}}
+And yes, that means you can do `.Page.Page.Page.Page.Title` too.
+
+But don't.
+{{% /note %}}
--- /dev/null
- The `Pages` method on a `Page` object is available to these [page kinds]: `home`, `section`, `taxonomy`, and `term`. The templates for these page kinds receive a page [collection] in [context].
+---
+title: Pages
+description: Returns a collection of regular pages within the current section, and section pages of immediate descendant sections.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/RegularPages
+ - methods/page/RegularPagesRecursive
+ returnType: page.Pages
+ signatures: [PAGE.Pages]
+---
+
- In the last example, the collection includes pages in the resources subdirectory. That directory is not a [section]---it does not contain an _index.md file. Its contents are part of the lesson-2 section.
++The `Pages` method on a `Page` object is available to these [page kinds](g): `home`, `section`, `taxonomy`, and `term`. The templates for these page kinds receive a page [collection](g) in [context](g).
+
+Range through the page collection in your template:
+
+```go-html-template
+{{ range .Pages.ByTitle }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
+
+Consider this content structure:
+
+```text
+content/
+├── lessons/
+│ ├── lesson-1/
+│ │ ├── _index.md
+│ │ ├── part-1.md
+│ │ └── part-2.md
+│ ├── lesson-2/
+│ │ ├── resources/
+│ │ │ ├── task-list.md
+│ │ │ └── worksheet.md
+│ │ ├── _index.md
+│ │ ├── part-1.md
+│ │ └── part-2.md
+│ ├── _index.md
+│ ├── grading-policy.md
+│ └── lesson-plan.md
+├── _index.md
+├── contact.md
+└── legal.md
+```
+
+When rendering the home page, the `Pages` method returns:
+
+ contact.md
+ legal.md
+ lessons/_index.md
+
+When rendering the lessons page, the `Pages` method returns:
+
+ lessons/grading-policy.md
+ lessons/lesson-plan.md
+ lessons/lesson-1/_index.md
+ lessons/lesson-2/_index.md
+
+When rendering lesson-1, the `Pages` method returns:
+
+ lessons/lesson-1/part-1.md
+ lessons/lesson-1/part-2.md
+
+When rendering lesson-2, the `Pages` method returns:
+
+ lessons/lesson-2/part-1.md
+ lessons/lesson-2/part-2.md
+ lessons/lesson-2/resources/task-list.md
+ lessons/lesson-2/resources/worksheet.md
+
-
- [collection]: /getting-started/glossary/#collection
- [context]: /getting-started/glossary/#context
- [page kinds]: /getting-started/glossary/#page-kind
- [section]: /getting-started/glossary/#section
++In the last example, the collection includes pages in the resources subdirectory. That directory is not a [section](g)---it does not contain an `_index.md` file. Its contents are part of the lesson-2 section.
+
+{{% note %}}
+When used with a `Site` object, the `Pages` method recursively returns all pages within the site. See [details].
+
+[details]: /methods/site/pages/
+{{% /note %}}
+
+```go-html-template
+{{ range .Site.Pages.ByTitle }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
--- /dev/null
- 2. Sort the collection by title
- 3. Paginate the collection, with 7 elements per pager
- 4. Range over the paginated page collection, rendering a link to each page
- 5. Call the embedded pagination template to create navigation links between pagers
+---
+title: Paginate
+description: Paginates a collection of pages.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Paginator
+ returnType: page.Pager
+ signatures: ['PAGE.Paginate COLLECTION [N]']
+---
+
+Pagination is the process of splitting a list page into two or more pagers, where each pager contains a subset of the page collection and navigation links to other pagers.
+
+By default, the number of elements on each pager is determined by your [site configuration]. The default is `10`. Override that value by providing a second argument, an integer, when calling the `Paginate` method.
+
+[site configuration]: /getting-started/configuration/#pagination
+
+{{% note %}}
+There is also a `Paginator` method on `Page` objects, but it can neither filter nor sort the page collection.
+
+The `Paginate` method is more flexible.
+{{% /note %}}
+
+You can invoke pagination on the [home template], [section templates], [taxonomy templates], and [term templates].
+
+[home template]: /templates/types/#home
+[section templates]: /templates/types/#section
+[taxonomy templates]: /templates/types/#taxonomy
+[term templates]: /templates/types/#term
+
+{{< code file=layouts/_default/list.html >}}
+{{ $pages := where .Site.RegularPages "Section" "articles" }}
+{{ $pages = $pages.ByTitle }}
+{{ range (.Paginate $pages 7).Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+{{ template "_internal/pagination.html" . }}
+{{< /code >}}
+
+In the example above, we:
+
+1. Build a page collection
++1. Sort the collection by title
++1. Paginate the collection, with 7 elements per pager
++1. Range over the paginated page collection, rendering a link to each page
++1. Call the embedded pagination template to create navigation links between pagers
+
+{{% note %}}
+Please note that the results of pagination are cached. Once you have invoked either the `Paginator` or `Paginate` method, the paginated collection is immutable. Additional invocations of these methods will have no effect.
+{{% /note %}}
--- /dev/null
- You can invoke pagination on the [home template], [section templates], [taxonomy templates], and [term templates]. Each of these receives a collection of regular pages in [context]. When you invoke the `Paginator` method, it paginates the page collection received in context.
+---
+title: Paginator
+description: Paginates the collection of regular pages received in context.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Paginate
+ returnType: page.Pager
+ signatures: [PAGE.Paginator]
+---
+
+Pagination is the process of splitting a list page into two or more pagers, where each pager contains a subset of the page collection and navigation links to other pagers.
+
+The number of elements on each pager is determined by your [site configuration]. The default is `10`.
+
+[site configuration]: /getting-started/configuration/#pagination
+
- [context]: /getting-started/glossary/#context
++You can invoke pagination on the [home template], [section templates], [taxonomy templates], and [term templates]. Each of these receives a collection of regular pages in [context](g). When you invoke the `Paginator` method, it paginates the page collection received in context.
+
+[home template]: /templates/types/#home
+[section templates]: /templates/types/#section
+[taxonomy templates]: /templates/types/#taxonomy
+[term templates]: /templates/types/#term
+
+{{< code file=layouts/_default/list.html >}}
+{{ range .Paginator.Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+{{ template "_internal/pagination.html" . }}
+{{< /code >}}
+
+In the example above, the embedded pagination template creates navigation links between pagers.
+
+{{% note %}}
+Although simple to invoke, with the `Paginator` method you can neither filter nor sort the page collection. It acts upon the page collection received in context.
+
+The [`Paginate`] method is more flexible, and strongly recommended.
+
+[`paginate`]: /methods/page/paginate/
+{{% /note %}}
+
+{{% note %}}
+Please note that the results of pagination are cached. Once you have invoked either the `Paginator` or `Paginate` method, the paginated collection is immutable. Additional invocations of these methods will have no effect.
+{{% /note %}}
--- /dev/null
- Access the custom parameters by [chaining] the [identifiers]:
+---
+title: Params
+description: Returns a map of custom parameters as defined in the front matter of the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/collections/IndexFunction
+ - methods/site/Params
+ - methods/page/Param
+ returnType: maps.Params
+ signatures: [PAGE.Params]
+---
+
+With this front matter:
+
+{{< code-toggle file=content/news/annual-conference.md >}}
+title = 'Annual conference'
+date = 2023-10-17T15:11:37-07:00
+[params]
+display_related = true
+[params.author]
+ email = 'jsmith@example.org'
+ name = 'John Smith'
+{{< /code-toggle >}}
+
+The `title` and `date` fields are standard parameters---the other fields are user-defined.
+
- [chaining]: /getting-started/glossary/#chain
- [identifiers]: /getting-started/glossary/#identifier
++Access the custom parameters by [chaining](g) the [identifiers](g):
+
+```go-html-template
+{{ .Params.display_related }} → true
+{{ .Params.author.name }} → John Smith
+```
+
+In the template example above, each of the keys is a valid identifier. For example, none of the keys contains a hyphen. To access a key that is not a valid identifier, use the [`index`] function:
+
+```go-html-template
+{{ index .Params "key-with-hyphens" }} → 2023
+```
+
+[`index`]: /functions/collections/indexfunction/
--- /dev/null
- The `Path` method on a `Page` object returns the logical path of the given page, regardless of whether the page is backed by a file.
-
- [logical path]: /getting-started/glossary#logical-path
+---
+title: Path
+description: Returns the logical path of the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/File
+ - methods/page/RelPermalink
+ returnType: string
+ signatures: [PAGE.Path]
+toc: true
+---
+
+{{< new-in 0.123.0 >}}
+
- To determine the logical path for pages backed by a file, Hugo starts with the file path, relative to the content directory, and then:
++The `Path` method on a `Page` object returns the [logical path](g) of the given page, regardless of whether the page is backed by a file.
+
+```go-html-template
+{{ .Path }} → /posts/post-1
+```
+
+This value is neither a file path nor a relative URL. It is a logical identifier for each page, independent of content format, language, and URL modifiers.
+
+{{% note %}}
+Beginning with the release of [v0.92.0] in January 2022, Hugo emitted a warning whenever calling the `Path` method. The warning indicated that this method would change in a future release.
+
+The meaning of, and value returned by, the `Path` method on a `Page` object changed with the release of [v0.123.0] in February 2024.
+
+[v0.92.0]: https://github.com/gohugoio/hugo/releases/tag/v0.92.0
+[v0.123.0]: https://github.com/gohugoio/hugo/releases/tag/v0.123.0
+{{% /note %}}
+
- 2. Strips the language identifier
- 3. Converts the result to lower case
- 4. Replaces spaces with hyphens
++To determine the logical path for pages backed by a file, Hugo starts with the file path, relative to the `content` directory, and then:
+
+1. Strips the file extension
- [`ref`]: /content-management/shortcodes/#ref
- [`relref`]: /content-management/shortcodes/#relref
++1. Strips the language identifier
++1. Converts the result to lower case
++1. Replaces spaces with hyphens
+
+The value returned by the `Path` method on a `Page` object is independent of content format, language, and URL modifiers such as the `slug` and `url` front matter fields.
+
+## Examples
+
+### Monolingual site
+
+Note that the logical path is independent of content format and URL modifiers.
+
+File path|Front matter slug|Logical path
+:--|:--|:--
+`content/_index.md`||`/`
+`content/posts/_index.md`||`/posts`
+`content/posts/post-1.md`|`foo`|`/posts/post-1`
+`content/posts/post-2.html`|`bar`|`/posts/post-2`
+
+### Multilingual site
+
+Note that the logical path is independent of content format, language identifiers, and URL modifiers.
+
+File path|Front matter slug|Logical path
+:--|:--|:--
+`content/_index.en.md`||`/`
+`content/_index.de.md`||`/`
+`content/posts/_index.en.md`||`/posts`
+`content/posts/_index.de.md`||`/posts`
+`content/posts/posts-1.en.md`|`foo`|`/posts/post-1`
+`content/posts/posts-1.de.md`|`foo`|`/posts/post-1`
+`content/posts/posts-2.en.html`|`bar`|`/posts/post-2`
+`content/posts/posts-2.de.html`|`bar`|`/posts/post-2`
+
+### Pages not backed by a file
+
+The `Path` method on a `Page` object returns a value regardless of whether the page is backed by a file.
+
+```text
+content/
+└── posts/
+ └── post-1.md <-- front matter: tags = ['hugo']
+```
+
+When you build the site:
+
+```text
+public/
+├── posts/
+│ ├── post-1/
+│ │ └── index.html .Page.Path = /posts/post-1
+│ └── index.html .Page.Path = /posts
+├── tags/
+│ ├── hugo/
+│ │ └── index.html .Page.Path = /tags/hugo
+│ └── index.html .Page.Path = /tags
+└── index.html .Page.Path = /
+```
+
+## Finding pages
+
+These methods, functions, and shortcodes use the logical path to find the given page:
+
+Methods|Functions|Shortcodes
+:--|:--|:--
+[`Site.GetPage`]|[`urls.Ref`]|[`ref`]
+[`Page.GetPage`]|[`urls.RelRef`]|[`relref`]
+[`Page.Ref`]||
+[`Page.RelRef`]||
+[`Shortcode.Ref`]||
+[`Shortcode.RelRef`]||
+
+[`urls.Ref`]: /functions/urls/ref/
+[`urls.RelRef`]: /functions/urls/relref/
+[`Page.GetPage`]: /methods/page/getpage/
+[`Site.GetPage`]: /methods/site/getpage/
-
++[`ref`]: /shortcodes/ref/
++[`relref`]: /shortcodes/relref/
+[`Page.Ref`]: /methods/page/ref/
+[`Page.RelRef`]: /methods/page/relref/
+[`Shortcode.Ref`]: /methods/shortcode/ref
+[`Shortcode.RelRef`]: /methods/shortcode/relref
+
+{{% note %}}
+Specify the logical path when using any of these methods, functions, or shortcodes. If you include a file extension or language identifier, Hugo will strip these values before finding the page in the logical tree.
+{{% /note %}}
+
+## Logical tree
+
+Just as file paths form a file tree, logical paths form a logical tree.
+
+A file tree:
+
+```text
+content/
+└── s1/
+ ├── p1/
+ │ └── index.md
+ └── p2.md
+```
+
+The same content represented as a logical tree:
+
+```text
+content/
+└── s1/
+ ├── p1
+ └── p2
+```
+
+A key difference between these trees is the relative path from p1 to p2:
+
+- In the file tree, the relative path from p1 to p2 is `../p2.md`
+- In the logical tree, the relative path is `p2`
+
+{{% note %}}
+Remember to use the logical path when using any of the methods, functions, or shortcodes listed in the previous section. If you include a file extension or language identifier, Hugo will strip these values before finding the page in the logical tree.
+{{% /note %}}
--- /dev/null
- The `Plain` method on a `Page` object renders Markdown and [shortcodes] to HTML, then strips the HTML [tags]. It does not strip HTML [entities].
+---
+title: Plain
+description: Returns the rendered content of the given page, removing all HTML tags.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Content
+ - methods/page/Summary
+ - methods/page/ContentWithoutSummary
+ - methods/page/RawContent
+ - methods/page/PlainWords
+ - methods/page/RenderShortcodes
+ returnType: string
+ signatures: [PAGE.Plain]
+---
+
- [shortcodes]: /getting-started/glossary/#shortcode
++The `Plain` method on a `Page` object renders Markdown and [shortcodes](g) to HTML, then strips the HTML [tags]. It does not strip HTML [entities].
+
+To prevent Go's [html/template] package from escaping HTML entities, pass the result through the [`htmlUnescape`] function.
+
+```go-html-template
+{{ .Plain | htmlUnescape }}
+```
+
+[html/template]: https://pkg.go.dev/html/template
+[entities]: https://developer.mozilla.org/en-US/docs/Glossary/Entity
+[tags]: https://developer.mozilla.org/en-US/docs/Glossary/Tag
+[`htmlUnescape`]: /functions/transform/htmlunescape/
--- /dev/null
- [Shortcodes] within the content are not rendered. To get the raw content with shortcodes rendered, use the [`RenderShortcodes`] method on a `Page` object.
+---
+title: RawContent
+description: Returns the raw content of the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Content
+ - methods/page/Summary
+ - methods/page/ContentWithoutSummary
+ - methods/page/Plain
+ - methods/page/PlainWords
+ - methods/page/RenderShortcodes
+ returnType: string
+ signatures: [PAGE.RawContent]
+---
+
+The `RawContent` method on a `Page` object returns the raw content. The raw content does not include front matter.
+
+```go-html-template
+{{ .RawContent }}
+```
+
+This is useful when rendering a page in a plain text [output format].
+
+{{% note %}}
- [shortcodes]: /getting-started/glossary/#shortcode
++[Shortcodes](g) within the content are not rendered. To get the raw content with shortcodes rendered, use the [`RenderShortcodes`] method on a `Page` object.
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes/
+{{% /note %}}
+
+[output format]: /templates/output-formats/
--- /dev/null
- : (`string`) The path to the page, relative to the content directory. Required.
+---
+title: Ref
+description: Returns the absolute URL of the page with the given path, language, and output format.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/RelRef
+ - functions/urls/RelRef
+ - functions/urls/Ref
+ returnType: string
+ signatures: [PAGE.Ref OPTIONS]
+---
+
+The map of option contains:
+
+path
++: (`string`) The path to the page, relative to the `content` directory. Required.
+
+lang
+: (`string`) The language (site) to search for the page. Default is the current language. Optional.
+
+outputFormat
+: (`string`) The output format to search for the page. Default is the current output format. Optional.
+
+The examples below show the rendered output when visiting a page on the English language version of the site:
+
+```go-html-template
+{{ $opts := dict "path" "/books/book-1" }}
+{{ .Ref $opts }} → https://example.org/en/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" }}
+{{ .Ref $opts }} → https://example.org/de/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" "outputFormat" "json" }}
+{{ .Ref $opts }} → https://example.org/de/books/book-1/index.json
+```
+
+By default, Hugo will throw an error and fail the build if it cannot resolve the path. You can change this to a warning in your site configuration, and specify a URL to return when the path cannot be resolved.
+
+{{< code-toggle file=hugo >}}
+refLinksErrorLevel = 'warning'
+refLinksNotFoundURL = '/some/other/url'
+{{< /code-toggle >}}
--- /dev/null
- The `RegularPages` method on a `Page` object is available to these [page kinds]: `home`, `section`, `taxonomy`, and `term`. The templates for these page kinds receive a page [collection] in [context].
+---
+title: RegularPages
+description: Returns a collection of regular pages within the current section.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Pages
+ - methods/page/RegularPagesRecursive
+ returnType: page.Pages
+ signatures: [PAGE.RegularPages]
+---
+
- In the last example, the collection includes pages in the resources subdirectory. That directory is not a [section]---it does not contain an _index.md file. Its contents are part of the lesson-2 section.
++The `RegularPages` method on a `Page` object is available to these [page kinds](g): `home`, `section`, `taxonomy`, and `term`. The templates for these page kinds receive a page [collection](g) in [context](g).
+
+Range through the page collection in your template:
+
+```go-html-template
+{{ range .RegularPages.ByTitle }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
+
+Consider this content structure:
+
+```text
+content/
+├── lessons/
+│ ├── lesson-1/
+│ │ ├── _index.md
+│ │ ├── part-1.md
+│ │ └── part-2.md
+│ ├── lesson-2/
+│ │ ├── resources/
+│ │ │ ├── task-list.md
+│ │ │ └── worksheet.md
+│ │ ├── _index.md
+│ │ ├── part-1.md
+│ │ └── part-2.md
+│ ├── _index.md
+│ ├── grading-policy.md
+│ └── lesson-plan.md
+├── _index.md
+├── contact.md
+└── legal.md
+```
+
+When rendering the home page, the `RegularPages` method returns:
+
+ contact.md
+ legal.md
+
+When rendering the lessons page, the `RegularPages` method returns:
+
+ lessons/grading-policy.md
+ lessons/lesson-plan.md
+
+When rendering lesson-1, the `RegularPages` method returns:
+
+ lessons/lesson-1/part-1.md
+ lessons/lesson-1/part-2.md
+
+When rendering lesson-2, the `RegularPages` method returns:
+
+ lessons/lesson-2/part-1.md
+ lessons/lesson-2/part-2.md
+ lessons/lesson-2/resources/task-list.md
+ lessons/lesson-2/resources/worksheet.md
+
-
- [collection]: /getting-started/glossary/#collection
- [context]: /getting-started/glossary/#context
- [page kinds]: /getting-started/glossary/#page-kind
- [section]: /getting-started/glossary/#section
++In the last example, the collection includes pages in the resources subdirectory. That directory is not a [section](g)---it does not contain an _index.md file. Its contents are part of the lesson-2 section.
+
+{{% note %}}
+When used with the `Site` object, the `RegularPages` method recursively returns all regular pages within the site. See [details].
+
+[details]: /methods/site/regularpages/
+{{% /note %}}
+
+```go-html-template
+{{ range .Site.RegularPages.ByTitle }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
--- /dev/null
- The `RegularPagesRecursive` method on a `Page` object is available to these [page kinds]: `home`, `section`, `taxonomy`, and `term`. The templates for these page kinds receive a page [collection] in [context].
+---
+title: RegularPagesRecursive
+description: Returns a collection of regular pages within the current section, and regular pages within all descendant sections.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Pages
+ - methods/page/RegularPages
+ returnType: page.Pages
+ signatures: [PAGE.RegularPagesRecursive]
+---
+
-
- [collection]: /getting-started/glossary/#collection
- [context]: /getting-started/glossary/#context
- [page kinds]: /getting-started/glossary/#page-kind
++The `RegularPagesRecursive` method on a `Page` object is available to these [page kinds](g): `home`, `section`, `taxonomy`, and `term`. The templates for these page kinds receive a page [collection](g) in [context](g).
+
+Range through the page collection in your template:
+
+```go-html-template
+{{ range .RegularPagesRecursive.ByTitle }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
+
+Consider this content structure:
+
+```text
+content/
+├── lessons/
+│ ├── lesson-1/
+│ │ ├── _index.md
+│ │ ├── part-1.md
+│ │ └── part-2.md
+│ ├── lesson-2/
+│ │ ├── resources/
+│ │ │ ├── task-list.md
+│ │ │ └── worksheet.md
+│ │ ├── _index.md
+│ │ ├── part-1.md
+│ │ └── part-2.md
+│ ├── _index.md
+│ ├── grading-policy.md
+│ └── lesson-plan.md
+├── _index.md
+├── contact.md
+└── legal.md
+```
+
+When rendering the home page, the `RegularPagesRecursive` method returns:
+
+ contact.md
+ lessons/grading-policy.md
+ legal.md
+ lessons/lesson-plan.md
+ lessons/lesson-2/part-1.md
+ lessons/lesson-1/part-1.md
+ lessons/lesson-2/part-2.md
+ lessons/lesson-1/part-2.md
+ lessons/lesson-2/resources/task-list.md
+ lessons/lesson-2/resources/worksheet.md
+
+When rendering the lessons page, the `RegularPagesRecursive` method returns:
+
+ lessons/grading-policy.md
+ lessons/lesson-plan.md
+ lessons/lesson-2/part-1.md
+ lessons/lesson-1/part-1.md
+ lessons/lesson-2/part-2.md
+ lessons/lesson-1/part-2.md
+ lessons/lesson-2/resources/task-list.md
+ lessons/lesson-2/resources/worksheet.md
+
+When rendering lesson-1, the `RegularPagesRecursive` method returns:
+
+ lessons/lesson-1/part-1.md
+ lessons/lesson-1/part-2.md
+
+When rendering lesson-2, the `RegularPagesRecursive` method returns:
+
+ lessons/lesson-2/part-1.md
+ lessons/lesson-2/part-2.md
+ lessons/lesson-2/resources/task-list.md
+ lessons/lesson-2/resources/worksheet.md
+
+{{% note %}}
+The `RegularPagesRecursive` method in not available on a `Site` object.
+{{% /note %}}
--- /dev/null
- : (`string`) The path to the page, relative to the content directory. Required.
+---
+title: RelRef
+description: Returns the relative URL of the page with the given path, language, and output format.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Ref
+ - functions/urls/Ref
+ - functions/urls/RelRef
+ returnType: string
+ signatures: [PAGE.RelRef OPTIONS]
+---
+
+The map of option contains:
+
+path
++: (`string`) The path to the page, relative to the `content` directory. Required.
+
+lang
+: (`string`) The language (site) to search for the page. Default is the current language. Optional.
+
+outputFormat
+: (`string`) The output format to search for the page. Default is the current output format. Optional.
+
+The examples below show the rendered output when visiting a page on the English language version of the site:
+
+```go-html-template
+{{ $opts := dict "path" "/books/book-1" }}
+{{ .RelRef $opts }} → /en/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" }}
+{{ .RelRef $opts }} → /de/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" "outputFormat" "json" }}
+{{ .RelRef $opts }} → /de/books/book-1/index.json
+```
+
+By default, Hugo will throw an error and fail the build if it cannot resolve the path. You can change this to a warning in your site configuration, and specify a URL to return when the path cannot be resolved.
+
+{{< code-toggle file=hugo >}}
+refLinksErrorLevel = 'warning'
+refLinksNotFoundURL = '/some/other/url'
+{{< /code-toggle >}}
--- /dev/null
- The path to the template is determined by the [content type].|You must specify the path to the template, relative to the layouts/partials directory.
+---
+title: Render
+description: Renders the given template with the given page as context.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/partials/Include
+ - functions/partials/IncludeCached
+ returnType: template.HTML
+ signatures: [PAGE.Render NAME]
+aliases: [/functions/render]
+---
+
+Typically used when ranging over a page collection, the `Render` method on a `Page` object renders the given template, passing the given page as context.
+
+```go-html-template
+{{ range site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ .Render "summary" }}
+{{ end }}
+```
+
+In the example above, note that the template ("summary") is identified by its file name without directory or extension.
+
+Although similar to the [`partial`] function, there are key differences.
+
+`Render` method|`partial` function|
+:--|:--
+The `Page` object is automatically passed to the given template. You cannot pass additional context.| You must specify the context, allowing you to pass a combination of objects, slices, maps, and scalars.
- [content type]: /getting-started/glossary/#content-type
++The path to the template is determined by the [content type](g).|You must specify the path to the template, relative to the `layouts/partials` directory.
+
+Consider this layout structure:
+
+```text
+layouts/
+├── _default/
+│ ├── baseof.html
+│ ├── home.html
+│ ├── li.html <-- used for other content types
+│ ├── list.html
+│ ├── single.html
+│ └── summary.html
+└── books/
+ ├── li.html <-- used when content type is "books"
+ └── summary.html
+```
+
+And this template:
+
+```go-html-template
+<ul>
+ {{ range site.RegularPages.ByDate }}
+ {{ .Render "li" }}
+ {{ end }}
+</ul>
+```
+
+When rendering content of type "books" the `Render` method calls:
+
+```text
+layouts/books/li.html
+```
+
+For all other content types the `Render` methods calls:
+
+```text
+layouts/_default/li.html
+```
+
+See [content views] for more examples.
+
+[content views]: /templates/content-view/
+[`partial`]: /functions/partials/include/
--- /dev/null
-
+---
+title: RenderShortcodes
+description: Renders all shortcodes in the content of the given page, preserving the surrounding markup.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Content
+ - methods/page/Summary
+ - methods/page/ContentWithoutSummary
+ - methods/page/RawContent
+ - methods/page/Plain
+ - methods/page/PlainWords
+ - methods/page/RenderString
+ returnType: template.HTML
+ signatures: [PAGE.RenderShortcodes]
+toc: true
+---
+
+{{< new-in 0.117.0 >}}
+
+Use this method in shortcode templates to compose a page from multiple content files, while preserving a global context for footnotes and the table of contents.
+
+For example:
+
+{{< code file=layouts/shortcodes/include.html >}}
+{{ with .Get 0 }}
+ {{ with $.Page.GetPage . }}
+ {{- .RenderShortcodes }}
+ {{ else }}
+ {{ errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
+ {{ end }}
+{{ else }}
+ {{ errorf "The %q shortcode requires a positional parameter indicating the logical path of the file to include. See %s" .Name .Position }}
+{{ end }}
+{{< /code >}}
+
+Then call the shortcode in your Markdown:
+
+{{< code file=content/about.md lang=md >}}
+{{%/* include "/snippets/services" */%}}
+{{%/* include "/snippets/values" */%}}
+{{%/* include "/snippets/leadership" */%}}
+{{< /code >}}
+
+Each of the included Markdown files can contain calls to other shortcodes.
+
+## Shortcode notation
+
+In the example above it's important to understand the difference between the two delimiters used when calling a shortcode:
+
+- `{{</* myshortcode */>}}` tells Hugo that the rendered shortcode does not need further processing. For example, the shortcode content is HTML.
+- `{{%/* myshortcode */%}}` tells Hugo that the rendered shortcode needs further processing. For example, the shortcode content is Markdown.
+
+Use the latter for the "include" shortcode described above.
+
+## Further explanation
+
+To understand what is returned by the `RenderShortcodes` method, consider this content file
+
+{{< code file=content/about.md lang=text >}}
++++
+title = 'About'
+date = 2023-10-07T12:28:33-07:00
++++
+
+{{</* ref "privacy" */>}}
+
+An *emphasized* word.
+{{< /code >}}
+
+With this template code:
+
+```go-html-template
+{{ $p := site.GetPage "/about" }}
+{{ $p.RenderShortcodes }}
+```
+
+Hugo renders this:;
+
+```html
+https://example.org/privacy/
+
+An *emphasized* word.
+```
+
+Note that the shortcode within the content file was rendered, but the surrounding Markdown was preserved.
+
+## Limitations
+
+The primary use case for `.RenderShortcodes` is inclusion of Markdown content. If you try to use `.RenderShortcodes` inside `HTML` blocks when inside Markdown, you will get a warning similar to this:
+
+```
+WARN .RenderShortcodes detected inside HTML block in "/content/mypost.md"; this may not be what you intended ...
+```
+
+The above warning can be turned off is this is what you really want.
--- /dev/null
- The `Resources` method on a `Page` object returns a collection of page resources. A page resource is a file within a [page bundle].
+---
+title: Resources
+description: Returns a collection of page resources.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/resources/ByType
+ - functions/resources/Get
+ - functions/resources/GetMatch
+ - functions/resources/GetRemote
+ - functions/resources/Match
+ returnType: resource.Resources
+ signatures: [PAGE.Resources]
+toc: true
+---
+
-
++The `Resources` method on a `Page` object returns a collection of page resources. A page resource is a file within a [page bundle](g).
+
+To work with global or remote resources, see the [`resources`] functions.
+
+## Methods
+
+###### ByType
+
+(`resource.Resources`) Returns a collection of page resources of the given [media type], or nil if none found. The media type is typically one of `image`, `text`, `audio`, `video`, or `application`.
+
+```go-html-template
+{{ range .Resources.ByType "image" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+When working with global resources instead of page resources, use the [`resources.ByType`] function.
+
+###### Get
+
+(`resource.Resource`) Returns a page resource from the given path, or nil if none found.
+
+```go-html-template
+{{ with .Resources.Get "images/a.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+When working with global resources instead of page resources, use the [`resources.Get`] function.
+
+###### GetMatch
+
+(`resource.Resource`) Returns the first page resource from paths matching the given [glob pattern], or nil if none found.
+
+```go-html-template
+{{ with .Resources.GetMatch "images/*.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+When working with global resources instead of page resources, use the [`resources.GetMatch`] function.
+
+###### Match
+
+(`resource.Resources`) Returns a collection of page resources from paths matching the given [glob pattern], or nil if none found.
+
+```go-html-template
+{{ range .Resources.Match "images/*.jpg" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+{{ end }}
+```
+
+When working with global resources instead of page resources, use the [`resources.Match`] function.
+
+###### Mount
+
+{{< new-in "0.140.0" >}}
+
+(`ResourceGetter`) Mounts the given resources from the two arguments base (`string`) to the given target path (`string`) and returns an object that implements [Get](#get). Note that leading slashes in target marks an absolute path. Relative target paths allows you to mount resources relative to another set, e.g. a [Page bundle](/content-management/page-bundles/):
+
+```go-html-template
+{{ $common := resources.Match "/js/headlessui/*.*" }}
+{{ $importContext := (slice $.Page ($common.Mount "/js/headlessui" ".")) }}
+```
+
+This method is currently only useful in [js.Batch](/functions/js/batch/#import-context).
+
- [page bundle]: /getting-started/glossary/#page-bundle
+## Pattern matching
+
+With the `GetMatch` and `Match` methods, Hugo determines a match using a case-insensitive [glob pattern].
+
+{{% include "functions/_common/glob-patterns.md" %}}
+
+[`resources.ByType`]: /functions/resources/ByType/
+[`resources.GetMatch`]: /functions/resources/ByType/
+[`resources.Get`]: /functions/resources/ByType/
+[`resources.Match`]: /functions/resources/ByType/
+[`resources`]: /functions/resources/
+[glob pattern]: https://github.com/gobwas/glob#example
+[media type]: https://en.wikipedia.org/wiki/Media_type
--- /dev/null
- The `Scratch` method on a `Page` object creates a [scratch pad] to store and manipulate data. To create a scratch pad that is not reset on server rebuilds, use the [`Store`] method instead.
+---
+title: Scratch
+description: Returns a "scratch pad" on the given page to store and manipulate data.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Store
+ - functions/collections/NewScratch
+ returnType: maps.Scratch
+ signatures: [PAGE.Scratch]
+toc: true
+aliases: [/extras/scratch/,/doc/scratch/,/functions/scratch]
++expiryDate: 2025-11-18 # deprecated 2024-11-18
+---
+
+{{% deprecated-in 0.138.0 %}}
+Use the [`PAGE.Store`] method instead.
+
+This is a soft deprecation. This method will be removed in a future release, but the removal date has not been established. Although Hugo will not emit a warning if you continue to use this method, you should begin using `PAGE.Store` as soon as possible.
+
+Beginning with v0.138.0 the `PAGE.Scratch` method is aliased to `PAGE.Store`.
+
+[`PAGE.Store`]: /methods/page/store/
+{{% /deprecated-in %}}
+
- [scratch pad]: /getting-started/glossary/#scratch-pad
++The `Scratch` method on a `Page` object creates a [scratch pad](g) to store and manipulate data. To create a scratch pad that is not reset on server rebuilds, use the [`Store`] method instead.
+
+To create a locally scoped scratch pad that is not attached to a `Page` object, use the [`newScratch`] function.
+
+[`Store`]: /methods/page/store/
+[`newScratch`]: /functions/collections/newscratch/
- If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop] variable:
-
- [noop]: /getting-started/glossary/#noop
+
+{{% include "methods/page/_common/scratch-methods.md" %}}
+
+## Determinate values
+
+The `Scratch` method is often used to set scratch pad values within a shortcode, a partial template called by a shortcode, or by a Markdown render hook. In all three cases, the scratch pad values are indeterminate until Hugo renders the page content.
+
++If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop](g) variable:
+
+```go-html-template
+{{ $noop := .Content }}
+{{ .Store.Get "mykey" }}
+```
+
+You can also trigger content rendering with the `ContentWithoutSummary`, `FuzzyWordCount`, `Len`, `Plain`, `PlainWords`, `ReadingTime`, `Summary`, `Truncated`, and `WordCount` methods. For example:
+
+```go-html-template
+{{ $noop := .WordCount }}
+{{ .Store.Get "mykey" }}
+```
--- /dev/null
-
+---
+title: Section
+description: Returns the name of the top level section in which the given page resides.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Type
+ returnType: string
+ signatures: [PAGE.Section]
+---
+
+With this content structure:
+
+```text
+content/
+├── lessons/
+│ ├── math/
+│ │ ├── _index.md
+│ │ ├── lesson-1.md
+│ │ └── lesson-2.md
+│ └── _index.md
+└── _index.md
+```
+
+When rendering lesson-1.md:
+
+```go-html-template
+{{ .Section }} → lessons
+```
+
+In the example above "lessons" is the top level section.
+
+The `Section` method is often used with the [`where`] function to build a page collection.
+
+```go-html-template
+{{ range where .Site.RegularPages "Section" "lessons" }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
+
+This is similar to using the [`Type`] method with the `where` function
+
+```go-html-template
+{{ range where .Site.RegularPages "Type" "lessons" }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
+
+However, if the `type` field in front matter has been defined on one or more pages, the page collection based on `Type` will be different than the page collection based on `Section`.
+
+[`where`]: /functions/collections/where/
+[`Type`]: /methods/page/type/
--- /dev/null
- The `Store` method on a `Page` object creates a persistent [scratch pad] to store and manipulate data. To create a locally scoped scratch pad that is not attached to a `Page` object, use the [`newScratch`] function.
+---
+title: Store
+linktitle: PAGE.Store
+description: Returns a persistent "scratch pad" on the given page to store and manipulate data.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/scratch
+ - methods/site/store
+ - functions/hugo/store
+ - functions/collections/NewScratch
+ returnType: maps.Scratch
+ signatures: [PAGE.Store]
+toc: true
+aliases: [/functions/store]
+---
+
- [scratch pad]: /getting-started/glossary/#scratch-pad
++The `Store` method on a `Page` object creates a persistent [scratch pad](g) to store and manipulate data. To create a locally scoped scratch pad that is not attached to a `Page` object, use the [`newScratch`] function.
+
+[`Scratch`]: /methods/page/scratch/
+[`newScratch`]: /functions/collections/newscratch/
- If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop] variable:
-
- [noop]: /getting-started/glossary/#noop
+
+## Methods
+
+###### Set
+
+Sets the value of a given key.
+
+```go-html-template
+{{ .Store.Set "greeting" "Hello" }}
+```
+
+###### Get
+
+Gets the value of a given key.
+
+```go-html-template
+{{ .Store.Set "greeting" "Hello" }}
+{{ .Store.Get "greeting" }} → Hello
+```
+
+###### Add
+
+Adds a given value to existing value(s) of the given key.
+
+For single values, `Add` accepts values that support Go's `+` operator. If the first `Add` for a key is an array or slice, the following adds will be appended to that list.
+
+```go-html-template
+{{ .Store.Set "greeting" "Hello" }}
+{{ .Store.Add "greeting" "Welcome" }}
+{{ .Store.Get "greeting" }} → HelloWelcome
+```
+
+```go-html-template
+{{ .Store.Set "total" 3 }}
+{{ .Store.Add "total" 7 }}
+{{ .Store.Get "total" }} → 10
+```
+
+```go-html-template
+{{ .Store.Set "greetings" (slice "Hello") }}
+{{ .Store.Add "greetings" (slice "Welcome" "Cheers") }}
+{{ .Store.Get "greetings" }} → [Hello Welcome Cheers]
+```
+
+###### SetInMap
+
+Takes a `key`, `mapKey` and `value` and adds a map of `mapKey` and `value` to the given `key`.
+
+```go-html-template
+{{ .Store.SetInMap "greetings" "english" "Hello" }}
+{{ .Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ .Store.Get "greetings" }} → map[english:Hello french:Bonjour]
+```
+
+###### DeleteInMap
+
+Takes a `key` and `mapKey` and removes the map of `mapKey` from the given `key`.
+
+```go-html-template
+{{ .Store.SetInMap "greetings" "english" "Hello" }}
+{{ .Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ .Store.DeleteInMap "greetings" "english" }}
+{{ .Store.Get "greetings" }} → map[french:Bonjour]
+```
+
+###### GetSortedMapValues
+
+Returns an array of values from `key` sorted by `mapKey`.
+
+```go-html-template
+{{ .Store.SetInMap "greetings" "english" "Hello" }}
+{{ .Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ .Store.GetSortedMapValues "greetings" }} → [Hello Bonjour]
+```
+
+###### Delete
+
+Removes the given key.
+
+```go-html-template
+{{ .Store.Set "greeting" "Hello" }}
+{{ .Store.Delete "greeting" }}
+```
+
+## Determinate values
+
+The `Store` method is often used to set scratch pad values within a shortcode, a partial template called by a shortcode, or by a Markdown render hook. In all three cases, the scratch pad values are indeterminate until Hugo renders the page content.
+
++If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop](g) variable:
+
+```go-html-template
+{{ $noop := .Content }}
+{{ .Store.Get "mykey" }}
+```
+
+You can also trigger content rendering with the `ContentWithoutSummary`, `FuzzyWordCount`, `Len`, `Plain`, `PlainWords`, `ReadingTime`, `Summary`, `Truncated`, and `WordCount` methods. For example:
+
+```go-html-template
+{{ $noop := .WordCount }}
+{{ .Store.Get "mykey" }}
+```
--- /dev/null
- {{% comment %}}
- Do not remove the manual summary divider below.
- If you do, you will break its first literal usage on this page.
- {{% /comment %}}
+---
+title: Summary
+description: Returns the summary of the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Truncated
+ - methods/page/Content
+ - methods/page/ContentWithoutSummary
+ - methods/page/Description
+ returnType: template.HTML
+ signatures: [PAGE.Summary]
+---
+
++<!-- Do not remove the manual summary divider below. -->
++<!-- If you do, you will break its first literal usage on this page. -->
++
+<!--more-->
+
+You can define a [summary] manually, in front matter, or automatically. A manual summary takes precedence over a front matter summary, and a front matter summary takes precedence over an automatic summary.
+
+[summary]: /content-management/summaries/
+
+To list the pages in a section with a summary beneath each link:
+
+```go-html-template
+{{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ .Summary }}
+{{ end }}
+```
+
+Depending on content length and how you define the summary, the summary may be equivalent to the content itself. To determine whether the content length exceeds the summary length, use the [`Truncated`] method on a `Page` object. This is useful for conditionally rendering a “read more” link:
+
+[`Truncated`]: /methods/page/truncated
+
+```go-html-template
+{{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ .Summary }}
+ {{ if .Truncated }}
+ <a href="{{ .RelPermalink }}">Read more...</a>
+ {{ end }}
+{{ end }}
+```
+
+{{% note %}}
+The `Truncated` method returns `false` if you define the summary in front matter.
+{{% /note %}}
--- /dev/null
- The `Type` method on a `Page` object returns the [content type] of the given page. The content type is defined by the `type` field in front matter, or inferred from the top-level directory name if the `type` field in front matter is not defined.
+---
+title: Type
+description: Returns the content type of the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/Kind
+ - methods/page/Layout
+ - methods/page/Type
+ returnType: string
+ signatures: [PAGE.Type]
+---
+
- To list the books, regardless of [section]:
++The `Type` method on a `Page` object returns the [content type](g) of the given page. The content type is defined by the `type` field in front matter, or inferred from the top-level directory name if the `type` field in front matter is not defined.
+
+With this content structure:
+
+```text
+content/
+├── auction/
+│ ├── _index.md
+│ ├── item-1.md
+│ └── item-2.md <-- front matter: type = books
+├── books/
+│ ├── _index.md
+│ ├── book-1.md
+│ └── book-2.md
+├── films/
+│ ├── _index.md
+│ ├── film-1.md
+│ └── film-2.md
+└── _index.md
+```
+
- [content type]: /getting-started/glossary/#content-type
++To list the books, regardless of [section](g):
+
+```go-html-template
+{{ range where .Site.RegularPages.ByTitle "Type" "books" }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
+
+Hugo renders this to;
+
+```html
+<h2><a href="/books/book-1/">Book 1</a></h2>
+<h2><a href="/books/book-2/">Book 2</a></h2>
+<h2><a href="/auction/item-2/">Item 2</a></h2>
+```
+
+The `type` field in front matter is also useful for targeting a template. See [details].
+
- [section]: /getting-started/glossary/#section
+[details]: /templates/lookup-order/#target-a-template
--- /dev/null
- The `Weight` method on a `Page` object returns the [weight] of the given page as defined in front matter.
-
- [weight]: /getting-started/glossary/#weight
+---
+title: Weight
+description: Returns the weight of the given page as defined in front matter.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: int
+ signatures: [PAGE.Weight]
+---
+
++The `Weight` method on a `Page` object returns the [weight](g) of the given page as defined in front matter.
+
+{{< code-toggle file=content/recipes/sushi.md fm=true >}}
+title = 'How to make spicy tuna hand rolls'
+weight = 42
+{{< /code-toggle >}}
+
+Page weight controls the position of a page within a collection that is sorted by weight. Assign weights using non-zero integers. Lighter items float to the top, while heavier items sink to the bottom. Unweighted or zero-weighted elements are placed at the end of the collection.
+
+Although rarely used within a template, you can access the value with:
+
+```go-html-template
+{{ .Weight }} → 42
+```
--- /dev/null
- A _section_ is a top-level content directory, or any content directory with an _index.md file.
+---
+_comment: Do not remove front matter.
+---
+
++A _section_ is a top-level content directory, or any content directory with an `_index.md` file.
--- /dev/null
- [site configuration]: getting-started/configuration/#configure-page
+---
+_comment: Do not remove front matter.
+---
+
+Hugo determines the _next_ and _previous_ page by sorting the site's collection of regular pages according to this sorting hierarchy:
+
+Field|Precedence|Sort direction
+:--|:--|:--
+[`weight`]|1|descending
+[`date`]|2|descending
+[`linkTitle`]|3|descending
+[`path`]|4|descending
+
+[`date`]: /methods/page/date/
+[`weight`]: /methods/page/weight/
+[`linkTitle`]: /methods/page/linktitle/
+[`path`]: /methods/page/path/
+
+The sorted page collection used to determine the _next_ and _previous_ page is independent of other page collections, which may lead to unexpected behavior.
+
+For example, with this content structure:
+
+```text
+content/
+├── pages/
+│ ├── _index.md
+│ ├── page-1.md <-- front matter: weight = 10
+│ ├── page-2.md <-- front matter: weight = 20
+│ └── page-3.md <-- front matter: weight = 30
+└── _index.md
+```
+
+And these templates:
+
+{{< code file=layouts/_default/list.html >}}
+{{ range .Pages.ByWeight }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+{{< /code >}}
+
+{{< code file=layouts/_default/single.html >}}
+{{ with .Prev }}
+ <a href="{{ .RelPermalink }}">Previous</a>
+{{ end }}
+
+{{ with .Next }}
+ <a href="{{ .RelPermalink }}">Next</a>
+{{ end }}
+{{< /code >}}
+
+When you visit page-2:
+
+- The `Prev` method points to page-3
+- The `Next` method points to page-1
+
+To reverse the meaning of _next_ and _previous_ you can change the sort direction in your [site configuration], or use the [`Next`] and [`Prev`] methods on a `Pages` object for more flexibility.
+
++[site configuration]: /getting-started/configuration/#configure-page
+[`Next`]: /methods/pages/prev
+[`Prev`]: /methods/pages/prev
--- /dev/null
- [site configuration]: getting-started/configuration/#configure-page
+---
+_comment: Do not remove front matter.
+---
+
+Hugo determines the _next_ and _previous_ page by sorting the current section's regular pages according to this sorting hierarchy:
+
+Field|Precedence|Sort direction
+:--|:--|:--
+[`weight`]|1|descending
+[`date`]|2|descending
+[`linkTitle`]|3|descending
+[`path`]|4|descending
+
+[`date`]: /methods/page/date/
+[`weight`]: /methods/page/weight/
+[`linkTitle`]: /methods/page/linktitle/
+[`path`]: /methods/page/path/
+
+The sorted page collection used to determine the _next_ and _previous_ page is independent of other page collections, which may lead to unexpected behavior.
+
+For example, with this content structure:
+
+```text
+content/
+├── pages/
+│ ├── _index.md
+│ ├── page-1.md <-- front matter: weight = 10
+│ ├── page-2.md <-- front matter: weight = 20
+│ └── page-3.md <-- front matter: weight = 30
+└── _index.md
+```
+
+And these templates:
+
+{{< code file=layouts/_default/list.html >}}
+{{ range .Pages.ByWeight }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+{{< /code >}}
+
+{{< code file=layouts/_default/single.html >}}
+{{ with .PrevInSection }}
+ <a href="{{ .RelPermalink }}">Previous</a>
+{{ end }}
+
+{{ with .NextInSection }}
+ <a href="{{ .RelPermalink }}">Next</a>
+{{ end }}
+{{< /code >}}
+
+When you visit page-2:
+
+- The `PrevInSection` method points to page-3
+- The `NextInSection` method points to page-1
+
+To reverse the meaning of _next_ and _previous_ you can change the sort direction in your [site configuration], or use the [`Next`] and [`Prev`] methods on a `Pages` object for more flexibility.
+
++[site configuration]: /getting-started/configuration/#configure-page
+[`Next`]: /methods/pages/prev
+[`Prev`]: /methods/pages/prev
+
+## Example
+
+Code defensively by checking for page existence:
+
+```go-html-template
+{{ with .PrevInSection }}
+ <a href="{{ .RelPermalink }}">Previous</a>
+{{ end }}
+
+{{ with .NextInSection }}
+ <a href="{{ .RelPermalink }}">Next</a>
+{{ end }}
+```
+
+## Alternative
+
+Use the [`Next`] and [`Prev`] methods on a `Pages` object for more flexibility.
--- /dev/null
- Assign a [weight] to a page using the `weight` field in front matter. The weight must be a non-zero integer. Lighter items float to the top, while heavier items sink to the bottom. Unweighted or zero-weighted pages are placed at the end of the collection.
-
- [weight]: /getting-started/glossary/#weight
+---
+title: ByWeight
+description: Returns the given page collection sorted by weight in ascending order.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: page.Pages
+ signatures: [PAGES.ByWeight]
+---
+
++Assign a [weight](g) to a page using the `weight` field in front matter. The weight must be a non-zero integer. Lighter items float to the top, while heavier items sink to the bottom. Unweighted or zero-weighted pages are placed at the end of the collection.
+
+```go-html-template
+{{ range .Pages.ByWeight }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
+
+To sort in descending order:
+
+```go-html-template
+{{ range .Pages.ByWeight.Reverse }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
--- /dev/null
- The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized] for language and region.
+---
+title: GroupByDate
+description: Returns the given page collection grouped by date in descending order.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/pages/GroupByExpiryDate
+ - methods/pages/GroupByLastMod
+ - methods/pages/GroupByParamDate
+ - methods/pages/GroupByPublishDate
+ returnType: page.PagesGroup
+ signatures: ['PAGES.GroupByDate LAYOUT [SORT]']
+---
+
+When grouping by date, the value is determined by your [site configuration], defaulting to the `date` field in front matter.
+
- [localized]: /getting-started/glossary/#localization
++The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized](g) for language and region.
+
+[`time.Format`]: /functions/time/format/
+[layout string]: #layout-string
+[site configuration]: /getting-started/configuration/#configure-dates
+
+{{% include "methods/pages/_common/group-sort-order.md" %}}
+
+To group content by year and month:
+
+```go-html-template
+{{ range .Pages.GroupByDate "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+To sort the groups in ascending order:
+
+```go-html-template
+{{ range .Pages.GroupByDate "January 2006" "asc" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+The pages within each group will also be sorted by date, either ascending or descending depending on the grouping option. To sort the pages within each group, use one of the sorting methods. For example, to sort the pages within each group by title:
+
+```go-html-template
+{{ range .Pages.GroupByDate "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
--- /dev/null
- The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized] for language and region.
+---
+title: GroupByExpiryDate
+description: Returns the given page collection grouped by expiration date in descending order.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/pages/GroupByDate
+ - methods/pages/GroupByLastMod
+ - methods/pages/GroupByParamDate
+ - methods/pages/GroupByPublishDate
+ returnType: page.PagesGroup
+ signatures: ['PAGES.GroupByExpiryDate LAYOUT [SORT]']
+---
+
+When grouping by expiration date, the value is determined by your [site configuration], defaulting to the `expiryDate` field in front matter.
+
- [localized]: /getting-started/glossary/#localization
++The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized](g) for language and region.
+
+[`time.Format`]: /functions/time/format/
+[layout string]: #layout-string
+[site configuration]: /getting-started/configuration/#configure-dates
+
+{{% include "methods/pages/_common/group-sort-order.md" %}}
+
+To group content by year and month:
+
+```go-html-template
+{{ range .Pages.GroupByExpiryDate "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+To sort the groups in ascending order:
+
+```go-html-template
+{{ range .Pages.GroupByExpiryDate "January 2006" "asc" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+The pages within each group will also be sorted by expiration date, either ascending or descending depending on your grouping option. To sort the pages within each group, use one of the sorting methods. For example, to sort the pages within each group by title:
+
+```go-html-template
+{{ range .Pages.GroupByExpiryDate "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
--- /dev/null
- The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized] for language and region.
+---
+title: GroupByLastmod
+description: Returns the given page collection grouped by last modification date in descending order.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/pages/GroupByDate
+ - methods/pages/GroupByExpiryDate
+ - methods/pages/GroupByParamDate
+ - methods/pages/GroupByPublishDate
+ returnType: page.PagesGroup
+ signatures: ['PAGES.GroupByLastmod LAYOUT [SORT]']
+---
+
+When grouping by last modification date, the value is determined by your [site configuration], defaulting to the `lastmod` field in front matter.
+
- [localized]: /getting-started/glossary/#localization
++The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized](g) for language and region.
+
+[`time.Format`]: /functions/time/format/
+[layout string]: #layout-string
+[site configuration]: /getting-started/configuration/#configure-dates
+
+{{% include "methods/pages/_common/group-sort-order.md" %}}
+
+To group content by year and month:
+
+```go-html-template
+{{ range .Pages.GroupByLastmod "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+To sort the groups in ascending order:
+
+```go-html-template
+{{ range .Pages.GroupByLastmod "January 2006" "asc" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+The pages within each group will also be sorted by last modification date, either ascending or descending depending on your grouping option. To sort the pages within each group, use one of the sorting methods. For example, to sort the pages within each group by title:
+
+```go-html-template
+{{ range .Pages.GroupByLastmod "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
--- /dev/null
- The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized] for language and region.
+---
+title: GroupByParamDate
+description: Returns the given page collection grouped by the given date parameter in descending order.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/pages/GroupByDate
+ - methods/pages/GroupByExpiryDate
+ - methods/pages/GroupByLastMod
+ - methods/pages/GroupByPublishDate
+ returnType: page.PagesGroup
+ signatures: ['PAGES.GroupByParamDate PARAM LAYOUT [SORT]']
+---
+
- [localized]: /getting-started/glossary/#localization
++The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized](g) for language and region.
+
+[`time.Format`]: /functions/time/format/
+[layout string]: #layout-string
+
+{{% include "methods/pages/_common/group-sort-order.md" %}}
+
+To group content by year and month:
+
+```go-html-template
+{{ range .Pages.GroupByParamDate "eventDate" "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+To sort the groups in ascending order:
+
+```go-html-template
+{{ range .Pages.GroupByParamDate "eventDate" "January 2006" "asc" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+The pages within each group will also be sorted by the parameter date, either ascending or descending depending on your grouping option. To sort the pages within each group, use one of the sorting methods. For example, to sort the pages within each group by title:
+
+```go-html-template
+{{ range .Pages.GroupByParamDate "eventDate" "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
--- /dev/null
- The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized] for language and region.
+---
+title: GroupByPublishDate
+description: Returns the given page collection grouped by publish date in descending order.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/pages/GroupByDate
+ - methods/pages/GroupByExpiryDate
+ - methods/pages/GroupByLastMod
+ - methods/pages/GroupByParamDate
+ returnType: page.PagesGroup
+ signatures: ['PAGES.GroupByPublishDate LAYOUT [SORT]']
+---
+
+When grouping by publish date, the value is determined by your [site configuration], defaulting to the `publishDate` field in front matter.
+
- [localized]: /getting-started/glossary/#localization
++The [layout string] has the same format as the layout string for the [`time.Format`] function. The resulting group key is [localized](g) for language and region.
+
+[`time.Format`]: /functions/time/format/
+[layout string]: #layout-string
+[site configuration]: /getting-started/configuration/#configure-dates
+
+{{% include "methods/pages/_common/group-sort-order.md" %}}
+
+To group content by year and month:
+
+```go-html-template
+{{ range .Pages.GroupByPublishDate "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+To sort the groups in ascending order:
+
+```go-html-template
+{{ range .Pages.GroupByPublishDate "January 2006" "asc" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+The pages within each group will also be sorted by publish date, either ascending or descending depending on your grouping option. To sort the pages within each group, use one of the sorting methods. For example, to sort the pages within each group by title:
+
+```go-html-template
+{{ range .Pages.GroupByPublishDate "January 2006" }}
+ <p>{{ .Key }}</p>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
--- /dev/null
-
+---
+title: Related
+description: Returns a collection of pages related to the given page.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/HeadingsFiltered
+ - functions/collections/KeyVals
+ returnType: page.Pages
+ signatures:
+ - PAGES.Related PAGE
+ - PAGES.Related OPTIONS
+---
+
+Based on front matter, Hugo uses several factors to identify content related to the given page. Use the default [related content configuration], or tune the results to the desired indices and parameters. See [details].
+
+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 >}}
+{{ with .Site.RegularPages.Related . | first 5 }}
+ <p>Related pages:</p>
+ <ul>
+ {{ range . }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+{{< /code >}}
+
+To pass an options map:
+
+{{< code file=layouts/_default/single.html >}}
+{{ $opts := dict
+ "document" .
+ "indices" (slice "tags" "keywords")
+}}
+{{ with .Site.RegularPages.Related $opts | first 5 }}
+ <p>Related pages:</p>
+ <ul>
+ {{ range . }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+{{< /code >}}
+
- : (`slice`) A list of special keywords that is used for indices configured as type "fragments". This will match the [fragment] identifiers of the documents.
+## Options
+
+indices
+: (`slice`) The indices to search within.
+
+document
+: (`page`) The page for which to find related content. Required when specifying an options map.
+
+namedSlices
+: (`slice`) The keywords to search for, expressed as a slice of `KeyValues` using the [`keyVals`] function.
+
+[`keyVals`]: /functions/collections/keyvals/
+
+fragments
- [fragment]: /getting-started/glossary/#fragment
++: (`slice`) A list of special keywords that is used for indices configured as type "fragments". This will match the [fragment](g) identifiers of the documents.
+
+A contrived example using all of the above:
+
+```go-html-template
+{{ $page := . }}
+{{ $opts := dict
+ "indices" (slice "tags" "keywords")
+ "document" $page
+ "namedSlices" (slice (keyVals "tags" "hugo" "rocks") (keyVals "date" $page.Date))
+ "fragments" (slice "heading-1" "heading-2")
+}}
+```
+
+[details]: /content-management/related/
+[related content configuration]: /content-management/related/
--- /dev/null
-
+---
+title: Colors
+description: Applicable to images, returns a slice of the most dominant colors using a simple histogram method.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: '[]images.Color'
+ signatures: [RESOURCE.Colors]
+toc: true
+math: true
+---
+
+The `Resources.Colors` method returns a slice of the most dominant colors in an image, ordered from most dominant to least dominant. This method is fast, but if you also downsize your image you can improve performance by extracting the colors from the scaled image.
+
+{{% include "methods/resource/_common/global-page-remote-resources.md" %}}
+
+## Methods
+
+Each color is an object with the following methods:
+
+ColorHex
+{{< new-in 0.125.0 >}}
+: (`string`) Returns the [hexadecimal color] value, prefixed with a hash sign.
+
+Luminance
+{{< new-in 0.125.0 >}}
+: (`float64`) Returns the [relative luminance] of the color in the sRGB colorspace in the range [0, 1]. A value of `0` represents the darkest black, while a value of `1` represents the lightest white.
+
+{{% note %}}
+Image filters such as [`images.Dither`], [`images.Padding`], and [`images.Text`] accept either hexadecimal color values or `images.Color` objects as arguments.
+
+Hugo renders an `images.Color` object as a hexadecimal color value.
+
+[`images.Dither`]: /functions/images/dither/
+[`images.Padding`]: /functions/images/padding/
+[`images.Text`]: /functions/images/text/
+{{% /note %}}
+
+[hexadecimal color]: https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
+[relative luminance]: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+
+## Sorting
+
+As a contrived example, create a table of an image's dominant colors with the most dominant color first, and display the relative luminance of each dominant color:
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ <table>
+ <thead>
+ <tr>
+ <th>Color</th>
+ <th>Relative luminance</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{ range .Colors }}
+ <tr>
+ <td>{{ .ColorHex }}</td>
+ <td>{{ .Luminance | lang.FormatNumber 4 }}</td>
+ </tr>
+ {{ end }}
+ </tbody>
+ </table>
+{{ end }}
+```
+
+Hugo renders this to:
+
+ColorHex|Relative luminance
+:--|:--
+`#bebebd`|`0.5145`
+`#514947`|`0.0697`
+`#768a9a`|`0.2436`
+`#647789`|`0.1771`
+`#90725e`|`0.1877`
+`#a48974`|`0.2704`
+
+To sort by dominance with the least dominant color first:
+
+```go-html-template
+{{ range .Colors | collections.Reverse }}
+```
+
+To sort by relative luminance with the darkest color first:
+
+```go-html-template
+{{ range sort .Colors "Luminance" }}
+```
+
+To sort by relative luminance with the lightest color first, use either of these constructs:
+
+```go-html-template
+{{ range sort .Colors "Luminance" | collections.Reverse }}
+{{ range sort .Colors "Luminance" "desc" }}
+```
+
+## Examples
+
+### Image borders
+
+To add a 5 pixel border to an image using the most dominant color:
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ {{ $mostDominant := index .Colors 0 }}
+ {{ $filter := images.Padding 5 $mostDominant }}
+ {{ with .Filter $filter }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ end }}
+```
+
+To add a 5 pixel border to an image using the darkest dominant color:
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ {{ $darkest := index (sort .Colors "Luminance") 0 }}
+ {{ $filter := images.Padding 5 $darkest }}
+ {{ with .Filter $filter }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ end }}
+```
+
+### Light text on dark background
+
+To create a text box where the foreground and background colors are derived from an image's lightest and darkest dominant colors:
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ {{ $darkest := index (sort .Colors "Luminance") 0 }}
+ {{ $lightest := index (sort .Colors "Luminance" "desc") 0 }}
+ <div style="background: {{ $darkest }};">
+ <div style="color: {{ $lightest }};">
+ <p>This is light text on a dark background.</p>
+ </div>
+ </div>
+{{ end }}
+```
+
+### WCAG contrast ratio
+
+In the previous example we placed light text on a dark background, but does this color combination conform to [WCAG] guidelines for either the [minimum] or the [enhanced] contrast ratio?
+
+The WCAG defines the [contrast ratio] as:
+
+$$contrast\ ratio = { L_1 + 0.05 \over L_2 + 0.05 }$$
+
+where $L_1$ is the relative luminance of the lightest color and $L_2$ is the relative luminance of the darkest color.
+
+Calculate the contrast ratio to determine WCAG conformance:
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ {{ $lightest := index (sort .Colors "Luminance" "desc") 0 }}
+ {{ $darkest := index (sort .Colors "Luminance") 0 }}
+ {{ $cr := div
+ (add $lightest.Luminance 0.05)
+ (add $darkest.Luminance 0.05)
+ }}
+ {{ if ge $cr 7.5 }}
+ {{ printf "The %.2f contrast ratio conforms to WCAG Level AAA." $cr }}
+ {{ else if ge $cr 4.5 }}
+ {{ printf "The %.2f contrast ratio conforms to WCAG Level AA." $cr }}
+ {{ else }}
+ {{ printf "The %.2f contrast ratio does not conform to WCAG guidelines." $cr }}
+ {{ end }}
+{{ end }}
+```
+
+[WCAG]: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines
+[contrast ratio]: https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+[enhanced]: https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=145#contrast-enhanced
+[minimum]: https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=145#contrast-minimum
--- /dev/null
- {{ with resources.GetRemote $url }}
+---
+title: Data
+description: Applicable to resources returned by the resources.GetRemote function, returns information from the HTTP response.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/resources/GetRemote
+ - methods/resource/Err
+ returnType: map
+ signatures: [RESOURCE.Data]
+---
+
+The `Data` method on a resource returned by the [`resources.GetRemote`] function returns information from the HTTP response.
+
+[`resources.GetRemote`]: /functions/resources/getremote/
+
+```go-html-template
+{{ $url := "https://example.org/images/a.jpg" }}
- {{ else }}
++{{ with try (resources.GetRemote $url) }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
- {{ else }}
- {{ errorf "Unable to get remote resource %q" $url }}
++ {{ else with .Value }}
+ {{ with .Data }}
+ {{ .ContentLength }} → 42764
+ {{ .ContentType }} → image/jpeg
+ {{ .Status }} → 200 OK
+ {{ .StatusCode }} → 200
+ {{ .TransferEncoding }} → []
+ {{ end }}
++ {{ else }}
++ {{ errorf "Unable to get remote resource %q" $url }}
+ {{ end }}
-
+{{ end }}
+```
+
+ContentLength
+: (`int`) The content length in bytes.
+
+ContentType
+: (`string`) The content type.
+
+Status
+: (`string`) The HTTP status text.
+
+StatusCode
+: (`int`) The HTTP status code.
+
+TransferEncoding
+: (`string`) The transfer encoding.
+
+[`resources.GetRemote`]: /functions/resources/getremote/
--- /dev/null
+---
+title: Err
+description: Applicable to resources returned by the resources.GetRemote function, returns an error message if the HTTP request fails, else nil.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/resources/GetRemote
+ - methods/resource/Data
+ returnType: resource.resourceError
+ signatures: [RESOURCE.Err]
++expiryDate: 2026-01-16 # deprecated 2025-01-16
+---
+
++{{% deprecated-in 0.141.0 %}}
++Use the `try` statement instead. See [example].
++
++[example]: /functions/go-template/try/#example
++{{% /deprecated-in %}}
++
+The `Err` method on a resource returned by the [`resources.GetRemote`] function returns an error message if the HTTP request fails, else nil. If you do not handle the error yourself, Hugo will fail the build.
+
+[`resources.GetRemote`]: /functions/resources/getremote/
+
+In this example we send an HTTP request to a nonexistent domain:
+
+```go-html-template
+{{ $url := "https://broken-example.org/images/a.jpg" }}
+{{ with resources.GetRemote $url }}
+ {{ with .Err }}
+ {{ errorf "%s" . }}
+ {{ else }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ else }}
+ {{ errorf "Unable to get remote resource %q" $url }}
+{{ end }}
+```
+
+The code above captures the error from the HTTP request, then fails the build:
+
+```text
+ERROR error calling resources.GetRemote: Get "https://broken-example.org/images/a.jpg": dial tcp: lookup broken-example.org on 127.0.0.53:53: no such host
+```
+
+To log an error as a warning instead of an error:
+
+```go-html-template
+{{ $url := "https://broken-example.org/images/a.jpg" }}
+{{ with resources.GetRemote $url }}
+ {{ with .Err }}
+ {{ warnf "%s" . }}
+ {{ else }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ else }}
+ {{ errorf "Unable to get remote resource %q" $url }}
+{{ end }}
+```
+
+{{% note %}}
+An HTTP response with a 404 status code is not an HTTP request error. To handle 404 status codes, code defensively using the nested `with-else-end` construct as shown above.
+{{% /note %}}
--- /dev/null
-
+---
+title: Key
+description: Returns the unique key for the given resource, equivalent to its publishing path.
+draft: true
+categories: []
+keywords: []
+action:
+ related:
+ - methods/resource/Permalink
+ - methods/resource/RelPermalink
+ - methods/resource/Publish
+ returnType: string
+ signatures: [RESOURCE.Key]
+---
+
+By way of example, consider this site configuration:
+
+{{< code-toggle file=hugo >}}
+baseURL = 'https://example.org/docs/'
+{{< /code-toggle >}}
+
+And this template:
+
+```go-html-template
+ {{ with resources.Get "images/a.jpg" }}
+ {{ with resources.Copy "foo/bar/b.jpg" . }}
+ {{ .Key }} → foo/bar/b.jpg
+
+ {{ .Name }} → images/a.jpg
+ {{ .Title }} → images/a.jpg
+
+ {{ .RelPermalink }} → /docs/foo/bar/b.jpg
+ {{ end }}
+ {{ end }}
+```
+
+We used the [`resources.Copy`] function to change the publishing path. The `Key` method returns the updated path, but note that it is different than the value returned by [`RelPermalink`]. The `RelPermalink` value includes the subdirectory segment of the `baseURL` in the site configuration.
+
+The `Key` method is useful if you need to get the resource's publishing path without publishing the resource. Unlike the `Permalink`, `RelPermalink`, or `Publish` methods, calling `Key` will not publish the resource.
+
+{{% include "methods/resource/_common/global-page-remote-resources.md" %}}
+
+[`Permalink`]: /methods/resource/permalink/
+[`RelPermalink`]: /methods/resource/relpermalink/
+[`resources.Copy`]: /functions/resources/copy/
--- /dev/null
- With a [global resource], the `Name` method returns the path to the resource, relative to the assets directory.
+---
+title: Name
+description: Returns the name of the given resource as optionally defined in front matter, falling back to its file path.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/resource/Title
+ returnType: string
+ signatures: [RESOURCE.Name]
+toc: true
+---
+
+The value returned by the `Name` method on a `Resource` object depends on the resource type.
+
+## Global resource
+
- With a [page resource], if you create an element in the `resources` array in front matter, the `Name` method returns the value of the `name` parameter.
++With a [global resource](g), the `Name` method returns the path to the resource, relative to the `assets` directory.
+
+```text
+assets/
+└── images/
+ └── Sunrise in Bryce Canyon.jpg
+```
+
+```go-html-template
+{{ with resources.Get "images/Sunrise in Bryce Canyon.jpg" }}
+ {{ .Name }} → /images/Sunrise in Bryce Canyon.jpg
+{{ end }}
+```
+
+## Page resource
+
- With a [remote resource], the `Name` method returns a hashed file name.
++With a [page resource](g), if you create an element in the `resources` array in front matter, the `Name` method returns the value of the `name` parameter.
+
+```text
+content/
+├── example/
+│ ├── images/
+│ │ └── a.jpg
+│ └── index.md
+└── _index.md
+```
+
+{{< code-toggle file=content/example/index.md fm=true >}}
+title = 'Example'
+[[resources]]
+src = 'images/a.jpg'
+name = 'Sunrise in Bryce Canyon'
+{{< /code-toggle >}}
+
+```go-html-template
+{{ with .Resources.Get "images/a.jpg" }}
+ {{ .Name }} → Sunrise in Bryce Canyon
+{{ end }}
+```
+
+You can also capture the image by specifying its `name` instead of its path:
+
+```go-html-template
+{{ with .Resources.Get "Sunrise in Bryce Canyon" }}
+ {{ .Name }} → Sunrise in Bryce Canyon
+{{ end }}
+```
+
+If you do not create an element in the `resources` array in front matter, the `Name` method returns the file path, relative to the page bundle.
+
+```text
+content/
+├── example/
+│ ├── images/
+│ │ └── Sunrise in Bryce Canyon.jpg
+│ └── index.md
+└── _index.md
+```
+
+```go-html-template
+{{ with .Resources.Get "images/Sunrise in Bryce Canyon.jpg" }}
+ {{ .Name }} → images/Sunrise in Bryce Canyon.jpg
+{{ end }}
+```
+## Remote resource
+
-
- [global resource]: /getting-started/glossary/#global-resource
- [logical path]: /getting-started/glossary/#logical-path
- [page resource]: /getting-started/glossary/#page-resource
- [remote resource]: /getting-started/glossary/#remote-resource
++With a [remote resource](g), the `Name` method returns a hashed file name.
+
+```go-html-template
+{{ with resources.GetRemote "https://example.org/images/a.jpg" }}
+ {{ .Name }} → /a_18432433023265451104.jpg
+{{ end }}
+```
--- /dev/null
- Use the `Params` method with [page resources]. It is not applicable to either [global] or [remote] resources.
-
- [global]: /getting-started/glossary/#global-resource
- [page resources]: /getting-started/glossary/#page-resource
- [remote]: /getting-started/glossary/#remote-resource
+---
+title: Params
+description: Returns a map of resource parameters as defined in front matter.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: map
+ signatures: [RESOURCE.Params]
+---
+
++Use the `Params` method with [page resources](g). It is not applicable to either [global resources](g) or [remote resources](g).
+
+With this content structure:
+
+```text
+content/
+├── posts/
+│ ├── cats/
+│ │ ├── images/
+│ │ │ └── a.jpg
+│ │ └── index.md
+│ └── _index.md
+└── _index.md
+```
+
+And this front matter:
+
+{{< code-toggle file=content/posts/cats.md fm=true >}}
+title = 'Cats'
+[[resources]]
+ src = 'images/a.jpg'
+ title = 'Felix the cat'
+ [resources.params]
+ alt = 'Photograph of black cat'
+ temperament = 'vicious'
+{{< /code-toggle >}}
+
+And this template:
+
+```go-html-template
+{{ with .Resources.Get "images/a.jpg" }}
+ <figure>
+ <img alt="{{ .Params.alt }}" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
+ <figcaption>{{ .Title }} is {{ .Params.temperament }}</figcaption>
+ </figure>
+{{ end }}
+```
+
+Hugo renders:
+
+```html
+<figure>
+ <img alt="Photograph of black cat" src="/posts/post-1/images/a.jpg" width="600" height="400">
+ <figcaption>Felix the cat is vicious</figcaption>
+</figure>
+```
+
+See the [page resources] section for more information.
+
+[page resources]: /content-management/page-resources/
--- /dev/null
- The `Permalink` method on a `Resource` object writes the resource to the publish directory, typically `public`, and returns its [permalink].
-
- [permalink]: /getting-started/glossary/#permalink
+---
+title: Permalink
+description: Publishes the given resource and returns its permalink.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/resource/RelPermalink
+ - methods/resource/Publish
+ returnType: string
+ signatures: [RESOURCE.Permalink]
+---
+
++The `Permalink` method on a `Resource` object writes the resource to the publish directory, typically `public`, and returns its [permalink](g).
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ {{ .Permalink }} → https://example.org/images/a.jpg
+{{ end }}
+```
+
+{{% include "methods/resource/_common/global-page-remote-resources.md" %}}
--- /dev/null
- The `Permalink` method on a `Resource` object writes the resource to the publish directory, typically `public`, and returns its [relative permalink].
-
- [relative permalink]: /getting-started/glossary/#relative-permalink
+---
+title: RelPermalink
+description: Publishes the given resource and returns its relative permalink.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/resource/Permalink
+ - methods/resource/Publish
+ returnType: string
+ signatures: [RESOURCE.RelPermalink]
+---
+
++The `Permalink` method on a `Resource` object writes the resource to the publish directory, typically `public`, and returns its [relative permalink](g).
+
+```go-html-template
+{{ with resources.Get "images/a.jpg" }}
+ {{ .RelPermalink }} → /images/a.jpg
+{{ end }}
+```
+
+{{% include "methods/resource/_common/global-page-remote-resources.md" %}}
--- /dev/null
- With a [global resource], the `Title` method returns the path to the resource, relative to the assets directory.
+---
+title: Title
+description: Returns the title of the given resource as optionally defined in front matter, falling back to a relative path or hashed file name depending on resource type.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/resource/Name
+ returnType: string
+ signatures: [RESOURCE.Title]
+toc: true
+---
+
+The value returned by the `Title` method on a `Resource` object depends on the resource type.
+
+## Global resource
+
- With a [page resource], if you create an element in the `resources` array in front matter, the `Title` method returns the value of the `title` parameter.
++With a [global resource](g), the `Title` method returns the path to the resource, relative to the `assets` directory.
+
+```text
+assets/
+└── images/
+ └── Sunrise in Bryce Canyon.jpg
+```
+
+```go-html-template
+{{ with resources.Get "images/Sunrise in Bryce Canyon.jpg" }}
+ {{ .Title }} → /images/Sunrise in Bryce Canyon.jpg
+{{ end }}
+```
+
+## Page resource
+
- With a [remote resource], the `Title` method returns a hashed file name.
++With a [page resource](g), if you create an element in the `resources` array in front matter, the `Title` method returns the value of the `title` parameter.
+
+```text
+content/
+├── example/
+│ ├── images/
+│ │ └── a.jpg
+│ └── index.md
+└── _index.md
+```
+
+{{< code-toggle file=content/example/index.md fm=true >}}
+title = 'Example'
+[[resources]]
+src = 'images/a.jpg'
+title = 'A beautiful sunrise in Bryce Canyon'
+{{< /code-toggle >}}
+
+```go-html-template
+{{ with .Resources.Get "images/a.jpg" }}
+ {{ .Title }} → A beautiful sunrise in Bryce Canyon
+{{ end }}
+```
+
+If you do not create an element in the `resources` array in front matter, the `Title` method returns the file path, relative to the page bundle.
+
+```text
+content/
+├── example/
+│ ├── images/
+│ │ └── Sunrise in Bryce Canyon.jpg
+│ └── index.md
+└── _index.md
+```
+
+```go-html-template
+{{ with .Resources.Get "Sunrise in Bryce Canyon.jpg" }}
+ {{ .Title }} → images/Sunrise in Bryce Canyon.jpg
+{{ end }}
+```
+
+## Remote resource
+
-
- [global resource]: /getting-started/glossary/#global-resource
- [page resource]: /getting-started/glossary/#page-resource
- [remote resource]: /getting-started/glossary/#remote-resource
++With a [remote resource](g), the `Title` method returns a hashed file name.
+
+```go-html-template
+{{ with resources.GetRemote "https://example.org/images/a.jpg" }}
+ {{ .Title }} → /a_18432433023265451104.jpg
+{{ end }}
+```
--- /dev/null
-
- Use this method with [global], [page], or [remote] resources.
-
- [global]: /getting-started/glossary/#global-resource
- [page]: /getting-started/glossary/#page-resource
- [remote]: /getting-started/glossary/#remote-resource
-
+---
+_comment: Do not remove front matter.
+---
+
+{{% note %}}
++Use this method with [global resources](g), [page resources](g), or [remote resources](g).
+{{% /note %}}
--- /dev/null
-
+---
+title: Inner
+description: Returns the content between opening and closing shortcode tags, applicable when the shortcode call includes a closing tag.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/strings/Trim
+ - methods/page/RenderString
+ - functions/transform/Markdownify
+ - methods/shortcode/InnerDeindent
+ returnType: template.HTML
+ signatures: [SHORTCODE.Inner]
+toc: true
+---
+
+This content:
+
+{{< code file=content/services.md lang=md >}}
+{{</* card title="Product Design" */>}}
+We design the **best** widgets in the world.
+{{</* /card */>}}
+{{< /code >}}
+
+With this shortcode:
+
+{{< code file=layouts/shortcodes/card.html >}}
+<div class="card">
+ {{ with .Get "title" }}
+ <div class="card-title">{{ . }}</div>
+ {{ end }}
+ <div class="card-content">
+ {{ .Inner | strings.TrimSpace }}
+ </div>
+</div>
+{{< /code >}}
+
+Is rendered to:
+
+```html
+<div class="card">
+ <div class="card-title">Product Design</div>
+ <div class="card-content">
+ We design the **best** widgets in the world.
+ </div>
+</div>
+```
+
+{{% note %}}
+Content between opening and closing shortcode tags may include leading and/or trailing newlines, depending on placement within the Markdown. Use the [`strings.TrimSpace`] function as shown above to remove both carriage returns and newlines.
+
+[`strings.TrimSpace`]: /functions/strings/trimspace/
+{{% /note %}}
+
+{{% note %}}
+In the example above, the value returned by `Inner` is Markdown, but it was rendered as plain text. Use either of the following approaches to render Markdown to HTML.
+{{% /note %}}
+
+## Use RenderString
+
+Let's modify the example above to pass the value returned by `Inner` through the [`RenderString`] method on the `Page` object:
+
+[`RenderString`]: /methods/page/renderstring/
+
+{{< code file=layouts/shortcodes/card.html >}}
+<div class="card">
+ {{ with .Get "title" }}
+ <div class="card-title">{{ . }}</div>
+ {{ end }}
+ <div class="card-content">
+ {{ .Inner | strings.TrimSpace | .Page.RenderString }}
+ </div>
+</div>
+{{< /code >}}
+
+Hugo renders this to:
+
+```html
+<div class="card">
+ <div class="card-title">Product design</div>
+ <div class="card-content">
+ We produce the <strong>best</strong> widgets in the world.
+ </div>
+</div>
+```
+
+You can use the [`markdownify`] function instead of the `RenderString` method, but the latter is more flexible. See [details].
+
+[details]: /methods/page/renderstring/
+[`markdownify`]: /functions/transform/markdownify/
+
+## Alternative notation
+
+Instead of calling the shortcode with the `{{</* */>}}` notation, use the `{{%/* */%}}` notation:
+
+{{< code file=content/services.md lang=md >}}
+{{%/* card title="Product Design" */%}}
+We design the **best** widgets in the world.
+{{%/* /card */%}}
+{{< /code >}}
+
+When you use the `{{%/* */%}}` notation, Hugo renders the entire shortcode as Markdown, requiring the following changes.
+
+First, configure the renderer to allow raw HTML within Markdown:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.renderer]
+unsafe = true
+{{< /code-toggle >}}
+
+This configuration is not unsafe if _you_ control the content. Read more about Hugo's [security model].
+
+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 >}}
+<div class="card">
+ {{ with .Get "title" }}
+ <div class="card-title">{{ . }}</div>
+ {{ end }}
+ <div class="card-content">
+
+ {{ .Inner | strings.TrimSpace }}
+ </div>
+</div>
+{{< /code >}}
+
+The difference between this and the previous example is subtle but required. Note the change in indentation, the addition of a blank line, and removal of the `RenderString` method.
+
+```diff
+--- layouts/shortcodes/a.html
++++ layouts/shortcodes/b.html
+@@ -1,8 +1,9 @@
+ <div class="card">
+ {{ with .Get "title" }}
+- <div class="card-title">{{ . }}</div>
++ <div class="card-title">{{ . }}</div>
+ {{ end }}
+ <div class="card-content">
+- {{ .Inner | strings.TrimSpace | .Page.RenderString }}
++
++ {{ .Inner | strings.TrimSpace }}
+ </div>
+ </div>
+```
+
+{{% note %}}
+When using the `{{%/* */%}}` notation, do not pass the value returned by `Inner` through the `RenderString` method or the `markdownify` function.
+{{% /note %}}
+
+[commonmark]: https://commonmark.org/
+[indentation]: https://spec.commonmark.org/0.30/#indented-code-blocks
+[raw html blocks]: https://spec.commonmark.org/0.30/#html-blocks
+[security model]: /about/security/
--- /dev/null
- 2. The `dateFormat` argument passed to the "greeting" shortcode, if present
- 3. The default layout string defined at the top of the shortcode
+---
+title: Parent
+description: Returns the parent shortcode context in nested shortcodes.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: hugolib.ShortcodeWithPage
+ signatures: [SHORTCODE.Parent]
+---
+
+This is useful for inheritance of common shortcode arguments 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 >}}
+{{</* greeting dateFormat="Jan 2, 2006" */>}}
+Welcome. Today is {{</* now */>}}.
+{{</* /greeting */>}}
+{{< /code >}}
+
+{{< code file=layouts/shortcodes/greeting.html >}}
+<div class="greeting">
+ {{ .Inner | strings.TrimSpace | .Page.RenderString }}
+</div>
+{{< /code >}}
+
+{{< code file=layouts/shortcodes/now.html >}}
+{{- $dateFormat := "January 2, 2006 15:04:05" }}
+
+{{- with .Params }}
+ {{- with .dateFormat }}
+ {{- $dateFormat = . }}
+ {{- end }}
+{{- else }}
+ {{- with .Parent.Params }}
+ {{- with .dateFormat }}
+ {{- $dateFormat = . }}
+ {{- end }}
+ {{- end }}
+{{- end }}
+
+{{- now | time.Format $dateFormat -}}
+{{< /code >}}
+
+The "now" shortcode formats the current time using:
+
+1. The `dateFormat` argument passed to the "now" shortcode, if present
++1. The `dateFormat` argument passed to the "greeting" shortcode, if present
++1. The default layout string defined at the top of the shortcode
--- /dev/null
- : (`string`) The path to the page, relative to the content directory. Required.
+---
+title: Ref
+description: Returns the absolute URL of the page with the given path, language, and output format.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/shortcode/RelRef
+ - functions/urls/RelRef
+ - functions/urls/Ref
+ returnType: string
+ signatures: [SHORTCODE.Ref OPTIONS]
+---
+
+The map of option contains:
+
+path
++: (`string`) The path to the page, relative to the `content` directory. Required.
+
+lang
+: (`string`) The language (site) to search for the page. Default is the current language. Optional.
+
+outputFormat
+: (`string`) The output format to search for the page. Default is the current output format. Optional.
+
+The examples below show the rendered output when visiting a page on the English language version of the site:
+
+```go-html-template
+{{ $opts := dict "path" "/books/book-1" }}
+{{ .Ref $opts }} → https://example.org/en/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" }}
+{{ .Ref $opts }} → https://example.org/de/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" "outputFormat" "json" }}
+{{ .Ref $opts }} → https://example.org/de/books/book-1/index.json
+```
+
+By default, Hugo will throw an error and fail the build if it cannot resolve the path. You can change this to a warning in your site configuration, and specify a URL to return when the path cannot be resolved.
+
+{{< code-toggle file=hugo >}}
+refLinksErrorLevel = 'warning'
+refLinksNotFoundURL = '/some/other/url'
+{{< /code-toggle >}}
--- /dev/null
- : (`string`) The path to the page, relative to the content directory. Required.
+---
+title: RelRef
+description: Returns the relative URL of the page with the given path, language, and output format.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/shortcode/Ref
+ - functions/urls/Ref
+ - functions/urls/RelRef
+ returnType: string
+ signatures: [SHORTCODE.RelRef OPTIONS]
+---
+
+The map of option contains:
+
+path
++: (`string`) The path to the page, relative to the `content` directory. Required.
+
+lang
+: (`string`) The language (site) to search for the page. Default is the current language. Optional.
+
+outputFormat
+: (`string`) The output format to search for the page. Default is the current output format. Optional.
+
+The examples below show the rendered output when visiting a page on the English language version of the site:
+
+```go-html-template
+{{ $opts := dict "path" "/books/book-1" }}
+{{ .RelRef $opts }} → /en/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" }}
+{{ .RelRef $opts }} → /de/books/book-1/
+
+{{ $opts := dict "path" "/books/book-1" "lang" "de" "outputFormat" "json" }}
+{{ .RelRef $opts }} → /de/books/book-1/index.json
+```
+
+By default, Hugo will throw an error and fail the build if it cannot resolve the path. You can change this to a warning in your site configuration, and specify a URL to return when the path cannot be resolved.
+
+{{< code-toggle file=hugo >}}
+refLinksErrorLevel = 'warning'
+refLinksNotFoundURL = '/some/other/url'
+{{< /code-toggle >}}
--- /dev/null
- The `Scratch` method within a shortcode creates a [scratch pad] to store and manipulate data. The scratch pad is scoped to the shortcode.
+---
+title: Scratch
+description: Returns a "scratch pad" scoped to the shortcode to store and manipulate data.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/collections/NewScratch
+ returnType: maps.Scratch
+ signatures: [SHORTCODE.Scratch]
++expiryDate: 2025-11-18 # deprecated 2024-11-18
+---
+
+{{% deprecated-in 0.139.0 %}}
+Use the [`SHORTCODE.Store`] method instead.
+
+This is a soft deprecation. This method will be removed in a future release, but the removal date has not been established. Although Hugo will not emit a warning if you continue to use this method, you should begin using `SHORTCODE.Store` as soon as possible.
+
+Beginning with v0.139.0 the `SHORTCODE.Scratch` method is aliased to `SHORTCODE.Store`.
+
+[`SHORTCODE.Store`]: /methods/shortcode/store/
+{{% /deprecated-in %}}
+
- [scratch pad]: /getting-started/glossary/#scratch-pad
-
++The `Scratch` method within a shortcode creates a [scratch pad](g) to store and manipulate data. The scratch pad is scoped to the shortcode.
+
+{{% note %}}
+With the introduction of the [`newScratch`] function, and the ability to [assign values to template variables] after initialization, the `Scratch` method within a shortcode is obsolete.
+
+[assign values to template variables]: https://go.dev/doc/go1.11#text/template
+[`newScratch`]: /functions/collections/newscratch/
+{{% /note %}}
+
+{{% include "methods/page/_common/scratch-methods.md" %}}
--- /dev/null
- The `Store` method within a shortcode creates a [scratch pad] to store and manipulate data. The scratch pad is scoped to the shortcode.
+---
+title: Store
+description: Returns a "Store pad" scoped to the shortcode to store and manipulate data.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/collections/NewScratch
+ - methods/page/Store
+ - methods/site/Store
+ - functions/hugo/Store
+ returnType: maps.Store
+ signatures: [SHORTCODE.Store]
+---
+
+{{< new-in 0.139.0 >}}
+
- [Store pad]: /getting-started/glossary/#scratch-pad
-
++The `Store` method within a shortcode creates a [scratch pad](g) to store and manipulate data. The scratch pad is scoped to the shortcode.
+
+{{% note %}}
+With the introduction of the [`newScratch`] function, and the ability to [assign values to template variables] after initialization, the `Store` method within a shortcode is mostly obsolete.
+
+[assign values to template variables]: https://go.dev/doc/go1.11#text/template
+[`newScratch`]: /functions/collections/newScratch/
+{{% /note %}}
+
+{{% include "methods/page/_common/scratch-methods.md" %}}
--- /dev/null
- This method returns all page [kinds] in all languages. That includes the home page, section pages, taxonomy pages, term pages, and regular pages.
+---
+title: AllPages
+description: Returns a collection of all pages in all languages.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/site/Pages
+ - methods/site/RegularPages
+ - methods/site/Sections
+ returnType: page.Pages
+ signatures: [SITE.AllPages]
+---
+
- [kinds]: /getting-started/glossary/#page-kind
++This method returns all page [kinds](g) in all languages. That includes the home page, section pages, taxonomy pages, term pages, and regular pages.
+
+In most cases you should use the [`RegularPages`] method instead.
+
+[`RegularPages`]: /methods/site/regularpages/
+
+```go-html-template
+{{ range .Site.AllPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
--- /dev/null
- Use the `Data` method on a `Site` object to access data within the data directory, or within any directory [mounted] to the data directory. Supported data formats include JSON, TOML, YAML, and XML.
+---
+title: Data
+description: Returns a data structure composed from the files in the data directory.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/collections/IndexFunction
+ - functions/transform/Unmarshal
+ - functions/collections/Where
+ - functions/collections/Sort
+ returnType: map
+ signatures: [SITE.Data]
+---
+
- Although Hugo can unmarshal CSV files with the [`transform.Unmarshal`] function, do not place CSV files in the data directory. You cannot access data within CSV files using this method.
++Use the `Data` method on a `Site` object to access data within the `data` directory, or within any directory [mounted] to the `data` directory. Supported data formats include JSON, TOML, YAML, and XML.
+
+[mounted]: /hugo-modules/configuration/#module-configuration-mounts
+
+{{% note %}}
- Consider this data directory:
++Although Hugo can unmarshal CSV files with the [`transform.Unmarshal`] function, do not place CSV files in the `data` directory. You cannot access data within CSV files using this method.
+
+[`transform.Unmarshal`]: /functions/transform/unmarshal/
+{{% /note %}}
+
- Access the data by [chaining] the [identifiers]:
++Consider this `data` directory:
+
+```text
+data/
+├── books/
+│ ├── fiction.yaml
+│ └── nonfiction.yaml
+├── films.json
+├── paintings.xml
+└── sculptures.toml
+```
+
+And these data files:
+
+{{< code file=data/books/fiction.yaml lang=yaml >}}
+- title: The Hunchback of Notre Dame
+ author: Victor Hugo
+ isbn: 978-0140443530
+- title: Les Misérables
+ author: Victor Hugo
+ isbn: 978-0451419439
+{{< /code >}}
+
+{{< code file=data/books/nonfiction.yaml lang=yaml >}}
+- title: The Ancien Régime and the Revolution
+ author: Alexis de Tocqueville
+ isbn: 978-0141441641
+- title: Interpreting the French Revolution
+ author: François Furet
+ isbn: 978-0521280495
+{{< /code >}}
+
- In the template examples above, each of the keys is a valid [identifier]. For example, none of the keys contains a hyphen. To access a key that is not a valid identifier, use the [`index`] function. For example:
-
- [identifier]: /getting-started/glossary/#identifier
++Access the data by [chaining](g) the [identifiers](g):
+
+```go-html-template
+{{ range $category, $books := .Site.Data.books }}
+ <p>{{ $category | title }}</p>
+ <ul>
+ {{ range $books }}
+ <li>{{ .title }} ({{ .isbn }})</li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+Hugo renders this to:
+
+```html
+<p>Fiction</p>
+<ul>
+ <li>The Hunchback of Notre Dame (978-0140443530)</li>
+ <li>Les Misérables (978-0451419439)</li>
+</ul>
+<p>Nonfiction</p>
+<ul>
+ <li>The Ancien Régime and the Revolution (978-0141441641)</li>
+ <li>Interpreting the French Revolution (978-0521280495)</li>
+</ul>
+```
+
+To limit the listing to fiction, and sort by title:
+
+```go-html-template
+<ul>
+ {{ range sort .Site.Data.books.fiction "title" }}
+ <li>{{ .title }} ({{ .author }})</li>
+ {{ end }}
+</ul>
+```
+
+To find a fiction book by ISBN:
+
+```go-html-template
+{{ range where .Site.Data.books.fiction "isbn" "978-0140443530" }}
+ <li>{{ .title }} ({{ .author }})</li>
+{{ end }}
+```
+
- [chaining]: /getting-started/glossary/#chain
- [identifiers]: /getting-started/glossary/#identifier
++In the template examples above, each of the keys is a valid identifier. For example, none of the keys contains a hyphen. To access a key that is not a valid identifier, use the [`index`] function. For example:
+
+```go-html-template
+{{ index .Site.Data.books "historical-fiction" }}
+```
+
+[`index`]: /functions/collections/indexfunction/
--- /dev/null
- When using the `GetPage` method on a `Site` object, specify a path relative to the content directory.
+---
+title: GetPage
+description: Returns a Page object from the given path.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/GetPage
+ returnType: page.Page
+ signatures: [SITE.GetPage PATH]
+toc: true
+---
+
+The `GetPage` method is also available on `Page` objects, allowing you to specify a path relative to the current page. See [details].
+
+[details]: /methods/page/getpage/
+
- In the home template, use the `GetPage` method on a `Site` object to render all the images in the headless [page bundle]:
++When using the `GetPage` method on a `Site` object, specify a path relative to the `content` directory.
+
+If Hugo cannot resolve the path to a page, the method returns nil.
+
+Consider this content structure:
+
+```text
+content/
+├── works/
+│ ├── paintings/
+│ │ ├── _index.md
+│ │ ├── starry-night.md
+│ │ └── the-mona-lisa.md
+│ ├── sculptures/
+│ │ ├── _index.md
+│ │ ├── david.md
+│ │ └── the-thinker.md
+│ └── _index.md
+└── _index.md
+```
+
+This home template:
+
+```go-html-template
+{{ with .Site.GetPage "/works/paintings" }}
+ <ul>
+ {{ range .Pages }}
+ <li>{{ .Title }} by {{ .Params.artist }}</li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+Is rendered to:
+
+```html
+<ul>
+ <li>Starry Night by Vincent van Gogh</li>
+ <li>The Mona Lisa by Leonardo da Vinci</li>
+</ul>
+```
+
+To get a regular page instead of a section page:
+
+```go-html-template
+{{ with .Site.GetPage "/works/paintings/starry-night" }}
+ {{ .Title }} → Starry Night
+ {{ .Params.artist }} → Vincent van Gogh
+{{ end }}
+```
+
+## Multilingual projects
+
+With multilingual projects, the `GetPage` method on a `Site` object resolves the given path to a page in the current language.
+
+To get a page from a different language, query the `Sites` object:
+
+```go-html-template
+{{ with where .Site.Sites "Language.Lang" "eq" "de" }}
+ {{ with index . 0 }}
+ {{ with .GetPage "/works/paintings/starry-night" }}
+ {{ .Title }} → Sternenklare Nacht
+ {{ end }}
+ {{ end }}
+{{ end }}
+```
+
+## Page bundles
+
+Consider this content structure:
+
+```text
+content/
+├── headless/
+│ ├── a.jpg
+│ ├── b.jpg
+│ ├── c.jpg
+│ └── index.md <-- front matter: headless = true
+└── _index.md
+```
+
-
- [page bundle]: /getting-started/glossary/#page-bundle
++In the home template, use the `GetPage` method on a `Site` object to render all the images in the headless [page bundle](g):
+
+```go-html-template
+{{ with .Site.GetPage "/headless" }}
+ {{ range .Resources.ByType "image" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
+ {{ end }}
+{{ end }}
+```
--- /dev/null
- This method returns all page [kinds] in the current language. That includes the home page, section pages, taxonomy pages, term pages, and regular pages.
+---
+title: Pages
+description: Returns a collection of all pages.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/site/AllPages
+ - methods/site/RegularPages
+ - methods/site/Sections
+ returnType: page.Pages
+ signatures: [SITE.Pages]
+---
+
- [kinds]: /getting-started/glossary/#page-kind
++This method returns all page [kinds](g) in the current language. That includes the home page, section pages, taxonomy pages, term pages, and regular pages.
+
+In most cases you should use the [`RegularPages`] method instead.
+
+[`RegularPages`]: /methods/site/regularpages/
+
+```go-html-template
+{{ range .Site.Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
--- /dev/null
-
+---
+title: Param
+description: Returns the site parameter with the given key.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: any
+ signatures: [SITE.Param KEY]
+---
+
+The `Param` method on a `Site` object is a convenience method to return the value of a user-defined parameter in the site configuration.
+
+{{< code-toggle file=hugo >}}
+[params]
+display_toc = true
+{{< /code-toggle >}}
+
+```go-html-template
+{{ .Site.Param "display_toc" }} → true
+```
+
+The above is equivalent to either of these:
+
+```go-html-template
+{{ .Site.Params.display_toc }}
+{{ index .Site.Params "display_toc" }}
+```
--- /dev/null
- Access the custom parameters by [chaining] the [identifiers]:
+---
+title: Params
+description: Returns a map of custom parameters as defined in the site configuration.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/collections/indexFunction
+ - methods/page/Params
+ - methods/page/Param
+ returnType: maps.Params
+ signatures: [SITE.Params]
+---
+
+With this site configuration:
+
+{{< code-toggle file=hugo >}}
+[params]
+ subtitle = 'The Best Widgets on Earth'
+ copyright-year = '2023'
+ [params.author]
+ email = 'jsmith@example.org'
+ name = 'John Smith'
+ [params.layouts]
+ rfc_1123 = 'Mon, 02 Jan 2006 15:04:05 MST'
+ rfc_3339 = '2006-01-02T15:04:05-07:00'
+{{< /code-toggle >}}
+
- [chaining]: /getting-started/glossary/#chain
- [identifiers]: /getting-started/glossary/#identifier
++Access the custom parameters by [chaining](g) the [identifiers](g):
+
+```go-html-template
+{{ .Site.Params.subtitle }} → The Best Widgets on Earth
+{{ .Site.Params.author.name }} → John Smith
+
+{{ $layout := .Site.Params.layouts.rfc_1123 }}
+{{ .Site.Lastmod.Format $layout }} → Tue, 17 Oct 2023 13:21:02 PDT
+```
+
+In the template example above, each of the keys is a valid identifier. For example, none of the keys contains a hyphen. To access a key that is not a valid identifier, use the [`index`] function:
+
+```go-html-template
+{{ index .Site.Params "copyright-year" }} → 2023
+```
+
+[`index`]: /functions/collections/indexfunction/
--- /dev/null
- The `RegularPages` method on a `Site` object returns a collection of all [regular pages].
-
- [regular pages]: /getting-started/glossary/#regular-page
+---
+title: RegularPages
+description: Returns a collection of all regular pages.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/site/AllPages
+ - methods/site/RegularPages
+ - methods/site/Sections
+ returnType: page.Pages
+ signatures: [SITE.RegularPages]
+---
+
++The `RegularPages` method on a `Site` object returns a collection of all [regular pages](g).
+
+```go-html-template
+{{ range .Site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
+
+By default, Hugo sorts page collections by:
+
+1. The page `weight` as defined in front matter
+1. The page `date` as defined in front matter
+1. The page `linkTitle` as defined in front matter
+1. The file path
+
+If the `linkTitle` is not defined, Hugo evaluates the `title` instead.
+
+To change the sort order, use any of the `Pages` [sorting methods]. For example:
+
+```go-html-template
+{{ range .Site.RegularPages.ByTitle }}
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+{{ end }}
+```
+
+[sorting methods]: /methods/pages/
--- /dev/null
- The `Store` method on a `Site` object creates a persistent [scratch pad] to store and manipulate data. To create a locally scoped scratch pad that is not attached to a `Site` object, use the [`newScratch`] function.
+---
+title: Store
+linktitle: site.Store
+description: Returns a persistent "scratch pad" on the given site to store and manipulate data.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/page/store
+ - functions/hugo/store
+ - functions/collections/NewScratch
+ returnType: maps.Scratch
+ signatures: [site.Store]
+toc: true
+---
+
+{{< new-in 0.139.0 >}}
+
- [scratch pad]: /getting-started/glossary/#scratch-pad
++The `Store` method on a `Site` object creates a persistent [scratch pad](g) to store and manipulate data. To create a locally scoped scratch pad that is not attached to a `Site` object, use the [`newScratch`] function.
+
+[`Scratch`]: /methods/site/scratch/
+[`newScratch`]: /functions/collections/newscratch/
- If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop] variable:
-
- [noop]: /getting-started/glossary/#noop
+
+## Methods
+
+###### Set
+
+Sets the value of a given key.
+
+```go-html-template
+{{ site.Store.Set "greeting" "Hello" }}
+```
+
+###### Get
+
+Gets the value of a given key.
+
+```go-html-template
+{{ site.Store.Set "greeting" "Hello" }}
+{{ site.Store.Get "greeting" }} → Hello
+```
+
+###### Add
+
+Adds a given value to existing value(s) of the given key.
+
+For single values, `Add` accepts values that support Go's `+` operator. If the first `Add` for a key is an array or slice, the following adds will be appended to that list.
+
+```go-html-template
+{{ site.Store.Set "greeting" "Hello" }}
+{{ site.Store.Add "greeting" "Welcome" }}
+{{ site.Store.Get "greeting" }} → HelloWelcome
+```
+
+```go-html-template
+{{ site.Store.Set "total" 3 }}
+{{ site.Store.Add "total" 7 }}
+{{ site.Store.Get "total" }} → 10
+```
+
+```go-html-template
+{{ site.Store.Set "greetings" (slice "Hello") }}
+{{ site.Store.Add "greetings" (slice "Welcome" "Cheers") }}
+{{ site.Store.Get "greetings" }} → [Hello Welcome Cheers]
+```
+
+###### SetInMap
+
+Takes a `key`, `mapKey` and `value` and adds a map of `mapKey` and `value` to the given `key`.
+
+```go-html-template
+{{ site.Store.SetInMap "greetings" "english" "Hello" }}
+{{ site.Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ site.Store.Get "greetings" }} → map[english:Hello french:Bonjour]
+```
+
+###### DeleteInMap
+
+Takes a `key` and `mapKey` and removes the map of `mapKey` from the given `key`.
+
+```go-html-template
+{{ site.Store.SetInMap "greetings" "english" "Hello" }}
+{{ site.Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ site.Store.DeleteInMap "greetings" "english" }}
+{{ site.Store.Get "greetings" }} → map[french:Bonjour]
+```
+
+###### GetSortedMapValues
+
+Returns an array of values from `key` sorted by `mapKey`.
+
+```go-html-template
+{{ site.Store.SetInMap "greetings" "english" "Hello" }}
+{{ site.Store.SetInMap "greetings" "french" "Bonjour" }}
+{{ site.Store.GetSortedMapValues "greetings" }} → [Hello Bonjour]
+```
+
+###### Delete
+
+Removes the given key.
+
+```go-html-template
+{{ site.Store.Set "greeting" "Hello" }}
+{{ site.Store.Delete "greeting" }}
+```
+
+## Determinate values
+
+The `Store` method is often used to set scratch pad values within a shortcode, a partial template called by a shortcode, or by a Markdown render hook. In all three cases, the scratch pad values are indeterminate until Hugo renders the page content.
+
++If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop](g) variable:
+
+```go-html-template
+{{ $noop := .Content }}
+{{ site.Store.Get "mykey" }}
+```
+
+You can also trigger content rendering with the `ContentWithoutSummary`, `FuzzyWordCount`, `Len`, `Plain`, `PlainWords`, `ReadingTime`, `Summary`, `Truncated`, and `WordCount` methods. For example:
+
+```go-html-template
+{{ $noop := .WordCount }}
+{{ site.Store.Get "mykey" }}
+```
--- /dev/null
- {{% comment %}}
- Show template example: GetTerms
- {{% /comment %}}
-
+---
+title: Taxonomies
+description: Returns a data structure containing the site's Taxonomy objects, the terms within each Taxonomy object, and the pages to which the terms are assigned.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: page.TaxonomyList
+ signatures: [SITE.Taxonomies]
+---
+
-
+Conceptually, the `Taxonomies` method on a `Site` object returns a data structure such as:
+
+{{< code-toggle >}}
+taxonomy a:
+ - term 1:
+ - page 1
+ - page 2
+ - term 2:
+ - page 1
+taxonomy b:
+ - term 1:
+ - page 2
+ - term 2:
+ - page 1
+ - page 2
+{{< /code-toggle >}}
+
+For example, on a book review site you might create two taxonomies; one for genres and another for authors.
+
+With this site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+genre = 'genres'
+author = 'authors'
+{{< /code-toggle >}}
+
+And this content structure:
+
+```text
+content/
+├── books/
+│ ├── and-then-there-were-none.md --> genres: suspense
+│ ├── death-on-the-nile.md --> genres: suspense
+│ └── jamaica-inn.md --> genres: suspense, romance
+│ └── pride-and-prejudice.md --> genres: romance
+└── _index.md
+```
+
+Conceptually, the taxonomies data structure looks like:
+
+{{< code-toggle >}}
+genres:
+ - suspense:
+ - And Then There Were None
+ - Death on the Nile
+ - Jamaica Inn
+ - romance:
+ - Jamaica Inn
+ - Pride and Prejudice
+authors:
+ - achristie:
+ - And Then There Were None
+ - Death on the Nile
+ - ddmaurier:
+ - Jamaica Inn
+ - jausten:
+ - Pride and Prejudice
+{{< /code-toggle >}}
+
+To list the "suspense" books:
+
+```go-html-template
+<ul>
+ {{ range .Site.Taxonomies.genres.suspense }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+</ul>
+```
+
+Hugo renders this to:
+
+```html
+<ul>
+ <li><a href="/books/and-then-there-were-none/">And Then There Were None</a></li>
+ <li><a href="/books/death-on-the-nile/">Death on the Nile</a></li>
+ <li><a href="/books/jamaica-inn/">Jamaica Inn</a></li>
+</ul>
+```
+
+{{% note %}}
+Hugo's taxonomy system is powerful, allowing you to classify content and create relationships between pages.
+
+Please see the [taxonomies] section for a complete explanation and examples.
+
+[taxonomies]: /content-management/taxonomies/
+{{% /note %}}
+
+## Examples
+
+### List content with the same taxonomy term
+
+If you are using a taxonomy for something like a series of posts, you can list individual pages associated with the same term. For example:
+
+```go-html-template
+<ul>
+ {{ range .Site.Taxonomies.series.golang }}
+ <li><a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a></li>
+ {{ end }}
+</ul>
+```
+
+### List all content in a given taxonomy
+
+This would be very useful in a sidebar as “featured content”. You could even have different sections of “featured content” by assigning different terms to the content.
+
+```go-html-template
+<section id="menu">
+ <ul>
+ {{ range $term, $taxonomy := .Site.Taxonomies.featured }}
+ <li>{{ $term }}</li>
+ <ul>
+ {{ range $taxonomy.Pages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+ {{ end }}
+ </ul>
+</section>
+```
+
+### Render a site's taxonomies
+
+The following example displays all terms in a site's tags taxonomy:
+
+```go-html-template
+<ul>
+ {{ range .Site.Taxonomies.tags }}
+ <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}</li>
+ {{ end }}
+</ul>
+```
+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 >}}
+{{ with .Site.Taxonomies }}
+ {{ $numberOfTerms := 0 }}
+ {{ range $taxonomy, $terms := . }}
+ {{ $numberOfTerms = len . | add $numberOfTerms }}
+ {{ end }}
+
+ {{ if gt $numberOfTerms 0 }}
+ <ul>
+ {{ range $taxonomy, $terms := . }}
+ {{ with $terms }}
+ <li>
+ <a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a>
+ <ul>
+ {{ range $term, $weightedPages := . }}
+ <li>
+ <a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a>
+ <ul>
+ {{ range $weightedPages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+ </li>
+ {{ end }}
+ </ul>
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+ {{ end }}
+{{ end }}
+{{< /code >}}
--- /dev/null
- The `Alphabetical` method on a `Taxonomy` object returns an [ordered taxonomy], sorted alphabetically by [term].
+---
+title: Alphabetical
+description: Returns an ordered taxonomy, sorted alphabetically by term.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/taxonomy/ByCount
+ returnType: page.OrderedTaxonomy
+ signatures: [TAXONOMY.Alphabetical]
+toc: true
+---
+
- While a `Taxonomy` object is a [map], an ordered taxonomy is a [slice], where each element is an object that contains the term and a slice of its [weighted pages].
++The `Alphabetical` method on a `Taxonomy` object returns an [ordered taxonomy](g), sorted alphabetically by [term](g).
+
-
- [ordered taxonomy]: /getting-started/glossary/#ordered-taxonomy
- [term]: /getting-started/glossary/#term
- [map]: /getting-started/glossary/#map
- [slice]: /getting-started/glossary/#slice
- [term]: /getting-started/glossary/#term
- [weighted pages]: /getting-started/glossary/#weighted-page
++While a `Taxonomy` object is a [map](g), an ordered taxonomy is a [slice](g), where each element is an object that contains the term and a slice of its [weighted pages](g).
+
+{{% include "methods/taxonomy/_common/get-a-taxonomy-object.md" %}}
+
+## Get the ordered taxonomy
+
+Now that we have captured the “genres” Taxonomy object, let’s get the ordered taxonomy sorted alphabetically by term:
+
+```go-html-template
+{{ $taxonomyObject.Alphabetical }}
+```
+
+To reverse the sort order:
+
+```go-html-template
+{{ $taxonomyObject.Alphabetical.Reverse }}
+```
+
+To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $taxonomyObject.Alphabetical }}</pre>
+```
+
+{{% include "methods/taxonomy/_common/ordered-taxonomy-element-methods.md" %}}
+
+## Example
+
+With this template:
+
+```go-html-template
+{{ range $taxonomyObject.Alphabetical }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+Hugo renders:
+
+```html
+<h2><a href="/genres/romance/">romance</a> (2)</h2>
+<ul>
+ <li><a href="/books/jamaica-inn/">Jamaica inn</a></li>
+ <li><a href="/books/pride-and-prejudice/">Pride and prejudice</a></li>
+</ul>
+<h2><a href="/genres/suspense/">suspense</a> (3)</h2>
+<ul>
+ <li><a href="/books/and-then-there-were-none/">And then there were none</a></li>
+ <li><a href="/books/death-on-the-nile/">Death on the nile</a></li>
+ <li><a href="/books/jamaica-inn/">Jamaica inn</a></li>
+</ul>
+```
--- /dev/null
- The `ByCount` method on a `Taxonomy` object returns an [ordered taxonomy], sorted by the number of pages associated with each [term].
+---
+title: ByCount
+description: Returns an ordered taxonomy, sorted by the number of pages associated with each term.
+categories: []
+keywords: []
+action:
+ related:
+ - methods/taxonomy/Alphabetical
+ returnType: page.OrderedTaxonomy
+ signatures: [TAXONOMY.ByCount]
+toc: true
+---
+
- While a `Taxonomy` object is a [map], an ordered taxonomy is a [slice], where each element is an object that contains the term and a slice of its [weighted pages].
++The `ByCount` method on a `Taxonomy` object returns an [ordered taxonomy](g), sorted by the number of pages associated with each [term](g).
+
-
- [ordered taxonomy]: /getting-started/glossary/#ordered-taxonomy
- [term]: /getting-started/glossary/#term
- [map]: /getting-started/glossary/#map
- [slice]: /getting-started/glossary/#slice
- [term]: /getting-started/glossary/#term
- [weighted pages]: /getting-started/glossary/#weighted-page
++While a `Taxonomy` object is a [map](g), an ordered taxonomy is a [slice](g), where each element is an object that contains the term and a slice of its [weighted pages](g).
+
+{{% include "methods/taxonomy/_common/get-a-taxonomy-object.md" %}}
+
+## Get the ordered taxonomy
+
+Now that we have captured the “genres” Taxonomy object, let’s get the ordered taxonomy sorted by the number of pages associated with each term:
+
+```go-html-template
+{{ $taxonomyObject.ByCount }}
+```
+
+To reverse the sort order:
+
+```go-html-template
+{{ $taxonomyObject.ByCount.Reverse }}
+```
+
+To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $taxonomyObject.ByCount }}</pre>
+```
+
+{{% include "methods/taxonomy/_common/ordered-taxonomy-element-methods.md" %}}
+
+## Example
+
+With this template:
+
+```go-html-template
+{{ range $taxonomyObject.ByCount }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
+ <ul>
+ {{ range .Pages.ByTitle }}
+ <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+Hugo renders:
+
+```html
+<h2><a href="/genres/suspense/">suspense</a> (3)</h2>
+<ul>
+ <li><a href="/books/and-then-there-were-none/">And then there were none</a></li>
+ <li><a href="/books/death-on-the-nile/">Death on the nile</a></li>
+ <li><a href="/books/jamaica-inn/">Jamaica inn</a></li>
+</ul>
+<h2><a href="/genres/romance/">romance</a> (2)</h2>
+<ul>
+ <li><a href="/books/jamaica-inn/">Jamaica inn</a></li>
+ <li><a href="/books/pride-and-prejudice/">Pride and prejudice</a></li>
+</ul>
+```
--- /dev/null
- The `Count` method on a `Taxonomy` object returns the number of number of [weighted pages] to which the given [term] has been assigned.
+---
+title: Count
+description: Returns the number of number of weighted pages to which the given term has been assigned.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: int
+ signatures: [TAXONOMY.Count TERM]
+toc: true
+---
+
-
- [weighted pages]: /getting-started/glossary/#weighted-page
- [term]: /getting-started/glossary/#term
++The `Count` method on a `Taxonomy` object returns the number of number of [weighted pages](g) to which the given [term](g) has been assigned.
+
+{{% include "methods/taxonomy/_common/get-a-taxonomy-object.md" %}}
+
+## Count the weighted pages
+
+Now that we have captured the "genres" `Taxonomy` object, let's count the number of weighted pages to which the "suspense" term has been assigned:
+
+```go-html-template
+{{ $taxonomyObject.Count "suspense" }} → 3
+```
--- /dev/null
- The `Get` method on a `Taxonomy` object returns a slice of [weighted pages] to which the given [term] has been assigned.
+---
+title: Get
+description: Returns a slice of weighted pages to which the given term has been assigned.
+categories: []
+keywords: []
+action:
+ related: []
+ returnType: page.WeightedPages
+ signatures: [TAXONOMY.Get TERM]
+toc: true
+---
+
- But, if the term is not a valid [identifier], you cannot use the [chaining] syntax. For example, this will throw an error because the identifier contains a hyphen:
++The `Get` method on a `Taxonomy` object returns a slice of [weighted pages](g) to which the given [term](g) has been assigned.
+
+{{% include "methods/taxonomy/_common/get-a-taxonomy-object.md" %}}
+
+## Get the weighted pages
+
+Now that we have captured the "genres" `Taxonomy` object, let's get the weighted pages to which the "suspense" term has been assigned:
+
+```go-html-template
+{{ $weightedPages := $taxonomyObject.Get "suspense" }}
+```
+
+The above is equivalent to:
+
+```go-html-template
+{{ $weightedPages := $taxonomyObject.suspense }}
+```
+
- [chaining]: /getting-started/glossary/#chain
++But, if the term is not a valid [identifier](g), you cannot use the [chaining](g) syntax. For example, this will throw an error because the identifier contains a hyphen:
+
+```go-html-template
+{{ $weightedPages := $taxonomyObject.my-genre }}
+```
+
+You could also use the [`index`] function, but the syntax is more verbose:
+
+```go-html-template
+{{ $weightedPages := index $taxonomyObject "my-genre" }}
+```
+
+To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $weightedPages }}</pre>
+```
+
+## Example
+
+With this template:
+
+```go-html-template
+{{ $weightedPages := $taxonomyObject.Get "suspense" }}
+{{ range $weightedPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+```
+
+Hugo renders:
+
+```html
+<h2><a href="/books/jamaica-inn/">Jamaica inn</a></h2>
+<h2><a href="/books/death-on-the-nile/">Death on the nile</a></h2>
+<h2><a href="/books/and-then-there-were-none/">And then there were none</a></h2>
+```
+
- [identifier]: /getting-started/glossary/#identifier
- [term]: /getting-started/glossary/#term
- [weighted pages]: /getting-started/glossary/#weighted-page
+[`index`]: /functions/collections/indexfunction/
--- /dev/null
-
+---
+_comment: Do not remove front matter.
+---
+
+Before we can use a `Taxonomy` method, we need to capture a `Taxonomy` object.
+
+## Capture a Taxonomy object
+
+Consider this site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+genre = 'genres'
+author = 'authors'
+{{< /code-toggle >}}
+
+And this content structure:
+
+```text
+content/
+├── books/
+│ ├── and-then-there-were-none.md --> genres: suspense
+│ ├── death-on-the-nile.md --> genres: suspense
+│ └── jamaica-inn.md --> genres: suspense, romance
+│ └── pride-and-prejudice.md --> genres: romance
+└── _index.md
+```
+
+To capture the "genres" `Taxonomy` object from within any template, use the [`Taxonomies`] method on a `Site` object.
+
+```go-html-template
+{{ $taxonomyObject := .Site.Taxonomies.genres }}
+```
+
+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 >}}
+{{ $taxonomyObject := .Data.Terms }}
+{{< /code >}}
+
+To inspect the data structure:
+
+```go-html-template
+<pre>{{ debug.Dump $taxonomyObject }}</pre>
+```
+
+Although the [`Alphabetical`] and [`ByCount`] methods provide a better data structure for ranging through the taxonomy, you can render the weighted pages by term directly from the `Taxonomy` object:
+
+```go-html-template
+{{ range $term, $weightedPages := $taxonomyObject }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a></h2>
+ <ul>
+ {{ range $weightedPages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+{{ end }}
+```
+
+In the example above, the first anchor element is a link to the term page.
+
+[`Alphabetical`]: /methods/taxonomy/alphabetical/
+[`ByCount`]: /methods/taxonomy/bycount/
+
+[`data`]: /methods/page/data/
+[`terms`]: /methods/page/data/#in-a-taxonomy-template
+[`taxonomies`]: /methods/site/taxonomies/
--- /dev/null
- : (`page.Pages`) Returns a `Pages` object containing the `Page` objects to which the term is assigned, sorted by [taxonomic weight]. To sort or group, use any of the [methods] available to the `Pages` object. For example, sort by the last modification date.
+---
+_comment: Do not remove front matter.
+---
+
+An ordered taxonomy is a slice, where each element is an object that contains the term and a slice of its weighted pages.
+
+Each element of the slice provides these methods:
+
+Count
+: (`int`) Returns the number of pages to which the term is assigned.
+
+Page
+: (`page.Page`) Returns the term's `Page` object, useful for linking to the term page.
+
+Pages
- : (`page.WeightedPages`) Returns a slice of weighted pages to which the term is assigned, sorted by [taxonomic weight]. The `Pages` method above is more flexible, allowing you to sort and group.
++: (`page.Pages`) Returns a `Pages` object containing the `Page` objects to which the term is assigned, sorted by [taxonomic weight](g). To sort or group, use any of the [methods] available to the `Pages` object. For example, sort by the last modification date.
+
+Term
+: (`string`) Returns the term name.
+
+WeightedPages
- [taxonomic weight]: /getting-started/glossary/#taxonomic-weight
++: (`page.WeightedPages`) Returns a slice of weighted pages to which the term is assigned, sorted by taxonomic weight. The `Pages` method above is more flexible, allowing you to sort and group.
+
+[methods]: /methods/pages/
--- /dev/null
- To [localize] the return value, use the [`time.Format`] function instead.
+---
+title: Format
+description: Returns a textual representation of the time.Time value formatted according to the layout string.
+categories: []
+keywords: []
+action:
+ aliases: []
+ related:
+ - functions/time/AsTime
+ - methods/time/UTC
+ - methods/time/Local
+ returnType: string
+ signatures: [TIME.Format LAYOUT]
+toc: true
+aliases: [/methods/time/format]
+---
+
+```go-template
+{{ $t := "2023-01-27T23:44:58-08:00" }}
+{{ $t = time.AsTime $t }}
+{{ $format := "2 Jan 2006" }}
+
+{{ $t.Format $format }} → 27 Jan 2023
+```
+
+{{% note %}}
- [localize]: /getting-started/glossary/#localization
++To [localize](g) the return value, use the [`time.Format`] function instead.
+
+[`time.Format`]: /functions/time/format/
+{{% /note %}}
+
+Use the `Format` method with any `time.Time` value, including the four predefined front matter dates:
+
+```go-html-template
+{{ $format := "2 Jan 2006" }}
+
+{{ .Date.Format $format }}
+{{ .PublishDate.Format $format }}
+{{ .ExpiryDate.Format $format }}
+{{ .Lastmod.Format $format }}
+```
+
+{{% note %}}
+Use the [`time.Format`] function to format string representations of dates, and to format raw TOML dates that exclude time and time zone offset.
+
+[`time.Format`]: /functions/time/format/
+{{% /note %}}
+
+## Layout string
+
+{{% include "functions/_common/time-layout-string.md" %}}
+
+## Examples
+
+Given this front matter:
+
+{{< code-toggle fm=true >}}
+title = "About time"
+date = 2023-01-27T23:44:58-08:00
+{{< /code-toggle >}}
+
+The examples below were rendered in the `America/Los_Angeles` time zone:
+
+Format string|Result
+:--|:--
+`Monday, January 2, 2006`|`Friday, January 27, 2023`
+`Mon Jan 2 2006`|`Fri Jan 27 2023`
+`January 2006`|`January 2023`
+`2006-01-02`|`2023-01-27`
+`Monday`|`Friday`
+`02 Jan 06 15:04 MST`|`27 Jan 23 23:44 PST`
+`Mon, 02 Jan 2006 15:04:05 MST`|`Fri, 27 Jan 2023 23:44:58 PST`
+`Mon, 02 Jan 2006 15:04:05 -0700`|`Fri, 27 Jan 2023 23:44:58 -0800`
+
+## UTC and local time
+
+Convert and format any `time.Time` value to either Coordinated Universal Time (UTC) or local time.
+
+```go-html-template
+{{ $t := "2023-01-27T23:44:58-08:00" }}
+{{ $t = time.AsTime $t }}
+{{ $format := "2 Jan 2006 3:04:05 PM MST" }}
+
+{{ $t.UTC.Format $format }} → 28 Jan 2023 7:44:58 AM UTC
+{{ $t.Local.Format $format }} → 27 Jan 2023 11:44:58 PM PST
+```
+
+## Ordinal representation
+
+Use the [`humanize`](/functions/inflect/humanize) function to render the day of the month as an ordinal number:
+
+```go-html-template
+{{ $t := "2023-01-27T23:44:58-08:00" }}
+{{ $t = time.AsTime $t }}
+
+{{ humanize $t.Day }} of {{ $t.Format "January 2006" }} → 27th of January 2023
+```
--- /dev/null
- The `Round` method operates on TIME as an absolute duration since the [zero time]; it does not operate on the presentation form of the time. If DURATION is a multiple of one hour, `Round` may return a time with a non-zero minute, depending on the time zone.
+---
+title: Round
+description: Returns the result of rounding TIME to the nearest multiple of DURATION since January 1, 0001, 00:00:00 UTC.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/time/AsTime
+ - functions/time/ParseDuration
+ - methods/time/Truncate
+ returnType: time.Time
+ signatures: [TIME.Round DURATION]
+---
+
+The rounding behavior for halfway values is to round up.
+
-
- [zero time]: /getting-started/glossary/#zero-time
++The `Round` method operates on TIME as an absolute duration since the [zero time](g); it does not operate on the presentation form of the time. If DURATION is a multiple of one hour, `Round` may return a time with a non-zero minute, depending on the time zone.
+
+```go-html-template
+{{ $t := time.AsTime "2023-01-27T23:44:58-08:00" }}
+{{ $d := time.ParseDuration "1h"}}
+
+{{ ($t.Round $d).Format "2006-01-02T15:04:05-00:00" }} → 2023-01-28T00:00:00-00:00
+```
--- /dev/null
- The `Truncate` method operates on TIME as an absolute duration since the [zero time]; it does not operate on the presentation form of the time. If DURATION is a multiple of one hour, `Truncate` may return a time with a non-zero minute, depending on the time zone.
+---
+title: Truncate
+description: Returns the result of rounding TIME down to a multiple of DURATION since January 1, 0001, 00:00:00 UTC.
+categories: []
+keywords: []
+action:
+ related:
+ - functions/time/AsTime
+ - functions/time/ParseDuration
+ - methods/time/Round
+ returnType: time.Time
+ signatures: [TIME.Truncate DURATION]
+---
+
-
- [zero time]: /getting-started/glossary/#zero-time
++The `Truncate` method operates on TIME as an absolute duration since the [zero time](g); it does not operate on the presentation form of the time. If DURATION is a multiple of one hour, `Truncate` may return a time with a non-zero minute, depending on the time zone.
+
+```go-html-template
+{{ $t := time.AsTime "2023-01-27T23:44:58-08:00" }}
+{{ $d := time.ParseDuration "1h"}}
+
+{{ ($t.Truncate $d).Format "2006-01-02T15:04:05-00:00" }} → 2023-01-27T23:00:00-00:00
+```
--- /dev/null
- 2. Add a summary to the `bio.md` file in this folder.
- 3. Replace the `featured-template.png` with a screenshot of your site. You can rename it, but it must contain the word `featured`.
- 4. Create a new pull request in https://github.com/gohugoio/hugoDocs/pulls
+---
+
+title: Myshowcase
+date: 2021-01-14
+
+description: "A short description of this page."
+
+# The URL to the site on the internet.
+siteURL: https://gohugo.io/
+
+# Link to the site's Hugo source code if public and you can/want to share.
+# Remove or leave blank if not needed/wanted.
+siteSource: https://github.com/gohugoio/hugoDocs
+
+# Add credit to the article author. Leave blank or remove if not needed/wanted.
+byline: "[bep](https://github.com/bep), Hugo Lead"
+
+---
+
+To complete this showcase:
+
+1. Write the story about your site in this file.
-
++1. Add a summary to the `bio.md` file in this directory.
++1. Replace the `featured-template.png` with a screenshot of your site. You can rename it, but it must contain the word `featured`.
++1. Create a new pull request in https://github.com/gohugoio/hugoDocs/pulls
+
+The content of this bundle explained:
+
+index.md
+: The main content file. Fill in required front matter metadata and write your story. I does not have to be a novel. It can even be self-promotional, but it should include Hugo in some form.
+
+bio.md
+: A short summary of the website. Site credits (who built it) fits nicely here.
+
+featured.png
+: A reasonably sized screenshot of your website. It can be named anything, but the name must start with "featured". The sample image is `1500x750` (2:1 aspect ratio).
--- /dev/null
- {{% comment %}}
+---
+title: Emojis
+description: Include emoji shortcodes in your Markdown or templates.
+categories: [quick reference]
+keywords: [emoji]
+menu:
+ docs:
+ parent: quick-reference
+ weight: 20
+weight: 20
+toc: true
+---
+
+## Attribution
+
+This quick reference guide was generated using the [ikatyang/emoji-cheat-sheet] project which reads from the [GitHub Emoji API] and the [Unicode Full Emoji List].
+
+Note that GitHub [custom emoji] are not supported.
+
+[custom emoji]: #github-custom-emoji
+[github emoji api]: https://api.github.com/emojis
+[ikatyang/emoji-cheat-sheet]: https://github.com/ikatyang/emoji-cheat-sheet/
+[unicode full emoji list]: https://unicode.org/emoji/charts/full-emoji-list.html
+
+## Usage
+
+Configure Hugo to enable emoji processing in Markdown:
+
+{{< code-toggle file=hugo >}}
+enableEmoji = true
+{{< /code-toggle >}}
+
+With emoji processing enabled, this Markdown:
+
+```md
+Hello! :wave:
+```
+
+Is rendered to:
+
+```html
+Hello! 👋
+```
+
+And in your browser... Hello! :wave:
+
+To process an emoji shortcode from within a template, use the [`emojify`] function or pass the string through the [`RenderString`] method on a `Page` object:
+
+```go-html-template
+{{ "Hello! :wave:" | .RenderString }}
+```
+
+[`emojify`]: /functions/transform/emojify/
+[`RenderString`]: /methods/page/renderstring/
+
- {{% /comment %}}
++<!--
+To generate the sections below:
+
+ git clone https://github.com/ikatyang/emoji-cheat-sheet
+ cd emoji-cheat-sheet
+ npm install
+ npm run generate
+
+Then...
+
+ 1. Copy and paste from README.md
+ 2. Search/replace (regex) "^###\s" with "## "
+ 3. Search/replace "^####\s " with "### "
+ 4. Search/replace (regex) "<br />" ""
++-->
+
+## Table of Contents
+
+- [Smileys & Emotion](#smileys--emotion)
+- [People & Body](#people--body)
+- [Animals & Nature](#animals--nature)
+- [Food & Drink](#food--drink)
+- [Travel & Places](#travel--places)
+- [Activities](#activities)
+- [Objects](#objects)
+- [Symbols](#symbols)
+- [Flags](#flags)
+- [GitHub Custom Emoji](#github-custom-emoji)
+
+## Smileys & Emotion
+
+- [Face Smiling](#face-smiling)
+- [Face Affection](#face-affection)
+- [Face Tongue](#face-tongue)
+- [Face Hand](#face-hand)
+- [Face Neutral Skeptical](#face-neutral-skeptical)
+- [Face Sleepy](#face-sleepy)
+- [Face Unwell](#face-unwell)
+- [Face Hat](#face-hat)
+- [Face Glasses](#face-glasses)
+- [Face Concerned](#face-concerned)
+- [Face Negative](#face-negative)
+- [Face Costume](#face-costume)
+- [Cat Face](#cat-face)
+- [Monkey Face](#monkey-face)
+- [Heart](#heart)
+- [Emotion](#emotion)
+
+### Face Smiling
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :grinning: | `:grinning:` | :smiley: | `:smiley:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :smile: | `:smile:` | :grin: | `:grin:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :laughing: | `:laughing:` `:satisfied:` | :sweat_smile: | `:sweat_smile:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :rofl: | `:rofl:` | :joy: | `:joy:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :slightly_smiling_face: | `:slightly_smiling_face:` | :upside_down_face: | `:upside_down_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :melting_face: | `:melting_face:` | :wink: | `:wink:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :blush: | `:blush:` | :innocent: | `:innocent:` | [top](#table-of-contents) |
+
+### Face Affection
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :smiling_face_with_three_hearts: | `:smiling_face_with_three_hearts:` | :heart_eyes: | `:heart_eyes:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :star_struck: | `:star_struck:` | :kissing_heart: | `:kissing_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :kissing: | `:kissing:` | :relaxed: | `:relaxed:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :kissing_closed_eyes: | `:kissing_closed_eyes:` | :kissing_smiling_eyes: | `:kissing_smiling_eyes:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :smiling_face_with_tear: | `:smiling_face_with_tear:` | | | [top](#table-of-contents) |
+
+### Face Tongue
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :yum: | `:yum:` | :stuck_out_tongue: | `:stuck_out_tongue:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :stuck_out_tongue_winking_eye: | `:stuck_out_tongue_winking_eye:` | :zany_face: | `:zany_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :stuck_out_tongue_closed_eyes: | `:stuck_out_tongue_closed_eyes:` | :money_mouth_face: | `:money_mouth_face:` | [top](#table-of-contents) |
+
+### Face Hand
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :hugs: | `:hugs:` | :hand_over_mouth: | `:hand_over_mouth:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :face_with_open_eyes_and_hand_over_mouth: | `:face_with_open_eyes_and_hand_over_mouth:` | :face_with_peeking_eye: | `:face_with_peeking_eye:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :shushing_face: | `:shushing_face:` | :thinking: | `:thinking:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :saluting_face: | `:saluting_face:` | | | [top](#table-of-contents) |
+
+### Face Neutral Skeptical
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :zipper_mouth_face: | `:zipper_mouth_face:` | :raised_eyebrow: | `:raised_eyebrow:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :neutral_face: | `:neutral_face:` | :expressionless: | `:expressionless:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :no_mouth: | `:no_mouth:` | :dotted_line_face: | `:dotted_line_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :face_in_clouds: | `:face_in_clouds:` | :smirk: | `:smirk:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :unamused: | `:unamused:` | :roll_eyes: | `:roll_eyes:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :grimacing: | `:grimacing:` | :face_exhaling: | `:face_exhaling:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :lying_face: | `:lying_face:` | :shaking_face: | `:shaking_face:` | [top](#table-of-contents) |
+
+### Face Sleepy
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :relieved: | `:relieved:` | :pensive: | `:pensive:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :sleepy: | `:sleepy:` | :drooling_face: | `:drooling_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :sleeping: | `:sleeping:` | | | [top](#table-of-contents) |
+
+### Face Unwell
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :mask: | `:mask:` | :face_with_thermometer: | `:face_with_thermometer:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :face_with_head_bandage: | `:face_with_head_bandage:` | :nauseated_face: | `:nauseated_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :vomiting_face: | `:vomiting_face:` | :sneezing_face: | `:sneezing_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :hot_face: | `:hot_face:` | :cold_face: | `:cold_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :woozy_face: | `:woozy_face:` | :dizzy_face: | `:dizzy_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :face_with_spiral_eyes: | `:face_with_spiral_eyes:` | :exploding_head: | `:exploding_head:` | [top](#table-of-contents) |
+
+### Face Hat
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :cowboy_hat_face: | `:cowboy_hat_face:` | :partying_face: | `:partying_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :disguised_face: | `:disguised_face:` | | | [top](#table-of-contents) |
+
+### Face Glasses
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :sunglasses: | `:sunglasses:` | :nerd_face: | `:nerd_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :monocle_face: | `:monocle_face:` | | | [top](#table-of-contents) |
+
+### Face Concerned
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :confused: | `:confused:` | :face_with_diagonal_mouth: | `:face_with_diagonal_mouth:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :worried: | `:worried:` | :slightly_frowning_face: | `:slightly_frowning_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :frowning_face: | `:frowning_face:` | :open_mouth: | `:open_mouth:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :hushed: | `:hushed:` | :astonished: | `:astonished:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :flushed: | `:flushed:` | :pleading_face: | `:pleading_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :face_holding_back_tears: | `:face_holding_back_tears:` | :frowning: | `:frowning:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :anguished: | `:anguished:` | :fearful: | `:fearful:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :cold_sweat: | `:cold_sweat:` | :disappointed_relieved: | `:disappointed_relieved:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :cry: | `:cry:` | :sob: | `:sob:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :scream: | `:scream:` | :confounded: | `:confounded:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :persevere: | `:persevere:` | :disappointed: | `:disappointed:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :sweat: | `:sweat:` | :weary: | `:weary:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :tired_face: | `:tired_face:` | :yawning_face: | `:yawning_face:` | [top](#table-of-contents) |
+
+### Face Negative
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :triumph: | `:triumph:` | :pout: | `:pout:` `:rage:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :angry: | `:angry:` | :cursing_face: | `:cursing_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :smiling_imp: | `:smiling_imp:` | :imp: | `:imp:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :skull: | `:skull:` | :skull_and_crossbones: | `:skull_and_crossbones:` | [top](#table-of-contents) |
+
+### Face Costume
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :hankey: | `:hankey:` `:poop:` `:shit:` | :clown_face: | `:clown_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :japanese_ogre: | `:japanese_ogre:` | :japanese_goblin: | `:japanese_goblin:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :ghost: | `:ghost:` | :alien: | `:alien:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :space_invader: | `:space_invader:` | :robot: | `:robot:` | [top](#table-of-contents) |
+
+### Cat Face
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :smiley_cat: | `:smiley_cat:` | :smile_cat: | `:smile_cat:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :joy_cat: | `:joy_cat:` | :heart_eyes_cat: | `:heart_eyes_cat:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :smirk_cat: | `:smirk_cat:` | :kissing_cat: | `:kissing_cat:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :scream_cat: | `:scream_cat:` | :crying_cat_face: | `:crying_cat_face:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :pouting_cat: | `:pouting_cat:` | | | [top](#table-of-contents) |
+
+### Monkey Face
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :see_no_evil: | `:see_no_evil:` | :hear_no_evil: | `:hear_no_evil:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :speak_no_evil: | `:speak_no_evil:` | | | [top](#table-of-contents) |
+
+### Heart
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :love_letter: | `:love_letter:` | :cupid: | `:cupid:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :gift_heart: | `:gift_heart:` | :sparkling_heart: | `:sparkling_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :heartpulse: | `:heartpulse:` | :heartbeat: | `:heartbeat:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :revolving_hearts: | `:revolving_hearts:` | :two_hearts: | `:two_hearts:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :heart_decoration: | `:heart_decoration:` | :heavy_heart_exclamation: | `:heavy_heart_exclamation:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :broken_heart: | `:broken_heart:` | :heart_on_fire: | `:heart_on_fire:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :mending_heart: | `:mending_heart:` | :heart: | `:heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :pink_heart: | `:pink_heart:` | :orange_heart: | `:orange_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :yellow_heart: | `:yellow_heart:` | :green_heart: | `:green_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :blue_heart: | `:blue_heart:` | :light_blue_heart: | `:light_blue_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :purple_heart: | `:purple_heart:` | :brown_heart: | `:brown_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :black_heart: | `:black_heart:` | :grey_heart: | `:grey_heart:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :white_heart: | `:white_heart:` | | | [top](#table-of-contents) |
+
+### Emotion
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#smileys--emotion) | :kiss: | `:kiss:` | :100: | `:100:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :anger: | `:anger:` | :boom: | `:boom:` `:collision:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :dizzy: | `:dizzy:` | :sweat_drops: | `:sweat_drops:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :dash: | `:dash:` | :hole: | `:hole:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :speech_balloon: | `:speech_balloon:` | :eye_speech_bubble: | `:eye_speech_bubble:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :left_speech_bubble: | `:left_speech_bubble:` | :right_anger_bubble: | `:right_anger_bubble:` | [top](#table-of-contents) |
+| [top](#smileys--emotion) | :thought_balloon: | `:thought_balloon:` | :zzz: | `:zzz:` | [top](#table-of-contents) |
+
+## People & Body
+
+- [Hand Fingers Open](#hand-fingers-open)
+- [Hand Fingers Partial](#hand-fingers-partial)
+- [Hand Single Finger](#hand-single-finger)
+- [Hand Fingers Closed](#hand-fingers-closed)
+- [Hands](#hands)
+- [Hand Prop](#hand-prop)
+- [Body Parts](#body-parts)
+- [Person](#person)
+- [Person Gesture](#person-gesture)
+- [Person Role](#person-role)
+- [Person Fantasy](#person-fantasy)
+- [Person Activity](#person-activity)
+- [Person Sport](#person-sport)
+- [Person Resting](#person-resting)
+- [Family](#family)
+- [Person Symbol](#person-symbol)
+
+### Hand Fingers Open
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :wave: | `:wave:` | :raised_back_of_hand: | `:raised_back_of_hand:` | [top](#table-of-contents) |
+| [top](#people--body) | :raised_hand_with_fingers_splayed: | `:raised_hand_with_fingers_splayed:` | :hand: | `:hand:` `:raised_hand:` | [top](#table-of-contents) |
+| [top](#people--body) | :vulcan_salute: | `:vulcan_salute:` | :rightwards_hand: | `:rightwards_hand:` | [top](#table-of-contents) |
+| [top](#people--body) | :leftwards_hand: | `:leftwards_hand:` | :palm_down_hand: | `:palm_down_hand:` | [top](#table-of-contents) |
+| [top](#people--body) | :palm_up_hand: | `:palm_up_hand:` | :leftwards_pushing_hand: | `:leftwards_pushing_hand:` | [top](#table-of-contents) |
+| [top](#people--body) | :rightwards_pushing_hand: | `:rightwards_pushing_hand:` | | | [top](#table-of-contents) |
+
+### Hand Fingers Partial
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :ok_hand: | `:ok_hand:` | :pinched_fingers: | `:pinched_fingers:` | [top](#table-of-contents) |
+| [top](#people--body) | :pinching_hand: | `:pinching_hand:` | :v: | `:v:` | [top](#table-of-contents) |
+| [top](#people--body) | :crossed_fingers: | `:crossed_fingers:` | :hand_with_index_finger_and_thumb_crossed: | `:hand_with_index_finger_and_thumb_crossed:` | [top](#table-of-contents) |
+| [top](#people--body) | :love_you_gesture: | `:love_you_gesture:` | :metal: | `:metal:` | [top](#table-of-contents) |
+| [top](#people--body) | :call_me_hand: | `:call_me_hand:` | | | [top](#table-of-contents) |
+
+### Hand Single Finger
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :point_left: | `:point_left:` | :point_right: | `:point_right:` | [top](#table-of-contents) |
+| [top](#people--body) | :point_up_2: | `:point_up_2:` | :fu: | `:fu:` `:middle_finger:` | [top](#table-of-contents) |
+| [top](#people--body) | :point_down: | `:point_down:` | :point_up: | `:point_up:` | [top](#table-of-contents) |
+| [top](#people--body) | :index_pointing_at_the_viewer: | `:index_pointing_at_the_viewer:` | | | [top](#table-of-contents) |
+
+### Hand Fingers Closed
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :+1: | `:+1:` `:thumbsup:` | :-1: | `:-1:` `:thumbsdown:` | [top](#table-of-contents) |
+| [top](#people--body) | :fist: | `:fist:` `:fist_raised:` | :facepunch: | `:facepunch:` `:fist_oncoming:` `:punch:` | [top](#table-of-contents) |
+| [top](#people--body) | :fist_left: | `:fist_left:` | :fist_right: | `:fist_right:` | [top](#table-of-contents) |
+
+### Hands
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :clap: | `:clap:` | :raised_hands: | `:raised_hands:` | [top](#table-of-contents) |
+| [top](#people--body) | :heart_hands: | `:heart_hands:` | :open_hands: | `:open_hands:` | [top](#table-of-contents) |
+| [top](#people--body) | :palms_up_together: | `:palms_up_together:` | :handshake: | `:handshake:` | [top](#table-of-contents) |
+| [top](#people--body) | :pray: | `:pray:` | | | [top](#table-of-contents) |
+
+### Hand Prop
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :writing_hand: | `:writing_hand:` | :nail_care: | `:nail_care:` | [top](#table-of-contents) |
+| [top](#people--body) | :selfie: | `:selfie:` | | | [top](#table-of-contents) |
+
+### Body Parts
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :muscle: | `:muscle:` | :mechanical_arm: | `:mechanical_arm:` | [top](#table-of-contents) |
+| [top](#people--body) | :mechanical_leg: | `:mechanical_leg:` | :leg: | `:leg:` | [top](#table-of-contents) |
+| [top](#people--body) | :foot: | `:foot:` | :ear: | `:ear:` | [top](#table-of-contents) |
+| [top](#people--body) | :ear_with_hearing_aid: | `:ear_with_hearing_aid:` | :nose: | `:nose:` | [top](#table-of-contents) |
+| [top](#people--body) | :brain: | `:brain:` | :anatomical_heart: | `:anatomical_heart:` | [top](#table-of-contents) |
+| [top](#people--body) | :lungs: | `:lungs:` | :tooth: | `:tooth:` | [top](#table-of-contents) |
+| [top](#people--body) | :bone: | `:bone:` | :eyes: | `:eyes:` | [top](#table-of-contents) |
+| [top](#people--body) | :eye: | `:eye:` | :tongue: | `:tongue:` | [top](#table-of-contents) |
+| [top](#people--body) | :lips: | `:lips:` | :biting_lip: | `:biting_lip:` | [top](#table-of-contents) |
+
+### Person
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :baby: | `:baby:` | :child: | `:child:` | [top](#table-of-contents) |
+| [top](#people--body) | :boy: | `:boy:` | :girl: | `:girl:` | [top](#table-of-contents) |
+| [top](#people--body) | :adult: | `:adult:` | :blond_haired_person: | `:blond_haired_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :man: | `:man:` | :bearded_person: | `:bearded_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_beard: | `:man_beard:` | :woman_beard: | `:woman_beard:` | [top](#table-of-contents) |
+| [top](#people--body) | :red_haired_man: | `:red_haired_man:` | :curly_haired_man: | `:curly_haired_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :white_haired_man: | `:white_haired_man:` | :bald_man: | `:bald_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman: | `:woman:` | :red_haired_woman: | `:red_haired_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_red_hair: | `:person_red_hair:` | :curly_haired_woman: | `:curly_haired_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_curly_hair: | `:person_curly_hair:` | :white_haired_woman: | `:white_haired_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_white_hair: | `:person_white_hair:` | :bald_woman: | `:bald_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_bald: | `:person_bald:` | :blond_haired_woman: | `:blond_haired_woman:` `:blonde_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :blond_haired_man: | `:blond_haired_man:` | :older_adult: | `:older_adult:` | [top](#table-of-contents) |
+| [top](#people--body) | :older_man: | `:older_man:` | :older_woman: | `:older_woman:` | [top](#table-of-contents) |
+
+### Person Gesture
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :frowning_person: | `:frowning_person:` | :frowning_man: | `:frowning_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :frowning_woman: | `:frowning_woman:` | :pouting_face: | `:pouting_face:` | [top](#table-of-contents) |
+| [top](#people--body) | :pouting_man: | `:pouting_man:` | :pouting_woman: | `:pouting_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :no_good: | `:no_good:` | :ng_man: | `:ng_man:` `:no_good_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :ng_woman: | `:ng_woman:` `:no_good_woman:` | :ok_person: | `:ok_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :ok_man: | `:ok_man:` | :ok_woman: | `:ok_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :information_desk_person: | `:information_desk_person:` `:tipping_hand_person:` | :sassy_man: | `:sassy_man:` `:tipping_hand_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :sassy_woman: | `:sassy_woman:` `:tipping_hand_woman:` | :raising_hand: | `:raising_hand:` | [top](#table-of-contents) |
+| [top](#people--body) | :raising_hand_man: | `:raising_hand_man:` | :raising_hand_woman: | `:raising_hand_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :deaf_person: | `:deaf_person:` | :deaf_man: | `:deaf_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :deaf_woman: | `:deaf_woman:` | :bow: | `:bow:` | [top](#table-of-contents) |
+| [top](#people--body) | :bowing_man: | `:bowing_man:` | :bowing_woman: | `:bowing_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :facepalm: | `:facepalm:` | :man_facepalming: | `:man_facepalming:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_facepalming: | `:woman_facepalming:` | :shrug: | `:shrug:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_shrugging: | `:man_shrugging:` | :woman_shrugging: | `:woman_shrugging:` | [top](#table-of-contents) |
+
+### Person Role
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :health_worker: | `:health_worker:` | :man_health_worker: | `:man_health_worker:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_health_worker: | `:woman_health_worker:` | :student: | `:student:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_student: | `:man_student:` | :woman_student: | `:woman_student:` | [top](#table-of-contents) |
+| [top](#people--body) | :teacher: | `:teacher:` | :man_teacher: | `:man_teacher:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_teacher: | `:woman_teacher:` | :judge: | `:judge:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_judge: | `:man_judge:` | :woman_judge: | `:woman_judge:` | [top](#table-of-contents) |
+| [top](#people--body) | :farmer: | `:farmer:` | :man_farmer: | `:man_farmer:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_farmer: | `:woman_farmer:` | :cook: | `:cook:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_cook: | `:man_cook:` | :woman_cook: | `:woman_cook:` | [top](#table-of-contents) |
+| [top](#people--body) | :mechanic: | `:mechanic:` | :man_mechanic: | `:man_mechanic:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_mechanic: | `:woman_mechanic:` | :factory_worker: | `:factory_worker:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_factory_worker: | `:man_factory_worker:` | :woman_factory_worker: | `:woman_factory_worker:` | [top](#table-of-contents) |
+| [top](#people--body) | :office_worker: | `:office_worker:` | :man_office_worker: | `:man_office_worker:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_office_worker: | `:woman_office_worker:` | :scientist: | `:scientist:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_scientist: | `:man_scientist:` | :woman_scientist: | `:woman_scientist:` | [top](#table-of-contents) |
+| [top](#people--body) | :technologist: | `:technologist:` | :man_technologist: | `:man_technologist:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_technologist: | `:woman_technologist:` | :singer: | `:singer:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_singer: | `:man_singer:` | :woman_singer: | `:woman_singer:` | [top](#table-of-contents) |
+| [top](#people--body) | :artist: | `:artist:` | :man_artist: | `:man_artist:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_artist: | `:woman_artist:` | :pilot: | `:pilot:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_pilot: | `:man_pilot:` | :woman_pilot: | `:woman_pilot:` | [top](#table-of-contents) |
+| [top](#people--body) | :astronaut: | `:astronaut:` | :man_astronaut: | `:man_astronaut:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_astronaut: | `:woman_astronaut:` | :firefighter: | `:firefighter:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_firefighter: | `:man_firefighter:` | :woman_firefighter: | `:woman_firefighter:` | [top](#table-of-contents) |
+| [top](#people--body) | :cop: | `:cop:` `:police_officer:` | :policeman: | `:policeman:` | [top](#table-of-contents) |
+| [top](#people--body) | :policewoman: | `:policewoman:` | :detective: | `:detective:` | [top](#table-of-contents) |
+| [top](#people--body) | :male_detective: | `:male_detective:` | :female_detective: | `:female_detective:` | [top](#table-of-contents) |
+| [top](#people--body) | :guard: | `:guard:` | :guardsman: | `:guardsman:` | [top](#table-of-contents) |
+| [top](#people--body) | :guardswoman: | `:guardswoman:` | :ninja: | `:ninja:` | [top](#table-of-contents) |
+| [top](#people--body) | :construction_worker: | `:construction_worker:` | :construction_worker_man: | `:construction_worker_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :construction_worker_woman: | `:construction_worker_woman:` | :person_with_crown: | `:person_with_crown:` | [top](#table-of-contents) |
+| [top](#people--body) | :prince: | `:prince:` | :princess: | `:princess:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_with_turban: | `:person_with_turban:` | :man_with_turban: | `:man_with_turban:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_with_turban: | `:woman_with_turban:` | :man_with_gua_pi_mao: | `:man_with_gua_pi_mao:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_with_headscarf: | `:woman_with_headscarf:` | :person_in_tuxedo: | `:person_in_tuxedo:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_in_tuxedo: | `:man_in_tuxedo:` | :woman_in_tuxedo: | `:woman_in_tuxedo:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_with_veil: | `:person_with_veil:` | :man_with_veil: | `:man_with_veil:` | [top](#table-of-contents) |
+| [top](#people--body) | :bride_with_veil: | `:bride_with_veil:` `:woman_with_veil:` | :pregnant_woman: | `:pregnant_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :pregnant_man: | `:pregnant_man:` | :pregnant_person: | `:pregnant_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :breast_feeding: | `:breast_feeding:` | :woman_feeding_baby: | `:woman_feeding_baby:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_feeding_baby: | `:man_feeding_baby:` | :person_feeding_baby: | `:person_feeding_baby:` | [top](#table-of-contents) |
+
+### Person Fantasy
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :angel: | `:angel:` | :santa: | `:santa:` | [top](#table-of-contents) |
+| [top](#people--body) | :mrs_claus: | `:mrs_claus:` | :mx_claus: | `:mx_claus:` | [top](#table-of-contents) |
+| [top](#people--body) | :superhero: | `:superhero:` | :superhero_man: | `:superhero_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :superhero_woman: | `:superhero_woman:` | :supervillain: | `:supervillain:` | [top](#table-of-contents) |
+| [top](#people--body) | :supervillain_man: | `:supervillain_man:` | :supervillain_woman: | `:supervillain_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :mage: | `:mage:` | :mage_man: | `:mage_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :mage_woman: | `:mage_woman:` | :fairy: | `:fairy:` | [top](#table-of-contents) |
+| [top](#people--body) | :fairy_man: | `:fairy_man:` | :fairy_woman: | `:fairy_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :vampire: | `:vampire:` | :vampire_man: | `:vampire_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :vampire_woman: | `:vampire_woman:` | :merperson: | `:merperson:` | [top](#table-of-contents) |
+| [top](#people--body) | :merman: | `:merman:` | :mermaid: | `:mermaid:` | [top](#table-of-contents) |
+| [top](#people--body) | :elf: | `:elf:` | :elf_man: | `:elf_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :elf_woman: | `:elf_woman:` | :genie: | `:genie:` | [top](#table-of-contents) |
+| [top](#people--body) | :genie_man: | `:genie_man:` | :genie_woman: | `:genie_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :zombie: | `:zombie:` | :zombie_man: | `:zombie_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :zombie_woman: | `:zombie_woman:` | :troll: | `:troll:` | [top](#table-of-contents) |
+
+### Person Activity
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :massage: | `:massage:` | :massage_man: | `:massage_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :massage_woman: | `:massage_woman:` | :haircut: | `:haircut:` | [top](#table-of-contents) |
+| [top](#people--body) | :haircut_man: | `:haircut_man:` | :haircut_woman: | `:haircut_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :walking: | `:walking:` | :walking_man: | `:walking_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :walking_woman: | `:walking_woman:` | :standing_person: | `:standing_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :standing_man: | `:standing_man:` | :standing_woman: | `:standing_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :kneeling_person: | `:kneeling_person:` | :kneeling_man: | `:kneeling_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :kneeling_woman: | `:kneeling_woman:` | :person_with_probing_cane: | `:person_with_probing_cane:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_with_probing_cane: | `:man_with_probing_cane:` | :woman_with_probing_cane: | `:woman_with_probing_cane:` | [top](#table-of-contents) |
+| [top](#people--body) | :person_in_motorized_wheelchair: | `:person_in_motorized_wheelchair:` | :man_in_motorized_wheelchair: | `:man_in_motorized_wheelchair:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_in_motorized_wheelchair: | `:woman_in_motorized_wheelchair:` | :person_in_manual_wheelchair: | `:person_in_manual_wheelchair:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_in_manual_wheelchair: | `:man_in_manual_wheelchair:` | :woman_in_manual_wheelchair: | `:woman_in_manual_wheelchair:` | [top](#table-of-contents) |
+| [top](#people--body) | :runner: | `:runner:` `:running:` | :running_man: | `:running_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :running_woman: | `:running_woman:` | :dancer: | `:dancer:` `:woman_dancing:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_dancing: | `:man_dancing:` | :business_suit_levitating: | `:business_suit_levitating:` | [top](#table-of-contents) |
+| [top](#people--body) | :dancers: | `:dancers:` | :dancing_men: | `:dancing_men:` | [top](#table-of-contents) |
+| [top](#people--body) | :dancing_women: | `:dancing_women:` | :sauna_person: | `:sauna_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :sauna_man: | `:sauna_man:` | :sauna_woman: | `:sauna_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :climbing: | `:climbing:` | :climbing_man: | `:climbing_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :climbing_woman: | `:climbing_woman:` | | | [top](#table-of-contents) |
+
+### Person Sport
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :person_fencing: | `:person_fencing:` | :horse_racing: | `:horse_racing:` | [top](#table-of-contents) |
+| [top](#people--body) | :skier: | `:skier:` | :snowboarder: | `:snowboarder:` | [top](#table-of-contents) |
+| [top](#people--body) | :golfing: | `:golfing:` | :golfing_man: | `:golfing_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :golfing_woman: | `:golfing_woman:` | :surfer: | `:surfer:` | [top](#table-of-contents) |
+| [top](#people--body) | :surfing_man: | `:surfing_man:` | :surfing_woman: | `:surfing_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :rowboat: | `:rowboat:` | :rowing_man: | `:rowing_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :rowing_woman: | `:rowing_woman:` | :swimmer: | `:swimmer:` | [top](#table-of-contents) |
+| [top](#people--body) | :swimming_man: | `:swimming_man:` | :swimming_woman: | `:swimming_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :bouncing_ball_person: | `:bouncing_ball_person:` | :basketball_man: | `:basketball_man:` `:bouncing_ball_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :basketball_woman: | `:basketball_woman:` `:bouncing_ball_woman:` | :weight_lifting: | `:weight_lifting:` | [top](#table-of-contents) |
+| [top](#people--body) | :weight_lifting_man: | `:weight_lifting_man:` | :weight_lifting_woman: | `:weight_lifting_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :bicyclist: | `:bicyclist:` | :biking_man: | `:biking_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :biking_woman: | `:biking_woman:` | :mountain_bicyclist: | `:mountain_bicyclist:` | [top](#table-of-contents) |
+| [top](#people--body) | :mountain_biking_man: | `:mountain_biking_man:` | :mountain_biking_woman: | `:mountain_biking_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :cartwheeling: | `:cartwheeling:` | :man_cartwheeling: | `:man_cartwheeling:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_cartwheeling: | `:woman_cartwheeling:` | :wrestling: | `:wrestling:` | [top](#table-of-contents) |
+| [top](#people--body) | :men_wrestling: | `:men_wrestling:` | :women_wrestling: | `:women_wrestling:` | [top](#table-of-contents) |
+| [top](#people--body) | :water_polo: | `:water_polo:` | :man_playing_water_polo: | `:man_playing_water_polo:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_playing_water_polo: | `:woman_playing_water_polo:` | :handball_person: | `:handball_person:` | [top](#table-of-contents) |
+| [top](#people--body) | :man_playing_handball: | `:man_playing_handball:` | :woman_playing_handball: | `:woman_playing_handball:` | [top](#table-of-contents) |
+| [top](#people--body) | :juggling_person: | `:juggling_person:` | :man_juggling: | `:man_juggling:` | [top](#table-of-contents) |
+| [top](#people--body) | :woman_juggling: | `:woman_juggling:` | | | [top](#table-of-contents) |
+
+### Person Resting
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :lotus_position: | `:lotus_position:` | :lotus_position_man: | `:lotus_position_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :lotus_position_woman: | `:lotus_position_woman:` | :bath: | `:bath:` | [top](#table-of-contents) |
+| [top](#people--body) | :sleeping_bed: | `:sleeping_bed:` | | | [top](#table-of-contents) |
+
+### Family
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :people_holding_hands: | `:people_holding_hands:` | :two_women_holding_hands: | `:two_women_holding_hands:` | [top](#table-of-contents) |
+| [top](#people--body) | :couple: | `:couple:` | :two_men_holding_hands: | `:two_men_holding_hands:` | [top](#table-of-contents) |
+| [top](#people--body) | :couplekiss: | `:couplekiss:` | :couplekiss_man_woman: | `:couplekiss_man_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :couplekiss_man_man: | `:couplekiss_man_man:` | :couplekiss_woman_woman: | `:couplekiss_woman_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :couple_with_heart: | `:couple_with_heart:` | :couple_with_heart_woman_man: | `:couple_with_heart_woman_man:` | [top](#table-of-contents) |
+| [top](#people--body) | :couple_with_heart_man_man: | `:couple_with_heart_man_man:` | :couple_with_heart_woman_woman: | `:couple_with_heart_woman_woman:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_woman_boy: | `:family_man_woman_boy:` | :family_man_woman_girl: | `:family_man_woman_girl:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_woman_girl_boy: | `:family_man_woman_girl_boy:` | :family_man_woman_boy_boy: | `:family_man_woman_boy_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_woman_girl_girl: | `:family_man_woman_girl_girl:` | :family_man_man_boy: | `:family_man_man_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_man_girl: | `:family_man_man_girl:` | :family_man_man_girl_boy: | `:family_man_man_girl_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_man_boy_boy: | `:family_man_man_boy_boy:` | :family_man_man_girl_girl: | `:family_man_man_girl_girl:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_woman_woman_boy: | `:family_woman_woman_boy:` | :family_woman_woman_girl: | `:family_woman_woman_girl:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_woman_woman_girl_boy: | `:family_woman_woman_girl_boy:` | :family_woman_woman_boy_boy: | `:family_woman_woman_boy_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_woman_woman_girl_girl: | `:family_woman_woman_girl_girl:` | :family_man_boy: | `:family_man_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_boy_boy: | `:family_man_boy_boy:` | :family_man_girl: | `:family_man_girl:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_man_girl_boy: | `:family_man_girl_boy:` | :family_man_girl_girl: | `:family_man_girl_girl:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_woman_boy: | `:family_woman_boy:` | :family_woman_boy_boy: | `:family_woman_boy_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_woman_girl: | `:family_woman_girl:` | :family_woman_girl_boy: | `:family_woman_girl_boy:` | [top](#table-of-contents) |
+| [top](#people--body) | :family_woman_girl_girl: | `:family_woman_girl_girl:` | | | [top](#table-of-contents) |
+
+### Person Symbol
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#people--body) | :speaking_head: | `:speaking_head:` | :bust_in_silhouette: | `:bust_in_silhouette:` | [top](#table-of-contents) |
+| [top](#people--body) | :busts_in_silhouette: | `:busts_in_silhouette:` | :people_hugging: | `:people_hugging:` | [top](#table-of-contents) |
+| [top](#people--body) | :family: | `:family:` | :footprints: | `:footprints:` | [top](#table-of-contents) |
+
+## Animals & Nature
+
+- [Animal Mammal](#animal-mammal)
+- [Animal Bird](#animal-bird)
+- [Animal Amphibian](#animal-amphibian)
+- [Animal Reptile](#animal-reptile)
+- [Animal Marine](#animal-marine)
+- [Animal Bug](#animal-bug)
+- [Plant Flower](#plant-flower)
+- [Plant Other](#plant-other)
+
+### Animal Mammal
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :monkey_face: | `:monkey_face:` | :monkey: | `:monkey:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :gorilla: | `:gorilla:` | :orangutan: | `:orangutan:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :dog: | `:dog:` | :dog2: | `:dog2:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :guide_dog: | `:guide_dog:` | :service_dog: | `:service_dog:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :poodle: | `:poodle:` | :wolf: | `:wolf:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :fox_face: | `:fox_face:` | :raccoon: | `:raccoon:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :cat: | `:cat:` | :cat2: | `:cat2:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :black_cat: | `:black_cat:` | :lion: | `:lion:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :tiger: | `:tiger:` | :tiger2: | `:tiger2:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :leopard: | `:leopard:` | :horse: | `:horse:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :moose: | `:moose:` | :donkey: | `:donkey:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :racehorse: | `:racehorse:` | :unicorn: | `:unicorn:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :zebra: | `:zebra:` | :deer: | `:deer:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :bison: | `:bison:` | :cow: | `:cow:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :ox: | `:ox:` | :water_buffalo: | `:water_buffalo:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :cow2: | `:cow2:` | :pig: | `:pig:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :pig2: | `:pig2:` | :boar: | `:boar:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :pig_nose: | `:pig_nose:` | :ram: | `:ram:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :sheep: | `:sheep:` | :goat: | `:goat:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :dromedary_camel: | `:dromedary_camel:` | :camel: | `:camel:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :llama: | `:llama:` | :giraffe: | `:giraffe:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :elephant: | `:elephant:` | :mammoth: | `:mammoth:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :rhinoceros: | `:rhinoceros:` | :hippopotamus: | `:hippopotamus:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :mouse: | `:mouse:` | :mouse2: | `:mouse2:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :rat: | `:rat:` | :hamster: | `:hamster:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :rabbit: | `:rabbit:` | :rabbit2: | `:rabbit2:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :chipmunk: | `:chipmunk:` | :beaver: | `:beaver:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :hedgehog: | `:hedgehog:` | :bat: | `:bat:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :bear: | `:bear:` | :polar_bear: | `:polar_bear:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :koala: | `:koala:` | :panda_face: | `:panda_face:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :sloth: | `:sloth:` | :otter: | `:otter:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :skunk: | `:skunk:` | :kangaroo: | `:kangaroo:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :badger: | `:badger:` | :feet: | `:feet:` `:paw_prints:` | [top](#table-of-contents) |
+
+### Animal Bird
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :turkey: | `:turkey:` | :chicken: | `:chicken:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :rooster: | `:rooster:` | :hatching_chick: | `:hatching_chick:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :baby_chick: | `:baby_chick:` | :hatched_chick: | `:hatched_chick:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :bird: | `:bird:` | :penguin: | `:penguin:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :dove: | `:dove:` | :eagle: | `:eagle:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :duck: | `:duck:` | :swan: | `:swan:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :owl: | `:owl:` | :dodo: | `:dodo:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :feather: | `:feather:` | :flamingo: | `:flamingo:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :peacock: | `:peacock:` | :parrot: | `:parrot:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :wing: | `:wing:` | :black_bird: | `:black_bird:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :goose: | `:goose:` | | | [top](#table-of-contents) |
+
+### Animal Amphibian
+
+| | ico | shortcode | |
+| - | :-: | - | - |
+| [top](#animals--nature) | :frog: | `:frog:` | [top](#table-of-contents) |
+
+### Animal Reptile
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :crocodile: | `:crocodile:` | :turtle: | `:turtle:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :lizard: | `:lizard:` | :snake: | `:snake:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :dragon_face: | `:dragon_face:` | :dragon: | `:dragon:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :sauropod: | `:sauropod:` | :t-rex: | `:t-rex:` | [top](#table-of-contents) |
+
+### Animal Marine
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :whale: | `:whale:` | :whale2: | `:whale2:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :dolphin: | `:dolphin:` `:flipper:` | :seal: | `:seal:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :fish: | `:fish:` | :tropical_fish: | `:tropical_fish:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :blowfish: | `:blowfish:` | :shark: | `:shark:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :octopus: | `:octopus:` | :shell: | `:shell:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :coral: | `:coral:` | :jellyfish: | `:jellyfish:` | [top](#table-of-contents) |
+
+### Animal Bug
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :snail: | `:snail:` | :butterfly: | `:butterfly:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :bug: | `:bug:` | :ant: | `:ant:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :bee: | `:bee:` `:honeybee:` | :beetle: | `:beetle:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :lady_beetle: | `:lady_beetle:` | :cricket: | `:cricket:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :cockroach: | `:cockroach:` | :spider: | `:spider:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :spider_web: | `:spider_web:` | :scorpion: | `:scorpion:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :mosquito: | `:mosquito:` | :fly: | `:fly:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :worm: | `:worm:` | :microbe: | `:microbe:` | [top](#table-of-contents) |
+
+### Plant Flower
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :bouquet: | `:bouquet:` | :cherry_blossom: | `:cherry_blossom:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :white_flower: | `:white_flower:` | :lotus: | `:lotus:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :rosette: | `:rosette:` | :rose: | `:rose:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :wilted_flower: | `:wilted_flower:` | :hibiscus: | `:hibiscus:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :sunflower: | `:sunflower:` | :blossom: | `:blossom:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :tulip: | `:tulip:` | :hyacinth: | `:hyacinth:` | [top](#table-of-contents) |
+
+### Plant Other
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#animals--nature) | :seedling: | `:seedling:` | :potted_plant: | `:potted_plant:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :evergreen_tree: | `:evergreen_tree:` | :deciduous_tree: | `:deciduous_tree:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :palm_tree: | `:palm_tree:` | :cactus: | `:cactus:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :ear_of_rice: | `:ear_of_rice:` | :herb: | `:herb:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :shamrock: | `:shamrock:` | :four_leaf_clover: | `:four_leaf_clover:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :maple_leaf: | `:maple_leaf:` | :fallen_leaf: | `:fallen_leaf:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :leaves: | `:leaves:` | :empty_nest: | `:empty_nest:` | [top](#table-of-contents) |
+| [top](#animals--nature) | :nest_with_eggs: | `:nest_with_eggs:` | :mushroom: | `:mushroom:` | [top](#table-of-contents) |
+
+## Food & Drink
+
+- [Food Fruit](#food-fruit)
+- [Food Vegetable](#food-vegetable)
+- [Food Prepared](#food-prepared)
+- [Food Asian](#food-asian)
+- [Food Marine](#food-marine)
+- [Food Sweet](#food-sweet)
+- [Drink](#drink)
+- [Dishware](#dishware)
+
+### Food Fruit
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :grapes: | `:grapes:` | :melon: | `:melon:` | [top](#table-of-contents) |
+| [top](#food--drink) | :watermelon: | `:watermelon:` | :mandarin: | `:mandarin:` `:orange:` `:tangerine:` | [top](#table-of-contents) |
+| [top](#food--drink) | :lemon: | `:lemon:` | :banana: | `:banana:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pineapple: | `:pineapple:` | :mango: | `:mango:` | [top](#table-of-contents) |
+| [top](#food--drink) | :apple: | `:apple:` | :green_apple: | `:green_apple:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pear: | `:pear:` | :peach: | `:peach:` | [top](#table-of-contents) |
+| [top](#food--drink) | :cherries: | `:cherries:` | :strawberry: | `:strawberry:` | [top](#table-of-contents) |
+| [top](#food--drink) | :blueberries: | `:blueberries:` | :kiwi_fruit: | `:kiwi_fruit:` | [top](#table-of-contents) |
+| [top](#food--drink) | :tomato: | `:tomato:` | :olive: | `:olive:` | [top](#table-of-contents) |
+| [top](#food--drink) | :coconut: | `:coconut:` | | | [top](#table-of-contents) |
+
+### Food Vegetable
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :avocado: | `:avocado:` | :eggplant: | `:eggplant:` | [top](#table-of-contents) |
+| [top](#food--drink) | :potato: | `:potato:` | :carrot: | `:carrot:` | [top](#table-of-contents) |
+| [top](#food--drink) | :corn: | `:corn:` | :hot_pepper: | `:hot_pepper:` | [top](#table-of-contents) |
+| [top](#food--drink) | :bell_pepper: | `:bell_pepper:` | :cucumber: | `:cucumber:` | [top](#table-of-contents) |
+| [top](#food--drink) | :leafy_green: | `:leafy_green:` | :broccoli: | `:broccoli:` | [top](#table-of-contents) |
+| [top](#food--drink) | :garlic: | `:garlic:` | :onion: | `:onion:` | [top](#table-of-contents) |
+| [top](#food--drink) | :peanuts: | `:peanuts:` | :beans: | `:beans:` | [top](#table-of-contents) |
+| [top](#food--drink) | :chestnut: | `:chestnut:` | :ginger_root: | `:ginger_root:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pea_pod: | `:pea_pod:` | | | [top](#table-of-contents) |
+
+### Food Prepared
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :bread: | `:bread:` | :croissant: | `:croissant:` | [top](#table-of-contents) |
+| [top](#food--drink) | :baguette_bread: | `:baguette_bread:` | :flatbread: | `:flatbread:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pretzel: | `:pretzel:` | :bagel: | `:bagel:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pancakes: | `:pancakes:` | :waffle: | `:waffle:` | [top](#table-of-contents) |
+| [top](#food--drink) | :cheese: | `:cheese:` | :meat_on_bone: | `:meat_on_bone:` | [top](#table-of-contents) |
+| [top](#food--drink) | :poultry_leg: | `:poultry_leg:` | :cut_of_meat: | `:cut_of_meat:` | [top](#table-of-contents) |
+| [top](#food--drink) | :bacon: | `:bacon:` | :hamburger: | `:hamburger:` | [top](#table-of-contents) |
+| [top](#food--drink) | :fries: | `:fries:` | :pizza: | `:pizza:` | [top](#table-of-contents) |
+| [top](#food--drink) | :hotdog: | `:hotdog:` | :sandwich: | `:sandwich:` | [top](#table-of-contents) |
+| [top](#food--drink) | :taco: | `:taco:` | :burrito: | `:burrito:` | [top](#table-of-contents) |
+| [top](#food--drink) | :tamale: | `:tamale:` | :stuffed_flatbread: | `:stuffed_flatbread:` | [top](#table-of-contents) |
+| [top](#food--drink) | :falafel: | `:falafel:` | :egg: | `:egg:` | [top](#table-of-contents) |
+| [top](#food--drink) | :fried_egg: | `:fried_egg:` | :shallow_pan_of_food: | `:shallow_pan_of_food:` | [top](#table-of-contents) |
+| [top](#food--drink) | :stew: | `:stew:` | :fondue: | `:fondue:` | [top](#table-of-contents) |
+| [top](#food--drink) | :bowl_with_spoon: | `:bowl_with_spoon:` | :green_salad: | `:green_salad:` | [top](#table-of-contents) |
+| [top](#food--drink) | :popcorn: | `:popcorn:` | :butter: | `:butter:` | [top](#table-of-contents) |
+| [top](#food--drink) | :salt: | `:salt:` | :canned_food: | `:canned_food:` | [top](#table-of-contents) |
+
+### Food Asian
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :bento: | `:bento:` | :rice_cracker: | `:rice_cracker:` | [top](#table-of-contents) |
+| [top](#food--drink) | :rice_ball: | `:rice_ball:` | :rice: | `:rice:` | [top](#table-of-contents) |
+| [top](#food--drink) | :curry: | `:curry:` | :ramen: | `:ramen:` | [top](#table-of-contents) |
+| [top](#food--drink) | :spaghetti: | `:spaghetti:` | :sweet_potato: | `:sweet_potato:` | [top](#table-of-contents) |
+| [top](#food--drink) | :oden: | `:oden:` | :sushi: | `:sushi:` | [top](#table-of-contents) |
+| [top](#food--drink) | :fried_shrimp: | `:fried_shrimp:` | :fish_cake: | `:fish_cake:` | [top](#table-of-contents) |
+| [top](#food--drink) | :moon_cake: | `:moon_cake:` | :dango: | `:dango:` | [top](#table-of-contents) |
+| [top](#food--drink) | :dumpling: | `:dumpling:` | :fortune_cookie: | `:fortune_cookie:` | [top](#table-of-contents) |
+| [top](#food--drink) | :takeout_box: | `:takeout_box:` | | | [top](#table-of-contents) |
+
+### Food Marine
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :crab: | `:crab:` | :lobster: | `:lobster:` | [top](#table-of-contents) |
+| [top](#food--drink) | :shrimp: | `:shrimp:` | :squid: | `:squid:` | [top](#table-of-contents) |
+| [top](#food--drink) | :oyster: | `:oyster:` | | | [top](#table-of-contents) |
+
+### Food Sweet
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :icecream: | `:icecream:` | :shaved_ice: | `:shaved_ice:` | [top](#table-of-contents) |
+| [top](#food--drink) | :ice_cream: | `:ice_cream:` | :doughnut: | `:doughnut:` | [top](#table-of-contents) |
+| [top](#food--drink) | :cookie: | `:cookie:` | :birthday: | `:birthday:` | [top](#table-of-contents) |
+| [top](#food--drink) | :cake: | `:cake:` | :cupcake: | `:cupcake:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pie: | `:pie:` | :chocolate_bar: | `:chocolate_bar:` | [top](#table-of-contents) |
+| [top](#food--drink) | :candy: | `:candy:` | :lollipop: | `:lollipop:` | [top](#table-of-contents) |
+| [top](#food--drink) | :custard: | `:custard:` | :honey_pot: | `:honey_pot:` | [top](#table-of-contents) |
+
+### Drink
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :baby_bottle: | `:baby_bottle:` | :milk_glass: | `:milk_glass:` | [top](#table-of-contents) |
+| [top](#food--drink) | :coffee: | `:coffee:` | :teapot: | `:teapot:` | [top](#table-of-contents) |
+| [top](#food--drink) | :tea: | `:tea:` | :sake: | `:sake:` | [top](#table-of-contents) |
+| [top](#food--drink) | :champagne: | `:champagne:` | :wine_glass: | `:wine_glass:` | [top](#table-of-contents) |
+| [top](#food--drink) | :cocktail: | `:cocktail:` | :tropical_drink: | `:tropical_drink:` | [top](#table-of-contents) |
+| [top](#food--drink) | :beer: | `:beer:` | :beers: | `:beers:` | [top](#table-of-contents) |
+| [top](#food--drink) | :clinking_glasses: | `:clinking_glasses:` | :tumbler_glass: | `:tumbler_glass:` | [top](#table-of-contents) |
+| [top](#food--drink) | :pouring_liquid: | `:pouring_liquid:` | :cup_with_straw: | `:cup_with_straw:` | [top](#table-of-contents) |
+| [top](#food--drink) | :bubble_tea: | `:bubble_tea:` | :beverage_box: | `:beverage_box:` | [top](#table-of-contents) |
+| [top](#food--drink) | :mate: | `:mate:` | :ice_cube: | `:ice_cube:` | [top](#table-of-contents) |
+
+### Dishware
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#food--drink) | :chopsticks: | `:chopsticks:` | :plate_with_cutlery: | `:plate_with_cutlery:` | [top](#table-of-contents) |
+| [top](#food--drink) | :fork_and_knife: | `:fork_and_knife:` | :spoon: | `:spoon:` | [top](#table-of-contents) |
+| [top](#food--drink) | :hocho: | `:hocho:` `:knife:` | :jar: | `:jar:` | [top](#table-of-contents) |
+| [top](#food--drink) | :amphora: | `:amphora:` | | | [top](#table-of-contents) |
+
+## Travel & Places
+
+- [Place Map](#place-map)
+- [Place Geographic](#place-geographic)
+- [Place Building](#place-building)
+- [Place Religious](#place-religious)
+- [Place Other](#place-other)
+- [Transport Ground](#transport-ground)
+- [Transport Water](#transport-water)
+- [Transport Air](#transport-air)
+- [Hotel](#hotel)
+- [Time](#time)
+- [Sky & Weather](#sky--weather)
+
+### Place Map
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :earth_africa: | `:earth_africa:` | :earth_americas: | `:earth_americas:` | [top](#table-of-contents) |
+| [top](#travel--places) | :earth_asia: | `:earth_asia:` | :globe_with_meridians: | `:globe_with_meridians:` | [top](#table-of-contents) |
+| [top](#travel--places) | :world_map: | `:world_map:` | :japan: | `:japan:` | [top](#table-of-contents) |
+| [top](#travel--places) | :compass: | `:compass:` | | | [top](#table-of-contents) |
+
+### Place Geographic
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :mountain_snow: | `:mountain_snow:` | :mountain: | `:mountain:` | [top](#table-of-contents) |
+| [top](#travel--places) | :volcano: | `:volcano:` | :mount_fuji: | `:mount_fuji:` | [top](#table-of-contents) |
+| [top](#travel--places) | :camping: | `:camping:` | :beach_umbrella: | `:beach_umbrella:` | [top](#table-of-contents) |
+| [top](#travel--places) | :desert: | `:desert:` | :desert_island: | `:desert_island:` | [top](#table-of-contents) |
+| [top](#travel--places) | :national_park: | `:national_park:` | | | [top](#table-of-contents) |
+
+### Place Building
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :stadium: | `:stadium:` | :classical_building: | `:classical_building:` | [top](#table-of-contents) |
+| [top](#travel--places) | :building_construction: | `:building_construction:` | :bricks: | `:bricks:` | [top](#table-of-contents) |
+| [top](#travel--places) | :rock: | `:rock:` | :wood: | `:wood:` | [top](#table-of-contents) |
+| [top](#travel--places) | :hut: | `:hut:` | :houses: | `:houses:` | [top](#table-of-contents) |
+| [top](#travel--places) | :derelict_house: | `:derelict_house:` | :house: | `:house:` | [top](#table-of-contents) |
+| [top](#travel--places) | :house_with_garden: | `:house_with_garden:` | :office: | `:office:` | [top](#table-of-contents) |
+| [top](#travel--places) | :post_office: | `:post_office:` | :european_post_office: | `:european_post_office:` | [top](#table-of-contents) |
+| [top](#travel--places) | :hospital: | `:hospital:` | :bank: | `:bank:` | [top](#table-of-contents) |
+| [top](#travel--places) | :hotel: | `:hotel:` | :love_hotel: | `:love_hotel:` | [top](#table-of-contents) |
+| [top](#travel--places) | :convenience_store: | `:convenience_store:` | :school: | `:school:` | [top](#table-of-contents) |
+| [top](#travel--places) | :department_store: | `:department_store:` | :factory: | `:factory:` | [top](#table-of-contents) |
+| [top](#travel--places) | :japanese_castle: | `:japanese_castle:` | :european_castle: | `:european_castle:` | [top](#table-of-contents) |
+| [top](#travel--places) | :wedding: | `:wedding:` | :tokyo_tower: | `:tokyo_tower:` | [top](#table-of-contents) |
+| [top](#travel--places) | :statue_of_liberty: | `:statue_of_liberty:` | | | [top](#table-of-contents) |
+
+### Place Religious
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :church: | `:church:` | :mosque: | `:mosque:` | [top](#table-of-contents) |
+| [top](#travel--places) | :hindu_temple: | `:hindu_temple:` | :synagogue: | `:synagogue:` | [top](#table-of-contents) |
+| [top](#travel--places) | :shinto_shrine: | `:shinto_shrine:` | :kaaba: | `:kaaba:` | [top](#table-of-contents) |
+
+### Place Other
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :fountain: | `:fountain:` | :tent: | `:tent:` | [top](#table-of-contents) |
+| [top](#travel--places) | :foggy: | `:foggy:` | :night_with_stars: | `:night_with_stars:` | [top](#table-of-contents) |
+| [top](#travel--places) | :cityscape: | `:cityscape:` | :sunrise_over_mountains: | `:sunrise_over_mountains:` | [top](#table-of-contents) |
+| [top](#travel--places) | :sunrise: | `:sunrise:` | :city_sunset: | `:city_sunset:` | [top](#table-of-contents) |
+| [top](#travel--places) | :city_sunrise: | `:city_sunrise:` | :bridge_at_night: | `:bridge_at_night:` | [top](#table-of-contents) |
+| [top](#travel--places) | :hotsprings: | `:hotsprings:` | :carousel_horse: | `:carousel_horse:` | [top](#table-of-contents) |
+| [top](#travel--places) | :playground_slide: | `:playground_slide:` | :ferris_wheel: | `:ferris_wheel:` | [top](#table-of-contents) |
+| [top](#travel--places) | :roller_coaster: | `:roller_coaster:` | :barber: | `:barber:` | [top](#table-of-contents) |
+| [top](#travel--places) | :circus_tent: | `:circus_tent:` | | | [top](#table-of-contents) |
+
+### Transport Ground
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :steam_locomotive: | `:steam_locomotive:` | :railway_car: | `:railway_car:` | [top](#table-of-contents) |
+| [top](#travel--places) | :bullettrain_side: | `:bullettrain_side:` | :bullettrain_front: | `:bullettrain_front:` | [top](#table-of-contents) |
+| [top](#travel--places) | :train2: | `:train2:` | :metro: | `:metro:` | [top](#table-of-contents) |
+| [top](#travel--places) | :light_rail: | `:light_rail:` | :station: | `:station:` | [top](#table-of-contents) |
+| [top](#travel--places) | :tram: | `:tram:` | :monorail: | `:monorail:` | [top](#table-of-contents) |
+| [top](#travel--places) | :mountain_railway: | `:mountain_railway:` | :train: | `:train:` | [top](#table-of-contents) |
+| [top](#travel--places) | :bus: | `:bus:` | :oncoming_bus: | `:oncoming_bus:` | [top](#table-of-contents) |
+| [top](#travel--places) | :trolleybus: | `:trolleybus:` | :minibus: | `:minibus:` | [top](#table-of-contents) |
+| [top](#travel--places) | :ambulance: | `:ambulance:` | :fire_engine: | `:fire_engine:` | [top](#table-of-contents) |
+| [top](#travel--places) | :police_car: | `:police_car:` | :oncoming_police_car: | `:oncoming_police_car:` | [top](#table-of-contents) |
+| [top](#travel--places) | :taxi: | `:taxi:` | :oncoming_taxi: | `:oncoming_taxi:` | [top](#table-of-contents) |
+| [top](#travel--places) | :car: | `:car:` `:red_car:` | :oncoming_automobile: | `:oncoming_automobile:` | [top](#table-of-contents) |
+| [top](#travel--places) | :blue_car: | `:blue_car:` | :pickup_truck: | `:pickup_truck:` | [top](#table-of-contents) |
+| [top](#travel--places) | :truck: | `:truck:` | :articulated_lorry: | `:articulated_lorry:` | [top](#table-of-contents) |
+| [top](#travel--places) | :tractor: | `:tractor:` | :racing_car: | `:racing_car:` | [top](#table-of-contents) |
+| [top](#travel--places) | :motorcycle: | `:motorcycle:` | :motor_scooter: | `:motor_scooter:` | [top](#table-of-contents) |
+| [top](#travel--places) | :manual_wheelchair: | `:manual_wheelchair:` | :motorized_wheelchair: | `:motorized_wheelchair:` | [top](#table-of-contents) |
+| [top](#travel--places) | :auto_rickshaw: | `:auto_rickshaw:` | :bike: | `:bike:` | [top](#table-of-contents) |
+| [top](#travel--places) | :kick_scooter: | `:kick_scooter:` | :skateboard: | `:skateboard:` | [top](#table-of-contents) |
+| [top](#travel--places) | :roller_skate: | `:roller_skate:` | :busstop: | `:busstop:` | [top](#table-of-contents) |
+| [top](#travel--places) | :motorway: | `:motorway:` | :railway_track: | `:railway_track:` | [top](#table-of-contents) |
+| [top](#travel--places) | :oil_drum: | `:oil_drum:` | :fuelpump: | `:fuelpump:` | [top](#table-of-contents) |
+| [top](#travel--places) | :wheel: | `:wheel:` | :rotating_light: | `:rotating_light:` | [top](#table-of-contents) |
+| [top](#travel--places) | :traffic_light: | `:traffic_light:` | :vertical_traffic_light: | `:vertical_traffic_light:` | [top](#table-of-contents) |
+| [top](#travel--places) | :stop_sign: | `:stop_sign:` | :construction: | `:construction:` | [top](#table-of-contents) |
+
+### Transport Water
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :anchor: | `:anchor:` | :ring_buoy: | `:ring_buoy:` | [top](#table-of-contents) |
+| [top](#travel--places) | :boat: | `:boat:` `:sailboat:` | :canoe: | `:canoe:` | [top](#table-of-contents) |
+| [top](#travel--places) | :speedboat: | `:speedboat:` | :passenger_ship: | `:passenger_ship:` | [top](#table-of-contents) |
+| [top](#travel--places) | :ferry: | `:ferry:` | :motor_boat: | `:motor_boat:` | [top](#table-of-contents) |
+| [top](#travel--places) | :ship: | `:ship:` | | | [top](#table-of-contents) |
+
+### Transport Air
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :airplane: | `:airplane:` | :small_airplane: | `:small_airplane:` | [top](#table-of-contents) |
+| [top](#travel--places) | :flight_departure: | `:flight_departure:` | :flight_arrival: | `:flight_arrival:` | [top](#table-of-contents) |
+| [top](#travel--places) | :parachute: | `:parachute:` | :seat: | `:seat:` | [top](#table-of-contents) |
+| [top](#travel--places) | :helicopter: | `:helicopter:` | :suspension_railway: | `:suspension_railway:` | [top](#table-of-contents) |
+| [top](#travel--places) | :mountain_cableway: | `:mountain_cableway:` | :aerial_tramway: | `:aerial_tramway:` | [top](#table-of-contents) |
+| [top](#travel--places) | :artificial_satellite: | `:artificial_satellite:` | :rocket: | `:rocket:` | [top](#table-of-contents) |
+| [top](#travel--places) | :flying_saucer: | `:flying_saucer:` | | | [top](#table-of-contents) |
+
+### Hotel
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :bellhop_bell: | `:bellhop_bell:` | :luggage: | `:luggage:` | [top](#table-of-contents) |
+
+### Time
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :hourglass: | `:hourglass:` | :hourglass_flowing_sand: | `:hourglass_flowing_sand:` | [top](#table-of-contents) |
+| [top](#travel--places) | :watch: | `:watch:` | :alarm_clock: | `:alarm_clock:` | [top](#table-of-contents) |
+| [top](#travel--places) | :stopwatch: | `:stopwatch:` | :timer_clock: | `:timer_clock:` | [top](#table-of-contents) |
+| [top](#travel--places) | :mantelpiece_clock: | `:mantelpiece_clock:` | :clock12: | `:clock12:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock1230: | `:clock1230:` | :clock1: | `:clock1:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock130: | `:clock130:` | :clock2: | `:clock2:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock230: | `:clock230:` | :clock3: | `:clock3:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock330: | `:clock330:` | :clock4: | `:clock4:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock430: | `:clock430:` | :clock5: | `:clock5:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock530: | `:clock530:` | :clock6: | `:clock6:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock630: | `:clock630:` | :clock7: | `:clock7:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock730: | `:clock730:` | :clock8: | `:clock8:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock830: | `:clock830:` | :clock9: | `:clock9:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock930: | `:clock930:` | :clock10: | `:clock10:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock1030: | `:clock1030:` | :clock11: | `:clock11:` | [top](#table-of-contents) |
+| [top](#travel--places) | :clock1130: | `:clock1130:` | | | [top](#table-of-contents) |
+
+### Sky & Weather
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#travel--places) | :new_moon: | `:new_moon:` | :waxing_crescent_moon: | `:waxing_crescent_moon:` | [top](#table-of-contents) |
+| [top](#travel--places) | :first_quarter_moon: | `:first_quarter_moon:` | :moon: | `:moon:` `:waxing_gibbous_moon:` | [top](#table-of-contents) |
+| [top](#travel--places) | :full_moon: | `:full_moon:` | :waning_gibbous_moon: | `:waning_gibbous_moon:` | [top](#table-of-contents) |
+| [top](#travel--places) | :last_quarter_moon: | `:last_quarter_moon:` | :waning_crescent_moon: | `:waning_crescent_moon:` | [top](#table-of-contents) |
+| [top](#travel--places) | :crescent_moon: | `:crescent_moon:` | :new_moon_with_face: | `:new_moon_with_face:` | [top](#table-of-contents) |
+| [top](#travel--places) | :first_quarter_moon_with_face: | `:first_quarter_moon_with_face:` | :last_quarter_moon_with_face: | `:last_quarter_moon_with_face:` | [top](#table-of-contents) |
+| [top](#travel--places) | :thermometer: | `:thermometer:` | :sunny: | `:sunny:` | [top](#table-of-contents) |
+| [top](#travel--places) | :full_moon_with_face: | `:full_moon_with_face:` | :sun_with_face: | `:sun_with_face:` | [top](#table-of-contents) |
+| [top](#travel--places) | :ringed_planet: | `:ringed_planet:` | :star: | `:star:` | [top](#table-of-contents) |
+| [top](#travel--places) | :star2: | `:star2:` | :stars: | `:stars:` | [top](#table-of-contents) |
+| [top](#travel--places) | :milky_way: | `:milky_way:` | :cloud: | `:cloud:` | [top](#table-of-contents) |
+| [top](#travel--places) | :partly_sunny: | `:partly_sunny:` | :cloud_with_lightning_and_rain: | `:cloud_with_lightning_and_rain:` | [top](#table-of-contents) |
+| [top](#travel--places) | :sun_behind_small_cloud: | `:sun_behind_small_cloud:` | :sun_behind_large_cloud: | `:sun_behind_large_cloud:` | [top](#table-of-contents) |
+| [top](#travel--places) | :sun_behind_rain_cloud: | `:sun_behind_rain_cloud:` | :cloud_with_rain: | `:cloud_with_rain:` | [top](#table-of-contents) |
+| [top](#travel--places) | :cloud_with_snow: | `:cloud_with_snow:` | :cloud_with_lightning: | `:cloud_with_lightning:` | [top](#table-of-contents) |
+| [top](#travel--places) | :tornado: | `:tornado:` | :fog: | `:fog:` | [top](#table-of-contents) |
+| [top](#travel--places) | :wind_face: | `:wind_face:` | :cyclone: | `:cyclone:` | [top](#table-of-contents) |
+| [top](#travel--places) | :rainbow: | `:rainbow:` | :closed_umbrella: | `:closed_umbrella:` | [top](#table-of-contents) |
+| [top](#travel--places) | :open_umbrella: | `:open_umbrella:` | :umbrella: | `:umbrella:` | [top](#table-of-contents) |
+| [top](#travel--places) | :parasol_on_ground: | `:parasol_on_ground:` | :zap: | `:zap:` | [top](#table-of-contents) |
+| [top](#travel--places) | :snowflake: | `:snowflake:` | :snowman_with_snow: | `:snowman_with_snow:` | [top](#table-of-contents) |
+| [top](#travel--places) | :snowman: | `:snowman:` | :comet: | `:comet:` | [top](#table-of-contents) |
+| [top](#travel--places) | :fire: | `:fire:` | :droplet: | `:droplet:` | [top](#table-of-contents) |
+| [top](#travel--places) | :ocean: | `:ocean:` | | | [top](#table-of-contents) |
+
+## Activities
+
+- [Event](#event)
+- [Award Medal](#award-medal)
+- [Sport](#sport)
+- [Game](#game)
+- [Arts & Crafts](#arts--crafts)
+
+### Event
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#activities) | :jack_o_lantern: | `:jack_o_lantern:` | :christmas_tree: | `:christmas_tree:` | [top](#table-of-contents) |
+| [top](#activities) | :fireworks: | `:fireworks:` | :sparkler: | `:sparkler:` | [top](#table-of-contents) |
+| [top](#activities) | :firecracker: | `:firecracker:` | :sparkles: | `:sparkles:` | [top](#table-of-contents) |
+| [top](#activities) | :balloon: | `:balloon:` | :tada: | `:tada:` | [top](#table-of-contents) |
+| [top](#activities) | :confetti_ball: | `:confetti_ball:` | :tanabata_tree: | `:tanabata_tree:` | [top](#table-of-contents) |
+| [top](#activities) | :bamboo: | `:bamboo:` | :dolls: | `:dolls:` | [top](#table-of-contents) |
+| [top](#activities) | :flags: | `:flags:` | :wind_chime: | `:wind_chime:` | [top](#table-of-contents) |
+| [top](#activities) | :rice_scene: | `:rice_scene:` | :red_envelope: | `:red_envelope:` | [top](#table-of-contents) |
+| [top](#activities) | :ribbon: | `:ribbon:` | :gift: | `:gift:` | [top](#table-of-contents) |
+| [top](#activities) | :reminder_ribbon: | `:reminder_ribbon:` | :tickets: | `:tickets:` | [top](#table-of-contents) |
+| [top](#activities) | :ticket: | `:ticket:` | | | [top](#table-of-contents) |
+
+### Award Medal
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#activities) | :medal_military: | `:medal_military:` | :trophy: | `:trophy:` | [top](#table-of-contents) |
+| [top](#activities) | :medal_sports: | `:medal_sports:` | :1st_place_medal: | `:1st_place_medal:` | [top](#table-of-contents) |
+| [top](#activities) | :2nd_place_medal: | `:2nd_place_medal:` | :3rd_place_medal: | `:3rd_place_medal:` | [top](#table-of-contents) |
+
+### Sport
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#activities) | :soccer: | `:soccer:` | :baseball: | `:baseball:` | [top](#table-of-contents) |
+| [top](#activities) | :softball: | `:softball:` | :basketball: | `:basketball:` | [top](#table-of-contents) |
+| [top](#activities) | :volleyball: | `:volleyball:` | :football: | `:football:` | [top](#table-of-contents) |
+| [top](#activities) | :rugby_football: | `:rugby_football:` | :tennis: | `:tennis:` | [top](#table-of-contents) |
+| [top](#activities) | :flying_disc: | `:flying_disc:` | :bowling: | `:bowling:` | [top](#table-of-contents) |
+| [top](#activities) | :cricket_game: | `:cricket_game:` | :field_hockey: | `:field_hockey:` | [top](#table-of-contents) |
+| [top](#activities) | :ice_hockey: | `:ice_hockey:` | :lacrosse: | `:lacrosse:` | [top](#table-of-contents) |
+| [top](#activities) | :ping_pong: | `:ping_pong:` | :badminton: | `:badminton:` | [top](#table-of-contents) |
+| [top](#activities) | :boxing_glove: | `:boxing_glove:` | :martial_arts_uniform: | `:martial_arts_uniform:` | [top](#table-of-contents) |
+| [top](#activities) | :goal_net: | `:goal_net:` | :golf: | `:golf:` | [top](#table-of-contents) |
+| [top](#activities) | :ice_skate: | `:ice_skate:` | :fishing_pole_and_fish: | `:fishing_pole_and_fish:` | [top](#table-of-contents) |
+| [top](#activities) | :diving_mask: | `:diving_mask:` | :running_shirt_with_sash: | `:running_shirt_with_sash:` | [top](#table-of-contents) |
+| [top](#activities) | :ski: | `:ski:` | :sled: | `:sled:` | [top](#table-of-contents) |
+| [top](#activities) | :curling_stone: | `:curling_stone:` | | | [top](#table-of-contents) |
+
+### Game
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#activities) | :dart: | `:dart:` | :yo_yo: | `:yo_yo:` | [top](#table-of-contents) |
+| [top](#activities) | :kite: | `:kite:` | :gun: | `:gun:` | [top](#table-of-contents) |
+| [top](#activities) | :8ball: | `:8ball:` | :crystal_ball: | `:crystal_ball:` | [top](#table-of-contents) |
+| [top](#activities) | :magic_wand: | `:magic_wand:` | :video_game: | `:video_game:` | [top](#table-of-contents) |
+| [top](#activities) | :joystick: | `:joystick:` | :slot_machine: | `:slot_machine:` | [top](#table-of-contents) |
+| [top](#activities) | :game_die: | `:game_die:` | :jigsaw: | `:jigsaw:` | [top](#table-of-contents) |
+| [top](#activities) | :teddy_bear: | `:teddy_bear:` | :pinata: | `:pinata:` | [top](#table-of-contents) |
+| [top](#activities) | :mirror_ball: | `:mirror_ball:` | :nesting_dolls: | `:nesting_dolls:` | [top](#table-of-contents) |
+| [top](#activities) | :spades: | `:spades:` | :hearts: | `:hearts:` | [top](#table-of-contents) |
+| [top](#activities) | :diamonds: | `:diamonds:` | :clubs: | `:clubs:` | [top](#table-of-contents) |
+| [top](#activities) | :chess_pawn: | `:chess_pawn:` | :black_joker: | `:black_joker:` | [top](#table-of-contents) |
+| [top](#activities) | :mahjong: | `:mahjong:` | :flower_playing_cards: | `:flower_playing_cards:` | [top](#table-of-contents) |
+
+### Arts & Crafts
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#activities) | :performing_arts: | `:performing_arts:` | :framed_picture: | `:framed_picture:` | [top](#table-of-contents) |
+| [top](#activities) | :art: | `:art:` | :thread: | `:thread:` | [top](#table-of-contents) |
+| [top](#activities) | :sewing_needle: | `:sewing_needle:` | :yarn: | `:yarn:` | [top](#table-of-contents) |
+| [top](#activities) | :knot: | `:knot:` | | | [top](#table-of-contents) |
+
+## Objects
+
+- [Clothing](#clothing)
+- [Sound](#sound)
+- [Music](#music)
+- [Musical Instrument](#musical-instrument)
+- [Phone](#phone)
+- [Computer](#computer)
+- [Light & Video](#light--video)
+- [Book Paper](#book-paper)
+- [Money](#money)
+- [Mail](#mail)
+- [Writing](#writing)
+- [Office](#office)
+- [Lock](#lock)
+- [Tool](#tool)
+- [Science](#science)
+- [Medical](#medical)
+- [Household](#household)
+- [Other Object](#other-object)
+
+### Clothing
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :eyeglasses: | `:eyeglasses:` | :dark_sunglasses: | `:dark_sunglasses:` | [top](#table-of-contents) |
+| [top](#objects) | :goggles: | `:goggles:` | :lab_coat: | `:lab_coat:` | [top](#table-of-contents) |
+| [top](#objects) | :safety_vest: | `:safety_vest:` | :necktie: | `:necktie:` | [top](#table-of-contents) |
+| [top](#objects) | :shirt: | `:shirt:` `:tshirt:` | :jeans: | `:jeans:` | [top](#table-of-contents) |
+| [top](#objects) | :scarf: | `:scarf:` | :gloves: | `:gloves:` | [top](#table-of-contents) |
+| [top](#objects) | :coat: | `:coat:` | :socks: | `:socks:` | [top](#table-of-contents) |
+| [top](#objects) | :dress: | `:dress:` | :kimono: | `:kimono:` | [top](#table-of-contents) |
+| [top](#objects) | :sari: | `:sari:` | :one_piece_swimsuit: | `:one_piece_swimsuit:` | [top](#table-of-contents) |
+| [top](#objects) | :swim_brief: | `:swim_brief:` | :shorts: | `:shorts:` | [top](#table-of-contents) |
+| [top](#objects) | :bikini: | `:bikini:` | :womans_clothes: | `:womans_clothes:` | [top](#table-of-contents) |
+| [top](#objects) | :folding_hand_fan: | `:folding_hand_fan:` | :purse: | `:purse:` | [top](#table-of-contents) |
+| [top](#objects) | :handbag: | `:handbag:` | :pouch: | `:pouch:` | [top](#table-of-contents) |
+| [top](#objects) | :shopping: | `:shopping:` | :school_satchel: | `:school_satchel:` | [top](#table-of-contents) |
+| [top](#objects) | :thong_sandal: | `:thong_sandal:` | :mans_shoe: | `:mans_shoe:` `:shoe:` | [top](#table-of-contents) |
+| [top](#objects) | :athletic_shoe: | `:athletic_shoe:` | :hiking_boot: | `:hiking_boot:` | [top](#table-of-contents) |
+| [top](#objects) | :flat_shoe: | `:flat_shoe:` | :high_heel: | `:high_heel:` | [top](#table-of-contents) |
+| [top](#objects) | :sandal: | `:sandal:` | :ballet_shoes: | `:ballet_shoes:` | [top](#table-of-contents) |
+| [top](#objects) | :boot: | `:boot:` | :hair_pick: | `:hair_pick:` | [top](#table-of-contents) |
+| [top](#objects) | :crown: | `:crown:` | :womans_hat: | `:womans_hat:` | [top](#table-of-contents) |
+| [top](#objects) | :tophat: | `:tophat:` | :mortar_board: | `:mortar_board:` | [top](#table-of-contents) |
+| [top](#objects) | :billed_cap: | `:billed_cap:` | :military_helmet: | `:military_helmet:` | [top](#table-of-contents) |
+| [top](#objects) | :rescue_worker_helmet: | `:rescue_worker_helmet:` | :prayer_beads: | `:prayer_beads:` | [top](#table-of-contents) |
+| [top](#objects) | :lipstick: | `:lipstick:` | :ring: | `:ring:` | [top](#table-of-contents) |
+| [top](#objects) | :gem: | `:gem:` | | | [top](#table-of-contents) |
+
+### Sound
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :mute: | `:mute:` | :speaker: | `:speaker:` | [top](#table-of-contents) |
+| [top](#objects) | :sound: | `:sound:` | :loud_sound: | `:loud_sound:` | [top](#table-of-contents) |
+| [top](#objects) | :loudspeaker: | `:loudspeaker:` | :mega: | `:mega:` | [top](#table-of-contents) |
+| [top](#objects) | :postal_horn: | `:postal_horn:` | :bell: | `:bell:` | [top](#table-of-contents) |
+| [top](#objects) | :no_bell: | `:no_bell:` | | | [top](#table-of-contents) |
+
+### Music
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :musical_score: | `:musical_score:` | :musical_note: | `:musical_note:` | [top](#table-of-contents) |
+| [top](#objects) | :notes: | `:notes:` | :studio_microphone: | `:studio_microphone:` | [top](#table-of-contents) |
+| [top](#objects) | :level_slider: | `:level_slider:` | :control_knobs: | `:control_knobs:` | [top](#table-of-contents) |
+| [top](#objects) | :microphone: | `:microphone:` | :headphones: | `:headphones:` | [top](#table-of-contents) |
+| [top](#objects) | :radio: | `:radio:` | | | [top](#table-of-contents) |
+
+### Musical Instrument
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :saxophone: | `:saxophone:` | :accordion: | `:accordion:` | [top](#table-of-contents) |
+| [top](#objects) | :guitar: | `:guitar:` | :musical_keyboard: | `:musical_keyboard:` | [top](#table-of-contents) |
+| [top](#objects) | :trumpet: | `:trumpet:` | :violin: | `:violin:` | [top](#table-of-contents) |
+| [top](#objects) | :banjo: | `:banjo:` | :drum: | `:drum:` | [top](#table-of-contents) |
+| [top](#objects) | :long_drum: | `:long_drum:` | :maracas: | `:maracas:` | [top](#table-of-contents) |
+| [top](#objects) | :flute: | `:flute:` | | | [top](#table-of-contents) |
+
+### Phone
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :iphone: | `:iphone:` | :calling: | `:calling:` | [top](#table-of-contents) |
+| [top](#objects) | :phone: | `:phone:` `:telephone:` | :telephone_receiver: | `:telephone_receiver:` | [top](#table-of-contents) |
+| [top](#objects) | :pager: | `:pager:` | :fax: | `:fax:` | [top](#table-of-contents) |
+
+### Computer
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :battery: | `:battery:` | :low_battery: | `:low_battery:` | [top](#table-of-contents) |
+| [top](#objects) | :electric_plug: | `:electric_plug:` | :computer: | `:computer:` | [top](#table-of-contents) |
+| [top](#objects) | :desktop_computer: | `:desktop_computer:` | :printer: | `:printer:` | [top](#table-of-contents) |
+| [top](#objects) | :keyboard: | `:keyboard:` | :computer_mouse: | `:computer_mouse:` | [top](#table-of-contents) |
+| [top](#objects) | :trackball: | `:trackball:` | :minidisc: | `:minidisc:` | [top](#table-of-contents) |
+| [top](#objects) | :floppy_disk: | `:floppy_disk:` | :cd: | `:cd:` | [top](#table-of-contents) |
+| [top](#objects) | :dvd: | `:dvd:` | :abacus: | `:abacus:` | [top](#table-of-contents) |
+
+### Light & Video
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :movie_camera: | `:movie_camera:` | :film_strip: | `:film_strip:` | [top](#table-of-contents) |
+| [top](#objects) | :film_projector: | `:film_projector:` | :clapper: | `:clapper:` | [top](#table-of-contents) |
+| [top](#objects) | :tv: | `:tv:` | :camera: | `:camera:` | [top](#table-of-contents) |
+| [top](#objects) | :camera_flash: | `:camera_flash:` | :video_camera: | `:video_camera:` | [top](#table-of-contents) |
+| [top](#objects) | :vhs: | `:vhs:` | :mag: | `:mag:` | [top](#table-of-contents) |
+| [top](#objects) | :mag_right: | `:mag_right:` | :candle: | `:candle:` | [top](#table-of-contents) |
+| [top](#objects) | :bulb: | `:bulb:` | :flashlight: | `:flashlight:` | [top](#table-of-contents) |
+| [top](#objects) | :izakaya_lantern: | `:izakaya_lantern:` `:lantern:` | :diya_lamp: | `:diya_lamp:` | [top](#table-of-contents) |
+
+### Book Paper
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :notebook_with_decorative_cover: | `:notebook_with_decorative_cover:` | :closed_book: | `:closed_book:` | [top](#table-of-contents) |
+| [top](#objects) | :book: | `:book:` `:open_book:` | :green_book: | `:green_book:` | [top](#table-of-contents) |
+| [top](#objects) | :blue_book: | `:blue_book:` | :orange_book: | `:orange_book:` | [top](#table-of-contents) |
+| [top](#objects) | :books: | `:books:` | :notebook: | `:notebook:` | [top](#table-of-contents) |
+| [top](#objects) | :ledger: | `:ledger:` | :page_with_curl: | `:page_with_curl:` | [top](#table-of-contents) |
+| [top](#objects) | :scroll: | `:scroll:` | :page_facing_up: | `:page_facing_up:` | [top](#table-of-contents) |
+| [top](#objects) | :newspaper: | `:newspaper:` | :newspaper_roll: | `:newspaper_roll:` | [top](#table-of-contents) |
+| [top](#objects) | :bookmark_tabs: | `:bookmark_tabs:` | :bookmark: | `:bookmark:` | [top](#table-of-contents) |
+| [top](#objects) | :label: | `:label:` | | | [top](#table-of-contents) |
+
+### Money
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :moneybag: | `:moneybag:` | :coin: | `:coin:` | [top](#table-of-contents) |
+| [top](#objects) | :yen: | `:yen:` | :dollar: | `:dollar:` | [top](#table-of-contents) |
+| [top](#objects) | :euro: | `:euro:` | :pound: | `:pound:` | [top](#table-of-contents) |
+| [top](#objects) | :money_with_wings: | `:money_with_wings:` | :credit_card: | `:credit_card:` | [top](#table-of-contents) |
+| [top](#objects) | :receipt: | `:receipt:` | :chart: | `:chart:` | [top](#table-of-contents) |
+
+### Mail
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :envelope: | `:envelope:` | :e-mail: | `:e-mail:` `:email:` | [top](#table-of-contents) |
+| [top](#objects) | :incoming_envelope: | `:incoming_envelope:` | :envelope_with_arrow: | `:envelope_with_arrow:` | [top](#table-of-contents) |
+| [top](#objects) | :outbox_tray: | `:outbox_tray:` | :inbox_tray: | `:inbox_tray:` | [top](#table-of-contents) |
+| [top](#objects) | :package: | `:package:` | :mailbox: | `:mailbox:` | [top](#table-of-contents) |
+| [top](#objects) | :mailbox_closed: | `:mailbox_closed:` | :mailbox_with_mail: | `:mailbox_with_mail:` | [top](#table-of-contents) |
+| [top](#objects) | :mailbox_with_no_mail: | `:mailbox_with_no_mail:` | :postbox: | `:postbox:` | [top](#table-of-contents) |
+| [top](#objects) | :ballot_box: | `:ballot_box:` | | | [top](#table-of-contents) |
+
+### Writing
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :pencil2: | `:pencil2:` | :black_nib: | `:black_nib:` | [top](#table-of-contents) |
+| [top](#objects) | :fountain_pen: | `:fountain_pen:` | :pen: | `:pen:` | [top](#table-of-contents) |
+| [top](#objects) | :paintbrush: | `:paintbrush:` | :crayon: | `:crayon:` | [top](#table-of-contents) |
+| [top](#objects) | :memo: | `:memo:` `:pencil:` | | | [top](#table-of-contents) |
+
+### Office
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :briefcase: | `:briefcase:` | :file_folder: | `:file_folder:` | [top](#table-of-contents) |
+| [top](#objects) | :open_file_folder: | `:open_file_folder:` | :card_index_dividers: | `:card_index_dividers:` | [top](#table-of-contents) |
+| [top](#objects) | :date: | `:date:` | :calendar: | `:calendar:` | [top](#table-of-contents) |
+| [top](#objects) | :spiral_notepad: | `:spiral_notepad:` | :spiral_calendar: | `:spiral_calendar:` | [top](#table-of-contents) |
+| [top](#objects) | :card_index: | `:card_index:` | :chart_with_upwards_trend: | `:chart_with_upwards_trend:` | [top](#table-of-contents) |
+| [top](#objects) | :chart_with_downwards_trend: | `:chart_with_downwards_trend:` | :bar_chart: | `:bar_chart:` | [top](#table-of-contents) |
+| [top](#objects) | :clipboard: | `:clipboard:` | :pushpin: | `:pushpin:` | [top](#table-of-contents) |
+| [top](#objects) | :round_pushpin: | `:round_pushpin:` | :paperclip: | `:paperclip:` | [top](#table-of-contents) |
+| [top](#objects) | :paperclips: | `:paperclips:` | :straight_ruler: | `:straight_ruler:` | [top](#table-of-contents) |
+| [top](#objects) | :triangular_ruler: | `:triangular_ruler:` | :scissors: | `:scissors:` | [top](#table-of-contents) |
+| [top](#objects) | :card_file_box: | `:card_file_box:` | :file_cabinet: | `:file_cabinet:` | [top](#table-of-contents) |
+| [top](#objects) | :wastebasket: | `:wastebasket:` | | | [top](#table-of-contents) |
+
+### Lock
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :lock: | `:lock:` | :unlock: | `:unlock:` | [top](#table-of-contents) |
+| [top](#objects) | :lock_with_ink_pen: | `:lock_with_ink_pen:` | :closed_lock_with_key: | `:closed_lock_with_key:` | [top](#table-of-contents) |
+| [top](#objects) | :key: | `:key:` | :old_key: | `:old_key:` | [top](#table-of-contents) |
+
+### Tool
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :hammer: | `:hammer:` | :axe: | `:axe:` | [top](#table-of-contents) |
+| [top](#objects) | :pick: | `:pick:` | :hammer_and_pick: | `:hammer_and_pick:` | [top](#table-of-contents) |
+| [top](#objects) | :hammer_and_wrench: | `:hammer_and_wrench:` | :dagger: | `:dagger:` | [top](#table-of-contents) |
+| [top](#objects) | :crossed_swords: | `:crossed_swords:` | :bomb: | `:bomb:` | [top](#table-of-contents) |
+| [top](#objects) | :boomerang: | `:boomerang:` | :bow_and_arrow: | `:bow_and_arrow:` | [top](#table-of-contents) |
+| [top](#objects) | :shield: | `:shield:` | :carpentry_saw: | `:carpentry_saw:` | [top](#table-of-contents) |
+| [top](#objects) | :wrench: | `:wrench:` | :screwdriver: | `:screwdriver:` | [top](#table-of-contents) |
+| [top](#objects) | :nut_and_bolt: | `:nut_and_bolt:` | :gear: | `:gear:` | [top](#table-of-contents) |
+| [top](#objects) | :clamp: | `:clamp:` | :balance_scale: | `:balance_scale:` | [top](#table-of-contents) |
+| [top](#objects) | :probing_cane: | `:probing_cane:` | :link: | `:link:` | [top](#table-of-contents) |
+| [top](#objects) | :chains: | `:chains:` | :hook: | `:hook:` | [top](#table-of-contents) |
+| [top](#objects) | :toolbox: | `:toolbox:` | :magnet: | `:magnet:` | [top](#table-of-contents) |
+| [top](#objects) | :ladder: | `:ladder:` | | | [top](#table-of-contents) |
+
+### Science
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :alembic: | `:alembic:` | :test_tube: | `:test_tube:` | [top](#table-of-contents) |
+| [top](#objects) | :petri_dish: | `:petri_dish:` | :dna: | `:dna:` | [top](#table-of-contents) |
+| [top](#objects) | :microscope: | `:microscope:` | :telescope: | `:telescope:` | [top](#table-of-contents) |
+| [top](#objects) | :satellite: | `:satellite:` | | | [top](#table-of-contents) |
+
+### Medical
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :syringe: | `:syringe:` | :drop_of_blood: | `:drop_of_blood:` | [top](#table-of-contents) |
+| [top](#objects) | :pill: | `:pill:` | :adhesive_bandage: | `:adhesive_bandage:` | [top](#table-of-contents) |
+| [top](#objects) | :crutch: | `:crutch:` | :stethoscope: | `:stethoscope:` | [top](#table-of-contents) |
+| [top](#objects) | :x_ray: | `:x_ray:` | | | [top](#table-of-contents) |
+
+### Household
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :door: | `:door:` | :elevator: | `:elevator:` | [top](#table-of-contents) |
+| [top](#objects) | :mirror: | `:mirror:` | :window: | `:window:` | [top](#table-of-contents) |
+| [top](#objects) | :bed: | `:bed:` | :couch_and_lamp: | `:couch_and_lamp:` | [top](#table-of-contents) |
+| [top](#objects) | :chair: | `:chair:` | :toilet: | `:toilet:` | [top](#table-of-contents) |
+| [top](#objects) | :plunger: | `:plunger:` | :shower: | `:shower:` | [top](#table-of-contents) |
+| [top](#objects) | :bathtub: | `:bathtub:` | :mouse_trap: | `:mouse_trap:` | [top](#table-of-contents) |
+| [top](#objects) | :razor: | `:razor:` | :lotion_bottle: | `:lotion_bottle:` | [top](#table-of-contents) |
+| [top](#objects) | :safety_pin: | `:safety_pin:` | :broom: | `:broom:` | [top](#table-of-contents) |
+| [top](#objects) | :basket: | `:basket:` | :roll_of_paper: | `:roll_of_paper:` | [top](#table-of-contents) |
+| [top](#objects) | :bucket: | `:bucket:` | :soap: | `:soap:` | [top](#table-of-contents) |
+| [top](#objects) | :bubbles: | `:bubbles:` | :toothbrush: | `:toothbrush:` | [top](#table-of-contents) |
+| [top](#objects) | :sponge: | `:sponge:` | :fire_extinguisher: | `:fire_extinguisher:` | [top](#table-of-contents) |
+| [top](#objects) | :shopping_cart: | `:shopping_cart:` | | | [top](#table-of-contents) |
+
+### Other Object
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#objects) | :smoking: | `:smoking:` | :coffin: | `:coffin:` | [top](#table-of-contents) |
+| [top](#objects) | :headstone: | `:headstone:` | :funeral_urn: | `:funeral_urn:` | [top](#table-of-contents) |
+| [top](#objects) | :nazar_amulet: | `:nazar_amulet:` | :hamsa: | `:hamsa:` | [top](#table-of-contents) |
+| [top](#objects) | :moyai: | `:moyai:` | :placard: | `:placard:` | [top](#table-of-contents) |
+| [top](#objects) | :identification_card: | `:identification_card:` | | | [top](#table-of-contents) |
+
+## Symbols
+
+- [Transport Sign](#transport-sign)
+- [Warning](#warning)
+- [Arrow](#arrow)
+- [Religion](#religion)
+- [Zodiac](#zodiac)
+- [Av Symbol](#av-symbol)
+- [Gender](#gender)
+- [Math](#math)
+- [Punctuation](#punctuation)
+- [Currency](#currency)
+- [Other Symbol](#other-symbol)
+- [Keycap](#keycap)
+- [Alphanum](#alphanum)
+- [Geometric](#geometric)
+
+### Transport Sign
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :atm: | `:atm:` | :put_litter_in_its_place: | `:put_litter_in_its_place:` | [top](#table-of-contents) |
+| [top](#symbols) | :potable_water: | `:potable_water:` | :wheelchair: | `:wheelchair:` | [top](#table-of-contents) |
+| [top](#symbols) | :mens: | `:mens:` | :womens: | `:womens:` | [top](#table-of-contents) |
+| [top](#symbols) | :restroom: | `:restroom:` | :baby_symbol: | `:baby_symbol:` | [top](#table-of-contents) |
+| [top](#symbols) | :wc: | `:wc:` | :passport_control: | `:passport_control:` | [top](#table-of-contents) |
+| [top](#symbols) | :customs: | `:customs:` | :baggage_claim: | `:baggage_claim:` | [top](#table-of-contents) |
+| [top](#symbols) | :left_luggage: | `:left_luggage:` | | | [top](#table-of-contents) |
+
+### Warning
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :warning: | `:warning:` | :children_crossing: | `:children_crossing:` | [top](#table-of-contents) |
+| [top](#symbols) | :no_entry: | `:no_entry:` | :no_entry_sign: | `:no_entry_sign:` | [top](#table-of-contents) |
+| [top](#symbols) | :no_bicycles: | `:no_bicycles:` | :no_smoking: | `:no_smoking:` | [top](#table-of-contents) |
+| [top](#symbols) | :do_not_litter: | `:do_not_litter:` | :non-potable_water: | `:non-potable_water:` | [top](#table-of-contents) |
+| [top](#symbols) | :no_pedestrians: | `:no_pedestrians:` | :no_mobile_phones: | `:no_mobile_phones:` | [top](#table-of-contents) |
+| [top](#symbols) | :underage: | `:underage:` | :radioactive: | `:radioactive:` | [top](#table-of-contents) |
+| [top](#symbols) | :biohazard: | `:biohazard:` | | | [top](#table-of-contents) |
+
+### Arrow
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :arrow_up: | `:arrow_up:` | :arrow_upper_right: | `:arrow_upper_right:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_right: | `:arrow_right:` | :arrow_lower_right: | `:arrow_lower_right:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_down: | `:arrow_down:` | :arrow_lower_left: | `:arrow_lower_left:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_left: | `:arrow_left:` | :arrow_upper_left: | `:arrow_upper_left:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_up_down: | `:arrow_up_down:` | :left_right_arrow: | `:left_right_arrow:` | [top](#table-of-contents) |
+| [top](#symbols) | :leftwards_arrow_with_hook: | `:leftwards_arrow_with_hook:` | :arrow_right_hook: | `:arrow_right_hook:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_heading_up: | `:arrow_heading_up:` | :arrow_heading_down: | `:arrow_heading_down:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrows_clockwise: | `:arrows_clockwise:` | :arrows_counterclockwise: | `:arrows_counterclockwise:` | [top](#table-of-contents) |
+| [top](#symbols) | :back: | `:back:` | :end: | `:end:` | [top](#table-of-contents) |
+| [top](#symbols) | :on: | `:on:` | :soon: | `:soon:` | [top](#table-of-contents) |
+| [top](#symbols) | :top: | `:top:` | | | [top](#table-of-contents) |
+
+### Religion
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :place_of_worship: | `:place_of_worship:` | :atom_symbol: | `:atom_symbol:` | [top](#table-of-contents) |
+| [top](#symbols) | :om: | `:om:` | :star_of_david: | `:star_of_david:` | [top](#table-of-contents) |
+| [top](#symbols) | :wheel_of_dharma: | `:wheel_of_dharma:` | :yin_yang: | `:yin_yang:` | [top](#table-of-contents) |
+| [top](#symbols) | :latin_cross: | `:latin_cross:` | :orthodox_cross: | `:orthodox_cross:` | [top](#table-of-contents) |
+| [top](#symbols) | :star_and_crescent: | `:star_and_crescent:` | :peace_symbol: | `:peace_symbol:` | [top](#table-of-contents) |
+| [top](#symbols) | :menorah: | `:menorah:` | :six_pointed_star: | `:six_pointed_star:` | [top](#table-of-contents) |
+| [top](#symbols) | :khanda: | `:khanda:` | | | [top](#table-of-contents) |
+
+### Zodiac
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :aries: | `:aries:` | :taurus: | `:taurus:` | [top](#table-of-contents) |
+| [top](#symbols) | :gemini: | `:gemini:` | :cancer: | `:cancer:` | [top](#table-of-contents) |
+| [top](#symbols) | :leo: | `:leo:` | :virgo: | `:virgo:` | [top](#table-of-contents) |
+| [top](#symbols) | :libra: | `:libra:` | :scorpius: | `:scorpius:` | [top](#table-of-contents) |
+| [top](#symbols) | :sagittarius: | `:sagittarius:` | :capricorn: | `:capricorn:` | [top](#table-of-contents) |
+| [top](#symbols) | :aquarius: | `:aquarius:` | :pisces: | `:pisces:` | [top](#table-of-contents) |
+| [top](#symbols) | :ophiuchus: | `:ophiuchus:` | | | [top](#table-of-contents) |
+
+### Av Symbol
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :twisted_rightwards_arrows: | `:twisted_rightwards_arrows:` | :repeat: | `:repeat:` | [top](#table-of-contents) |
+| [top](#symbols) | :repeat_one: | `:repeat_one:` | :arrow_forward: | `:arrow_forward:` | [top](#table-of-contents) |
+| [top](#symbols) | :fast_forward: | `:fast_forward:` | :next_track_button: | `:next_track_button:` | [top](#table-of-contents) |
+| [top](#symbols) | :play_or_pause_button: | `:play_or_pause_button:` | :arrow_backward: | `:arrow_backward:` | [top](#table-of-contents) |
+| [top](#symbols) | :rewind: | `:rewind:` | :previous_track_button: | `:previous_track_button:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_up_small: | `:arrow_up_small:` | :arrow_double_up: | `:arrow_double_up:` | [top](#table-of-contents) |
+| [top](#symbols) | :arrow_down_small: | `:arrow_down_small:` | :arrow_double_down: | `:arrow_double_down:` | [top](#table-of-contents) |
+| [top](#symbols) | :pause_button: | `:pause_button:` | :stop_button: | `:stop_button:` | [top](#table-of-contents) |
+| [top](#symbols) | :record_button: | `:record_button:` | :eject_button: | `:eject_button:` | [top](#table-of-contents) |
+| [top](#symbols) | :cinema: | `:cinema:` | :low_brightness: | `:low_brightness:` | [top](#table-of-contents) |
+| [top](#symbols) | :high_brightness: | `:high_brightness:` | :signal_strength: | `:signal_strength:` | [top](#table-of-contents) |
+| [top](#symbols) | :wireless: | `:wireless:` | :vibration_mode: | `:vibration_mode:` | [top](#table-of-contents) |
+| [top](#symbols) | :mobile_phone_off: | `:mobile_phone_off:` | | | [top](#table-of-contents) |
+
+### Gender
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :female_sign: | `:female_sign:` | :male_sign: | `:male_sign:` | [top](#table-of-contents) |
+| [top](#symbols) | :transgender_symbol: | `:transgender_symbol:` | | | [top](#table-of-contents) |
+
+### Math
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :heavy_multiplication_x: | `:heavy_multiplication_x:` | :heavy_plus_sign: | `:heavy_plus_sign:` | [top](#table-of-contents) |
+| [top](#symbols) | :heavy_minus_sign: | `:heavy_minus_sign:` | :heavy_division_sign: | `:heavy_division_sign:` | [top](#table-of-contents) |
+| [top](#symbols) | :heavy_equals_sign: | `:heavy_equals_sign:` | :infinity: | `:infinity:` | [top](#table-of-contents) |
+
+### Punctuation
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :bangbang: | `:bangbang:` | :interrobang: | `:interrobang:` | [top](#table-of-contents) |
+| [top](#symbols) | :question: | `:question:` | :grey_question: | `:grey_question:` | [top](#table-of-contents) |
+| [top](#symbols) | :grey_exclamation: | `:grey_exclamation:` | :exclamation: | `:exclamation:` `:heavy_exclamation_mark:` | [top](#table-of-contents) |
+| [top](#symbols) | :wavy_dash: | `:wavy_dash:` | | | [top](#table-of-contents) |
+
+### Currency
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :currency_exchange: | `:currency_exchange:` | :heavy_dollar_sign: | `:heavy_dollar_sign:` | [top](#table-of-contents) |
+
+### Other Symbol
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :medical_symbol: | `:medical_symbol:` | :recycle: | `:recycle:` | [top](#table-of-contents) |
+| [top](#symbols) | :fleur_de_lis: | `:fleur_de_lis:` | :trident: | `:trident:` | [top](#table-of-contents) |
+| [top](#symbols) | :name_badge: | `:name_badge:` | :beginner: | `:beginner:` | [top](#table-of-contents) |
+| [top](#symbols) | :o: | `:o:` | :white_check_mark: | `:white_check_mark:` | [top](#table-of-contents) |
+| [top](#symbols) | :ballot_box_with_check: | `:ballot_box_with_check:` | :heavy_check_mark: | `:heavy_check_mark:` | [top](#table-of-contents) |
+| [top](#symbols) | :x: | `:x:` | :negative_squared_cross_mark: | `:negative_squared_cross_mark:` | [top](#table-of-contents) |
+| [top](#symbols) | :curly_loop: | `:curly_loop:` | :loop: | `:loop:` | [top](#table-of-contents) |
+| [top](#symbols) | :part_alternation_mark: | `:part_alternation_mark:` | :eight_spoked_asterisk: | `:eight_spoked_asterisk:` | [top](#table-of-contents) |
+| [top](#symbols) | :eight_pointed_black_star: | `:eight_pointed_black_star:` | :sparkle: | `:sparkle:` | [top](#table-of-contents) |
+| [top](#symbols) | :copyright: | `:copyright:` | :registered: | `:registered:` | [top](#table-of-contents) |
+| [top](#symbols) | :tm: | `:tm:` | | | [top](#table-of-contents) |
+
+### Keycap
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :hash: | `:hash:` | :asterisk: | `:asterisk:` | [top](#table-of-contents) |
+| [top](#symbols) | :zero: | `:zero:` | :one: | `:one:` | [top](#table-of-contents) |
+| [top](#symbols) | :two: | `:two:` | :three: | `:three:` | [top](#table-of-contents) |
+| [top](#symbols) | :four: | `:four:` | :five: | `:five:` | [top](#table-of-contents) |
+| [top](#symbols) | :six: | `:six:` | :seven: | `:seven:` | [top](#table-of-contents) |
+| [top](#symbols) | :eight: | `:eight:` | :nine: | `:nine:` | [top](#table-of-contents) |
+| [top](#symbols) | :keycap_ten: | `:keycap_ten:` | | | [top](#table-of-contents) |
+
+### Alphanum
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :capital_abcd: | `:capital_abcd:` | :abcd: | `:abcd:` | [top](#table-of-contents) |
+| [top](#symbols) | :1234: | `:1234:` | :symbols: | `:symbols:` | [top](#table-of-contents) |
+| [top](#symbols) | :abc: | `:abc:` | :a: | `:a:` | [top](#table-of-contents) |
+| [top](#symbols) | :ab: | `:ab:` | :b: | `:b:` | [top](#table-of-contents) |
+| [top](#symbols) | :cl: | `:cl:` | :cool: | `:cool:` | [top](#table-of-contents) |
+| [top](#symbols) | :free: | `:free:` | :information_source: | `:information_source:` | [top](#table-of-contents) |
+| [top](#symbols) | :id: | `:id:` | :m: | `:m:` | [top](#table-of-contents) |
+| [top](#symbols) | :new: | `:new:` | :ng: | `:ng:` | [top](#table-of-contents) |
+| [top](#symbols) | :o2: | `:o2:` | :ok: | `:ok:` | [top](#table-of-contents) |
+| [top](#symbols) | :parking: | `:parking:` | :sos: | `:sos:` | [top](#table-of-contents) |
+| [top](#symbols) | :up: | `:up:` | :vs: | `:vs:` | [top](#table-of-contents) |
+| [top](#symbols) | :koko: | `:koko:` | :sa: | `:sa:` | [top](#table-of-contents) |
+| [top](#symbols) | :u6708: | `:u6708:` | :u6709: | `:u6709:` | [top](#table-of-contents) |
+| [top](#symbols) | :u6307: | `:u6307:` | :ideograph_advantage: | `:ideograph_advantage:` | [top](#table-of-contents) |
+| [top](#symbols) | :u5272: | `:u5272:` | :u7121: | `:u7121:` | [top](#table-of-contents) |
+| [top](#symbols) | :u7981: | `:u7981:` | :accept: | `:accept:` | [top](#table-of-contents) |
+| [top](#symbols) | :u7533: | `:u7533:` | :u5408: | `:u5408:` | [top](#table-of-contents) |
+| [top](#symbols) | :u7a7a: | `:u7a7a:` | :congratulations: | `:congratulations:` | [top](#table-of-contents) |
+| [top](#symbols) | :secret: | `:secret:` | :u55b6: | `:u55b6:` | [top](#table-of-contents) |
+| [top](#symbols) | :u6e80: | `:u6e80:` | | | [top](#table-of-contents) |
+
+### Geometric
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#symbols) | :red_circle: | `:red_circle:` | :orange_circle: | `:orange_circle:` | [top](#table-of-contents) |
+| [top](#symbols) | :yellow_circle: | `:yellow_circle:` | :green_circle: | `:green_circle:` | [top](#table-of-contents) |
+| [top](#symbols) | :large_blue_circle: | `:large_blue_circle:` | :purple_circle: | `:purple_circle:` | [top](#table-of-contents) |
+| [top](#symbols) | :brown_circle: | `:brown_circle:` | :black_circle: | `:black_circle:` | [top](#table-of-contents) |
+| [top](#symbols) | :white_circle: | `:white_circle:` | :red_square: | `:red_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :orange_square: | `:orange_square:` | :yellow_square: | `:yellow_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :green_square: | `:green_square:` | :blue_square: | `:blue_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :purple_square: | `:purple_square:` | :brown_square: | `:brown_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :black_large_square: | `:black_large_square:` | :white_large_square: | `:white_large_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :black_medium_square: | `:black_medium_square:` | :white_medium_square: | `:white_medium_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :black_medium_small_square: | `:black_medium_small_square:` | :white_medium_small_square: | `:white_medium_small_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :black_small_square: | `:black_small_square:` | :white_small_square: | `:white_small_square:` | [top](#table-of-contents) |
+| [top](#symbols) | :large_orange_diamond: | `:large_orange_diamond:` | :large_blue_diamond: | `:large_blue_diamond:` | [top](#table-of-contents) |
+| [top](#symbols) | :small_orange_diamond: | `:small_orange_diamond:` | :small_blue_diamond: | `:small_blue_diamond:` | [top](#table-of-contents) |
+| [top](#symbols) | :small_red_triangle: | `:small_red_triangle:` | :small_red_triangle_down: | `:small_red_triangle_down:` | [top](#table-of-contents) |
+| [top](#symbols) | :diamond_shape_with_a_dot_inside: | `:diamond_shape_with_a_dot_inside:` | :radio_button: | `:radio_button:` | [top](#table-of-contents) |
+| [top](#symbols) | :white_square_button: | `:white_square_button:` | :black_square_button: | `:black_square_button:` | [top](#table-of-contents) |
+
+## Flags
+
+- [Flag](#flag)
+- [Country Flag](#country-flag)
+- [Subdivision Flag](#subdivision-flag)
+
+### Flag
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#flags) | :checkered_flag: | `:checkered_flag:` | :triangular_flag_on_post: | `:triangular_flag_on_post:` | [top](#table-of-contents) |
+| [top](#flags) | :crossed_flags: | `:crossed_flags:` | :black_flag: | `:black_flag:` | [top](#table-of-contents) |
+| [top](#flags) | :white_flag: | `:white_flag:` | :rainbow_flag: | `:rainbow_flag:` | [top](#table-of-contents) |
+| [top](#flags) | :transgender_flag: | `:transgender_flag:` | :pirate_flag: | `:pirate_flag:` | [top](#table-of-contents) |
+
+### Country Flag
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#flags) | :ascension_island: | `:ascension_island:` | :andorra: | `:andorra:` | [top](#table-of-contents) |
+| [top](#flags) | :united_arab_emirates: | `:united_arab_emirates:` | :afghanistan: | `:afghanistan:` | [top](#table-of-contents) |
+| [top](#flags) | :antigua_barbuda: | `:antigua_barbuda:` | :anguilla: | `:anguilla:` | [top](#table-of-contents) |
+| [top](#flags) | :albania: | `:albania:` | :armenia: | `:armenia:` | [top](#table-of-contents) |
+| [top](#flags) | :angola: | `:angola:` | :antarctica: | `:antarctica:` | [top](#table-of-contents) |
+| [top](#flags) | :argentina: | `:argentina:` | :american_samoa: | `:american_samoa:` | [top](#table-of-contents) |
+| [top](#flags) | :austria: | `:austria:` | :australia: | `:australia:` | [top](#table-of-contents) |
+| [top](#flags) | :aruba: | `:aruba:` | :aland_islands: | `:aland_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :azerbaijan: | `:azerbaijan:` | :bosnia_herzegovina: | `:bosnia_herzegovina:` | [top](#table-of-contents) |
+| [top](#flags) | :barbados: | `:barbados:` | :bangladesh: | `:bangladesh:` | [top](#table-of-contents) |
+| [top](#flags) | :belgium: | `:belgium:` | :burkina_faso: | `:burkina_faso:` | [top](#table-of-contents) |
+| [top](#flags) | :bulgaria: | `:bulgaria:` | :bahrain: | `:bahrain:` | [top](#table-of-contents) |
+| [top](#flags) | :burundi: | `:burundi:` | :benin: | `:benin:` | [top](#table-of-contents) |
+| [top](#flags) | :st_barthelemy: | `:st_barthelemy:` | :bermuda: | `:bermuda:` | [top](#table-of-contents) |
+| [top](#flags) | :brunei: | `:brunei:` | :bolivia: | `:bolivia:` | [top](#table-of-contents) |
+| [top](#flags) | :caribbean_netherlands: | `:caribbean_netherlands:` | :brazil: | `:brazil:` | [top](#table-of-contents) |
+| [top](#flags) | :bahamas: | `:bahamas:` | :bhutan: | `:bhutan:` | [top](#table-of-contents) |
+| [top](#flags) | :bouvet_island: | `:bouvet_island:` | :botswana: | `:botswana:` | [top](#table-of-contents) |
+| [top](#flags) | :belarus: | `:belarus:` | :belize: | `:belize:` | [top](#table-of-contents) |
+| [top](#flags) | :canada: | `:canada:` | :cocos_islands: | `:cocos_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :congo_kinshasa: | `:congo_kinshasa:` | :central_african_republic: | `:central_african_republic:` | [top](#table-of-contents) |
+| [top](#flags) | :congo_brazzaville: | `:congo_brazzaville:` | :switzerland: | `:switzerland:` | [top](#table-of-contents) |
+| [top](#flags) | :cote_divoire: | `:cote_divoire:` | :cook_islands: | `:cook_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :chile: | `:chile:` | :cameroon: | `:cameroon:` | [top](#table-of-contents) |
+| [top](#flags) | :cn: | `:cn:` | :colombia: | `:colombia:` | [top](#table-of-contents) |
+| [top](#flags) | :clipperton_island: | `:clipperton_island:` | :costa_rica: | `:costa_rica:` | [top](#table-of-contents) |
+| [top](#flags) | :cuba: | `:cuba:` | :cape_verde: | `:cape_verde:` | [top](#table-of-contents) |
+| [top](#flags) | :curacao: | `:curacao:` | :christmas_island: | `:christmas_island:` | [top](#table-of-contents) |
+| [top](#flags) | :cyprus: | `:cyprus:` | :czech_republic: | `:czech_republic:` | [top](#table-of-contents) |
+| [top](#flags) | :de: | `:de:` | :diego_garcia: | `:diego_garcia:` | [top](#table-of-contents) |
+| [top](#flags) | :djibouti: | `:djibouti:` | :denmark: | `:denmark:` | [top](#table-of-contents) |
+| [top](#flags) | :dominica: | `:dominica:` | :dominican_republic: | `:dominican_republic:` | [top](#table-of-contents) |
+| [top](#flags) | :algeria: | `:algeria:` | :ceuta_melilla: | `:ceuta_melilla:` | [top](#table-of-contents) |
+| [top](#flags) | :ecuador: | `:ecuador:` | :estonia: | `:estonia:` | [top](#table-of-contents) |
+| [top](#flags) | :egypt: | `:egypt:` | :western_sahara: | `:western_sahara:` | [top](#table-of-contents) |
+| [top](#flags) | :eritrea: | `:eritrea:` | :es: | `:es:` | [top](#table-of-contents) |
+| [top](#flags) | :ethiopia: | `:ethiopia:` | :eu: | `:eu:` `:european_union:` | [top](#table-of-contents) |
+| [top](#flags) | :finland: | `:finland:` | :fiji: | `:fiji:` | [top](#table-of-contents) |
+| [top](#flags) | :falkland_islands: | `:falkland_islands:` | :micronesia: | `:micronesia:` | [top](#table-of-contents) |
+| [top](#flags) | :faroe_islands: | `:faroe_islands:` | :fr: | `:fr:` | [top](#table-of-contents) |
+| [top](#flags) | :gabon: | `:gabon:` | :gb: | `:gb:` `:uk:` | [top](#table-of-contents) |
+| [top](#flags) | :grenada: | `:grenada:` | :georgia: | `:georgia:` | [top](#table-of-contents) |
+| [top](#flags) | :french_guiana: | `:french_guiana:` | :guernsey: | `:guernsey:` | [top](#table-of-contents) |
+| [top](#flags) | :ghana: | `:ghana:` | :gibraltar: | `:gibraltar:` | [top](#table-of-contents) |
+| [top](#flags) | :greenland: | `:greenland:` | :gambia: | `:gambia:` | [top](#table-of-contents) |
+| [top](#flags) | :guinea: | `:guinea:` | :guadeloupe: | `:guadeloupe:` | [top](#table-of-contents) |
+| [top](#flags) | :equatorial_guinea: | `:equatorial_guinea:` | :greece: | `:greece:` | [top](#table-of-contents) |
+| [top](#flags) | :south_georgia_south_sandwich_islands: | `:south_georgia_south_sandwich_islands:` | :guatemala: | `:guatemala:` | [top](#table-of-contents) |
+| [top](#flags) | :guam: | `:guam:` | :guinea_bissau: | `:guinea_bissau:` | [top](#table-of-contents) |
+| [top](#flags) | :guyana: | `:guyana:` | :hong_kong: | `:hong_kong:` | [top](#table-of-contents) |
+| [top](#flags) | :heard_mcdonald_islands: | `:heard_mcdonald_islands:` | :honduras: | `:honduras:` | [top](#table-of-contents) |
+| [top](#flags) | :croatia: | `:croatia:` | :haiti: | `:haiti:` | [top](#table-of-contents) |
+| [top](#flags) | :hungary: | `:hungary:` | :canary_islands: | `:canary_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :indonesia: | `:indonesia:` | :ireland: | `:ireland:` | [top](#table-of-contents) |
+| [top](#flags) | :israel: | `:israel:` | :isle_of_man: | `:isle_of_man:` | [top](#table-of-contents) |
+| [top](#flags) | :india: | `:india:` | :british_indian_ocean_territory: | `:british_indian_ocean_territory:` | [top](#table-of-contents) |
+| [top](#flags) | :iraq: | `:iraq:` | :iran: | `:iran:` | [top](#table-of-contents) |
+| [top](#flags) | :iceland: | `:iceland:` | :it: | `:it:` | [top](#table-of-contents) |
+| [top](#flags) | :jersey: | `:jersey:` | :jamaica: | `:jamaica:` | [top](#table-of-contents) |
+| [top](#flags) | :jordan: | `:jordan:` | :jp: | `:jp:` | [top](#table-of-contents) |
+| [top](#flags) | :kenya: | `:kenya:` | :kyrgyzstan: | `:kyrgyzstan:` | [top](#table-of-contents) |
+| [top](#flags) | :cambodia: | `:cambodia:` | :kiribati: | `:kiribati:` | [top](#table-of-contents) |
+| [top](#flags) | :comoros: | `:comoros:` | :st_kitts_nevis: | `:st_kitts_nevis:` | [top](#table-of-contents) |
+| [top](#flags) | :north_korea: | `:north_korea:` | :kr: | `:kr:` | [top](#table-of-contents) |
+| [top](#flags) | :kuwait: | `:kuwait:` | :cayman_islands: | `:cayman_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :kazakhstan: | `:kazakhstan:` | :laos: | `:laos:` | [top](#table-of-contents) |
+| [top](#flags) | :lebanon: | `:lebanon:` | :st_lucia: | `:st_lucia:` | [top](#table-of-contents) |
+| [top](#flags) | :liechtenstein: | `:liechtenstein:` | :sri_lanka: | `:sri_lanka:` | [top](#table-of-contents) |
+| [top](#flags) | :liberia: | `:liberia:` | :lesotho: | `:lesotho:` | [top](#table-of-contents) |
+| [top](#flags) | :lithuania: | `:lithuania:` | :luxembourg: | `:luxembourg:` | [top](#table-of-contents) |
+| [top](#flags) | :latvia: | `:latvia:` | :libya: | `:libya:` | [top](#table-of-contents) |
+| [top](#flags) | :morocco: | `:morocco:` | :monaco: | `:monaco:` | [top](#table-of-contents) |
+| [top](#flags) | :moldova: | `:moldova:` | :montenegro: | `:montenegro:` | [top](#table-of-contents) |
+| [top](#flags) | :st_martin: | `:st_martin:` | :madagascar: | `:madagascar:` | [top](#table-of-contents) |
+| [top](#flags) | :marshall_islands: | `:marshall_islands:` | :macedonia: | `:macedonia:` | [top](#table-of-contents) |
+| [top](#flags) | :mali: | `:mali:` | :myanmar: | `:myanmar:` | [top](#table-of-contents) |
+| [top](#flags) | :mongolia: | `:mongolia:` | :macau: | `:macau:` | [top](#table-of-contents) |
+| [top](#flags) | :northern_mariana_islands: | `:northern_mariana_islands:` | :martinique: | `:martinique:` | [top](#table-of-contents) |
+| [top](#flags) | :mauritania: | `:mauritania:` | :montserrat: | `:montserrat:` | [top](#table-of-contents) |
+| [top](#flags) | :malta: | `:malta:` | :mauritius: | `:mauritius:` | [top](#table-of-contents) |
+| [top](#flags) | :maldives: | `:maldives:` | :malawi: | `:malawi:` | [top](#table-of-contents) |
+| [top](#flags) | :mexico: | `:mexico:` | :malaysia: | `:malaysia:` | [top](#table-of-contents) |
+| [top](#flags) | :mozambique: | `:mozambique:` | :namibia: | `:namibia:` | [top](#table-of-contents) |
+| [top](#flags) | :new_caledonia: | `:new_caledonia:` | :niger: | `:niger:` | [top](#table-of-contents) |
+| [top](#flags) | :norfolk_island: | `:norfolk_island:` | :nigeria: | `:nigeria:` | [top](#table-of-contents) |
+| [top](#flags) | :nicaragua: | `:nicaragua:` | :netherlands: | `:netherlands:` | [top](#table-of-contents) |
+| [top](#flags) | :norway: | `:norway:` | :nepal: | `:nepal:` | [top](#table-of-contents) |
+| [top](#flags) | :nauru: | `:nauru:` | :niue: | `:niue:` | [top](#table-of-contents) |
+| [top](#flags) | :new_zealand: | `:new_zealand:` | :oman: | `:oman:` | [top](#table-of-contents) |
+| [top](#flags) | :panama: | `:panama:` | :peru: | `:peru:` | [top](#table-of-contents) |
+| [top](#flags) | :french_polynesia: | `:french_polynesia:` | :papua_new_guinea: | `:papua_new_guinea:` | [top](#table-of-contents) |
+| [top](#flags) | :philippines: | `:philippines:` | :pakistan: | `:pakistan:` | [top](#table-of-contents) |
+| [top](#flags) | :poland: | `:poland:` | :st_pierre_miquelon: | `:st_pierre_miquelon:` | [top](#table-of-contents) |
+| [top](#flags) | :pitcairn_islands: | `:pitcairn_islands:` | :puerto_rico: | `:puerto_rico:` | [top](#table-of-contents) |
+| [top](#flags) | :palestinian_territories: | `:palestinian_territories:` | :portugal: | `:portugal:` | [top](#table-of-contents) |
+| [top](#flags) | :palau: | `:palau:` | :paraguay: | `:paraguay:` | [top](#table-of-contents) |
+| [top](#flags) | :qatar: | `:qatar:` | :reunion: | `:reunion:` | [top](#table-of-contents) |
+| [top](#flags) | :romania: | `:romania:` | :serbia: | `:serbia:` | [top](#table-of-contents) |
+| [top](#flags) | :ru: | `:ru:` | :rwanda: | `:rwanda:` | [top](#table-of-contents) |
+| [top](#flags) | :saudi_arabia: | `:saudi_arabia:` | :solomon_islands: | `:solomon_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :seychelles: | `:seychelles:` | :sudan: | `:sudan:` | [top](#table-of-contents) |
+| [top](#flags) | :sweden: | `:sweden:` | :singapore: | `:singapore:` | [top](#table-of-contents) |
+| [top](#flags) | :st_helena: | `:st_helena:` | :slovenia: | `:slovenia:` | [top](#table-of-contents) |
+| [top](#flags) | :svalbard_jan_mayen: | `:svalbard_jan_mayen:` | :slovakia: | `:slovakia:` | [top](#table-of-contents) |
+| [top](#flags) | :sierra_leone: | `:sierra_leone:` | :san_marino: | `:san_marino:` | [top](#table-of-contents) |
+| [top](#flags) | :senegal: | `:senegal:` | :somalia: | `:somalia:` | [top](#table-of-contents) |
+| [top](#flags) | :suriname: | `:suriname:` | :south_sudan: | `:south_sudan:` | [top](#table-of-contents) |
+| [top](#flags) | :sao_tome_principe: | `:sao_tome_principe:` | :el_salvador: | `:el_salvador:` | [top](#table-of-contents) |
+| [top](#flags) | :sint_maarten: | `:sint_maarten:` | :syria: | `:syria:` | [top](#table-of-contents) |
+| [top](#flags) | :swaziland: | `:swaziland:` | :tristan_da_cunha: | `:tristan_da_cunha:` | [top](#table-of-contents) |
+| [top](#flags) | :turks_caicos_islands: | `:turks_caicos_islands:` | :chad: | `:chad:` | [top](#table-of-contents) |
+| [top](#flags) | :french_southern_territories: | `:french_southern_territories:` | :togo: | `:togo:` | [top](#table-of-contents) |
+| [top](#flags) | :thailand: | `:thailand:` | :tajikistan: | `:tajikistan:` | [top](#table-of-contents) |
+| [top](#flags) | :tokelau: | `:tokelau:` | :timor_leste: | `:timor_leste:` | [top](#table-of-contents) |
+| [top](#flags) | :turkmenistan: | `:turkmenistan:` | :tunisia: | `:tunisia:` | [top](#table-of-contents) |
+| [top](#flags) | :tonga: | `:tonga:` | :tr: | `:tr:` | [top](#table-of-contents) |
+| [top](#flags) | :trinidad_tobago: | `:trinidad_tobago:` | :tuvalu: | `:tuvalu:` | [top](#table-of-contents) |
+| [top](#flags) | :taiwan: | `:taiwan:` | :tanzania: | `:tanzania:` | [top](#table-of-contents) |
+| [top](#flags) | :ukraine: | `:ukraine:` | :uganda: | `:uganda:` | [top](#table-of-contents) |
+| [top](#flags) | :us_outlying_islands: | `:us_outlying_islands:` | :united_nations: | `:united_nations:` | [top](#table-of-contents) |
+| [top](#flags) | :us: | `:us:` | :uruguay: | `:uruguay:` | [top](#table-of-contents) |
+| [top](#flags) | :uzbekistan: | `:uzbekistan:` | :vatican_city: | `:vatican_city:` | [top](#table-of-contents) |
+| [top](#flags) | :st_vincent_grenadines: | `:st_vincent_grenadines:` | :venezuela: | `:venezuela:` | [top](#table-of-contents) |
+| [top](#flags) | :british_virgin_islands: | `:british_virgin_islands:` | :us_virgin_islands: | `:us_virgin_islands:` | [top](#table-of-contents) |
+| [top](#flags) | :vietnam: | `:vietnam:` | :vanuatu: | `:vanuatu:` | [top](#table-of-contents) |
+| [top](#flags) | :wallis_futuna: | `:wallis_futuna:` | :samoa: | `:samoa:` | [top](#table-of-contents) |
+| [top](#flags) | :kosovo: | `:kosovo:` | :yemen: | `:yemen:` | [top](#table-of-contents) |
+| [top](#flags) | :mayotte: | `:mayotte:` | :south_africa: | `:south_africa:` | [top](#table-of-contents) |
+| [top](#flags) | :zambia: | `:zambia:` | :zimbabwe: | `:zimbabwe:` | [top](#table-of-contents) |
+
+### Subdivision Flag
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#flags) | :england: | `:england:` | :scotland: | `:scotland:` | [top](#table-of-contents) |
+| [top](#flags) | :wales: | `:wales:` | | | [top](#table-of-contents) |
+
+## GitHub Custom Emoji
+
+| | ico | shortcode | ico | shortcode | |
+| - | :-: | - | :-: | - | - |
+| [top](#github-custom-emoji) | :accessibility: | `:accessibility:` | :atom: | `:atom:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :basecamp: | `:basecamp:` | :basecampy: | `:basecampy:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :bowtie: | `:bowtie:` | :dependabot: | `:dependabot:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :electron: | `:electron:` | :feelsgood: | `:feelsgood:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :finnadie: | `:finnadie:` | :fishsticks: | `:fishsticks:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :goberserk: | `:goberserk:` | :godmode: | `:godmode:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :hurtrealbad: | `:hurtrealbad:` | :neckbeard: | `:neckbeard:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :octocat: | `:octocat:` | :rage1: | `:rage1:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :rage2: | `:rage2:` | :rage3: | `:rage3:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :rage4: | `:rage4:` | :shipit: | `:shipit:` | [top](#table-of-contents) |
+| [top](#github-custom-emoji) | :suspect: | `:suspect:` | :trollface: | `:trollface:` | [top](#table-of-contents) |
--- /dev/null
- Use these `Page` methods when rendering lists on [section] pages, [taxonomy] pages, [term] pages, and the home page.
-
- [section]: /getting-started/glossary/#section
- [taxonomy]: /getting-started/glossary/#taxonomy
- [term]: /getting-started/glossary/#term
+---
+title: Page collections
+description: A quick reference guide to Hugo's page collections.
+categories: [quick reference]
+keywords: []
+menu:
+ docs:
+ parent: quick-reference
+ weight: 50
+weight: 50
+toc: true
+---
+
+## Page
+
- 2. [Date] in descending order
- 3. [LinkTitle] falling back to [Title]
- 4. [Filename] if the page is backed by a file
++assets/
++Use these `Page` methods when rendering lists on [section pages](g), [taxonomy pages](g), [term pages](g), and the home page.
+
+{{< list-pages-in-section path=/methods/page filter=methods_page_page_collections filterType=include omitElementIDs=true titlePrefix=PAGE. >}}
+
+## Site
+
+Use these `Site` methods when rendering lists on any page.
+
+{{< list-pages-in-section path=/methods/site filter=methods_site_page_collections filterType=include omitElementIDs=true titlePrefix=SITE. >}}
+
+## Filter
+
+Use the [`where`] function to filter page collections.
+
+[`where`]: /functions/collections/where/
+
+## Sort
+
+By default, Hugo sorts page collections by:
+
+1. [Weight]
++1. [Date] in descending order
++1. [LinkTitle] falling back to [Title]
++1. [Filename] if the page is backed by a file
+
+[Date]: /methods/page/date/
+[Weight]: /methods/page/weight/
+[LinkTitle]: /methods/page/linktitle/
+[Title]: /methods/page/title/
+[Filename]: /methods/page/file/#filename
+
+Use these methods to sort page collections.
+
+{{< list-pages-in-section path=/methods/pages filter=methods_pages_sort filterType=include titlePrefix=. omitElementIDs=true titlePrefix=PAGES. >}}
+
+## Group
+
+Use these methods to group page collections.
+
+{{< list-pages-in-section path=/methods/pages filter=methods_pages_group filterType=include titlePrefix=. omitElementIDs=true titlePrefix=PAGES. >}}
--- /dev/null
- The primary use case for `PageInner` is to resolve links and [page resources] relative to an included `Page`. For example, create an "include" shortcode to compose a page from multiple content files, while preserving a global context for footnotes and the table of contents:
+---
+_comment: Do not remove front matter.
+---
+
+## PageInner details
+
+{{< new-in 0.125.0 >}}
+
- [page resources]: /getting-started/glossary/#page-resource
++The primary use case for `PageInner` is to resolve links and [page resources](g) relative to an included `Page`. For example, create an "include" shortcode to compose a page from multiple content files, while preserving a global context for footnotes and the table of contents:
+
+{{< code file=layouts/shortcodes/include.html >}}
+{{ with .Get 0 }}
+ {{ with $.Page.GetPage . }}
+ {{- .RenderShortcodes }}
+ {{ else }}
+ {{ errorf "The %q shortcode was unable to find %q. See %s" $.Name . $.Position }}
+ {{ end }}
+{{ else }}
+ {{ errorf "The %q shortcode requires a positional parameter indicating the logical path of the file to include. See %s" .Name .Position }}
+{{ end }}
+{{< /code >}}
+
+Then call the shortcode in your Markdown:
+
+{{< code file=content/posts/p1.md >}}
+{{%/* include "/posts/p2" */%}}
+{{< /code >}}
+
+Any render hook triggered while rendering `/posts/p2` will get:
+
+- `/posts/p1` when calling `Page`
+- `/posts/p2` when calling `PageInner`
+
+`PageInner` falls back to the value of `Page` if not relevant, and always returns a value.
+
+{{% note %}}
+The `PageInner` method is only relevant for shortcodes that invoke the [`RenderShortcodes`] method, and you must call the shortcode using the `{{%/*..*/%}}` notation.
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes/
+{{% /note %}}
+
+As a practical example, Hugo's embedded link and image render hooks use the `PageInner` method to resolve markdown link and image destinations. See the source code for each:
+
+- [Embedded link render hook]({{% eturl render-link %}})
+- [Embedded image render hook]({{% eturl render-image %}})
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes/
--- /dev/null
- Blockquote render hook templates receive the following [context]:
-
- [context]: /getting-started/glossary/#context
+---
+title: Blockquote render hooks
+linkTitle: Blockquotes
+description: Create a blockquote render hook to override the rendering of Markdown blockquotes to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 30
+weight: 30
+toc: true
+---
+
+{{< new-in 0.132.0 >}}
+
+## Context
+
++Blockquote render hook templates receive the following [context](g):
+
+###### AlertType
+
+(`string`) Applicable when [`Type`](#type) is `alert`, this is the alert type converted to lowercase. See the [alerts](#alerts) section below.
+
+###### AlertTitle
+
+{{< new-in 0.134.0 >}}
+
+(`template.HTML`) Applicable when [`Type`](#type) is `alert`, this is the alert title. See the [alerts](#alerts) section below.
+
+###### AlertSign
+
+{{< new-in 0.134.0 >}}
+
+(`string`) Applicable when [`Type`](#type) is `alert`, this is the alert sign. Typically used to indicate whether an alert is graphically foldable, this is one of `+`, `-`, or an empty string. See the [alerts](#alerts) section below.
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+block = true
+{{< /code-toggle >}}
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the blockquote on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### Position
+
+(`string`) The position of the blockquote within the page content.
+
+###### Text
+(`template.HTML`) The blockquote text, excluding the first line if [`Type`](#type) is `alert`. See the [alerts](#alerts) section below.
+
+###### Type
+
+(`bool`) The blockquote type. Returns `alert` if the blockquote has an alert designator, else `regular`. See the [alerts](#alerts) section below.
+
+## Examples
+
+In its default configuration, Hugo renders Markdown blockquotes according to the [CommonMark specification]. To create a render hook that does the same thing:
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+
+{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
+<blockquote>
+ {{ .Text }}
+</blockquote>
+{{< /code >}}
+
+To render a blockquote as an HTML `figure` element with an optional citation and caption:
+
+{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
+<figure>
+ <blockquote {{ with .Attributes.cite }}cite="{{ . }}"{{ end }}>
+ {{ .Text }}
+ </blockquote>
+ {{ with .Attributes.caption }}
+ <figcaption class="blockquote-caption">
+ {{ . | safeHTML }}
+ </figcaption>
+ {{ end }}
+</figure>
+{{< /code >}}
+
+Then in your markdown:
+
+```text
+> Some text
+{cite="https://gohugo.io" caption="Some caption"}
+```
+
+## Alerts
+
+Also known as _callouts_ or _admonitions_, alerts are blockquotes used to emphasize critical information.
+
+### Basic syntax
+
+With the basic Markdown syntax, the first line of each alert is an alert designator consisting of an exclamation point followed by the alert type, wrapped within brackets. For example:
+
+{{< code file=content/example.md lang=text >}}
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+{{< /code >}}
+
+The basic syntax is compatible with [GitHub], [Obsidian], and [Typora].
+
+[GitHub]: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts
+[Obsidian]: https://help.obsidian.md/Editing+and+formatting/Callouts
+[Typora]: https://support.typora.io/Markdown-Reference/#callouts--github-style-alerts
+
+### Extended syntax
+
+With the extended Markdown syntax, you may optionally include an alert sign and/or an alert title. The alert sign is one of `+` or `-`, typically used to indicate whether an alert is graphically foldable. For example:
+
+{{< code file=content/example.md lang=text >}}
+> [!WARNING]+ Radiation hazard
+> Do not approach or handle without protective gear.
+{{< /code >}}
+
+The extended syntax is compatible with [Obsidian].
+
+{{% note %}}
+The extended syntax is not compatible with GitHub or Typora. If you include an alert sign or an alert title, these applications render the Markdown as a blockquote.
+{{% /note %}}
+
+### Example
+
+This blockquote render hook renders a multilingual alert if an alert designator is present, otherwise it renders a blockquote according to the CommonMark specification.
+
+{{< code file=layouts/_default/_markup/render-blockquote.html copy=true >}}
+{{ $emojis := dict
+ "caution" ":exclamation:"
+ "important" ":information_source:"
+ "note" ":information_source:"
+ "tip" ":bulb:"
+ "warning" ":information_source:"
+}}
+
+{{ if eq .Type "alert" }}
+ <blockquote class="alert alert-{{ .AlertType }}">
+ <p class="alert-heading">
+ {{ transform.Emojify (index $emojis .AlertType) }}
+ {{ with .AlertTitle }}
+ {{ . }}
+ {{ else }}
+ {{ or (i18n .AlertType) (title .AlertType) }}
+ {{ end }}
+ </p>
+ {{ .Text }}
+ </blockquote>
+{{ else }}
+ <blockquote>
+ {{ .Text }}
+ </blockquote>
+{{ end }}
+{{< /code >}}
+
+To override the label, create these entries in your i18n files:
+
+{{< code-toggle file=i18n/en.toml >}}
+caution = 'Caution'
+important = 'Important'
+note = 'Note'
+tip = 'Tip'
+warning = 'Warning'
+{{< /code-toggle >}}
+
+Although you can use one template with conditional logic as shown above, you can also create separate templates for each [`Type`](#type) of blockquote:
+
+```text
+layouts/
+└── _default/
+ └── _markup/
+ ├── render-blockquote-alert.html
+ └── render-blockquote-regular.html
+```
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
- Code block render hook templates receive the following [context]:
-
- [context]: /getting-started/glossary/#context
+---
+title: Code block render hooks
+linkTitle: Code blocks
+description: Create a code block render hook to override the rendering of Markdown code blocks to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 40
+weight: 40
+toc: true
+---
+
+## Markdown
+
+This Markdown example contains a fenced code block:
+
+{{< code file=content/example.md lang=text >}}
+```bash {class="my-class" id="my-codeblock" lineNos=inline tabWidth=2}
+declare a=1
+echo "$a"
+exit
+```
+{{< /code >}}
+
+A fenced code block consists of:
+
+- A leading [code fence]
+- An optional [info string]
+- A code sample
+- A trailing code fence
+
+[code fence]: https://spec.commonmark.org/0.31.2/#code-fence
+[info string]: https://spec.commonmark.org/0.31.2/#info-string
+
+In the previous example, the info string contains:
+
+- The language of the code sample (the first word)
+- An optional space-delimited or comma-delimited list of attributes (everything within braces)
+
+The attributes in the info string can be generic attributes or highlighting options.
+
+In the example above, the _generic attributes_ are `class` and `id`. In the absence of special handling within a code block render hook, Hugo adds each generic attribute to the HTML element surrounding the rendered code block. Consistent with its content security model, Hugo removes HTML event attributes such as `onclick` and `onmouseover`. Generic attributes are typically global HTML attributes, but you may include custom attributes as well.
+
+In the example above, the _highlighting options_ are `lineNos` and `tabWidth`. Hugo uses the [Chroma] syntax highlighter to render the code sample. You can control the appearance of the rendered code by specifying one or more [highlighting options].
+
+[Chroma]: https://github.com/alecthomas/chroma/
+[highlighting options]: /functions/transform/highlight/#options
+
+{{% note %}}
+Although `style` is a global HTML attribute, when used in an info string it is a highlighting option.
+{{% /note %}}
+
+## Context
+
++Code block render hook templates receive the following [context](g):
+
+###### Attributes
+
+(`map`) The generic attributes from the info string.
+
+###### Inner
+
+(`string`) The content between the leading and trailing code fences, excluding the info string.
+
+###### Options
+
+(`map`) The highlighting options from the info string.
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the code block on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+{{< new-in 0.125.0 >}}
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### Position
+
+(`text.Position`) The position of the code block within the page content.
+
+###### Type
+
+(`string`) The first word of the info string, typically the code language.
+
+## Examples
+
+In its default configuration, Hugo renders fenced code blocks by passing the code sample through the Chroma syntax highlighter and wrapping the result. To create a render hook that does the same thing:
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+
+{{< code file=layouts/_default/_markup/render-codeblock.html copy=true >}}
+{{ $result := transform.HighlightCodeBlock . }}
+{{ $result.Wrapped }}
+{{< /code >}}
+
+Although you can use one template with conditional logic to control the behavior on a per-language basis, you can also create language-specific templates.
+
+```text
+layouts/
+└── _default/
+ └── _markup/
+ ├── render-codeblock-mermaid.html
+ ├── render-codeblock-python.html
+ └── render-codeblock.html
+```
+
+For example, to create a code block render hook to render [Mermaid] diagrams:
+
+[Mermaid]: https://mermaid.js.org/
+
+{{< code file=layouts/_default/_markup/render-codeblock-mermaid.html copy=true >}}
+<pre class="mermaid">
+ {{- .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
+{{< /code >}}
+
+Then include this snippet at the bottom of the your base template:
+
+{{< code file=layouts/_default/baseof.html copy=true >}}
+{{ if .Store.Get "hasMermaid" }}
+ <script type="module">
+ import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+ mermaid.initialize({ startOnLoad: true });
+ </script>
+{{ end }}
+{{< /code >}}
+
+See the [diagrams] page for details.
+
+[diagrams]: /content-management/diagrams/#mermaid-diagrams
+
+## Embedded
+
+Hugo includes an [embedded code block render hook] to render [GoAT diagrams].
+
+[embedded code block render hook]: {{% eturl render-codeblock-goat %}}
+[GoAT diagrams]: /content-management/diagrams/#goat-diagrams-ascii
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
- Heading render hook templates receive the following [context]:
-
- [context]: /getting-started/glossary/#context
+---
+title: Heading render hooks
+linkTitle: Headings
+description: Create a heading render hook to override the rendering of Markdown headings to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 50
+weight: 50
+toc: true
+---
+
+## Context
+
++Heading render hook templates receive the following [context](g):
+
+###### Anchor
+
+(`string`) The `id` attribute of the heading element.
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+title = true
+{{< /code-toggle >}}
+
+###### Level
+
+(`int`) The heading level, 1 through 6.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+{{< new-in 0.125.0 >}}
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### PlainText
+
+(`string`) The heading text as plain text.
+
+###### Text
+
+(`template.HTML`) The heading text.
+
+## Examples
+
+In its default configuration, Hugo renders Markdown headings according to the [CommonMark specification] with the addition of automatic `id` attributes. To create a render hook that does the same thing:
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+
+{{< code file=layouts/_default/_markup/render-heading.html copy=true >}}
+<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
+ {{- .Text -}}
+</h{{ .Level }}>
+{{< /code >}}
+
+To add an anchor link to the right of each heading:
+
+{{< code file=layouts/_default/_markup/render-heading.html copy=true >}}
+<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
+ {{ .Text }}
+ <a href="#{{ .Anchor }}">#</a>
+</h{{ .Level }}>
+{{< /code >}}
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
- These components are passed into the render hook [context] as shown below.
-
- [context]: /getting-started/glossary/#context
+---
+title: Image render hooks
+linkTitle: Images
+description: Create an image render to hook override the rendering of Markdown images to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 60
+weight: 60
+toc: true
+---
+
+## Markdown
+
+A Markdown image has three components: the image description, the image destination, and optionally the image title.
+
+```text
+
+ ------------ ------------------ ---------
+ description destination title
+```
+
- The embedded image render hook resolves internal Markdown destinations by looking for a matching [page resource], falling back to a matching [global resource]. Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
-
- [page resource]: /getting-started/glossary/#page-resource
- [global resource]: /getting-started/glossary/#global-resource
++These components are passed into the render hook [context](g) as shown below.
+
+## Context
+
+Image render hook templates receive the following context:
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser]
+wrapStandAloneImageWithinParagraph = false
+[markup.goldmark.parser.attribute]
+block = true
+{{< /code-toggle >}}
+
+###### Destination
+
+(`string`) The image destination.
+
+###### IsBlock
+
+(`bool`) Returns true if a standalone image is not wrapped within a paragraph element.
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the image on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+{{< new-in 0.125.0 >}}
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### PlainText
+
+(`string`) The image description as plain text.
+
+###### Text
+
+(`template.HTML`) The image description.
+
+###### Title
+
+(`string`) The image title.
+
+## Examples
+
+{{% note %}}
+With inline elements such as images and links, remove leading and trailing whitespace using the `{{‑ ‑}}` delimiter notation to prevent whitespace between adjacent inline elements and text.
+{{% /note %}}
+
+In its default configuration, Hugo renders Markdown images according to the [CommonMark specification]. To create a render hook that does the same thing:
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+
+{{< code file=layouts/_default/_markup/render-image.html copy=true >}}
+<img src="{{ .Destination | safeURL }}"
+ {{- with .PlainText }} alt="{{ . }}"{{ end -}}
+ {{- with .Title }} title="{{ . }}"{{ end -}}
+>
+{{- /* chomp trailing newline */ -}}
+{{< /code >}}
+
+To render standalone images within `figure` elements:
+
+{{< code file=layouts/_default/_markup/render-image.html copy=true >}}
+{{- if .IsBlock -}}
+ <figure>
+ <img src="{{ .Destination | safeURL }}"
+ {{- with .PlainText }} alt="{{ . }}"{{ end -}}
+ >
+ {{- with .Title }}<figcaption>{{ . }}</figcaption>{{ end -}}
+ </figure>
+{{- else -}}
+ <img src="{{ .Destination | safeURL }}"
+ {{- with .PlainText }} alt="{{ . }}"{{ end -}}
+ {{- with .Title }} title="{{ . }}"{{ end -}}
+ >
+{{- end -}}
+{{< /code >}}
+
+Note that the above requires the following site configuration:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser]
+wrapStandAloneImageWithinParagraph = false
+{{< /code-toggle >}}
+
+## Default
+
+{{< new-in 0.123.0 >}}
+
+Hugo includes an [embedded image render hook] to resolve Markdown image destinations. Disabled by default, you can enable it in your site configuration:
+
+[embedded image render hook]: {{% eturl render-image %}}
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.renderHooks.image]
+enableDefault = true
+{{< /code-toggle >}}
+
+A custom render hook, even when provided by a theme or module, will override the embedded render hook regardless of the configuration setting above.
+
+{{% 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 %}}
+
- You must place global resources in the assets directory. If you have placed your resources in the static directory, and you are unable or unwilling to move them, you must mount the static directory to the assets directory by including both of these entries in your site configuration:
++The embedded image render hook resolves internal Markdown destinations by looking for a matching [page resource](g), falling back to a matching [global resource](g). Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
+
++You must place global resources in the `assets` directory. If you have placed your resources in the `static` directory, and you are unable or unwilling to move them, you must mount the `static` directory to the `assets` directory by including both of these entries in your site configuration:
+
+{{< code-toggle file=hugo >}}
+[[module.mounts]]
+source = 'assets'
+target = 'assets'
+
+[[module.mounts]]
+source = 'static'
+target = 'assets'
+{{< /code-toggle >}}
+
+Note that the embedded image render hook does not perform image processing. Its sole purpose is to resolve Markdown image destinations.
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
- The template lookup order allows you to create different render hooks for each page [type], [kind], language, and [output format]. For example:
+---
+title: Introduction
+description: An introduction to Hugo's render hooks.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ identifier: render-hooks-introduction
+ parent: render-hooks
+ weight: 20
+weight: 20
+---
+
+When rendering Markdown to HTML, render hooks override the conversion. Each render hook is a template, with one template for each supported element type:
+
+- [Blockquotes](/render-hooks/blockquotes)
+- [Code blocks](/render-hooks/code-blocks)
+- [Headings](/render-hooks/headings)
+- [Images](/render-hooks/images)
+- [Links](/render-hooks/links)
+- [Passthrough elements](/render-hooks/passthrough)
+- [Tables](/render-hooks/tables)
+
+{{% note %}}
+Hugo supports multiple [content formats] including Markdown, HTML, AsciiDoc, Emacs Org Mode, Pandoc, and reStructuredText.
+
+The render hook capability is limited to Markdown. You cannot create render hooks for the other content formats.
+
+[content formats]: /content-management/formats/
+{{% /note %}}
+
+For example, consider this Markdown:
+
+```text
+[Hugo](https://gohugo.io)
+
+
+```
+
+Without link or image render hooks, this example above is rendered to:
+
+```html
+<p><a href="https://gohugo.io">Hugo</a></p>
+<p><img alt="kitten" src="kitten.jpg"></p>
+```
+
+By creating link and image render hooks, you can alter the conversion from Markdown to HTML. For example:
+
+```html
+<p><a href="https://gohugo.io" rel="external">Hugo</a></p>
+<p><img alt="kitten" src="kitten.jpg" width="600" height="400"></p>
+```
+
+Each render hook is a template, with one template for each supported element type:
+
+```text
+layouts/
+└── _default/
+ └── _markup/
+ ├── render-blockquote.html
+ ├── render-codeblock.html
+ ├── render-heading.html
+ ├── render-image.html
+ ├── render-link.html
+ ├── render-passthrough.html
+ └── render-table.html
+```
+
- [kind]: /getting-started/glossary/#page-kind
- [output format]: /getting-started/glossary/#output-format
- [type]: /getting-started/glossary/#content-type
-
++The template lookup order allows you to create different render hooks for each page [type](g), [kind](g), language, and [output format](g). For example:
+
+```text
+layouts/
+├── _default/
+│ └── _markup/
+│ ├── render-link.html
+│ └── render-link.rss.xml
+├── books/
+│ └── _markup/
+│ ├── render-link.html
+│ └── render-link.rss.xml
+└── films/
+ └── _markup/
+ ├── render-link.html
+ └── render-link.rss.xml
+```
+
+The remaining pages in this section describe each type of render hook, including examples and the context received by each template.
--- /dev/null
- These components are passed into the render hook [context] as shown below.
-
- [context]: /getting-started/glossary/#context
+---
+title: Link render hooks
+linkTitle: Links
+description: Create a link render hook to override the rendering of Markdown links to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 70
+weight: 70
+toc: true
+---
+
+## Markdown
+
+A Markdown link has three components: the link text, the link destination, and optionally the link title.
+
+```text
+[Post 1](/posts/post-1 "My first post")
+ ------ ------------- -------------
+ text destination title
+```
+
- [context]: /getting-started/glossary/#context
-
++These components are passed into the render hook [context](g) as shown below.
+
+## Context
+
+Link render hook templates receive the following context:
+
- The embedded link render hook resolves internal Markdown destinations by looking for a matching page, falling back to a matching [page resource], then falling back to a matching [global resource]. Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
-
- [page resource]: /getting-started/glossary/#page-resource
- [global resource]: /getting-started/glossary/#global-resource
+###### Destination
+
+(`string`) The link destination.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+{{< new-in 0.125.0 >}}
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### PlainText
+
+(`string`) The link description as plain text.
+
+###### Text
+
+(`template.HTML`) The link description.
+
+###### Title
+
+(`string`) The link title.
+
+## Examples
+
+{{% note %}}
+With inline elements such as images and links, remove leading and trailing whitespace using the `{{‑ ‑}}` delimiter notation to prevent whitespace between adjacent inline elements and text.
+{{% /note %}}
+
+In its default configuration, Hugo renders Markdown links according to the [CommonMark specification]. To create a render hook that does the same thing:
+
+[CommonMark specification]: https://spec.commonmark.org/current/
+
+{{< code file=layouts/_default/_markup/render-link.html copy=true >}}
+<a href="{{ .Destination | safeURL }}"
+ {{- with .Title }} title="{{ . }}"{{ end -}}
+>
+ {{- with .Text }}{{ . }}{{ end -}}
+</a>
+{{- /* chomp trailing newline */ -}}
+{{< /code >}}
+
+To include a `rel` attribute set to `external` for external links:
+
+{{< code file=layouts/_default/_markup/render-link.html copy=true >}}
+{{- $u := urls.Parse .Destination -}}
+<a href="{{ .Destination | safeURL }}"
+ {{- with .Title }} title="{{ . }}"{{ end -}}
+ {{- if $u.IsAbs }} rel="external"{{ end -}}
+>
+ {{- with .Text }}{{ . }}{{ end -}}
+</a>
+{{- /* chomp trailing newline */ -}}
+{{< /code >}}
+
+## Default
+
+{{< new-in 0.123.0 >}}
+
+Hugo includes an [embedded link render hook] to resolve Markdown link destinations. Disabled by default, you can enable it in your site configuration:
+
+[embedded link render hook]: {{% eturl render-link %}}
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.renderHooks.link]
+enableDefault = true
+{{< /code-toggle >}}
+
+A custom render hook, even when provided by a theme or module, will override the embedded render hook regardless of the configuration setting above.
+
+{{% 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 %}}
+
- You must place global resources in the assets directory. If you have placed your resources in the static directory, and you are unable or unwilling to move them, you must mount the static directory to the assets directory by including both of these entries in your site configuration:
++The embedded link render hook resolves internal Markdown destinations by looking for a matching page, falling back to a matching [page resource](g), then falling back to a matching [global resource](g). Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
+
++You must place global resources in the `assets` directory. If you have placed your resources in the `static` directory, and you are unable or unwilling to move them, you must mount the `static` directory to the `assets` directory by including both of these entries in your site configuration:
+
+{{< code-toggle file=hugo >}}
+[[module.mounts]]
+source = 'assets'
+target = 'assets'
+
+[[module.mounts]]
+source = 'static'
+target = 'assets'
+{{< /code-toggle >}}
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
- The Goldmark passthrough extension is often used in conjunction with the MathJax or KaTeX display engine to render [mathematical expressions] written in [LaTeX] or [Tex].
+---
+title: Passthrough render hooks
+linkTitle: Passthrough
+description: Create a passthrough render hook to override the rendering of text snippets captured by the Goldmark passthrough extension.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 80
+weight: 80
+toc: true
+---
+
+{{< new-in 0.132.0 >}}
+
+## Overview
+
+Hugo uses [Goldmark] to render Markdown to HTML. Goldmark supports custom extensions to extend its core functionality. The Goldmark [passthrough extension] captures and preserves raw Markdown within delimited snippets of text, including the delimiters themselves. These are known as _passthrough elements_.
+
+[Goldmark]: https://github.com/yuin/goldmark
+[passthrough extension]: /getting-started/configuration-markup/#passthrough
+
+Depending on your choice of delimiters, Hugo will classify a passthrough element as either _block_ or _inline_. Consider this contrived example:
+
+{{< code file=content/sample.md >}}
+This is a
+
+\[block\]
+
+passthrough element with opening and closing block delimiters.
+
+This is an \(inline\) passthrough element with opening and closing inline delimiters.
+{{< /code >}}
+
+Update your site configuration to enable the passthrough extension and define opening and closing delimiters for each passthrough element type, either `block` or `inline`. For example:
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.extensions.passthrough]
+enable = true
+[markup.goldmark.extensions.passthrough.delimiters]
+block = [['\[', '\]'], ['$$', '$$']]
+inline = [['\(', '\)']]
+{{< /code-toggle >}}
+
+In the example above there are two sets of `block` delimiters. You may use either one in your Markdown.
+
- [LaTeX]: https://www.latex-project.org/
- [Tex]: https://en.wikipedia.org/wiki/TeX
++The Goldmark passthrough extension is often used in conjunction with the MathJax or KaTeX display engine to render [mathematical expressions] written in the LaTeX markup language.
+
+[mathematical expressions]: /content-management/mathematics/
- To enable custom rendering of passthrough elements, create a render hook.
+
- Passthrough render hook templates receive the following [context]:
-
- [context]: /getting-started/glossary/#context
++To enable custom rendering of passthrough elements, create a passthrough render hook.
+
+## Context
+
- As an alternative to rendering mathematical expressions with the MathJax or KaTeX display engine, create a passthrough render hook which calls the [`transform.ToMath`] function:
++Passthrough render hook templates receive the following [context](g):
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+block = true
+{{< /code-toggle >}}
+
+Hugo populates the `Attributes` map for _block_ passthrough elements. Markdown attributes are not applicable to _inline_ elements.
+
+###### Inner
+(`string`) The inner content of the passthrough element, excluding the delimiters.
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the passthrough element on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### Position
+
+(`string`) The position of the passthrough element within the page content.
+
+###### Type
+
+(`string`) The passthrough element type, either `block` or `inline`.
+
+## Example
+
- {{ if eq .Type "block" }}
- {{ $opts := dict "displayMode" true }}
- {{ transform.ToMath .Inner $opts }}
- {{ else }}
- {{ transform.ToMath .Inner }}
- {{ end }}
++Instead of client-side JavaScript rendering of mathematical markup using MathJax or KaTeX, create a passthrough render hook which calls the [`transform.ToMath`] function.
+
+[`transform.ToMath`]: /functions/transform/tomath/
+
+{{< code file=layouts/_default/_markup/render-passthrough.html copy=true >}}
++{{- $opts := dict "output" "htmlAndMathml" "displayMode" (eq .Type "block") }}
++{{- with try (transform.ToMath .Inner $opts) }}
++ {{- with .Err }}
++ {{ errorf "Unable to render mathematical markup to HTML using the transform.ToMath function. The KaTeX display engine threw the following error: %s: see %s." . $.Position }}
++ {{- else }}
++ {{- .Value }}
++ {{- $.Page.Store.Set "hasMath" true }}
++ {{- end }}
++{{- end -}}
+{{< /code >}}
+
++Then, in your base template, conditionally include the KaTeX CSS within the head element:
++
++{{< code file=layouts/_default/baseof.html copy=true >}}
++<head>
++ {{ $noop := .WordCount }}
++ {{ if .Page.Store.Get "hasMath" }}
++ <link href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" rel="stylesheet">
++ {{ end }}
++</head>
++{{< /code >}}
++
++In the above, note the use of a [noop](g) statement to force content rendering before we check the value of `hasMath` with the `Store.Get` method.
++
+Although you can use one template with conditional logic as shown above, you can also create separate templates for each [`Type`](#type) of passthrough element:
+
+```text
+layouts/
+└── _default/
+ └── _markup/
+ ├── render-passthrough-block.html
+ └── render-passthrough-inline.html
+```
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
- Table render hook templates receive the following [context]:
-
- [context]: /getting-started/glossary/#context
+---
+title: Table render hooks
+linkTitle: Tables
+description: Create a table render hook to override the rendering of Markdown tables to HTML.
+categories: [render hooks]
+keywords: []
+menu:
+ docs:
+ parent: render-hooks
+ weight: 90
+weight: 90
+toc: true
+---
+
+{{< new-in 0.134.0 >}}
+
+## Context
+
++Table render hook templates receive the following [context](g):
+
+###### Attributes
+
+(`map`) The [Markdown attributes], available if you configure your site as follows:
+
+[Markdown attributes]: /content-management/markdown-attributes/
+
+{{< code-toggle file=hugo >}}
+[markup.goldmark.parser.attribute]
+block = true
+{{< /code-toggle >}}
+
+###### Ordinal
+
+(`int`) The zero-based ordinal of the table on the page.
+
+###### Page
+
+(`page`) A reference to the current page.
+
+###### PageInner
+
+(`page`) A reference to a page nested via the [`RenderShortcodes`] method. [See details](#pageinner-details).
+
+[`RenderShortcodes`]: /methods/page/rendershortcodes
+
+###### Position
+
+(`string`) The position of the table within the page content.
+
+###### THead
+(`slice`) A slice of table header rows, where each element is a slice of table cells.
+
+###### TBody
+(`slice`) A slice of table body rows, where each element is a slice of table cells.
+
+## Table cells
+
+Each table cell within the slice of slices returned by the `THead` and `TBody` methods has the following fields:
+
+###### Alignment
+(`string`) The alignment of the text within the table cell, one of `left`, `center`, or `right`.
+
+###### Text
+(`template.HTML`) The text within the table cell.
+
+## Example
+
+In its default configuration, Hugo renders Markdown tables according to the [GitHub Flavored Markdown specification]. To create a render hook that does the same thing:
+
+[GitHub Flavored Markdown specification]: https://github.github.com/gfm/#tables-extension-
+
+{{< code file=layouts/_default/_markup/render-table.html copy=true >}}
+<table
+ {{- range $k, $v := .Attributes }}
+ {{- if $v }}
+ {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+ {{- end }}
+ {{- end }}>
+ <thead>
+ {{- range .THead }}
+ <tr>
+ {{- range . }}
+ <th
+ {{- with .Alignment }}
+ {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+ {{- end -}}
+ >
+ {{- .Text -}}
+ </th>
+ {{- end }}
+ </tr>
+ {{- end }}
+ </thead>
+ <tbody>
+ {{- range .TBody }}
+ <tr>
+ {{- range . }}
+ <td
+ {{- with .Alignment }}
+ {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
+ {{- end -}}
+ >
+ {{- .Text -}}
+ </td>
+ {{- end }}
+ </tr>
+ {{- end }}
+ </tbody>
+</table>
+{{< /code >}}
+
+{{% include "/render-hooks/_common/pageinner.md" %}}
--- /dev/null
--- /dev/null
++---
++title: Shortcodes
++linkTitle: In this section
++description: Insert elements such as videos, images, and social media embeds into your content using Hugo's embedded shortcodes.
++categories: []
++keywords: []
++menu:
++ docs:
++ identifier: shortcodes-in-this-section
++ parent: shortcodes
++ weight: 10
++weight: 10
++showSectionMenu: true
++---
++
++Insert elements such as videos, images, and social media embeds into your content using Hugo's embedded shortcodes.
--- /dev/null
--- /dev/null
++---
++title: Comment
++description: Include hidden comments in your content with the comment shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ identifier: shortcodes-comment
++ parent: shortcodes
++ weight:
++weight:
++expiryDate: 2025-01-22 # with v0.142.0 and later use HTML comments instead
++---
++
++{{% note %}}
++To override Hugo's embedded `comment` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl comment %}}
++{{% /note %}}
++
++{{< new-in "0.137.1" >}}
++
++Use the `comment` shortcode to include comments in your content. Hugo will ignore the text within these comments when rendering your site.
++
++Use it inline:
++
++```text
++{{%/* comment */%}} rewrite the paragraph below {{%/* /comment */%}}
++```
++
++Or as a block comment:
++
++```text
++{{%/* comment */%}}
++rewrite the paragraph below
++{{%/* /comment */%}}
++```
++
++Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
--- /dev/null
--- /dev/null
++---
++title: Details
++description: Insert an HTML details element into your content using the details shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{< new-in 0.140.0 >}}
++
++{{% note %}}
++To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl details %}}
++{{% /note %}}
++
++## Example
++
++With this markup:
++
++```text
++{{</* details summary="See the details" */>}}
++This is a **bold** word.
++{{</* /details */>}}
++```
++
++Hugo renders this HTML:
++
++```html
++<details>
++ <summary>See the details</summary>
++ <p>This is a <strong>bold</strong> word.</p>
++</details>
++```
++
++Which looks like this in your browser:
++
++{{< details summary="See the details" >}}
++This is a **bold** word.
++{{< /details >}}
++
++## Parameters
++
++summary
++: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
++
++open
++: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
++
++class
++: (`string`) The `class` attribute of the `details` element.
++
++name
++: (`string`) The `name` attribute of the `details` element.
++
++title
++: (`string`) The `title` attribute of the `details` element.
++
++## Styling
++
++Use CSS to style the `details` element, the `summary` element, and the content itself.
++
++```css
++/* target the details element */
++details { }
++
++/* target the summary element */
++details > summary { }
++
++/* target the children of the summary element */
++details > summary > * { }
++
++/* target the content */
++details > :not(summary) { }
++```
--- /dev/null
--- /dev/null
++---
++title: Figure
++description: Insert an HTML figure element into your content using the figure shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{% note %}}
++To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl figure %}}
++{{% /note %}}
++
++## Example
++
++With this markup:
++
++```text
++{{</* figure
++ src="/images/examples/zion-national-park.jpg"
++ alt="A photograph of Zion National Park"
++ link="https://www.nps.gov/zion/index.htm"
++ caption="Zion National Park"
++ class="ma0 w-75"
++*/>}}
++```
++
++Hugo renders this HTML:
++
++```html
++<figure class="ma0 w-75">
++ <a href="https://www.nps.gov/zion/index.htm">
++ <img
++ src="/images/examples/zion-national-park.jpg"
++ alt="A photograph of Zion National Park"
++ >
++ </a>
++ <figcaption>
++ <p>Zion National Park</p>
++ </figcaption>
++</figure>
++```
++
++Which looks like this in your browser:
++
++{{< figure
++ src="/images/examples/zion-national-park.jpg"
++ alt="A photograph of Zion National Park"
++ link="https://www.nps.gov/zion/index.htm"
++ caption="Zion National Park"
++ class="ma0 w-75"
++>}}
++
++## Parameters
++
++src
++: (`string`) The `src` attribute of the `img` element. Typically this is a [page resource](g) or a [global resource](g).
++
++alt
++: (`string`) The `alt` attribute of the `img` element.
++
++width
++: (`int`) The `width` attribute of the `img` element.
++
++height
++: (`int`) The `height` attribute of the `img` element.
++
++loading
++: (`string`) The `loading` attribute of the `img` element.
++
++class
++: (`string`) The `class` attribute of the `figure` element.
++
++link
++: (`string`) The `href` attribute of the anchor element that wraps the `img` element.
++
++target
++: (`string`) The `target` attribute of the anchor element that wraps the `img` element.
++
++rel
++: (`rel`) The `rel` attribute of the anchor element that wraps the `img` element.
++
++title
++: (`string`) Within the `figurecaption` element, the title is at the top, wrapped within an `h4` element.
++
++caption
++: (`string`) Within the `figurecaption` element, the caption is at the bottom and may contain plain text or markdown.
++
++attr
++: (`string`) Within the `figurecaption` element, the attribution appears next to the caption and may contain plain text or markdown.
++
++attrlink
++: (`string`) The `href` attribute of the anchor element that wraps the attribution.
++
++## Image location
++
++The `figure` shortcode resolves internal Markdown destinations by looking for a matching [page resource](g), falling back to a matching [global resource](g). Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
++
++You must place global resources in the `assets` directory. If you have placed your resources in the `static` directory, and you are unable or unwilling to move them, you must mount the `static` directory to the `assets` directory by including both of these entries in your site configuration:
++
++{{< code-toggle file=hugo >}}
++[[module.mounts]]
++source = 'assets'
++target = 'assets'
++
++[[module.mounts]]
++source = 'static'
++target = 'assets'
++{{< /code-toggle >}}
--- /dev/null
--- /dev/null
++---
++title: Gist
++description: Embed a GitHub Gist in your content using the gist shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++---
++
++{{% note %}}
++To override Hugo's embedded `gist` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl gist %}}
++{{% /note %}}
++
++To display a GitHub gist with this URL:
++
++```text
++https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
++```
++
++Include this in your Markdown:
++
++```text
++{{</* gist user 23932424365401ffa5e9d9810102a477 */>}}
++```
++
++This will display all files in the gist alphabetically by file name.
++
++{{< gist jmooring 23932424365401ffa5e9d9810102a477 >}}
++
++To display a specific file within the gist:
++
++```text
++{{</* gist user 23932424365401ffa5e9d9810102a477 list.html */>}}
++```
++
++{{< gist jmooring 23932424365401ffa5e9d9810102a477 list.html >}}
--- /dev/null
--- /dev/null
++---
++title: Highlight
++description: Insert syntax-highlighted code into your content using the highlight shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{% note %}}
++To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl highlight %}}
++{{% /note %}}
++
++{{% note %}}
++With the Markdown [content format], the `highlight` shortcode is rarely needed because, by default, Hugo automatically applies syntax highlighting to fenced code blocks.
++
++The primary use case for the `highlight` shortcode in Markdown is to apply syntax highlighting to inline code snippets.
++
++[content format]: /content-management/formats/
++{{% /note %}}
++
++The `highlight` shortcode calls the [`transform.Highlight`] function which uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
++
++[chroma]: https://github.com/alecthomas/chroma
++[available styles]: https://xyproto.github.io/splash/docs/
++[`transform.Highlight`]: /functions/transform/highlight/
++
++## Arguments
++
++The `highlight` shortcode takes three arguments.
++
++```text
++{{</* highlight LANG OPTIONS */>}}
++CODE
++{{</* /highlight */>}}
++```
++
++CODE
++: (`string`) The code to highlight.
++
++LANG
++: (`string`) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
++
++OPTIONS
++: (`string`) Zero or more space-separated key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.
++
++[site configuration]: /getting-started/configuration-markup#highlight
++[supported languages]: /content-management/syntax-highlighting/#list-of-chroma-highlighting-languages
++
++## Example
++
++```text
++{{</* highlight go "linenos=inline, hl_Lines=3 6-8, style=emacs" */>}}
++package main
++
++import "fmt"
++
++func main() {
++ for i := 0; i < 3; i++ {
++ fmt.Println("Value of i:", i)
++ }
++}
++{{</* /highlight */>}}
++```
++
++Hugo renders this to:
++
++{{< highlight go "linenos=inline, hl_Lines=3 6-8, noClasses=true" >}}
++package main
++
++import "fmt"
++
++func main() {
++ for i := 0; i < 3; i++ {
++ fmt.Println("Value of i:", i)
++ }
++}
++{{< /highlight >}}
++
++You can also use the `highlight` shortcode for inline code snippets:
++
++```text
++This is some {{</* highlight go "hl_inline=true" */>}}fmt.Println("inline"){{</* /highlight */>}} code.
++```
++
++Hugo renders this to:
++
++This is some {{< highlight go "hl_inline=true, noClasses=true" >}}fmt.Println("inline"){{< /highlight >}} code.
++
++Given the verbosity of the example above, if you need to frequently highlight inline code snippets, create your own shortcode using a shorter name with preset options.
++
++{{< code file=layouts/shortcodes/hl.html >}}
++{{ $code := .Inner | strings.TrimSpace }}
++{{ $lang := or (.Get 0) "go" }}
++{{ $opts := dict "hl_inline" true "noClasses" true }}
++{{ transform.Highlight $code $lang $opts }}
++{{< /code >}}
++
++```text
++This is some {{</* hl */>}}fmt.Println("inline"){{</* /hl */>}} code.
++```
++
++Hugo renders this to:
++
++This is some {{< hl >}}fmt.Println("inline"){{< /hl >}} code.
++
++## Options
++
++Pass the options when calling the shortcode. You can set their default values in your [site configuration].
++
++{{% include "functions/_common/highlighting-options" %}}
--- /dev/null
--- /dev/null
++---
++title: Instagram
++description: Embed an Instagram post in your content using the instagram shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{% note %}}
++To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl instagram %}}
++{{% /note %}}
++
++## Example
++
++To display an Instagram post with this URL:
++
++```text
++https://www.instagram.com/p/CxOWiQNP2MO/
++```
++
++Include this in your Markdown:
++
++```text
++{{</* instagram CxOWiQNP2MO */>}}
++```
++
++Huge renders this to:
++
++{{< instagram CxOWiQNP2MO >}}
++
++## Privacy
++
++Adjust the relevant privacy settings in your site configuration.
++
++{{< code-toggle config=privacy.instagram />}}
++
++disable
++: (`bool`) Whether to disable the shortcode. Default is `false`.
++
++simple
++: (`bool`) Whether to enable simple mode for image card generation. If `true`, Hugo creates a static card without JavaScript. This mode only supports image cards, and the image is fetched directly from Instagram's servers. Default is `false`.
--- /dev/null
--- /dev/null
++---
++title: Param
++description: Insert a parameter from front matter or site configuration into your content using the param shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++---
++
++{{% note %}}
++To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl param %}}
++{{% /note %}}
++
++The `param` shortcode renders a parameter from front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
++
++{{< code file=example.md lang=text >}}
++---
++title: Example
++date: 2025-01-15T23:29:46-08:00
++params:
++ color: red
++ size: medium
++---
++
++We found a {{</* param "color" */>}} shirt.
++{{< /code >}}
++
++Hugo renders this to:
++
++```html
++<p>We found a red shirt.</p>
++```
++
++Access nested values by [chaining](g) the [identifiers](g):
++
++```text
++{{</* param my.nested.param */>}}
++```
--- /dev/null
--- /dev/null
++---
++title: QR
++description: Insert a QR code into your content using the qr shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{< new-in 0.141.0 >}}
++
++{{% note %}}
++To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl qr %}}
++{{% /note %}}
++
++The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
++
++Internally this shortcode calls the `images.QR` function. Please read the [related documentation] for implementation details and guidance.
++
++[QR code]: https://en.wikipedia.org/wiki/QR_code
++[related documentation]: /functions/images/qr/
++
++## Examples
++
++Use the self-closing syntax to pass the text as an argument:
++
++```text
++{{</* qr text="https://gohugo.io" /*/>}}
++```
++
++Or insert the text between the opening and closing tags:
++
++```text
++{{</* qr */>}}
++https://gohugo.io
++{{</* /qr */>}}
++```
++
++Both of the above produce this image:
++
++{{< qr text="https://gohugo.io" class="qrcode" />}}
++
++To create a QR code for a phone number:
++
++```text
++{{</* qr text="tel:+12065550101" /*/>}}
++```
++
++{{< qr text="tel:+12065550101" class="qrcode" />}}
++
++To create a QR code containing contact information in the [vCard] format:
++
++[vCard]: https://en.wikipedia.org/wiki/VCard
++
++```text
++{{</* qr level="low" scale=2 alt="QR code of vCard for John Smith" */>}}
++BEGIN:VCARD
++VERSION:2.1
++N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
++FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
++ORG;CHARSET=UTF-8:ABC Widgets
++TITLE;CHARSET=UTF-8:Vice President Engineering
++TEL;TYPE=WORK:+12065550101
++EMAIL;TYPE=WORK:jsmith@example.org
++END:VCARD
++{{</* /qr */>}}
++```
++
++{{< qr level="low" scale=2 alt="QR code of vCard for John Smith" class="qrcode" >}}
++BEGIN:VCARD
++VERSION:2.1
++N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
++FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
++ORG;CHARSET=UTF-8:ABC Widgets
++TITLE;CHARSET=UTF-8:Vice President Engineering
++TEL;TYPE=WORK:+12065550101
++EMAIL;TYPE=WORK:jsmith@example.org
++END:VCARD
++{{< /qr >}}
++
++## Parameters
++
++text
++: (`string`) The text to encode, falling back to the text between the opening and closing shortcode tags.
++
++level
++: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
++
++scale
++: (`int`) The number of image pixels per QR code module. Must be greater than or equal to 2. Default is `4`.
++
++targetDir
++: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image.
++
++[`publishDir`]: /getting-started/configuration/#publishdir
++
++alt
++: (`string`) The `alt` attribute of the `img` element.
++
++class
++: (`string`) The `class` attribute of the `img` element.
++
++id
++: (`string`) The `id` attribute of the `img` element.
++
++title
++: (`string`) The `title` attribute of the `img` element.
--- /dev/null
--- /dev/null
++---
++title: Ref
++description: Insert a permalink to the given page reference using the ref shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++---
++
++{{% note %}}
++To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl ref %}}
++{{% /note %}}
++
++{{% note %}}
++When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
++
++[content format]: /content-management/formats/
++[link render hooks]: /render-hooks/images/#default
++{{% /note %}}
++
++The `ref` shortcode returns the permalink of the given page reference.
++
++Example usage:
++
++```text
++[Post 1]({{%/* ref "/posts/post-1" */%}})
++[Post 1]({{%/* ref "/posts/post-1.md" */%}})
++[Post 1]({{%/* ref "/posts/post-1#foo" */%}})
++[Post 1]({{%/* ref "/posts/post-1.md#foo" */%}})
++```
++
++Rendered:
++
++```html
++<a href="https://example.org/posts/post-1/">Post 1</a>
++<a href="https://example.org/posts/post-1/">Post 1</a>
++<a href="https://example.org/posts/post-1/#foo">Post 1</a>
++<a href="https://example.org/posts/post-1/#foo">Post 1</a>
++```
++
++{{% note %}}
++Always use the `{{%/* */%}}` notation when calling this shortcode.
++{{% /note %}}
--- /dev/null
--- /dev/null
++---
++title: Relref
++description: Insert a relative permalink to the given page reference using the relref shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++---
++
++{{% note %}}
++To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl relref %}}
++{{% /note %}}
++
++{{% note %}}
++When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
++
++[content format]: /content-management/formats/
++[link render hooks]: /render-hooks/links/
++{{% /note %}}
++
++The `relref` shortcode returns the relative permalink of the given page reference.
++
++Example usage:
++
++```text
++[Post 1]({{%/* relref "/posts/post-1" */%}})
++[Post 1]({{%/* relref "/posts/post-1.md" */%}})
++[Post 1]({{%/* relref "/posts/post-1#foo" */%}})
++[Post 1]({{%/* relref "/posts/post-1.md#foo" */%}})
++```
++
++Rendered:
++
++```html
++<a href="/posts/post-1/">Post 1</a>
++<a href="/posts/post-1/">Post 1</a>
++<a href="/posts/post-1/#foo">Post 1</a>
++<a href="/posts/post-1/#foo">Post 1</a>
++```
++
++{{% note %}}
++Always use the `{{%/* */%}}` notation when calling this shortcode.
++{{% /note %}}
--- /dev/null
--- /dev/null
++---
++title: Vimeo
++description: Embed a Vimeo video in your content using the vimeo shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{% note %}}
++To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl vimeo %}}
++{{% /note %}}
++
++## Example
++
++To display a Vimeo video with this URL:
++
++```text
++https://vimeo.com/channels/staffpicks/55073825
++```
++
++Include this in your Markdown:
++
++```text
++{{</* vimeo 55073825 */>}}
++```
++
++Hugo renders this to:
++
++{{< vimeo 55073825 >}}
++
++## Parameters
++
++class
++: (`string`) The `class` attribute of the wrapping `div` element. Adding one or more CSS classes disables inline styling.
++
++id
++: (`string`) The `id` of the Vimeo video
++
++title
++: (`string`) The `title` attribute of the `iframe` element.
++
++If you proivde a `class` or `title` you must use a named parameter for the `id`.
++
++```text
++{{</* vimeo id=55073825 class="foo bar" title="My Video" */>}}
++```
++
++## Privacy
++
++Adjust the relevant privacy settings in your site configuration.
++
++{{< code-toggle config=privacy.vimeo />}}
++
++disable
++: (`bool`) Whether to disable the shortcode. Default is `false`.
++
++enableDNT
++: (`bool`) Whether to block the Vimeo player from tracking session data and analytics. Default is `false`.
++
++simple
++: (`bool`) Whether to enable simple mode. If `true`, the video thumbnail is fetched from Vimeo and overlaid with a play button. Clicking the thumbnail opens the video in a new Vimeo tab. Default is `false`.
++
++The source code for the simple version of the shortcode is available [here].
++
++[here]: {{% eturl vimeo_simple %}}
--- /dev/null
--- /dev/null
++---
++title: X
++description: Embed an X post in your content using the x shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{< new-in 0.141.0 >}}
++
++{{% note %}}
++To override Hugo's embedded `x` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl x %}}
++{{% /note %}}
++
++## Example
++
++To display an X post with this URL:
++
++```txt
++https://x.com/SanDiegoZoo/status/1453110110599868418
++```
++
++Include this in your Markdown:
++
++```text
++{{</* x user="SanDiegoZoo" id="1453110110599868418" */>}}
++```
++
++Rendered:
++
++{{< x user="SanDiegoZoo" id="1453110110599868418" >}}
++
++## Privacy
++
++Adjust the relevant privacy settings in your site configuration.
++
++{{< code-toggle config=privacy.x />}}
++
++disable
++: (`bool`) Whether to disable the shortcode. Default is `false`.
++
++enableDNT
++: (`bool`) Whether to prevent X from using post and embedded page data for personalized suggestions and ads. Default is `false`.
++
++simple
++: (`bool`) Whether to enable simple mode. If `true`, Hugo builds a static version of the of the post without JavaScript. Default is `false`.
++
++The source code for the simple version of the shortcode is available [here].
++
++[here]: {{% eturl x_simple %}}
++
++If you enable simple mode you may want to disable the hardcoded inline styles by setting `disableInlineCSS` to `true` in your site configuration. The default value for this setting is `false`.
++
++{{< code-toggle config=services.x />}}
--- /dev/null
--- /dev/null
++---
++title: YouTube
++description: Embed a YouTube video in your content using the youtube shortcode.
++categories: [shortcodes]
++keywords: []
++menu:
++ docs:
++ parent: shortcodes
++ weight:
++weight:
++toc: true
++---
++
++{{% note %}}
++To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
++
++[source code]: {{% eturl youtube %}}
++{{% /note %}}
++
++## Example
++
++To display a YouTube video with this URL:
++
++```text
++https://www.youtube.com/watch?v=0RKpf3rK57I
++```
++
++Include this in your Markdown:
++
++```text
++{{</* youtube 0RKpf3rK57I */>}}
++```
++
++Hugo renders this to:
++
++{{< youtube 0RKpf3rK57I >}}
++
++## Parameters
++
++id
++: (`string`) The video `id`. Optional if the `id` is provided as a positional argument as shown in the example above.
++
++allowFullScreen
++{{< new-in 0.125.0 >}}
++: (`bool`) Whether the `iframe` element can activate full screen mode. Default is `true`.
++
++autoplay
++ {{< new-in 0.125.0 >}}
++: (`bool`) Whether to automatically play the video. Forces `mute` to `true`. Default is `false`.
++
++class
++: (`string`) The `class` attribute of the wrapping `div` element. When specified, removes the `style` attributes from the `iframe` element and its wrapping `div` element.
++
++controls
++{{< new-in 0.125.0 >}}
++: (`bool`) Whether to display the video controls. Default is `true`.
++
++end
++{{< new-in 0.125.0 >}}
++: (`int`) The time, measured in seconds from the start of the video, when the player should stop playing the video.
++
++loading
++{{< new-in 0.125.0 >}}
++: (`string`) The loading attribute of the `iframe` element, either `eager` or `lazy`. Default is `eager`.
++
++loop
++{{< new-in 0.125.0 >}}
++: (`bool`) Whether to indefinitely repeat the video. Ignores the `start` and `end` arguments after the first play. Default is `false`.
++
++mute
++{{< new-in 0.125.0 >}}
++: (`bool`) Whether to mute the video. Always `true` when `autoplay` is `true`. Default is `false`.
++
++start
++{{< new-in 0.125.0 >}}
++: (`int`) The time, measured in seconds from the start of the video, when the player should start playing the video.
++
++title
++: (`string`) The `title` attribute of the `iframe` element. Defaults to "YouTube video".
++
++Example using some of the above:
++
++```text
++{{</* youtube id=0RKpf3rK57I start=30 end=60 loading=lazy */>}}
++```
++
++## Privacy
++
++Adjust the relevant privacy settings in your site configuration.
++
++{{< code-toggle config=privacy.youTube />}}
++
++disable
++: (`bool`) Whether to disable the shortcode. Default is `false`.
++
++privacyEnhanced
++: (`bool`) Whether to block YouTube from storing information about visitors on your website unless the user plays the embedded video. Default is `false`.
--- /dev/null
- **Hugo is flexible**. Thanks to Hugo's content and layout system, we were able to preserve our existing file and folder structure and port our entire production site in a few days. We could then create new content types that weren't possible before, like these snazzy [showcases](https://support.1password.com/explore/extension/).
+---
+
+title: 1Password Support
+date: 2018-02-22
+description: "Showcase: \"Compiles 400 pages in five languages in the blink of an eye.\""
+siteURL: https://support.1password.com/
+byline: "[Mitch Cohen](https://github.com/mitchchn), Documentation Team Lead"
+aliases: [/showcase/1password/]
+
+---
+
+At 1Password, we used to go through a different documentation platform every month: blog engines, ebooks, wikis, site generators written in Ruby and JavaScript. Each was inadequate in its own special way. Then we found **Hugo**. We made one last switch, and we're glad we did.
+
+### Not all static site generators are created equal
+
+Finding a tool that will make your customers, writers, designers, _and_ DevOps team happy is no easy task, but we managed it with Hugo:
+
+**Hugo is static**. We're a security company, so we swear by static sites and use them wherever possible. We feel much safer pointing customers at HTML files than at a complicated server which needs to be hardened.
+
+**Hugo is Go**. We love the Go programming language at 1Password, and we were delighted to learn that Hugo used the same Go template syntax that our designers and front-end developers had already mastered.
+
+**Hugo is FAST**. Our previous static site generator took nearly a minute to compile our (then much smaller) site. Developers might be used to this, but it wasn't cutting it for writers who wanted to see live previews of their work. Hugo did the same job in milliseconds, and to this day compiles 400 pages in five languages in the blink of an eye.
+
++**Hugo is flexible**. Thanks to Hugo's content and layout system, we were able to preserve our existing file and directory structure and port our entire production site in a few days. We could then create new content types that weren't possible before, like these snazzy [showcases](https://support.1password.com/explore/extension/).
+
+**Hugo is great for writers**. Our documentation team was already comfortable with Markdown and Git and could start creating content for Hugo with zero downtime. Once we added shortcodes, our writers were able to dress up articles with features like [platform boxes](https://support.1password.com/get-the-apps/) with just a bit of new syntax.
+
+**Hugo has an amazing developer community**. Hugo updates are frequent and filled to the brim with features and fixes. As we developed the multilingual version of our site, we submitted PRs for features we needed and were helped through the process by [@bep](https://github.com/bep) and others.
+
+**Hugo is simple to deploy**. Hugo has just the right amount of configuration options to fit into our build system without being too complicated.
+
+### Tech specs
+
+* [1Password Support](https://support.1password.com) uses Hugo with a custom theme. It shares styles and some template code with [1Password.com](https://1password.com), which we also moved to Hugo in 2016.
+* Code and articles live in a private GitHub repository, which is deployed to a static content server using Git hooks.
+* Writers build and preview the site on their computers and contribute content using pull requests.
+* We use Hugo's [multilingual support](/content-management/multilingual/) to build the site in English, Spanish, French, Italian, German, and Russian. With the help of Hugo, 1Password Support became our very first site in multiple languages.
+* Our [contact form](https://support.1password.com/contact) is a single-page React app. We were able to integrate it with Hugo seamlessly thanks to its support for static files.
+* The one part of the support site which is not static is our search engine, which we developed with Elasticsearch and host on AWS.
--- /dev/null
- ---
+---
+title: Showcases
+draft: true
++---
--- /dev/null
- This project was such a blast to develop, it’s a real pleasure to put new technologies to good use in production, and to see real performance and usability benefits from them. Even using classic web methods of serving folders with files is fun when you’ve been using dynamic systems for a while – there’s something really pure about it.
+---
+
+title: Hartwell Insurance
+
+date: 2018-02-09
+
+description: "Showcase: \"Hugo + Netlify + PWA makes for a rapid website.\""
+
+siteURL: https://www.hartwell-insurance.com/
+
+byline: "[Trys Mudford](http://www.trysmudford.com), Lead Developer, Tomango"
+
+---
+
+We’ve just launched a shiny new website for [Hartwell Insurance](https://www.hartwell-insurance.com/) – I’m really proud of it. It was tackled in a different way to most previous Tomango site builds, using some fancy new tools and some vintage web standards.
+
+It’s a multi-page, single-page (!) website written in Hugo, a static site generator built with performance as a first-class feature. _I’ve outlined a load of benefits to Hugo & static sites [here](https://why-static.netlify.com/), in case you’re interested._
+
+> **In essence, a static site generator pre-renders the whole site into HTML files and serves them like it’s 1995.**
+
+There’s no Apache or Node backend that does compilation at runtime, it’s all done at the build step. This means the server; Netlify in this case, only has to do one thing – serve files. Unsurprisingly, serving simple files is VERY quick.
+
+The starter point was the [Victor Hugo](https://github.com/netlify/victor-hugo) repository that Netlify have created. It let me dive in with Hugo, PostCSS, Browsersync and ES6 without setting up any tooling myself – always a win!
+
+I then took all the content from the design file and moved it into Markdown, putting shortcodes in where necessary. This site did need a number of custom shortcodes for the presentational elements like the expanding circles and full width backgrounds. But mostly it was just clean, semantic HTML with some CSS and JS enhancement thrown in.
+
+For example, this two column layout shown below. I used CSS Columns with a `break-after: always;` on the `<h1>`. No multi-wrapper or difficult-to-clear shortcodes, just clean HTML.
+
+
+
+For the ripple effects on the section headings, I used JS to prepend a `<canvas>` element then animated it with `RequestAnimationFrame`. It adds a nice bit of movement on the page.
+
+On the Hartwell Profitmaker section, I toyed with the idea of using Vue.js for the calculator, but after giving it some thought, I decided to code in Vanilla. The result, all of the site JS comes in at 3.2KB!
+
+The plan was to host with Netlify and therefore get access to Netlify Forms. It meant spending 0 minutes on getting a backend set up – I could focus fully on the frontend.
+
+Cache invalidation isn’t normally something I spend all that much time thinking about when building a site. But as this site was going to be a Progressive Web App, invalidating files would be important to ensure the site didn’t appear broken when we made changes. As I was using Victor-Hugo, I wasn’t really sure how to best tackle this and sadly spent far too many hours wrangling with Webpack and Gulp files to try and get hashed file names working nicely.
+
+Then; while I was waiting for a haircut, I read a [Netlify blog post](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/) on how they do cache invalidation with HTTP2 and it promptly blew my mind.
+
+When you request an asset, they send an ETag in the headers which is a hash of the file. There’s also a header to tell the browser not to trust it’s own cache (which sounds a little bit bonkers).
+
+So when you request the page, it opens a persistent HTTP2 connection up (so no new connections for file requests). When it gets to requesting that asset, the browser sends the ETag back to Netlify and they either return nothing if the ETag matches, or the new file with the new ETag. No `app.klfjlkdsfjdslkfjdslkfdsj.js` or `app.js?v=20180112`. Just a clean `app.js` with instant cache invalidation. Amazing.
+
+Finally, the [Service Worker](https://www.hartwell-insurance.com/sw.js) could be added. This turned out to be straightforward as the Netlify cache invalidation system solved most of the pain points. I went for a network-first, cache-fallback setup for both assets and HTML. This does mean flaky speeds are reliant on the page connection time, but given we’re on HTTP2, I’m hoping the persistent connection and tiny ETag size will keep it quick. For online connections, every request is up to date and instantly live after any update. Offline connections fall back to every assets’ last cached state. It seems to work really nicely, and there’s no need for an update prompt if assets have changed.
+
+---
+
+## The results
+
+The WebPageTest results are looking good. The speed index is 456, 10x smaller than the average Alexa top 300,000 score.
+
+
+
+[TestMySite.io](https://testmysite.io/5a7e1bb2df99531a23c9ad2f/hartwell-insurance.com) is return ~2ms time to first byte from the CDN edge nodes. Lighthouse audits are also very promising. There’s still some improvement to be gained lazy-loading the images and inlining the CSS. I’m less excited about the [second suggestion](http://www.trysmudford.com/css-in-2017/), but I’ll certainly look at some lazy-loading, especially as I’m already using `IntersectionObserver` for some animations.
+
+
+
+The most encouraging result is how quick the site is around the world. Most Tomango clients (and their customers) are pretty local and almost exclusively UK-based. We have a dedicated server in Surrey that serves our market pretty well. It did take me by surprise just how much slower a connection from the USA, Australia and Japan to our server was. They’re waiting ~500ms just for the first byte, let alone downloading each asset.
+
+[Hartwell Insurance](https://www.hartwell-insurance.com/) are a US company so by putting them on our server, we’d be instantly hampering their local response times by literally seconds. This was one of the main reasons for going with Netlify. They provide global CDN hosting that’s quick from anywhere in the world.
+
+---
+
++This project was such a blast to develop, it’s a real pleasure to put new technologies to good use in production, and to see real performance and usability benefits from them. Even using classic web methods of serving directories with files is fun when you’ve been using dynamic systems for a while – there’s something really pure about it.
+
+---
+
+_This was originally posted on [my website](http://www.trysmudford.com/perfomance-wins-with-hugo-and-netlify/)_
--- /dev/null
- {{< tweet user="letsencrypt" id="971755920639307777" >}}
+---
+title: Let’s Encrypt
+date: 2018-03-13
+description: "Showcase: Lessons learned from taking letsencrypt.org to Hugo."
+siteURL: https://letsencrypt.org/
+siteSource: https://github.com/letsencrypt/website
+byline: "[bep](https://github.com/bep), Hugo Lead"
+---
+
+The **Let’s Encrypt website** has a common set of elements: A landing page and some other static info-pages, a document section, a blog, and a documentation section. Having it moved to Hugo was mostly motivated by a _simpler administration and Hugo's [multilingual support](/content-management/multilingual/)_. They already serve HTTPS to more than 60 million domains, and having the documentation available in more languages will increase that reach.[^1]
+
++{{< x user="letsencrypt" id="971755920639307777" >}}
+
+I helped them port the site from Jekyll to Hugo. There are usually very few surprises doing this. I know Hugo very well, but working on sites with a history usually comes up with something new.
+
+That site is bookmarked in many browsers, so preserving the URLs was a must. Hugo's URL handling is very flexible, but there was one challenge. The website has a mix of standard and what we in Hugo call _ugly URLs_ (`https://letsencrypt.org/2017/12/07/looking-forward-to-2018.html`). In Hugo this is handled automatically, and you can turn it on globally or per language. But before Hugo `0.33` you could not configure it for parts of your site. You could set it manually for the relevant pages in front matter -- which is how it was done in Jekyll -- but that would be hard to manage, especially when you start to introduce translations. So, in Hugo 0.33 I added support for _ugly URLs_ per section and also `url` set in front matter for list pages (`https://letsencrypt.org/blog/`).
+
+The lessons learned from this also lead to [disableLanguages](/content-management/multilingual/#disable-a-language) in Hugo `0.34` (a way to turn off languages during translation). And I also registered [this issue](https://github.com/gohugoio/hugo/issues/4463). Once fixed it will make it easier to handle partially translated sites.
+
+[^1]: The work on getting the content translated is in progress.
--- /dev/null
-
+
+**Overmind Studios** is a visual effects studio headquartered in Southern Germany.
+
+The site is built by:
+
+* [Tobias Kummer](https://www.overmind-studios.de/about/)
--- /dev/null
- 2. Run `hugo new content showcase/your-site`. This will use the archetype bundle in the [docs repo](https://github.com/gohugoio/hugoDocs/tree/master/archetypes).
- 3. Follow the instructions in the newly created page bundle.
- 4. Create a new pull request in https://github.com/gohugoio/hugoDocs/pulls.
+---
+title: Hugo Showcase Template
+date: 2018-02-07
+description: "A short description of this page."
+siteURL: https://gohugo.io/
+siteSource: https://github.com/gohugoio/hugoDocs
+byline: "[bep](https://github.com/bep), Hugo Lead"
+---
+Have a **notable Hugo site[^1]**? We would love to feature it in this **Showcase Section**
+
+Please:
+
+1. Fork https://github.com/gohugoio/hugoDocs.
++1. Run `hugo new content showcase/your-site`. This will use the archetype bundle in the [docs repo](https://github.com/gohugoio/hugoDocs/tree/master/archetypes).
++1. Follow the instructions in the newly created page bundle.
++1. Create a new pull request in https://github.com/gohugoio/hugoDocs/pulls.
+
+[^1]: We want this to show Hugo in its best light, so this is not for the average Hugo blog. In most cases the answer to "Is my site [notable](https://www.dictionary.com/browse/notable)?" will be obvious, but if in doubt, create an [issue](https://github.com/gohugoio/hugoDocs/issues) with a link and some words, and we can discuss it. But if you have a site with an interesting Hugo story or a company site where the company itself is notable, you are most welcome.
--- /dev/null
- To render a 404 error page in the root of your site, create a 404 template in the root of the layouts directory. For example:
+---
+title: Custom 404 page
+linkTitle: 404 templates
+description: Create a template to render a 404 error page.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 160
+weight: 160
+---
+
++To render a 404 error page in the root of your site, create a 404 template in the root of the `layouts` directory. For example:
+
+{{< code file=layouts/404.html >}}
+{{ define "main" }}
+ <h1>404 Not Found</h1>
+ <p>The page you requested cannot be found.</p>
+ <p>
+ <a href="{{ .Site.Home.RelPermalink }}">
+ Return to the home page
+ </a>
+ </p>
+{{ end }}
+{{< /code >}}
+
+For multilingual sites, add the language key to the file name:
+
+```text
+layouts/
+├── 404.de.html
+├── 404.en.html
+└── 404.fr.html
+```
+
+Your production server redirects the browser to the 404 page when a page is not found. Capabilities and configuration vary by host.
+
+Host|Capabilities and configuration
+:--|:--
+Amazon CloudFront|See [details](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GeneratingCustomErrorResponses.html).
+Amazon S3|See [details](https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html).
+Apache|See [details](https://httpd.apache.org/docs/2.4/custom-error.html).
+Azure Static Web Apps|See [details](https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#response-overrides).
+Azure Storage|See [details](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website#setting-up-a-static-website).
+Caddy|See [details](https://caddyserver.com/docs/caddyfile/directives/handle_errors).
+Cloudflare Pages|See [details](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior).
+DigitalOcean App Platform|See [details](https://docs.digitalocean.com/products/app-platform/how-to/manage-static-sites/#configure-a-static-site).
+Firebase|See [details](https://firebase.google.com/docs/hosting/full-config#404).
+GitHub Pages|Redirection to is automatic and not configurable.
+GitLab Pages|See [details](https://docs.gitlab.com/ee/user/project/pages/introduction.html#custom-error-codes-pages).
+NGINX|See [details](https://nginx.org/en/docs/http/ngx_http_core_module.html#error_page).
+Netlify|See [details](https://docs.netlify.com/routing/redirects/redirect-options/).
--- /dev/null
- A template is an HTML file with [template actions](/getting-started/glossary/#template-action), located within the layouts directory of a project, theme, or module. Visit the topics below, in the order presented, to understand template selection and creation.
+---
+title: Templates
+linkTitle: In this section
+description: Go templating, template types and lookup order, shortcodes, and data.
+categories: []
+keywords: []
+menu:
+ docs:
+ identifier: templates-in-this-section
+ parent: templates
+ weight: 10
+weight: 10
+aliases: [/templates/overview/,/templates/content]
+---
+
++A template is an HTML file with [template actions](g), located within the `layouts` directory of a project, theme, or module. Visit the topics below, in the order presented, to understand template selection and creation.
--- /dev/null
- ▾ layouts/
- ▾ posts/
- li.html
- single.html
- summary.html
- ▾ project/
- li.html
- single.html
- summary.html
+---
+title: Content view templates
+description: Hugo can render alternative views of your content, useful in list and summary views.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 120
+weight: 120
+toc: true
+aliases: [/templates/views/]
+---
+
+The following are common use cases for content views:
+
+* You want content of every type to be shown on the home page but only with limited [summary views][summaries].
+* You only want a bulleted list of your content in a [taxonomy template]. Views make this very straightforward by delegating the rendering of each different type of content to the content itself.
+
+## Create a content view
+
+To create a new view, create a template in each of your different content type directories with the view name. The following example contains an "li" view and a "summary" view for the `posts` and `project` content types. As you can see, these sit next to the [single template], `single.html`. You can even provide a specific view for a given type and continue to use the `_default/single.html` for the primary view.
+
+```txt
++layouts/
++├── posts/
++│ ├── li.html
++│ ├── single.html
++│ └── summary.html
++├── project/
++│ ├── li.html
++│ └── single.html
++└── summary.html
+```
+
+## Which template will be rendered?
+
+The following is the lookup order for content views ordered by specificity.
+
+1. `/layouts/<TYPE>/<VIEW>.html`
+1. `/layouts/<SECTION>/<VIEW>.html`
+1. `/layouts/_default/<VIEW>.html`
+1. `/themes/<THEME>/layouts/<TYPE>/<VIEW>.html`
+1. `/themes/<THEME>/layouts/<SECTION>/<VIEW>.html`
+1. `/themes/<THEME>/layouts/_default/<VIEW>.html`
+
+## Example: content view inside a list
+
+### `list.html`
+
+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 >}}
+<main id="main">
+ <div>
+ <h1 id="title">{{ .Title }}</h1>
+ {{ range .Pages }}
+ {{ .Render "summary" }}
+ {{ end }}
+ </div>
+</main>
+{{< /code >}}
+
+### `summary.html`
+
+Hugo passes the `Page` object to the following `summary.html` view template.
+
+{{< code file=layouts/_default/summary.html >}}
+<article class="post">
+ <header>
+ <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+ <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
+ </header>
+ {{ .Summary }}
+ <footer>
+ <a href='{{ .RelPermalink }}'>Read more »</a>
+ </footer>
+</article>
+{{< /code >}}
+
+### `li.html`
+
+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 >}}
+<li>
+ <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+ <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
+</li>
+{{< /code >}}
+
+[render]: /methods/page/render/
+[single template]: /templates/types/#single
+[summaries]: /content-management/summaries/
+[taxonomy template]: /templates/types/#taxonomy
--- /dev/null
- To override Hugo's embedded Disqus template, copy the [source code] to a file with the same name in the layouts/partials directory, then call it from your templates using the [`partial`] function:
+---
+title: Embedded templates
+description: Hugo provides embedded templates for common use cases.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 200
+weight: 200
+toc: true
+aliases: [/templates/internal]
+---
+
+## Disqus
+
+{{% note %}}
- To override Hugo's embedded Google Analytics template, copy the [source code] to a file with the same name in the layouts/partials directory, then call it from your templates using the [`partial`] function:
++To override Hugo's embedded Disqus template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
+
+`{{ partial "disqus.html" . }}`
+
+[`partial`]: /functions/partials/include/
+[source code]: {{% eturl disqus %}}
+{{% /note %}}
+
+Hugo includes an embedded template for [Disqus], a popular commenting system for both static and dynamic websites. To effectively use Disqus, secure a Disqus "shortname" by [signing up] for the free service.
+
+[Disqus]: https://disqus.com
+[signing up]: https://disqus.com/profile/signup/
+
+To include the embedded template:
+
+```go-html-template
+{{ template "_internal/disqus.html" . }}
+```
+
+### Configure Disqus
+
+To use Hugo's Disqus template, first set up a single configuration value:
+
+{{< code-toggle file="hugo" >}}
+[services.disqus]
+shortname = 'your-disqus-shortname'
+{{</ code-toggle >}}
+
+Hugo's Disqus template accesses this value with:
+
+```go-html-template
+{{ .Site.Config.Services.Disqus.Shortname }}
+```
+
+You can also set the following in the front matter for a given piece of content:
+
+- `disqus_identifier`
+- `disqus_title`
+- `disqus_url`
+
+## Google Analytics
+
+{{% note %}}
- To override Hugo's embedded Open Graph template, copy the [source code] to a file with the same name in the layouts/partials directory, then call it from your templates using the [`partial`] function:
++To override Hugo's embedded Google Analytics template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
+
+`{{ partial "google_analytics.html" . }}`
+
+[`partial`]: /functions/partials/include/
+[source code]: {{% eturl google_analytics %}}
+{{% /note %}}
+
+Hugo includes an embedded template supporting [Google Analytics 4].
+
+[Google Analytics 4]: https://support.google.com/analytics/answer/10089681
+
+To include the embedded template:
+
+```go-html-template
+{{ template "_internal/google_analytics.html" . }}
+```
+
+### Configure Google Analytics
+
+Provide your tracking ID in your configuration file:
+
+{{< code-toggle file=hugo >}}
+[services.googleAnalytics]
+id = "G-MEASUREMENT_ID"
+{{</ code-toggle >}}
+
+To use this value in your own template, access the configured ID with `{{ site.Config.Services.GoogleAnalytics.ID }}`.
+
+## Open Graph
+
+{{% note %}}
- To override Hugo's embedded Schema template, copy the [source code] to a file with the same name in the layouts/partials directory, then call it from your templates using the [`partial`] function:
++To override Hugo's embedded Open Graph template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
+
+`{{ partial "opengraph.html" . }}`
+
+[`partial`]: /functions/partials/include/
+[source code]: {{% eturl opengraph %}}
+{{% /note %}}
+
+Hugo includes an embedded template for the [Open Graph protocol](https://ogp.me/), metadata that enables a page to become a rich object in a social graph.
+This format is used for Facebook and some other sites.
+
+To include the embedded template:
+
+```go-html-template
+{{ template "_internal/opengraph.html" . }}
+```
+
+### Configure Open Graph
+
+Hugo's Open Graph template is configured using a mix of configuration settings and [front matter](/content-management/front-matter/) on individual pages.
+
+{{< code-toggle file=hugo >}}
+[params]
+ description = 'Text about my cool site'
+ images = ['site-feature-image.jpg']
+ title = 'My cool site'
+ [params.social]
+ facebook_admin = 'jsmith'
+[taxonomies]
+ series = 'series'
+{{</ code-toggle >}}
+
+{{< code-toggle file=content/blog/my-post.md fm=true >}}
+title = "Post title"
+description = "Text about this post"
+date = 2024-03-08T08:18:11-08:00
+images = ["post-cover.png"]
+audio = []
+videos = []
+series = []
+tags = []
+{{</ code-toggle >}}
+
+Hugo uses the page title and description for the title and description metadata.
+The first 6 URLs from the `images` array are used for image metadata.
+If [page bundles](/content-management/page-bundles/) are used and the `images` array is empty or undefined, images with file names matching `*feature*`, `*cover*`, or `*thumbnail*` are used for image metadata.
+
+Various optional metadata can also be set:
+
+- Date, published date, and last modified data are used to set the published time metadata if specified.
+- `audio` and `videos` are URL arrays like `images` for the audio and video metadata tags, respectively.
+- The first 6 `tags` on the page are used for the tags metadata.
+- The `series` taxonomy is used to specify related "see also" pages by placing them in the same series.
+
+If using YouTube this will produce a og:video tag like `<meta property="og:video" content="url">`. Use the `https://youtu.be/<id>` format with YouTube videos (example: `https://youtu.be/qtIqKaDlqXo`).
+
+## Schema
+
+{{% note %}}
- To override Hugo's embedded Twitter Cards template, copy the [source code] to a file with the same name in the layouts/partials directory, then call it from your templates using the [`partial`] function:
++To override Hugo's embedded Schema template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
+
+`{{ partial "schema.html" . }}`
+
+[`partial`]: /functions/partials/include/
+[source code]: {{% eturl schema %}}
+{{% /note %}}
+
+Hugo includes an embedded template to render [microdata] `meta` elements within the `head` element of your templates.
+
+[microdata]: https://html.spec.whatwg.org/multipage/microdata.html#microdata
+
+To include the embedded template:
+
+```go-html-template
+{{ template "_internal/schema.html" . }}
+```
+
+## X (Twitter) Cards
+
+{{% note %}}
++To override Hugo's embedded Twitter Cards template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
+
+`{{ partial "twitter_cards.html" . }}`
+
+[`partial`]: /functions/partials/include/
+[source code]: {{% eturl twitter_cards %}}
+{{% /note %}}
+
+Hugo includes an embedded template for [X (Twitter) Cards](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards),
+metadata used to attach rich media to Tweets linking to your site.
+
+To include the embedded template:
+
+```go-html-template
+{{ template "_internal/twitter_cards.html" . }}
+```
+
+### Configure X (Twitter) Cards
+
+Hugo's X (Twitter) Card template is configured using a mix of configuration settings and [front-matter](/content-management/front-matter/) values on individual pages.
+
+{{< code-toggle file=hugo >}}
+[params]
+ images = ["site-feature-image.jpg"]
+ description = "Text about my cool site"
+{{</ code-toggle >}}
+
+{{< code-toggle file=content/blog/my-post.md >}}
+title = "Post title"
+description = "Text about this post"
+images = ["post-cover.png"]
+{{</ code-toggle >}}
+
+If [page bundles](/content-management/page-bundles/) are used and the `images` array is empty or undefined, images with file names matching `*feature*`, `*cover*`, or `*thumbnail*` are used for image metadata.
+If no image resources with those names are found, the images defined in the [site config](/getting-started/configuration/) are used instead.
+If no images are found at all, then an image-less Twitter `summary` card is used instead of `summary_large_image`.
+
+Hugo uses the page title and description for the card's title and description fields. The page summary is used if no description is given.
+
+Set the value of `twitter:site` in your site configuration:
+
+{{< code-toggle file="hugo" copy=false >}}
+[params.social]
+twitter = "GoHugoIO"
+{{</ code-toggle >}}
+
+NOTE: The `@` will be added for you
+
+```html
+<meta name="twitter:site" content="@GoHugoIO"/>
+```
--- /dev/null
-
+---
+title: Home templates
+description: The home page of a website is often formatted differently than the other pages. For this reason, Hugo makes it easy for you to define your new site's home page as a unique template.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 60
+weight: 60
+toc: true
+aliases: [/layout/homepage/,/templates/homepage-template/,/templates/homepage/]
+---
+
+The home template is the *only* required template for building a site and therefore useful when bootstrapping a new site and template. It is also the only required template if you are developing a single-page website.
+
- The home page accepts content and front matter from an `_index.md` file. This file should live at the root of your `content` folder (i.e., `content/_index.md`). You can then add body copy and metadata to your home page the way you would any other content file.
+{{< youtube ut1xtRZ1QOA >}}
+
+## Home template lookup order
+
+See [Template Lookup](/templates/lookup-order/).
+
+## Add content and front matter to the home page
+
++The home page accepts content and front matter from an `_index.md` file. This file should live at the root of your `content` directory (i.e., `content/_index.md`). You can then add body copy and metadata to your home page the way you would any other content file.
+
+See the home template below or [Content Organization][contentorg] for more information on the role of `_index.md` in adding content and front matter to list pages.
+
+## Example home template
+
+{{< code file=layouts/_default/home.html >}}
+{{ define "main" }}
+ <main aria-role="main">
+ <header class="home-page-header">
+ <h1>{{ .Title }}</h1>
+ {{ with .Params.subtitle }}
+ <span class="subtitle">{{ . }}</span>
+ {{ end }}
+ </header>
+ <div class="home-page-content">
+ <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
+ {{ .Content }}
+ </div>
+ <div>
+ {{ range first 10 .Site.RegularPages }}
+ {{ .Render "summary" }}
+ {{ end }}
+ </div>
+ </main>
+{{ end }}
+{{< /code >}}
+
+[contentorg]: /content-management/organization/
+[lookup]: /templates/lookup-order/
--- /dev/null
- A template is a file in the layouts directory of a project, theme, or module. Templates use [variables] , [functions], and [methods] to transform your content, resources, and data into a published page.
+---
+title: Introduction to templating
+linkTitle: Introduction
+description: Create templates to render your content, resources, and data.
+categories: [templates,fundamentals]
+keywords: []
+menu:
+ docs:
+ identifier: templates-introduction
+ parent: templates
+ weight: 20
+weight: 20
+toc: true
+---
+
- The most important concept to understand before creating a template is _context_, the data passed into each template. The data may be a simple value, or more commonly [objects] and associated [methods].
-
- [objects]: /getting-started/glossary/#object
- [methods]: /getting-started/glossary/#method
++A template is a file in the `layouts` directory of a project, theme, or module. Templates use [variables] , [functions], and [methods] to transform your content, resources, and data into a published page.
+
+[functions]: /functions/
+[methods]: /methods/
+[variables]: #variables
+
+{{% note %}}
+Hugo uses Go's [text/template] and [html/template] packages.
+
+The text/template package implements data-driven templates for generating textual output, while the html/template package implements data-driven templates for generating HTML output safe against code injection.
+
+By default, Hugo uses the html/template package when rendering HTML files.
+
+[text/template]: https://pkg.go.dev/text/template
+[html/template]: https://pkg.go.dev/html/template
+{{% /note %}}
+
+For example, this HTML template initializes the `$v1` and `$v2` variables, then displays them and their product within an HTML paragraph.
+
+```go-html-template
+{{ $v1 := 6 }}
+{{ $v2 := 7 }}
+<p>The product of {{ $v1 }} and {{ $v2 }} is {{ mul $v1 $v2 }}.</p>
+```
+
+While HTML templates are the most common, you can create templates for any [output format] including CSV, JSON, RSS, and plain text.
+
+[output format]: /templates/output-formats/
+
+## Context
+
- In the example above, the context changes as we `range` through the [slice] of values. In the first iteration the context is "foo", and in the second iteration the context is "bar". Inside of the `with` block the context is "baz". Hugo renders the above to:
-
- [slice]: /getting-started/glossary/#slice
++The most important concept to understand before creating a template is _context_, the data passed into each template. The data may be a simple value, or more commonly [objects](g) and associated [methods](g).
+
+For example, a template for a single page receives a `Page` object, and the `Page` object provides methods to return values or perform actions.
+
+### Current context
+
+Within a template, the dot (`.`) represents the current context.
+
+{{< code file=layouts/_default/single.html >}}
+<h2>{{ .Title }}</h2>
+{{< /code >}}
+
+In the example above the dot represents the `Page` object, and we call its [`Title`] method to return the title as defined in [front matter].
+
+[front matter]: /content-management/front-matter/
+[`Title`]: /methods/page/title
+
+The current context may change within a template. For example, at the top of a template the context might be a `Page` object, but we rebind the context to another value or object within [`range`] or [`with`] blocks.
+
+[`range`]: /functions/go-template/range/
+[`with`]: /functions/go-template/with/
+
+{{< code file=layouts/_default/single.html >}}
+<h2>{{ .Title }}</h2>
+
+{{ range slice "foo" "bar" }}
+ <p>{{ . }}</p>
+{{ end }}
+
+{{ with "baz" }}
+ <p>{{ . }}</p>
+{{ end }}
+{{< /code >}}
+
- A template action may contain literal values ([boolean], [string], [integer], and [float]), variables, functions, and methods.
-
- [boolean]: /getting-started/glossary/#boolean
- [string]: /getting-started/glossary/#string
- [integer]: /getting-started/glossary/#integer
- [float]: /getting-started/glossary/#float
++In the example above, the context changes as we `range` through the [slice](g) of values. In the first iteration the context is "foo", and in the second iteration the context is "bar". Inside of the `with` block the context is "baz". Hugo renders the above to:
+
+```html
+<h2>My Page Title</h2>
+<p>foo</p>
+<p>bar</p>
+<p>baz</p>
+```
+
+### Template context
+
+Within a `range` or `with` block you can access the context passed into the template by prepending a dollar sign (`$`) to the dot:
+
+{{< code file=layouts/_default/single.html >}}
+{{ with "foo" }}
+ <p>{{ $.Title }} - {{ . }}</p>
+{{ end }}
+{{< /code >}}
+
+Hugo renders this to:
+
+```html
+<p>My Page Title - foo</p>
+```
+
+{{% note %}}
+Make sure that you thoroughly understand the concept of _context_ before you continue reading. The most common templating errors made by new users relate to context.
+{{% /note %}}
+
+## Actions
+
+In the examples above the paired opening and closing braces represent the beginning and end of a template action, a data evaluation or control structure within a template.
+
- Within a template action you may [pipe] a value to a function or method. The piped value becomes the final argument to the function or method. For example, these are equivalent:
-
- [pipe]: /getting-started/glossary/#pipeline
++A template action may contain literal values ([boolean](g), [string](g), [integer](g), and [float](g)), variables, functions, and methods.
+
+{{< code file=layouts/_default/single.html >}}
+{{ $convertToLower := true }}
+{{ if $convertToLower }}
+ <h2>{{ strings.ToLower .Title }}</h2>
+{{ end }}
+{{< /code >}}
+
+In the example above:
+
+- `$convertToLower` is a variable
+- `true` is a literal boolean value
+- `strings.ToLower` is a function that converts all characters to lowercase
+- `Title` is a method on a the `Page` object
+
+Hugo renders the above to:
+
+```html
+
+
+ <h2>my page title</h2>
+
+```
+
+### Whitespace
+
+Notice the blank lines and indentation in the previous example? Although irrelevant in production when you typically minify the output, you can remove the adjacent whitespace by using template action delimiters with hyphens:
+
+{{< code file=layouts/_default/single.html >}}
+{{- $convertToLower := true -}}
+{{- if $convertToLower -}}
+ <h2>{{ strings.ToLower .Title }}</h2>
+{{- end -}}
+{{< /code >}}
+
+Hugo renders this to:
+
+```html
+<h2>my page title</h2>
+```
+
+Whitespace includes spaces, horizontal tabs, carriage returns, and newlines.
+
+### Pipes
+
- You can also split [raw string literals] over two or more lines. For example, these are equivalent:
-
- [raw string literals]: /getting-started/glossary/#string-literal-raw
++Within a template action you may [pipe](g) a value to a function or method. The piped value becomes the final argument to the function or method. For example, these are equivalent:
+
+```go-html-template
+{{ strings.ToLower "Hugo" }} → hugo
+{{ "Hugo" | strings.ToLower }} → hugo
+```
+
+You can pipe the result of one function or method into another. For example, these are equivalent:
+
+```go-html-template
+{{ strings.TrimSuffix "o" (strings.ToLower "Hugo") }} → hug
+{{ "Hugo" | strings.ToLower | strings.TrimSuffix "o" }} → hug
+```
+
+These are also equivalent:
+
+```go-html-template
+{{ mul 6 (add 2 5) }} → 42
+{{ 5 | add 2 | mul 6 }} → 42
+```
+
+{{% note %}}
+Remember that the piped value becomes the final argument to the function or method to which you are piping.
+{{% /note %}}
+
+### Line splitting
+
+You can split a template action over two or more lines. For example, these are equivalent:
+
+```go-html-template
+{{ $v := or $arg1 $arg2 }}
+
+{{ $v := or
+ $arg1
+ $arg2
+}}
+```
+
- A variable is a user-defined [identifier] prepended with a dollar sign (`$`), representing a value of any data type, initialized or assigned within a template action. For example, `$foo` and `$bar` are variables.
-
- [identifier]: /getting-started/glossary/#identifier
++You can also split [raw string literals](g) over two or more lines. For example, these are equivalent:
+
+```go-html-template
+{{ $msg := "This is line one.\nThis is line two." }}
+
+{{ $msg := `This is line one.
+This is line two.`
+}}
+```
+
+## Variables
+
- Variables may contain [scalars], [slices], [maps], or [objects].
-
- [scalars]: /getting-started/glossary/#scalar
- [slices]: /getting-started/glossary/#slice
- [maps]: /getting-started/glossary/#map
- [objects]: /getting-started/glossary/#object
++A variable is a user-defined [identifier](g) prepended with a dollar sign (`$`), representing a value of any data type, initialized or assigned within a template action. For example, `$foo` and `$bar` are variables.
+
- With variables that represent a map or object, [chain] identifiers to return the desired value or to access the desired method.
-
- [chain]: /getting-started/glossary/#chain
++Variables may contain [scalars](g), [slices](g), [maps](g), or [objects](g).
+
+Use `:=` to initialize a variable, and use `=` to assign a value to a variable that has been previously initialized. For example:
+
+```go-html-template
+{{ $total := 3 }}
+{{ range slice 7 11 21 }}
+ {{ $total = add $total . }}
+{{ end }}
+{{ $total }} → 42
+```
+
+Variables initialized inside of an `if`, `range`, or `with` block are scoped to the block. Variables initialized outside of these blocks are scoped to the template.
+
+With variables that represent a slice or map, use the [`index`] function to return the desired value.
+
+[`index`]: /functions/collections/indexfunction/
+
+```go-html-template
+{{ $slice := slice "foo" "bar" "baz" }}
+{{ index $slice 2 }} → baz
+
+{{ $map := dict "a" "foo" "b" "bar" "c" "baz" }}
+{{ index $map "c" }} → baz
+```
+
+{{% note %}}
+Slices and arrays are zero-based; element 0 is the first element.
+{{% /note %}}
+
- `Site`|[`Data`](methods/site/data/)|Returns a data structure composed from the files in the data directory.
++With variables that represent a map or object, [chain](g) identifiers to return the desired value or to access the desired method.
+
+```go-html-template
+{{ $map := dict "a" "foo" "b" "bar" "c" "baz" }}
+{{ $map.c }} → baz
+
+{{ $homePage := .Site.Home }}
+{{ $homePage.Title }} → My Homepage
+```
+
+{{% note %}}
+As seen above, object and method names are capitalized. Although not required, to avoid confusion we recommend beginning variable and map key names with a lowercase letter or underscore.
+{{% /note %}}
+
+## Functions
+
+Used within a template action, a function takes one or more arguments and returns a value. Unlike methods, functions are not associated with an object.
+
+Go's text/template and html/template packages provide a small set of functions, operators, and statements for general use. See the [go-templates] section of the function documentation for details.
+
+[go-templates]: /functions/go-template/
+
+Hugo provides hundreds of custom [functions] categorized by namespace. For example, the `strings` namespace includes these and other functions:
+
+[functions]: /functions
+
+Function|Alias
+:--|:--
+[`strings.ToLower`](/functions/strings/tolower)|`lower`
+[`strings.ToUpper`](/functions/strings/toupper)|`upper`
+[`strings.Replace`](/functions/strings/replace)|`replace`
+
+As shown above, frequently used functions have an alias. Use aliases in your templates to reduce code length.
+
+When calling a function, separate the arguments from the function, and from each other, with a space. For example:
+
+```go-html-template
+{{ $total := add 1 2 3 4 }}
+```
+
+## Methods
+
+Used within a template action and associated with an object, a method takes zero or more arguments and either returns a value or performs an action.
+
+The most commonly accessed objects are the [`Page`] and [`Site`] objects. This is a small sampling of the [methods] available to each object.
+
+[`Site`]: /methods/site/
+[`Page`]: /methods/page/
+[methods]: /methods/
+
+Object|Method|Description
+:--|:--|:--
+`Page`|[`Date`](methods/page/date/)|Returns the date of the given page.
+`Page`|[`Params`](methods/page/params/)|Returns a map of custom parameters as defined in the front matter of the given page.
+`Page`|[`Title`](methods/page/title/)|Returns the title of the given page.
- [`template`]: functions/go-template/template/
++`Site`|[`Data`](methods/site/data/)|Returns a data structure composed from the files in the `data` directory.
+`Site`|[`Params`](methods/site/params/)|Returns a map of custom parameters as defined in the site configuration.
+`Site`|[`Title`](methods/site/title/)|Returns the title as defined in the site configuration.
+
+Chain the method to its object with a dot (`.`) as shown below, remembering that the leading dot represents the [current context].
+
+[current context]: #current-context
+
+{{< code file=layouts/_default/single.html >}}
+{{ .Site.Title }} → My Site Title
+{{ .Page.Title }} → My Page Title
+{{< /code >}}
+
+The context passed into most templates is a `Page` object, so this is equivalent to the previous example:
+
+{{< code file=layouts/_default/single.html >}}
+{{ .Site.Title }} → My Site Title
+{{ .Title }} → My Page Title
+{{< /code >}}
+
+Some methods take an argument. Separate the argument from the method with a space. For example:
+
+{{< code file=layouts/_default/single.html >}}
+{{ $page := .Page.GetPage "/books/les-miserables" }}
+{{ $page.Title }} → Les Misérables
+{{< /code >}}
+
+## Comments
+
+{{% note %}}
+Do not attempt to use HTML comment delimiters to comment out template code.
+
+Hugo strips HTML comments when rendering a page, but first evaluates any template code within the HTML comment delimiters. Depending on the template code within the HTML comment delimiters, this could cause unexpected results or fail the build.
+{{% /note %}}
+
+Template comments are similar to template actions. Paired opening and closing braces represent the beginning and end of a comment. For example:
+
+```text
+{{/* This is an inline comment. */}}
+{{- /* This is an inline comment with adjacent whitespace removed. */ -}}
+```
+
+Code within a comment is not parsed, executed, or displayed. Comments may be inline, as shown above, or in block form:
+
+```text
+{{/*
+This is a block comment.
+*/}}
+
+{{- /*
+This is a block comment with
+adjacent whitespace removed.
+*/ -}}
+```
+
+You may not nest one comment inside of another.
+
+To render an HTML comment, pass a string through the [`safeHTML`] template function. For example:
+
+[`safeHTML`]: /functions/safe/html
+
+```go-html-template
+{{ "<!-- I am an HTML comment. -->" | safeHTML }}
+{{ printf "<!-- This is the %s site. -->" .Site.Title | safeHTML }}
+```
+
+## Include
+
+Use the [`template`] function to include one or more of Hugo's [embedded templates]:
+
+[embedded templates]: /templates/embedded/
+
+```go-html-template
+{{ template "_internal/google_analytics.html" . }}
+{{ template "_internal/opengraph" . }}
+{{ template "_internal/pagination.html" . }}
+{{ template "_internal/schema.html" . }}
+{{ template "_internal/twitter_cards.html" . }}
+```
+
+[`partial`]: /functions/partials/include/
+[`partialCached`]: /functions/partials/includecached/
++[`template`]: /functions/go-template/template/
+
+Use the [`partial`] or [`partialCached`] function to include one or more [partial templates]:
+
+[partial templates]: /templates/partial
+
+```go-html-template
+{{ partial "breadcrumbs.html" . }}
+{{ partialCached "css.html" . }}
+```
+
+Create your partial templates in the layouts/partials directory.
+
+{{% note %}}
+In the examples above, note that we are passing the current context (the dot) to each of the templates.
+{{% /note %}}
+
+## Examples
+
+This limited set of contrived examples demonstrates some of concepts described above. Please see the [functions], [methods], and [templates] documentation for specific examples.
+
+[templates]: /templates/
+
+### Conditional blocks
+
+See documentation for [`if`], [`else`], and [`end`].
+
+[`if`]: /functions/go-template/if/
+[`else`]: /functions/go-template/else/
+[`end`]: /functions/go-template/end/
+
+```go-html-template
+{{ $var := 42 }}
+{{ if eq $var 6 }}
+ {{ print "var is 6" }}
+{{ else if eq $var 7 }}
+ {{ print "var is 7" }}
+{{ else if eq $var 42 }}
+ {{ print "var is 42" }}
+{{ else }}
+ {{ print "var is something else" }}
+{{ end }}
+```
+
+### Logical operators
+
+See documentation for [`and`] and [`or`].
+
+[`and`]: /functions/go-template/and
+[`or`]: /functions/go-template/or
+
+```go-html-template
+{{ $v1 := true }}
+{{ $v2 := false }}
+{{ $v3 := false }}
+{{ $result := false }}
+
+{{ if and $v1 $v2 $v3 }}
+ {{ $result = true }}
+{{ end }}
+{{ $result }} → false
+
+{{ if or $v1 $v2 $v3 }}
+ {{ $result = true }}
+{{ end }}
+{{ $result }} → true
+```
+
+### Loops
+
+See documentation for [`range`], [`else`], and [`end`].
+
+[`range`]: /functions/go-template/range/
+
+```go-html-template
+{{ $s := slice "foo" "bar" "baz" }}
+{{ range $s }}
+ <p>{{ . }}</p>
+{{ else }}
+ <p>The collection is empty</p>
+{{ end }}
+```
+
+Use the [`seq`] function to loop a specified number of times:
+
+[`seq`]: /functions/collections/seq
+
+```go-html-template
+{{ $total := 0 }}
+{{ range seq 4 }}
+ {{ $total = add $total . }}
+{{ end }}
+{{ $total }} → 10
+```
+
+### Rebind context
+
+See documentation for [`with`], [`else`], and [`end`].
+
+[`with`]: /functions/go-template/with/
+
+```go-html-template
+{{ $var := "foo" }}
+{{ with $var }}
+ {{ . }} → foo
+{{ else }}
+ {{ print "var is falsy" }}
+{{ end }}
+```
+
+To test multiple conditions:
+
+```go-html-template
+{{ $v1 := 0 }}
+{{ $v2 := 42 }}
+{{ with $v1 }}
+ {{ . }}
+{{ else with $v2 }}
+ {{ . }} → 42
+{{ else }}
+ {{ print "v1 and v2 are falsy" }}
+{{ end }}
+```
+
+### Access site parameters
+
+See documentation for the [`Params`](/methods/site/params/) method on a `Site` object.
+
+With this site configuration:
+
+{{< code-toggle file=hugo >}}
+title = 'ABC Widgets'
+baseURL = 'https://example.org'
+[params]
+ subtitle = 'The Best Widgets on Earth'
+ copyright-year = '2023'
+ [params.author]
+ email = 'jsmith@example.org'
+ name = 'John Smith'
+ [params.layouts]
+ rfc_1123 = 'Mon, 02 Jan 2006 15:04:05 MST'
+ rfc_3339 = '2006-01-02T15:04:05-07:00'
+{{< /code-toggle >}}
+
+Access the custom site parameters by chaining the identifiers:
+
+```go-html-template
+{{ .Site.Params.subtitle }} → The Best Widgets on Earth
+{{ .Site.Params.author.name }} → John Smith
+
+{{ $layout := .Site.Params.layouts.rfc_1123 }}
+{{ .Site.Lastmod.Format $layout }} → Tue, 17 Oct 2023 13:21:02 PDT
+```
+
+### Access page parameters
+
+See documentation for the [`Params`](/methods/page/params/) method on a `Page` object.
+
+With this front matter:
+
+{{< code-toggle file=content/news/annual-conference.md >}}
+title = 'Annual conference'
+date = 2023-10-17T15:11:37-07:00
+[params]
+display_related = true
+[params.author]
+ email = 'jsmith@example.org'
+ name = 'John Smith'
+{{< /code-toggle >}}
+
+Access the custom page parameters by chaining the identifiers:
+
+```go-html-template
+{{ .Params.display_related }} → true
+{{ .Params.author.name }} → John Smith
+```
--- /dev/null
- Templates can live in either the project's or the themes' layout folders, and the most specific templates will be chosen. Hugo will interleave the lookups listed below, finding the most specific one either in the project or themes.
+---
+title: Template lookup order
+linkTitle: Lookup order
+description: Hugo uses the rules below to select a template for a given page, starting from the most specific.
+categories: [templates,fundamentals]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 40
+weight: 40
+toc: true
+---
+
+## Lookup rules
+
+Hugo takes the parameters listed below into consideration when choosing a template for a given page. The templates are ordered by specificity. This should feel natural, but look at the table below for concrete examples of the different parameter variations.
+
+Kind
+: The page `Kind` (the home page is one). See the example tables below per kind. This also determines if it is a **single page** (i.e. a regular content page. We then look for a template in `_default/single.html` for HTML) or a **list page** (section listings, home page, taxonomy lists, taxonomy terms. We then look for a template in `_default/list.html` for HTML).
+
+Layout
+: Can be set in front matter.
+
+Output Format
+: See [Custom Output Formats](/templates/output-formats). An output format has both a `name` (e.g. `rss`, `amp`, `html`) and a `suffix` (e.g. `xml`, `html`). We prefer matches with both (e.g. `index.amp.html`), but look for less specific templates.
+
+Note that if the output format's Media Type has more than one suffix defined, only the first is considered.
+
+Language
+: We will consider a language tag in the template name. If the site language is `fr`, `index.fr.amp.html` will win over `index.amp.html`, but `index.amp.html` will be chosen before `index.fr.html`.
+
+Type
+: Is value of `type` if set in front matter, else it is the name of the root section (e.g. "blog"). It will always have a value, so if not set, the value is "page".
+
+Section
+: Is relevant for `section`, `taxonomy` and `term` types.
+
+{{% note %}}
- Files in the root of the content directory have a [content type] of `page`. To render these pages with a unique template, create a matching subdirectory:
-
- [content type]: /getting-started/glossary/#content-type
++Templates can live in either the project's or the themes' `layout` directories, and the most specific templates will be chosen. Hugo will interleave the lookups listed below, finding the most specific one either in the project or themes.
+{{% /note %}}
+
+## Target a template
+
+You cannot change the lookup order to target a content page, but you can change a content page to target a template. Specify `type`, `layout`, or both in front matter.
+
+Consider this content structure:
+
+```text
+content/
+├── about.md
+└── contact.md
+```
+
++Files in the root of the `content` directory have a [content type](g) of `page`. To render these pages with a unique template, create a matching subdirectory:
+
+```text
+layouts/
+└── page/
+ └── single.html
+```
+
+But the contact page probably has a form and requires a different template. In the front matter specify `layout`:
+
+{{< code-toggle file=content/contact.md >}}
+title = 'Contact'
+layout = 'contact'
+{{< /code-toggle >}}
+
+Then create the template for the contact page:
+
+```text
+layouts/
+└── page/
+ └── contact.html <-- renders contact.md
+ └── single.html <-- renders about.md
+```
+
+As a content type, the word `page` is vague. Perhaps `miscellaneous` would be better. Add `type` to the front matter of each page:
+
+{{< code-toggle file=content/about.md >}}
+title = 'About'
+type = 'miscellaneous'
+{{< /code-toggle >}}
+
+{{< code-toggle file=content/contact.md >}}
+title = 'Contact'
+type = 'miscellaneous'
+layout = 'contact'
+{{< /code-toggle >}}
+
+Now place the layouts in the corresponding directory:
+
+```text
+layouts/
+└── miscellaneous/
+ └── contact.html <-- renders contact.md
+ └── single.html <-- renders about.md
+```
+
+## Home templates
+
+These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
+
+{{< datatable-filtered "output" "layouts" "Kind == home" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
+
+## Single templates
+
+These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
+
+{{< datatable-filtered "output" "layouts" "Kind == page" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
+
+## Section templates
+
+These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
+
+{{< datatable-filtered "output" "layouts" "Kind == section" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
+
+## Taxonomy templates
+
+These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
+
+The examples below assume the following site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+category = 'categories'
+{{< /code-toggle >}}
+
+{{< datatable-filtered "output" "layouts" "Kind == taxonomy" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
+
+## Term templates
+
+These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
+
+The examples below assume the following site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+category = 'categories'
+{{< /code-toggle >}}
+
+{{< datatable-filtered "output" "layouts" "Kind == term" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
+
+## RSS templates
+
+These template paths are sorted by specificity in descending order. The least specific path is at the bottom of each list.
+
+The examples below assume the following site configuration:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+category = 'categories'
+{{< /code-toggle >}}
+
+{{< datatable-filtered "output" "layouts" "OutputFormat == rss" "Example" "OutputFormat" "Suffix" "Template Lookup Order" >}}
--- /dev/null
- : To split a [list page] into two or more subsets.
+---
+title: Pagination
+description: Split a list page into two or more subsets.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 190
+weight: 190
+toc: true
+aliases: [/extras/pagination,/doc/pagination/]
+---
+
+Displaying a large page collection on a list page is not user-friendly:
+
+- A massive list can be intimidating and difficult to navigate. Users may get lost in the sheer volume of information.
+- Large pages take longer to load, which can frustrate users and lead to them abandoning the site.
+- Without any filtering or organization, finding a specific item becomes a tedious scrolling exercise.
+
+Improve usability by paginating `home`, `section`, `taxonomy`, and `term` pages.
+
+{{% note %}}
+The most common templating mistake related to pagination is invoking pagination more than once for a given list page. See the [caching](#caching) section below.
+{{% /note %}}
+
+## Terminology
+
+paginate
- [list page]: /getting-started/glossary/#list-page
-
++: To split a [list page](g) into two or more subsets.
+
+pagination
+: The process of paginating a list page.
+
+pager
+: Created during pagination, a pager contains a subset of a list page and navigation links to other pagers.
+
+paginator
+: A collection of pagers.
+
- 2. Sort the page collection by title
- 3. Paginate the page collection, with 7 pages per pager
- 4. Range over the paginated page collection, rendering a link to each page
- 5. Call the embedded pagination template to create navigation links between pagers
-
+## Configuration
+
+Control pagination behavior in your site configuration. These are the default settings:
+
+{{< code-toggle file=hugo config=pagination />}}
+
+disableAliases
+: (`bool`) Whether to disable alias generation for the first pager. Default is `false`.
+
+pagerSize
+: (`int`) The number of pages per pager. Default is `10`.
+
+path
+: (`string`) The segment of each pager URL indicating that the target page is a pager. Default is `page`.
+
+With multilingual sites you can define the pagination behavior for each language:
+
+{{< code-toggle file=hugo >}}
+[languages.en]
+contentDir = 'content/en'
+languageCode = 'en-US'
+languageDirection = 'ltr'
+languageName = 'English'
+weight = 1
+[languages.en.pagination]
+disableAliases = true
+pagerSize = 10
+path = 'page'
+[languages.de]
+contentDir = 'content/de'
+languageCode = 'de-DE'
+languageDirection = 'ltr'
+languageName = 'Deutsch'
+weight = 2
+[languages.de.pagination]
+disableAliases = true
+pagerSize = 20
+path = 'blatt'
+{{< /code-toggle >}}
+
+## Methods
+
+To paginate a `home`, `section`, `taxonomy`, or `term` page, invoke either of these methods on the `Page` object in the corresponding template:
+
+- [`Paginate`]
+- [`Paginator`]
+
+The `Paginate` method is more flexible, allowing you to:
+
+- Paginate any page collection
+- Filter, sort, and group the page collection
+- Override the number of pages per pager as defined in your site configuration
+
+By comparison, the `Paginator` method paginates the page collection passed into the template, and you cannot override the number of pages per pager.
+
+[`Paginate`]: /methods/page/paginate/
+[`Paginator`]: /methods/page/paginator/
+
+## Examples
+
+To paginate a list page using the `Paginate` method:
+
+```go-html-template
+{{ $pages := where site.RegularPages "Type" "posts" }}
+{{ $paginator := .Paginate $pages.ByTitle 7 }}
+
+{{ range $paginator.Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+
+{{ template "_internal/pagination.html" . }}
+```
+
+In the example above, we:
+
+1. Build a page collection
- 2. Range over the paginated page collection, rendering a link to each page
- 3. Call the embedded pagination template to create navigation links between pagers
++1. Sort the page collection by title
++1. Paginate the page collection, with 7 pages per pager
++1. Range over the paginated page collection, rendering a link to each page
++1. Call the embedded pagination template to create navigation links between pagers
+
+To paginate a list page using the `Paginator` method:
+
+```go-html-template
+{{ range .Paginator.Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+
+{{ template "_internal/pagination.html" . }}
+```
+
+In the example above, we:
+
+1. Paginate the page collection passed into the template, with the default number of pages per pager
- To override Hugo's embedded pagination template, copy the [source code] to a file with the same name in the layouts/partials directory, then call it from your templates using the [`partial`] function:
++1. Range over the paginated page collection, rendering a link to each page
++1. Call the embedded pagination template to create navigation links between pagers
+
+## Caching
+
+{{% note %}}
+The most common templating mistake related to pagination is invoking pagination more than once for a given list page.
+{{% /note %}}
+
+Regardless of pagination method, the initial invocation is cached and cannot be changed. If you invoke pagination more than once for a given list page, subsequent invocations use the cached result. This means that subsequent invocations will not behave as written.
+
+When paginating conditionally, do not use the `compare.Conditional` function due to its eager evaluation of arguments. Use an `if-else` construct instead.
+
+[`compare.Conditional`]: /functions/compare/conditional/
+
+## Grouping
+
+Use pagination with any of the [grouping methods]. For example:
+
+[grouping methods]: /quick-reference/page-collections/#group
+
+```go-html-template
+{{ $pages := where site.RegularPages "Type" "posts" }}
+{{ $paginator := .Paginate ($pages.GroupByDate "Jan 2006") }}
+
+{{ range $paginator.PageGroups }}
+ <h2>{{ .Key }}</h2>
+ {{ range .Pages }}
+ <h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
+ {{ end }}
+{{ end }}
+
+{{ template "_internal/pagination.html" . }}
+```
+
+[grouping methods]: /quick-reference/page-collections/#group
+
+## Navigation
+
+As shown in the examples above, the easiest way to add navigation between pagers is with Hugo's embedded pagination template:
+
+```go-html-template
+{{ template "_internal/pagination.html" . }}
+```
+
+The embedded pagination template has two formats: `default` and `terse`. The above is equivalent to:
+
+```go-html-template
+{{ template "_internal/pagination.html" (dict "page" . "format" "default") }}
+```
+
+The `terse` format has fewer controls and page slots, consuming less space when styled as a horizontal list. To use the `terse` format:
+
+```go-html-template
+{{ template "_internal/pagination.html" (dict "page" . "format" "terse") }}
+```
+
+{{% note %}}
++To override Hugo's embedded pagination template, copy the [source code] to a file with the same name in the `layouts/partials` directory, then call it from your templates using the [`partial`] function:
+
+`{{ partial "pagination.html" . }}`
+
+[`partial`]: /functions/partials/include/
+[source code]: {{% eturl pagination %}}
+{{% /note %}}
+
+Create custom navigation components using any of the `Pager` methods:
+
+{{< list-pages-in-section path=/methods/pager >}}
+
+## Structure
+
+The example below depicts the published site structure when paginating a list page.
+
+With this content:
+
+```text
+content/
+├── posts/
+│ ├── _index.md
+│ ├── post-1.md
+│ ├── post-2.md
+│ ├── post-3.md
+│ └── post-4.md
+└── _index.md
+```
+
+And this site configuration:
+
+{{< code-toggle file=hugo >}}
+[pagination]
+ disableAliases = false
+ pagerSize = 2
+ path = 'page'
+{{< /code-toggle >}}
+
+And this section template:
+
+```go-html-template
+{{ range (.Paginate .Pages).Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+{{ end }}
+
+{{ template "_internal/pagination.html" . }}
+```
+
+The published site has this structure:
+
+```text
+public/
+├── posts/
+│ ├── page/
+│ │ ├── 1/
+│ │ │ └── index.html <-- alias to public/posts/index.html
+│ │ └── 2/
+│ │ └── index.html
+│ ├── post-1/
+│ │ └── index.html
+│ ├── post-2/
+│ │ └── index.html
+│ ├── post-3/
+│ │ └── index.html
+│ ├── post-4/
+│ │ └── index.html
+│ └── index.html
+└── index.html
+```
+
+To disable alias generation for the first pager, change your site configuration:
+
+{{< code-toggle file=hugo >}}
+[pagination]
+ disableAliases = true
+ pagerSize = 2
+ path = 'page'
+{{< /code-toggle >}}
+
+Now the published site will have this structure:
+
+```text
+public/
+├── posts/
+│ ├── page/
+│ │ └── 2/
+│ │ └── index.html
+│ ├── post-1/
+│ │ └── index.html
+│ ├── post-2/
+│ │ └── index.html
+│ ├── post-3/
+│ │ └── index.html
+│ ├── post-4/
+│ │ └── index.html
+│ └── index.html
+└── index.html
+```
--- /dev/null
- │ ├── prerender.html
- │ └── twitter.html
+---
+title: Partial templates
+description: Partials are smaller, context-aware components in your list and page templates that can be used economically to keep your templating DRY.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 110
+weight: 110
+toc: true
+aliases: [/templates/partials/,/layout/chrome/]
+---
+
+{{< youtube pjS4pOLyB7c >}}
+
+## Use partials in your templates
+
+All partials for your Hugo project are located in a single `layouts/partials` directory. For better organization, you can create multiple subdirectories within `partials` as well:
+
+```txt
+layouts/
+└── partials/
+ ├── footer/
+ │ ├── scripts.html
+ │ └── site-footer.html
+ ├── head/
+ │ ├── favicons.html
+ │ ├── metadata.html
++ │ └── prerender.html
+ └── header/
+ ├── site-header.html
+ └── site-nav.html
+```
+
+All partials are called within your templates using the following pattern:
+
+```go-html-template
+{{ partial "<PATH>/<PARTIAL>.html" . }}
+```
+
+{{% note %}}
+One of the most common mistakes with new Hugo users is failing to pass a context to the partial call. In the pattern above, note how "the dot" (`.`) is required as the second argument to give the partial context. You can read more about "the dot" in the [Hugo templating introduction](/templates/introduction/#context).
+{{% /note %}}
+
+{{% note %}}
+`<PARTIAL>` including `baseof` is reserved. ([#5373](https://github.com/gohugoio/hugo/issues/5373))
+{{% /note %}}
+
+As shown in the above example directory structure, you can nest your directories within `partials` for better source organization. You only need to call the nested partial's path relative to the `partials` directory:
+
+```go-html-template
+{{ partial "header/site-header.html" . }}
+{{ partial "footer/scripts.html" . }}
+```
+
+### Variable scoping
+
+The second argument in a partial call is the variable being passed down. The above examples are passing the `.`, which tells the template receiving the partial to apply the current [context][context].
+
+This means the partial will *only* be able to access those variables. The partial is isolated and cannot access the outer scope. From within the partial, `$.Var` is equivalent to `.Var`.
+
+## Returning a value from a partial
+
+In addition to outputting markup, partials can be used to return a value of any type. In order to return a value, a partial must include a lone `return` statement *at the end of the partial*.
+
+### Example GetFeatured
+
+```go-html-template
+{{/* layouts/partials/GetFeatured.html */}}
+{{ return first . (where site.RegularPages "Params.featured" true) }}
+```
+
+```go-html-template
+{{/* layouts/index.html */}}
+{{ range partial "GetFeatured.html" 5 }}
+ [...]
+{{ end }}
+```
+
+### Example GetImage
+
+```go-html-template
+{{/* layouts/partials/GetImage.html */}}
+{{ $image := false }}
+{{ with .Params.gallery }}
+ {{ $image = index . 0 }}
+{{ end }}
+{{ with .Params.image }}
+ {{ $image = . }}
+{{ end }}
+{{ return $image }}
+```
+
+```go-html-template
+{{/* layouts/_default/single.html */}}
+{{ with partial "GetImage.html" . }}
+ [...]
+{{ end }}
+```
+
+{{% note %}}
+Only one `return` statement is allowed per partial file.
+{{% /note %}}
+
+## Inline partials
+
+You can also define partials inline in the template. But remember that template namespace is global, so you need to make sure that the names are unique to avoid conflicts.
+
+```go-html-template
+Value: {{ partial "my-inline-partial.html" . }}
+
+{{ define "partials/my-inline-partial.html" }}
+{{ $value := 32 }}
+{{ return $value }}
+{{ end }}
+```
+
+## Cached partials
+
+The `partialCached` template function provides significant performance gains for complex templates that don't need to be re-rendered on every invocation. See [details][partialcached].
+
+## Examples
+
+### `header.html`
+
+The following `header.html` partial template is used for [spf13.com](https://spf13.com/):
+
+{{< 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>
+ <meta charset="utf-8">
+
+ {{ partial "meta.html" . }}
+
+ <base href="{{ .Site.BaseURL }}">
+ <title> {{ .Title }} : spf13.com </title>
+ <link rel="canonical" href="{{ .Permalink }}">
+ {{ if .RSSLink }}<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Title }}" />{{ end }}
+
+ {{ partial "head_includes.html" . }}
+</head>
+{{< /code >}}
+
+{{% note %}}
+The `header.html` example partial was built before the introduction of block templates to Hugo. Read more on [base templates and blocks](/templates/base/) for defining the outer chrome or shell of your master templates (i.e., your site's head, header, and footer). You can even combine blocks and partials for added flexibility.
+{{% /note %}}
+
+### `footer.html`
+
+The following `footer.html` partial template is used for [spf13.com](https://spf13.com/):
+
+{{< code file=layouts/partials/footer.html >}}
+<footer>
+ <div>
+ <p>
+ © 2013-14 Steve Francia.
+ <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution">Some rights reserved</a>;
+ please attribute properly and link back.
+ </p>
+ </div>
+</footer>
+{{< /code >}}
+
+[context]: /templates/introduction/
+[customize]: /hugo-modules/theme-components/
+[lookup order]: /templates/lookup-order/
+[partialcached]: /functions/partials/includecached/
+[themes]: /themes/
--- /dev/null
- 2. `/themes/<THEME>/layouts/robots.txt`
+---
+title: robots.txt template
+linkTitle: robots.txt templates
+description: Hugo can generate a customized robots.txt in the same way as any other template.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 170
+weight: 170
+aliases: [/extras/robots-txt/]
+---
+
+To generate a robots.txt file from a template, change the [site configuration]:
+
+{{< code-toggle file=hugo >}}
+enableRobotsTXT = true
+{{< /code-toggle >}}
+
+By default, Hugo generates robots.txt using an [embedded template].
+
+[embedded template]: {{% eturl robots %}}
+
+```text
+User-agent: *
+```
+
+Search engines that honor the Robots Exclusion Protocol will interpret this as permission to crawl everything on the site.
+
+## robots.txt template lookup order
+
+You may overwrite the internal template with a custom template. Hugo selects the template using this lookup order:
+
+1. `/layouts/robots.txt`
- 2. Create a robots.txt file in the `static` directory.
++1. `/themes/<THEME>/layouts/robots.txt`
+
+## robots.txt template example
+
+{{< code file=layouts/robots.txt >}}
+User-agent: *
+{{ range .Pages }}
+Disallow: {{ .RelPermalink }}
+{{ end }}
+{{< /code >}}
+
+This template creates a robots.txt file with a `Disallow` directive for each page on the site. Search engines that honor the Robots Exclusion Protocol will not crawl any page on the site.
+
+{{% note %}}
+To create a robots.txt file without using a template:
+
+1. Set `enableRobotsTXT` to `false` in the site configuration.
- Remember that Hugo copies everything in the [static directory][static] to the root of `publishDir` (typically `public`) when you build your site.
++1. Create a robots.txt file in the `static` directory.
+
++Remember that Hugo copies everything in the [`static` directory][static] to the root of `publishDir` (typically `public`) when you build your site.
+
+[static]: /getting-started/directory-structure/
+{{% /note %}}
+
+[site configuration]: /getting-started/configuration/
--- /dev/null
- To disable feed generation for all [page kinds]:
-
- [page kinds]: /getting-started/glossary/#page-kind
+---
+title: RSS templates
+description: Use the embedded RSS template, or create your own.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 150
+weight: 150
+toc: true
+---
+
+## Configuration
+
+By default, when you build your site, Hugo generates RSS feeds for home, section, taxonomy, and term pages. Control feed generation in your site configuration. For example, to generate feeds for home and section pages, but not for taxonomy and term pages:
+
+{{< code-toggle file=hugo >}}
+[outputs]
+home = ['html', 'rss']
+section = ['html', 'rss']
+taxonomy = ['html']
+term = ['html']
+{{< /code-toggle >}}
+
++To disable feed generation for all [page kinds](g):
+
+{{< code-toggle file=hugo >}}
+disableKinds = ['rss']
+{{< /code-toggle >}}
+
+By default, the number of items in each feed is unlimited. Change this as needed in your site configuration:
+
+{{< code-toggle file=hugo >}}
+[services.rss]
+limit = 42
+{{< /code-toggle >}}
+
+Set `limit` to `-1` to generate an unlimited number of items per feed.
+
+The built-in RSS template will render the following values, if present, from your site configuration:
+
+{{< code-toggle file=hugo >}}
+copyright = '© 2023 ABC Widgets, Inc.'
+[params.author]
+name = 'John Doe'
+email = 'jdoe@example.org'
+{{< /code-toggle >}}
+
+## Include feed reference
+
+To include a feed reference in the `head` element of your rendered pages, place this within the `head` element of your templates:
+
+```go-html-template
+{{ with .OutputFormats.Get "rss" -}}
+ {{ printf `<link rel=%q type=%q href=%q title=%q>` .Rel .MediaType.Type .Permalink site.Title | safeHTML }}
+{{ end }}
+```
+
+Hugo will render this to:
+
+```html
+<link rel="alternate" type="application/rss+xml" href="https://example.org/index.xml" title="ABC Widgets">
+```
+
+## Custom templates
+
+Override Hugo's [embedded RSS template] by creating one or more of your own, following the naming conventions as shown in the [template lookup order].
+
+[embedded RSS template]: {{% eturl rss %}}
+[template lookup order]: /templates/lookup-order/#rss-templates
+
+For example, to use different templates for home, section, taxonomy, and term pages:
+
+```text
+layouts/
+└── _default/
+ ├── home.rss.xml
+ ├── section.rss.xml
+ ├── taxonomy.rss.xml
+ └── term.rss.xml
+```
+
+RSS templates receive the `.Page` and `.Site` objects in context.
--- /dev/null
- foo|html|en|layouts/shortcodes/foo.en.html
- foo|html|en|layouts/shortcodes/foo.html.html
- foo|html|en|layouts/shortcodes/foo.html
- foo|html|en|layouts/shortcodes/foo.html.en.html
+---
+title: Create your own shortcodes
+linkTitle: Shortcode templates
+description: You can extend Hugo's embedded shortcodes by creating your own using the same templating syntax as that for single and list pages.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 130
+weight: 130
+aliases: [/templates/shortcode-templates/]
+toc: true
+---
+
+Shortcodes are a means to consolidate templating into small, reusable snippets that you can embed directly inside your content.
+
+{{% note %}}
+Hugo also ships with embedded shortcodes for common use cases. (See [Content Management: Shortcodes](/content-management/shortcodes/).)
+{{% /note %}}
+
+## Create custom shortcodes
+
+Hugo's embedded shortcodes cover many common, but not all, use cases. Luckily, Hugo provides the ability to easily create custom shortcodes to meet your website's needs.
+
+{{< youtube Eu4zSaKOY4A >}}
+
+### File location
+
+To create a shortcode, place an HTML template in the `layouts/shortcodes` directory. Consider the file name carefully since the shortcode name will mirror that of the file but without the `.html` extension. For example, `layouts/shortcodes/myshortcode.html` will be called with either `{{</* myshortcode /*/>}}` or `{{%/* myshortcode /*/%}}`.
+
+You can organize your shortcodes in subdirectories, e.g. in `layouts/shortcodes/boxes`. These shortcodes would then be accessible with their relative path, e.g:
+
+```go-html-template
+{{</* boxes/square */>}}
+```
+
+Note the forward slash.
+
+### Template lookup order
+
+Hugo selects shortcode templates based on the shortcode name, the current output format, and the current language. The examples below are sorted by specificity in descending order. The least specific path is at the bottom of the list.
+
+Shortcode name|Output format|Language|Template path
+:--|:--|:--|:--
- foo|rss|en|layouts/shortcodes/foo.en.xml
- foo|rss|en|layouts/shortcodes/foo.rss.xml
- foo|rss|en|layouts/shortcodes/foo.en.html
- foo|rss|en|layouts/shortcodes/foo.rss.en.xml
- foo|rss|en|layouts/shortcodes/foo.xml
- foo|rss|en|layouts/shortcodes/foo.html.en.html
- foo|rss|en|layouts/shortcodes/foo.html.html
- foo|rss|en|layouts/shortcodes/foo.html
++foo|html|en|`layouts/shortcodes/foo.en.html`
++foo|html|en|`layouts/shortcodes/foo.html.html`
++foo|html|en|`layouts/shortcodes/foo.html`
++foo|html|en|`layouts/shortcodes/foo.html.en.html`
+
+Shortcode name|Output format|Language|Template path
+:--|:--|:--|:--
- [figure]: /content-management/shortcodes/#figure
++foo|rss|en|`layouts/shortcodes/foo.en.xml`
++foo|rss|en|`layouts/shortcodes/foo.rss.xml`
++foo|rss|en|`layouts/shortcodes/foo.en.html`
++foo|rss|en|`layouts/shortcodes/foo.rss.en.xml`
++foo|rss|en|`layouts/shortcodes/foo.xml`
++foo|rss|en|`layouts/shortcodes/foo.html.en.html`
++foo|rss|en|`layouts/shortcodes/foo.html.html`
++foo|rss|en|`layouts/shortcodes/foo.html`
+
+Note that templates provided by a theme or module always take precedence.
+
+### Positional vs. named arguments
+
+You can create shortcodes using the following types of arguments:
+
+* Positional arguments
+* Named arguments
+* Positional *or* named arguments
+
+In shortcodes with positional arguments, the order of the arguments is important. If a shortcode has a single required value, positional arguments require less typing from content authors.
+
+For more complex layouts with multiple or optional arguments, named arguments work best. While less terse, named arguments require less memorization from a content author and can be added in a shortcode declaration in any order.
+
+Allowing both types of arguments is useful for complex layouts where you want to set default values that can be easily overridden by users.
+
+### Access arguments
+
+All shortcode arguments can be accessed via the `.Get` method. Whether you pass a string or a number to the `.Get` method depends on whether you are accessing a named or positional argument, respectively.
+
+To access an argument by name, use the `.Get` method followed by the named argument as a quoted string:
+
+```go-html-template
+{{ .Get "class" }}
+```
+
+To access an argument by position, use the `.Get` followed by a numeric position, keeping in mind that positional arguments are zero-indexed:
+
+```go-html-template
+{{ .Get 0 }}
+```
+
+For the second position, you would just use:
+
+```go-html-template
+{{ .Get 1 }}
+```
+
+`with` is great when the output depends on a argument being set:
+
+```go-html-template
+{{ with .Get "class" }} class="{{ . }}"{{ end }}
+```
+
+`.Get` can also be used to check if a argument has been provided. This is
+most helpful when the condition depends on either of the values, or both:
+
+```go-html-template
+{{ if or (.Get "title") (.Get "alt") }} alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "title" }}{{ end }}"{{ end }}
+```
+
+#### `.Inner`
+
+The `.Inner` method returns the content between the opening and closing shortcode tags. To check if `.Inner` returns anything other than whitespace:
+
+```go-html-template
+{{ if strings.ContainsNonSpace .Inner }}
+ Inner is not empty
+{{ end }}
+```
+
+{{% note %}}
+Any shortcode that calls the `.Inner` method must be closed or self-closed. To call a shortcode using the self-closing syntax.
+
+```go-html-template
+{{</* innershortcode /*/>}}
+```
+
+{{% /note %}}
+
+#### `.Params`
+
+The `.Params` method in shortcodes returns the arguments passed to the shortcode for more complicated use cases. You can also access higher-scoped arguments with the following logic:
+
+$.Params
+: these are the arguments passed directly into the shortcode declaration (e.g., a YouTube video ID)
+
+$.Page.Params
+: refers to the page's parameters; the "page" in this case refers to the content file in which the shortcode is declared (e.g., a `shortcode_color` field in a content's front matter could be accessed via `$.Page.Params.shortcode_color`).
+
+$.Site.Params
+: refers to parameters defined in your site configuration.
+
+#### `.IsNamedParams`
+
+The `.IsNamedParams` method checks whether the shortcode declaration uses named arguments and returns a boolean value.
+
+For example, you could create an `image` shortcode that can take either a `src` named argument or the first positional argument, depending on the preference of the content's author. Let's assume the `image` shortcode is called as follows:
+
+```go-html-template
+{{</* image src="images/my-image.jpg" */>}}
+```
+
+You could then include the following as part of your shortcode templating:
+
+```go-html-template
+{{ if .IsNamedParams }}
+ <img src="{{ .Get "src" }}" alt="">
+{{ else }}
+ <img src="{{ .Get 0 }}" alt="">
+{{ end }}
+```
+
+See the [example Vimeo shortcode][vimeoexample] below for `.IsNamedParams` in action.
+
+{{% note %}}
+While you can create shortcode templates that accept both positional and named arguments, you *cannot* declare shortcodes in content with a mix of argument types. Therefore, a shortcode declared like `{{</* image src="images/my-image.jpg" "This is my alt text" */>}}` will return an error.
+{{% /note %}}
+
+Shortcodes can also be nested. In a nested shortcode, you can access the parent shortcode context with the [`.Parent`] shortcode method. This can be very useful for inheritance from the root.
+
+### Checking for existence
+
+You can check if a specific shortcode is used on a page by calling `.HasShortcode` in that page template, providing the name of the shortcode. This is useful when you want to include specific scripts or styles in the header that are only used by that shortcode.
+
+## Custom shortcode examples
+
+The following are examples of the different types of shortcodes you can create via shortcode template files in `/layouts/shortcodes`.
+
+### Single-word example: `year`
+
+Let's assume you would like to keep mentions of your copyright year current in your content files without having to continually review your Markdown. Your goal is to be able to call the shortcode as follows:
+
+```go-html-template
+{{</* year */>}}
+```
+
+{{< code file=layouts/shortcodes/year.html >}}
+{{ now.Format "2006" }}
+{{< /code >}}
+
+### Single positional example: `youtube`
+
+Embedded videos are a common addition to Markdown content. The following is the code used by [Hugo's built-in YouTube shortcode][youtubeshortcode]:
+
+```go-html-template
+{{</* youtube 09jf3ow9jfw */>}}
+```
+
+Would load the template at `/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 >}}
+<div class="embed video-player">
+ <iframe class="youtube-player" type="text/html"
+ width="640" height="385"
+ src="https://www.youtube.com/embed/09jf3ow9jfw"
+ allowfullscreen frameborder="0">
+ </iframe>
+</div>
+{{< /code >}}
+
+### Single named example: `image`
+
+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 >}}
+{{</* 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 >}}
+<!-- image -->
+<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
+ {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
+ <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
+ {{ if .Get "link" }}</a>{{ end }}
+ {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
+ <figcaption>{{ if isset .Params "title" }}
+ <h4>{{ .Get "title" }}</h4>{{ end }}
+ {{ if or (.Get "caption") (.Get "attr") }}<p>
+ {{ .Get "caption" }}
+ {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
+ {{ .Get "attr" }}
+ {{ if .Get "attrlink" }}</a> {{ end }}
+ </p> {{ end }}
+ </figcaption>
+ {{ end }}
+</figure>
+<!-- image -->
+{{< /code >}}
+
+Would be rendered as:
+
+{{< code file=img-output.html >}}
+<figure>
+ <img src="/media/spf13.jpg" />
+ <figcaption>
+ <h4>Steve Francia</h4>
+ </figcaption>
+</figure>
+{{< /code >}}
+
+### Single flexible example: `vimeo`
+
+```go-html-template
+{{</* vimeo 49718712 */>}}
+{{</* vimeo id="49718712" class="flex-video" */>}}
+```
+
+Would load the template found at `/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>
+ </div>
+{{ else }}
+ <div class="{{ if len .Params | eq 2 }}{{ .Get 1 }}{{ else }}vimeo-container{{ end }}">
+ <iframe src="https://player.vimeo.com/video/{{ .Get 0 }}" allowfullscreen></iframe>
+ </div>
+{{ end }}
+{{< /code >}}
+
+Would be rendered as:
+
+{{< code file=vimeo-iframes.html >}}
+<div class="vimeo-container">
+ <iframe src="https://player.vimeo.com/video/49718712" allowfullscreen></iframe>
+</div>
+<div class="flex-video">
+ <iframe src="https://player.vimeo.com/video/49718712" allowfullscreen></iframe>
+</div>
+{{< /code >}}
+
+### Paired example: `highlight`
+
+The following is taken from `highlight`, which is a [built-in shortcode] that ships with Hugo.
+
+{{< code file=highlight-example.md >}}
+{{</* highlight html */>}}
+ <html>
+ <body> This HTML </body>
+ </html>
+{{</* /highlight */>}}
+{{< /code >}}
+
+The template for the `highlight` shortcode uses the following code, which is already included in Hugo:
+
+```go-html-template
+{{ .Get 0 | highlight .Inner }}
+```
+
+The rendered output of the HTML example code block will be as follows:
+
+{{< code file=syntax-highlighted.html >}}
+<div class="highlight" style="background: #272822"><pre style="line-height: 125%"><span style="color: #f92672"><html></span>
+ <span style="color: #f92672"><body></span> This HTML <span style="color: #f92672"></body></span>
+<span style="color: #f92672"></html></span>
+</pre></div>
+{{< /code >}}
+
+### Nested shortcode: image gallery
+
+Hugo's [`.Parent`] shortcode method provides access to the parent shortcode context when the shortcode in question is called within the context of a parent shortcode. This provides an inheritance model.
+
+The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` argument:
+
+{{< code file=layouts/shortcodes/gallery.html >}}
+<div class="{{ .Get "class" }}">
+ {{ .Inner }}
+</div>
+{{< /code >}}
+
+You also have an `img` shortcode with a single named `src` argument 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 >}}
+{{- $src := .Get "src" -}}
+{{- with .Parent -}}
+ <img src="{{ $src }}" class="{{ .Get "class" }}-image">
+{{- else -}}
+ <img src="{{ $src }}">
+{{- end -}}
+{{< /code >}}
+
+You can then call your shortcode in your content as follows:
+
+```go-html-template
+{{</* gallery class="content-gallery" */>}}
+ {{</* img src="/images/one.jpg" */>}}
+ {{</* img src="/images/two.jpg" */>}}
+{{</* /gallery */>}}
+{{</* img src="/images/three.jpg" */>}}
+```
+
+This will output the following HTML. Note how the first two `img` shortcodes inherit the `class` value of `content-gallery` set with the call to the parent `gallery`, whereas the third `img` only uses `src`:
+
+```html
+<div class="content-gallery">
+ <img src="/images/one.jpg" class="content-gallery-image">
+ <img src="/images/two.jpg" class="content-gallery-image">
+</div>
+<img src="/images/three.jpg">
+```
+
+## Error handling in shortcodes
+
+Use the [`errorf`] template function with the [`Name`] and [`Position`] shortcode methods to generate useful error messages:
+
+{{< code file=layouts/shortcodes/greeting.html >}}
+{{ with .Get "name" }}
+ <p>Hello, my name is {{ . }}.</p>
+{{ else }}
+ {{ errorf "The %q shortcode requires a 'name' argument. See %s" .Name .Position }}
+{{ end }}
+{{< /code >}}
+
+When the above fails, you will see an `ERROR` message such as:
+
+```sh
+ERROR The "greeting" shortcode requires a 'name' argument. See "/home/user/project/content/_index.md:12:1"
+```
+
+## Inline shortcodes
+
+You can also implement your shortcodes inline -- e.g. where you use them in the content file. This can be useful for scripting that you only need in one place.
+
+This feature is disabled by default, but can be enabled in your site configuration:
+
+{{< code-toggle file=hugo >}}
+[security]
+enableInlineShortcodes = true
+{{< /code-toggle >}}
+
+It is disabled by default for security reasons. The security model used by Hugo's template handling assumes that template authors are trusted, but that the content files are not, so the templates are injection-safe from malformed input data. But in most situations you have full control over the content, too, and then `enableInlineShortcodes = true` would be considered safe. But it's something to be aware of: It allows ad-hoc [Go Text templates](https://golang.org/pkg/text/template/) to be executed from the content files.
+
+And once enabled, you can do this in your content files:
+
+ ```go-html-template
+ {{</* time.inline */>}}{{ now }}{{</* /time.inline */>}}
+ ```
+
+The above will print the current date and time.
+
+Note that an inline shortcode's inner content is parsed and executed as a Go text template with the same context as a regular shortcode template.
+
+This means that the current page can be accessed via `.Page.Title` etc. This also means that there are no concept of "nested inline shortcodes".
+
+The same inline shortcode can be reused later in the same content file, with different arguments if needed, using the self-closing syntax:
+
+ ```go-html-template
+{{</* time.inline /*/>}}
+```
+
+[`.Parent`]: /methods/shortcode/parent/
+[`errorf`]: /functions/fmt/errorf/
+[`Name`]: /methods/shortcode/name/
+[`Position`]: /methods/shortcode/position/
+[built-in shortcode]: /content-management/shortcodes/
- [youtubeshortcode]: /content-management/shortcodes/#youtube
++[figure]: /shortcodes/figure/
+[lookup order]: /templates/lookup-order/
+[source organization]: /getting-started/directory-structure/
+[vimeoexample]: #single-flexible-example-vimeo
++[youtubeshortcode]: /shortcodes/youtube/
--- /dev/null
- - layouts/sitemap.xml
- - layouts/_default/sitemap.xml
+---
+title: Sitemap templates
+description: Hugo provides built-in sitemap templates.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 140
+weight: 140
+toc: true
+aliases: [/layout/sitemap/,/templates/sitemap-template/]
+---
+
+## Overview
+
+Hugo's embedded sitemap templates conform to v0.9 of the [sitemap protocol].
+
+With a monolingual project, Hugo generates a sitemap.xml file in the root of the [`publishDir`] using the [embedded sitemap template].
+
+With a multilingual project, Hugo generates:
+
+- A sitemap.xml file in the root of each site (language) using the [embedded sitemap template]
+- A sitemap.xml file in the root of the [`publishDir`] using the [embedded sitemapindex template]
+
+[embedded sitemap template]: {{% eturl sitemap %}}
+[embedded sitemapindex template]: {{% eturl sitemapindex %}}
+
+## Configuration
+
+These are the default sitemap configuration values. They apply to all pages unless overridden in front matter.
+
+{{< code-toggle config=sitemap />}}
+
+changefreq
+: (`string`) How frequently a page is likely to change. Valid values are `always`, `hourly`, `daily`, `weekly`, `monthly`, `yearly`, and `never`. With the default value of `""` Hugo will omit this field from the sitemap. See [details](https://www.sitemaps.org/protocol.html#changefreqdef).
+
+disable {{< new-in 0.125.0 >}}
+: (`bool`) Whether to disable page inclusion. Default is `false`. Set to `true` in front matter to exclude the page.
+
+filename
+: (`string`) The name of the generated file. Default is `sitemap.xml`.
+
+priority
+: (`float`) The priority of a page relative to any other page on the site. Valid values range from 0.0 to 1.0. With the default value of `-1` Hugo will omit this field from the sitemap. See [details](https://www.sitemaps.org/protocol.html#priority).
+
+## Override default values
+
+Override the default values for a given page in front matter.
+
+{{< code-toggle file=news.md fm=true >}}
+title = 'News'
+[sitemap]
+ changefreq = 'weekly'
+ disable = true
+ priority = 0.8
+{{</ code-toggle >}}
+
+## Override built-in templates
+
+To override the built-in sitemap.xml template, create a new file in either of these locations:
+
- - layouts/sitemapindex.xml
- - layouts/_default/sitemapindex.xml
++- `layouts/sitemap.xml`
++- `layouts/_default/sitemap.xml`
+
+When ranging through the page collection, access the _change frequency_ and _priority_ with `.Sitemap.ChangeFreq` and `.Sitemap.Priority` respectively.
+
+To override the built-in sitemapindex.xml template, create a new file in either of these locations:
+
- [sitemap protocol]: <https://www.sitemaps.org/protocol.html>
++- `layouts/sitemapindex.xml`
++- `layouts/_default/sitemapindex.xml`
+
+## Disable sitemap generation
+
+You may disable sitemap generation in your site configuration:
+
+{{< code-toggle file=hugo >}}
+disableKinds = ['sitemap']
+{{</ code-toggle >}}
+
+[`publishDir`]: /getting-started/configuration#publishdir
++[sitemap protocol]: https://www.sitemaps.org/protocol.html
--- /dev/null
- The [taxonomy] template below inherits the site's shell from the [base template], and renders a list of [terms] in the current taxonomy.
+---
+title: Taxonomy templates
+description: Create a taxonomy template to render a list of terms.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 90
+weight: 90
+toc: true
+aliases: [/taxonomies/displaying/,/templates/terms/,/indexes/displaying/,/taxonomies/templates/,/indexes/ordering/, /templates/taxonomies/, /templates/taxonomy-templates/]
+---
+
- [taxonomy]: /getting-started/glossary/#taxonomy
- [terms]: /getting-started/glossary/#term
++The [taxonomy](g) template below inherits the site's shell from the [base template], and renders a list of [terms](g) in the current taxonomy.
+
- : (`page.Taxonomy`) Returns the `Taxonomy` object, consisting of a map of terms and the [weighted pages] associated with each term.
-
- [weighted pages]: /getting-started/glossary/#weighted-page
+[base template]: /templates/types/
+
+{{< code file=layouts/_default/taxonomy.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+Review the [template lookup order] to select a template path that provides the desired level of specificity.
+
+[template lookup order]: /templates/lookup-order/#taxonomy-templates
+
+In the example above, the taxonomy and term will be capitalized if their respective pages are not backed by files. You can disable this in your site configuration:
+
+{{< code-toggle file=hugo >}}
+capitalizeListTitles = false
+{{< /code-toggle >}}
+
+## Data object
+
+Use these methods on the `Data` object within a taxonomy template.
+
+Singular
+: (`string`) Returns the singular name of the taxonomy.
+
+```go-html-template
+{{ .Data.Singular }} → tag
+```
+
+Plural
+: (`string`) Returns the plural name of the taxonomy.
+
+```go-html-template
+{{ .Data.Plural }} → tags
+```
+
+Terms
- The [`Alphabetical`] and [`ByCount`] methods used in the previous examples return an [ordered taxonomy], so we can also list the content to which each term is assigned.
++: (`page.Taxonomy`) Returns the `Taxonomy` object, consisting of a map of terms and the [weighted pages](g) associated with each term.
+
+```go-html-template
+{{ $taxonomyObject := .Data.Terms }}
+```
+
+Once we have the `Taxonomy` object, we can call any of its [methods], allowing us to sort alphabetically or by term count.
+
+[methods]: /methods/taxonomy/
+
+## Sort alphabetically
+
+The taxonomy template below inherits the site's shell from the base template, and renders a list of terms in the current taxonomy. Hugo sorts the list alphabetically by term, and displays the number of pages associated with each term.
+
+{{< code file=layouts/_default/taxonomy.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Data.Terms.Alphabetical }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+## Sort by term count
+
+The taxonomy template below inherits the site's shell from the base template, and renders a list of terms in the current taxonomy. Hugo sorts the list by the number of pages associated with each term, and displays the number of pages associated with each term.
+
+{{< code file=layouts/_default/taxonomy.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Data.Terms.ByCount }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+## Include content links
+
- [ordered taxonomy]: /getting-started/glossary/#ordered-taxonomy
++The [`Alphabetical`] and [`ByCount`] methods used in the previous examples return an [ordered taxonomy](g), so we can also list the content to which each term is assigned.
+
- Display metadata about each term by creating a corresponding branch bundle in the content directory.
+[`Alphabetical`]: /methods/taxonomy/alphabetical/
+[`ByCount`]: /methods/taxonomy/bycount/
+
+The taxonomy template below inherits the site's shell from the base template, and renders a list of terms in the current taxonomy. Hugo sorts the list by the number of pages associated with each term, displays the number of pages associated with each term, then lists the content to which each term is assigned.
+
+{{< code file=layouts/_default/taxonomy.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Data.Terms.ByCount }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
+ <ul>
+ {{ range .WeightedPages }}
+ <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+ {{ end }}
+ </ul>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+## Display metadata
+
- Then create content with one [branch bundle] for each term:
-
- [branch bundle]: /getting-started/glossary/#branch-bundle
++Display metadata about each term by creating a corresponding branch bundle in the `content` directory.
+
+For example, create an "authors" taxonomy:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+author = 'authors'
+{{< /code-toggle >}}
+
++Then create content with one [branch bundle](g) for each term:
+
+```text
+content/
+└── authors/
+ ├── jsmith/
+ │ ├── _index.md
+ │ └── portrait.jpg
+ └── rjones/
+ ├── _index.md
+ └── portrait.jpg
+```
+
+Then add front matter to each term page:
+
+{{< code-toggle file=content/authors/jsmith/_index.md fm=true >}}
+title = "John Smith"
+affiliation = "University of Chicago"
+{{< /code-toggle >}}
+
+Then create a taxonomy template specific to the "authors" taxonomy:
+
+{{< code file=layouts/authors/taxonomy.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Data.Terms.Alphabetical }}
+ <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a></h2>
+ <p>Affiliation: {{ .Page.Params.Affiliation }}</p>
+ {{ with .Page.Resources.Get "portrait.jpg" }}
+ {{ with .Fill "100x100" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="portrait">
+ {{ end }}
+ {{ end }}
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+In the example above we list each author including their affiliation and portrait.
--- /dev/null
- The [term] template below inherits the site's shell from the [base template], and renders a list of pages associated with the current term.
+---
+title: Term templates
+description: Create a term template to render a list of pages associated with the current term.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 100
+weight: 100
+toc: true
+---
+
- [term]: /getting-started/glossary/#term
++The [term](g) template below inherits the site's shell from the [base template], and renders a list of pages associated with the current term.
+
- Display metadata about each term by creating a corresponding branch bundle in the content directory.
+[base template]: /templates/types/
+
+{{< code file=layouts/_default/term.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+Review the [template lookup order] to select a template path that provides the desired level of specificity.
+
+[template lookup order]: /templates/lookup-order/#taxonomy-templates
+
+In the example above, the term will be capitalized if its respective page is not backed by a file. You can disable this in your site configuration:
+
+{{< code-toggle file=hugo >}}
+capitalizeListTitles = false
+{{< /code-toggle >}}
+
+## Data object
+
+Use these methods on the `Data` object within a term template.
+
+Singular
+: (`string`) Returns the singular name of the taxonomy.
+
+```go-html-template
+{{ .Data.Singular }} → tag
+```
+
+Plural
+: (`string`) Returns the plural name of the taxonomy.
+
+```go-html-template
+{{ .Data.Plural }} → tags
+```
+
+Term
+: (`string`) Returns the name of the term.
+
+```go-html-template
+{{ .Data.Term }} → fiction
+```
+
+## Display metadata
+
- Then create content with one [branch bundle] for each term:
-
- [branch bundle]: /getting-started/glossary/#branch-bundle
++Display metadata about each term by creating a corresponding branch bundle in the `content` directory.
+
+For example, create an "authors" taxonomy:
+
+{{< code-toggle file=hugo >}}
+[taxonomies]
+author = 'authors'
+{{< /code-toggle >}}
+
++Then create content with one [branch bundle](g) for each term:
+
+```text
+content/
+└── authors/
+ ├── jsmith/
+ │ ├── _index.md
+ │ └── portrait.jpg
+ └── rjones/
+ ├── _index.md
+ └── portrait.jpg
+```
+
+Then add front matter to each term page:
+
+{{< code-toggle file=content/authors/jsmith/_index.md fm=true >}}
+title = "John Smith"
+affiliation = "University of Chicago"
+{{< /code-toggle >}}
+
+Then create a term template specific to the "authors" taxonomy:
+
+{{< code file=layouts/authors/term.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ <p>Affiliation: {{ .Params.affiliation }}</p>
+ {{ with .Resources.Get "portrait.jpg" }}
+ {{ with .Fill "100x100" }}
+ <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="portrait">
+ {{ end }}
+ {{ end }}
+ {{ .Content }}
+ {{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+In the example above we display the author with their affiliation and portrait, then a list of associated content.
--- /dev/null
- Create templates in the layouts directory in the root of your project.
+---
+title: Template types
+linkTitle: Template types
+description: Create templates of different types to render your content, resources, and data.
+categories: [templates]
+keywords: []
+menu:
+ docs:
+ parent: templates
+ weight: 30
+weight: 30
+toc: true
+aliases: ['/templates/lists/']
+---
+
+[](site-hierarchy.svg)
+
+## Structure
+
- A taxonomy template renders a list of terms in a [taxonomy].
-
- [taxonomy]: /getting-started/glossary/#taxonomy
++Create templates in the `layouts` directory in the root of your project.
+
+Although your site may not require each of these templates, the example below is typical for a site of medium complexity.
+
+```text
+layouts/
+├── _default/
+│ ├── _markup/
+│ │ ├── render-image.html <-- render hook
+│ │ └── render-link.html <-- render hook
+│ ├── baseof.html
+│ ├── home.html
+│ ├── section.html
+│ ├── single.html
+│ ├── taxonomy.html
+│ └── term.html
+├── articles/
+│ └── card.html <-- content view
+├── partials/
+│ ├── footer.html
+│ └── header.html
+└── shortcodes/
+ ├── audio.html
+ └── video.html
+```
+
+Hugo's [template lookup order] determines the template path, allowing you to create unique templates for any page.
+
+[template lookup order]: /templates/lookup-order/
+
+{{% note %}}
+You must have thorough understanding of the [template lookup order] when creating templates. Template selection is based on template type, page kind, content type, section, language, and output format.
+
+[template lookup order]: /templates/lookup-order/
+{{% /note %}}
+
+The purpose of each template type is described below.
+
+## Base
+
+Base templates reduce duplicate code by wrapping other templates within a shell.
+
+For example, the base template below calls the [partial] function to include partial templates for the `head`, `header`, and `footer` elements of each page, and it uses the [block] function to include `home`, `single`, `section`, `taxonomy`, and `term` templates within the `main` element of each page.
+
+[block]: /functions/go-template/block/
+[partial]: /functions/partials/include/
+
+{{< code file=layouts/_default/baseof.html >}}
+<!DOCTYPE html>
+<html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
+<head>
+ {{ partial "head.html" . }}
+</head>
+<body>
+ <header>
+ {{ partial "header.html" . }}
+ </header>
+ <main>
+ {{ block "main" . }}{{ end }}
+ </main>
+ <footer>
+ {{ partial "footer.html" . }}
+ </footer>
+</body>
+</html>
+{{< /code >}}
+
+Learn more about [base templates](/templates/base/).
+
+## Home
+
+A home template renders your site's home page. For a single page site this is the only required template.
+
+For example, the home template below inherits the site's shell from the base template, and renders the home page content with a list of pages.
+
+{{< code file=layouts/_default/home.html >}}
+{{ define "main" }}
+ {{ .Content }}
+ {{ range site.RegularPages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+{{% include "templates/_common/filter-sort-group.md" %}}
+
+Learn more about [home templates](/templates/home/).
+
+## Single
+
+A single template renders a single page.
+
+For example, the single template below inherits the site's shell from the base template, and renders the title and content of each page.
+
+{{< code file=layouts/_default/single.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+{{ end }}
+{{< /code >}}
+
+Learn more about [single templates](/templates/single/).
+
+## Section
+
+A section template typically renders a list of pages within a section.
+
+For example, the section template below inherits the site's shell from the base template, and renders a list of pages in the current section.
+
+{{< code file=layouts/_default/section.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+{{% include "templates/_common/filter-sort-group.md" %}}
+
+Learn more about [section templates](/templates/section/).
+
+## Taxonomy
+
- A term template renders a list of pages associated with a [term].
-
- [term]: /getting-started/glossary/#term
++A taxonomy template renders a list of terms in a [taxonomy](g).
+
+For example, the taxonomy template below inherits the site's shell from the base template, and renders a list of terms in the current taxonomy.
+
+{{< code file=layouts/_default/taxonomy.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+{{% include "templates/_common/filter-sort-group.md" %}}
+
+Learn more about [taxonomy templates](/templates/taxonomy/).
+
+## Term
+
- For example, the shortcode template below renders an audio element from a [global resource].
-
- [global resource]: /getting-started/glossary/#global-resource
++A term template renders a list of pages associated with a [term](g).
+
+For example, the term template below inherits the site's shell from the base template, and renders a list of pages associated with the current term.
+
+{{< code file=layouts/_default/term.html >}}
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ {{ range .Pages }}
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ end }}
+{{ end }}
+{{< /code >}}
+
+{{% include "templates/_common/filter-sort-group.md" %}}
+
+Learn more about [term templates](/templates/term/).
+
+## Partial
+
+A partial template is typically used to render a component of your site, though you may also create partial templates that return values.
+
+{{% note %}}
+Unlike other template types, you cannot create partial templates to target a particular page kind, content type, section, language, or output format. Partial templates do not follow Hugo's [template lookup order].
+
+[template lookup order]: /templates/lookup-order/
+{{% /note %}}
+
+For example, the partial template below renders copyright information.
+
+{{< code file=layouts/partials/footer.html >}}
+<p>Copyright {{ now.Year }}. All rights reserved.</p>
+{{< /code >}}
+
+Learn more about [partial templates](/templates/partial/).
+
+## Content view
+
+A content view template is similar to a partial template, invoked by calling the [`Render`] method on a `Page` object. Unlike partial templates, content view templates:
+
+- Automatically inherit the context of the current page
+- Follow a lookup order allowing you to target a given content type or section
+
+[`Render`]: /methods/page/render/
+
+For example, the home template below inherits the site's shell from the base template, and renders a card component for each page within the "articles" section of your site.
+
+{{< code file=layouts/_default/home.html >}}
+{{ define "main" }}
+ {{ .Content }}
+ <ul>
+ {{ range where site.RegularPages "Section" "articles" }}
+ {{ .Render "card" }}
+ {{ end }}
+ </ul>
+{{ end }}
+{{< /code >}}
+
+{{< code file=layouts/articles/card.html >}}
+<div class="card">
+ <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+ {{ .Summary }}
+</div>
+{{< /code >}}
+
+Learn more about [content view templates](/templates/content-view/).
+
+## Render hook
+
+A render hook template overrides the conversion of Markdown to HTML.
+
+For example, the render hook template below adds a `rel` attribute to external links.
+
+{{< code file=layouts/_default/_markup/render-link.html >}}
+{{- $u := urls.Parse .Destination -}}
+<a href="{{ .Destination | safeURL }}"
+ {{- with .Title }} title="{{ . }}"{{ end -}}
+ {{- if $u.IsAbs }} rel="external"{{ end -}}
+>
+ {{- with .Text | safeHTML }}{{ . }}{{ end -}}
+</a>
+{{- /* chomp trailing newline */ -}}
+{{< /code >}}
+
+Learn more about [render hook templates](/render-hooks/).
+
+## Shortcode
+
+A shortcode template is used to render a component of your site. Unlike partial templates, shortcode templates are called from content pages.
+
++For example, the shortcode template below renders an audio element from a [global resource](g).
+
+{{< code file=layouts/shortcodes/audio.html >}}
+{{ with resources.Get (.Get "src") }}
+ <audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
+{{ end }}
+{{< /code >}}
+
+Call the shortcode from your content page:
+
+{{< code file=content/example.md >}}
+{{</* audio src="audio/test.mp3" */>}}
+{{< /code >}}
+
+Learn more about [shortcode templates](/templates/shortcode/).
+
+## Other
+
+Use other specialized templates to create:
+
+- [Sitemaps](/templates/sitemap)
+- [RSS feeds](/templates/rss/)
+- [404 error pages](/templates/404/)
+- [robots.txt files](/templates/robots/)
--- /dev/null
- : Migrates your DokuWiki source pages from [DokuWiki syntax](https://www.dokuwiki.org/wiki:syntax) to Hugo Markdown syntax. Includes extras like the TODO plugin. Written with extensibility in mind using Python 3. Also generates a TOML header for each page. Designed to copy-paste the wiki directory into your /content directory.
+---
+title: Migrate to Hugo
+linkTitle: Migrations
+description: A list of community-developed tools for migrating from your existing static site generator or content management system to Hugo.
+categories: [developer tools]
+keywords: [migrations,jekyll,wordpress,drupal,ghost,contentful]
+menu:
+ docs:
+ parent: developer-tools
+ weight: 50
+weight: 50
+toc: true
+aliases: [/developer-tools/migrations/, /developer-tools/migrated/]
+---
+
+This section highlights some independently developed projects related to Hugo. These tools extend functionality or help you to get started.
+
+Take a look at this list of migration tools if you currently use other blogging tools like Jekyll or WordPress but intend to switch to Hugo instead. They'll help you export your content into Hugo-friendly formats.
+
+## Jekyll
+
+Alternatively, you can use the [Jekyll import command](/commands/hugo_import_jekyll/).
+
+[JekyllToHugo](https://github.com/fredrikloch/JekyllToHugo)
+: A Small script for converting Jekyll blog posts to a Hugo site.
+
+[ConvertToHugo](https://github.com/coderzh/ConvertToHugo)
+: Convert your blog from Jekyll to Hugo.
+
+## Octopress
+
+[octohug](https://github.com/codebrane/octohug)
+: Octopress to Hugo migrator.
+
+## DokuWiki
+
+[dokuwiki-to-hugo](https://github.com/wgroeneveld/dokuwiki-to-hugo)
++: Migrates your DokuWiki source pages from [DokuWiki syntax](https://www.dokuwiki.org/wiki:syntax) to Hugo Markdown syntax. Includes extras like the TODO plugin. Written with extensibility in mind using Python 3. Also generates a TOML header for each page. Designed to copy-paste the wiki directory into your `content` directory.
+
+## WordPress
+
+[wordpress-to-hugo-exporter](https://github.com/SchumacherFM/wordpress-to-hugo-exporter)
+: A one-click WordPress plugin that converts all posts, pages, taxonomies, metadata, and settings to Markdown and YAML which can be dropped into Hugo. (Note: If you have trouble using this plugin, you can [export your site for Jekyll](https://wordpress.org/plugins/jekyll-exporter/) and use Hugo's built-in Jekyll converter listed above.)
+
+[blog2md](https://github.com/palaniraja/blog2md)
+: Works with [exported xml](https://en.support.wordpress.com/export/) file of your free YOUR-TLD.wordpress.com website. It also saves approved comments to `YOUR-POST-NAME-comments.md` file along with posts.
+
+[wordhugopress](https://github.com/nantipov/wordhugopress)
+: A small utility written in Java that exports the entire WordPress site from the database and resource (e.g., images) files stored locally or remotely. Therefore, migration from the backup files is possible. Supports merging multiple WordPress sites into a single Hugo site.
+
+[wp2hugo](https://github.com/ashishb/wp2hugo)
+: A Go-based CLI tool to migrate WordPress website to Hugo while preserving original URLs, GUIDs (for feeds), image URLs, code highlights, table of contents, YouTube embeds, Google Maps embeds, and original WordPress navigation categories.
+
+## Medium
+
+[medium2md](https://github.com/gautamdhameja/medium-2-md)
+: A simple Medium to Hugo exporter able to import stories in one command, including front matter.
+
+[medium-to-hugo](https://github.com/bgadrian/medium-to-hugo)
+: A CLI tool written in Go to export medium posts into a Hugo-compatible Markdown format. Tags and images are included. All images will be downloaded locally and linked appropriately.
+
+## Tumblr
+
+[tumblr-importr](https://github.com/carlmjohnson/tumblr-importr)
+: An importer that uses the Tumblr API to create a Hugo static site.
+
+[tumblr2hugomarkdown](https://github.com/Wysie/tumblr2hugomarkdown)
+: Export all your Tumblr content to Hugo Markdown files with preserved original formatting.
+
+[Tumblr to Hugo](https://github.com/jipiboily/tumblr-to-hugo)
+: A migration tool that converts each of your Tumblr posts to a content file with a proper title and path. It also generates a CSV file to help you set up URL redirects.
+
+## Drupal
+
+[drupal2hugo](https://github.com/danapsimer/drupal2hugo)
+: Convert a Drupal site to Hugo.
+
+## Joomla
+
+[hugojoomla](https://github.com/davetcc/hugojoomla)
+: This utility written in Java takes a Joomla database and converts all the content into Markdown files. It changes any URLs that are in Joomla's internal format and converts them to a suitable form.
+
+## Blogger
+
+[blogimport](https://github.com/natefinch/blogimport)
+: A tool to import from Blogger posts to Hugo.
+
+[blogger-to-hugo](https://pypi.org/project/blogger-to-hugo/)
+: Another tool to import Blogger posts to Hugo. It also downloads embedded images so they will be stored locally.
+
+[blog2md](https://github.com/palaniraja/blog2md)
+: Works with [exported xml](https://support.google.com/blogger/answer/41387?hl=en) file of your YOUR-TLD.blogspot.com website. It also saves comments to `YOUR-POST-NAME-comments.md` file along with posts.
+
+[BloggerToHugo](https://github.com/huanlin/blogger-to-hugo)
+: Yet another tool to import Blogger posts to Hugo. For Windows platform only, and .NET Framework 4.5 is required. See README.md before using this tool.
+
+## Contentful
+
+[contentful-hugo](https://github.com/ModiiMedia/contentful-hugo)
+: A tool to create content-files for Hugo from content on [Contentful](https://www.contentful.com/).
+
+## BlogML
+
+[BlogML2Hugo](https://github.com/jijiechen/BlogML2Hugo)
+: A tool that helps you convert BlogML xml file to Hugo Markdown files. Users need to take care of links to attachments and images by themselves. This helps the blogs that export BlogML files (e.g. BlogEngine.NET) transform to hugo sites easily.
--- /dev/null
- [INFINI Pizza for WebAssembly](https://github.com/infinilabs/pizza-docsearch)
+---
+title: Search tools
+linkTitle: Search
+description: See some of the open-source and commercial search options for your newly created Hugo website.
+categories: [developer tools]
+keywords: [search]
+menu:
+ docs:
+ parent: developer-tools
+ weight: 40
+weight: 40
+toc: true
+---
+
+A static website with a dynamic search function? Yes, Hugo provides an alternative to embeddable scripts from Google or other search engines for static websites. Hugo allows you to provide your visitors with a custom search function by indexing your content files directly.
+
+## Open-source
+
+[Pagefind](https://github.com/cloudcannon/pagefind)
+: A fully static search library that aims to perform well on large sites, while using as little of your users' bandwidth as possible.
+
+[GitHub Gist for Hugo Workflow](https://gist.github.com/sebz/efddfc8fdcb6b480f567)
+: This gist contains a simple workflow to create a search index for your static website. It uses a simple Grunt script to index all your content files and [lunr.js](https://lunrjs.com/) to serve the search results.
+
+[hugo-lunr](https://www.npmjs.com/package/hugo-lunr)
+: A simple way to add site search to your static Hugo site using [lunr.js](https://lunrjs.com/). Hugo-lunr will create an index file of any HTML and Markdown documents in your Hugo project.
+
+[hugo-lunr-zh](https://www.npmjs.com/package/hugo-lunr-zh)
+: A bit like Hugo-lunr, but Hugo-lunr-zh can help you separate the Chinese keywords.
+
+[GitHub Gist for Fuse.js integration](https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae)
+: This gist demonstrates how to leverage Hugo's existing build time processing to generate a searchable JSON index used by [Fuse.js](https://fusejs.io/) on the client-side. Although this gist uses Fuse.js for fuzzy matching, any client-side search tool capable of reading JSON indexes will work. Does not require npm, grunt, or other build-time tools except Hugo!
+
+[hugo-search-index](https://www.npmjs.com/package/hugo-search-index)
+: A library containing Gulp tasks and a prebuilt browser script that implements search. Gulp generates a search index from project Markdown files.
+
+[hugofastsearch](https://gist.github.com/cmod/5410eae147e4318164258742dd053993)
+: A usability and speed update to "GitHub Gist for Fuse.js integration" — global, keyboard-optimized search.
+
+[JS & Fuse.js tutorial](https://makewithhugo.com/add-search-to-a-hugo-site/)
+: A simple client-side search solution, using FuseJS (does not require jQuery).
+
+[Hugo Lyra](https://github.com/paolomainardi/hugo-lyra)
+: Hugo-Lyra is a JavaScript module to integrate [Lyra](https://github.com/LyraSearch/lyra) into a Hugo website. It contains the server-side part to generate the index and the client-side library (optional) to bootstrap the search engine easily.
+
-
++[INFINI Pizza for WebAssembly](https://github.com/infinilabs/pizza-docsearch)
+: Pizza is a super-lightweight yet fully featured search engine written in Rust. You can quickly add offline search functionality to your Hugo website in just five minutes with only three lines of code. For a step-by-step guide on integrating it with Hugo, check out [this blog tutorial](https://dev.to/medcl/adding-search-functionality-to-a-hugo-static-site-based-on-infini-pizza-for-webassembly-4h5e).
+
+## Commercial
+
+[Algolia](https://www.algolia.com/)
+: Algolia's Search API makes it easy to deliver a great search experience in your apps and websites. Algolia Search provides hosted full-text, numerical, faceted, and geolocalized search.
+
+[Bonsai](https://www.bonsai.io)
+: Bonsai is a fully-managed hosted Elasticsearch service that is fast, reliable, and simple to set up. Easily ingest your docs from Hugo into Elasticsearch following [this guide from the docs](https://bonsai.io/docs/hugo).
+
+[ExpertRec](https://www.expertrec.com/)
+: ExpertRec is a hosted search-as-a-service solution that is fast and scalable. Set-up and integration is extremely easy and takes only a few minutes. The search settings can be modified without coding using a dashboard.
--- /dev/null
- 2. Use Thing Two instead.
- 3. We're going to remove Thing One at some point in the future.
+---
+title: Deprecation
+description: The Hugo project follows a formal and consistent process to deprecate functions, methods, and configuration settings.
+categories: [troubleshooting]
+keywords: []
+menu:
+ docs:
+ parent: troubleshooting
+ weight: 50
+weight: 50
+---
+
+When a project _deprecates_ something, they are telling its users:
+
+1. Don't use Thing One anymore.
- 2. Log a WARN message for another 6 minor releases
- 3. Log an ERROR message and fail the build thereafter
++1. Use Thing Two instead.
++1. We're going to remove Thing One at some point in the future.
+
+[reasons for deprecation]: https://en.wikipedia.org/wiki/Deprecation
+
+Common [reasons for deprecation]:
+
+- A feature has been replaced by a more powerful alternative.
+- A feature contains a design flaw.
+- A feature is considered extraneous, and will be removed in the future in order to simplify the system as a whole.
+- A future version of the software will make major structural changes, making it impossible or impractical to support older features.
+- Standardization or increased consistency in naming.
+- A feature that once was available only independently is now combined with its co-feature.
+
+After the project team deprecates something in code, Hugo will:
+
+1. Log an INFO message for 6 minor releases[^1]
++1. Log a WARN message for another 6 minor releases
++1. Log an ERROR message and fail the build thereafter
+
+To see the INFO messages, you must use the `--logLevel` command line flag:
+
+```text
+hugo --logLevel info
+```
+
+To limit the output to deprecation notices:
+
+```text
+hugo --logLevel info | grep deprecate
+```
+
+Run the above command every time you upgrade Hugo.
+
+[^1]: For example, v0.1.1 => v0.2.0 is a minor release.
--- /dev/null
- # Use level 6 headings for each question.
+---
+title: Frequently asked questions
+linkTitle: FAQs
+description: These questions are frequently asked by new users.
+categories: [troubleshooting]
+keywords: [faq]
+menu:
+ docs:
+ parent: troubleshooting
+ weight: 70
+weight: 70
- In the content/_index.md file:
+---
+
+Hugo’s [forum] is an active community of users and developers who answer questions, share knowledge, and provide examples. A quick search of over 20,000 topics will often answer your question. Please be sure to read about [requesting help] before asking your first question.
+
+These are just a few of the questions most frequently asked by new users.
+
+###### An error message indicates that a feature is not available. Why? {#feature-not-available}
+
+{{% include "installation/_common/01-editions.md" %}}
+
+When you attempt to use a feature that is not available in the edition that you installed, Hugo throws this error:
+
+```go-html-template
+this feature is not available in this edition of Hugo
+```
+
+To resolve, install a different edition based on the feature table above. See the [installation] section for details.
+
+###### Why do I see "Page Not Found" when visiting the home page?
+
- In the content/section/page.md file, or in the content/section/page/index.md file:
++In the `content/_index.md` file:
+
+ - Is `draft` set to `true`?
+ - Is the `date` in the future?
+ - Is the `publishDate` in the future?
+ - Is the `expiryDate` in the past?
+
+If the answer to any of these questions is yes, either change the field values, or use one of these command line flags: `--buildDrafts`, `--buildFuture`, or `--buildExpired`.
+
+###### Why is a given page not published?
+
- - Is `draft` set to `true`?
- - Is the `date` in the future?
- - Is the `publishDate` in the future?
- - Is the `expiryDate` in the past?
++In the `content/section/page.md` file, or in the `content/section/page/index.md` file:
+
- You may have an index.md file instead of an _index.md file. See [details](/content-management/page-bundles/).
++- Is `draft` set to `true`?
++- Is the `date` in the future?
++- Is the `publishDate` in the future?
++- Is the `expiryDate` in the past?
+
+If the answer to any of these questions is yes, either change the field values, or use one of these command line flags: `--buildDrafts`, `--buildFuture`, or `--buildExpired`.
+
+###### Why can't I see any of a page's descendants?
+
- A directory with an index.md file is a [leaf bundle]. A directory with an _index.md file is a [branch bundle]. See [details](/content-management/page-bundles/).
-
- [branch bundle]: /getting-started/glossary/#branch-bundle
- [leaf bundle]: /getting-started/glossary/#leaf-bundle
++You may have an `index.md` file instead of an `_index.md` file. See [details](/content-management/page-bundles/).
+
+###### What is the difference between an index.md file and an _index.md file?
+
- You may have neglected to pass the required [context] when calling the partial. For example:
++A directory with an `index.md file` is a [leaf bundle](g). A directory with an `_index.md` file is a [branch bundle](g). See [details](/content-management/page-bundles/).
+
+###### Why is my partial template not rendered as expected?
+
- The [`Scratch`] and [`Store`] methods on a `Page` object allow you to create a [scratch pad] on the given page to store and manipulate data. Values are often set within a shortcode, a partial template called by a shortcode, or by a Markdown render hook. In all three cases, the scratch pad values are not determinate until Hugo renders the page content.
-
- [scratch pad]: /getting-started/glossary/#scratch-pad
-
- If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop] variable:
++You may have neglected to pass the required [context](g) when calling the partial. For example:
+
+```go-html-template
+{{/* incorrect */}}
+{{ partial "_internal/pagination.html" }}
+
+{{/* correct */}}
+{{ partial "_internal/pagination.html" . }}
+```
+
+###### In a template, what's the difference between `:=` and `=` when assigning values to variables?
+
+Use `:=` to initialize a variable, and use `=` to assign a value to a variable that has been previously initialized. See [details](https://pkg.go.dev/text/template#hdr-Variables).
+
+###### When I paginate a list page, why is the page collection not filtered as specified?
+
+You are probably invoking the [`Paginate`] or [`Paginator`] method more than once on the same page. See [details](/templates/pagination/).
+
+###### Why are there two ways to call a shortcode?
+
+Use the `{{%/* shortcode */%}}` notation if the shortcode template, or the content between the opening and closing shortcode tags, contains Markdown. Otherwise use the\
+`{{</* shortcode */>}}` notation. See [details](/content-management/shortcodes/).
+
+###### Can I use environment variables to control configuration?
+
+Yes. See [details](/getting-started/configuration/#configure-with-environment-variables).
+
+###### Why am I seeing inconsistent output from one build to the next?
+
+The most common causes are page collisions (publishing two pages to the same path) and the effects of concurrency. Use the `--printPathWarnings` command line flag to check for page collisions, and create a topic on the [forum] if you suspect concurrency problems.
+
+###### Why isn't Hugo's development server detecting file changes?
+
+In its default configuration, Hugo's file watcher may not be able detect file changes when:
+
+- Running Hugo within Windows Subsystem for Linux (WSL/WSL2) with project files on a Windows partition
+- Running Hugo locally with project files on a removable drive
+- Running Hugo locally with project files on a storage server accessed via the NFS, SMB, or CIFS protocols
+
+In these cases, instead of monitoring native file system events, use the `--poll` command line flag. For example, to poll the project files every 700 milliseconds, use `--poll 700ms`.
+
+###### Why is my page Scratch or Store missing a value?
+
- [noop]: /getting-started/glossary/#noop
++The [`Scratch`] and [`Store`] methods on a `Page` object allow you to create a [scratch pad](g) on the given page to store and manipulate data. Values are often set within a shortcode, a partial template called by a shortcode, or by a Markdown render hook. In all three cases, the scratch pad values are not determinate until Hugo renders the page content.
+
- [context]: /getting-started/glossary/#context
++If you need to access a scratch pad value from a parent template, and the parent template has not yet rendered the page content, you can trigger content rendering by assigning the returned value to a [noop](g) variable:
+
+```go-html-template
+{{ $noop := .Content }}
+{{ .Store.Get "mykey" }}
+```
+
+You can trigger content rendering with other methods as well. See next FAQ.
+
+[`Scratch`]: /methods/page/scratch
+[`Store`]: /methods/page/store
+
+###### Which page methods trigger content rendering?
+
+The following methods on a `Page` object trigger content rendering: `Content`, `ContentWithoutSummary`, `FuzzyWordCount`, `Len`, `Plain`, `PlainWords`, `ReadingTime`, `Summary`, `Truncated`, and `WordCount`.
+
+{{% note %}}
+For other questions please visit the [forum]. A quick search of over 20,000 topics will often answer your question. Please be sure to read about [requesting help] before asking your first question.
+
+[forum]: https://discourse.gohugo.io
+[requesting help]: https://discourse.gohugo.io/t/requesting-help/9132
+{{% /note %}}
+
+[`Paginate`]: /methods/page/paginate/
+[`Paginator`]: /methods/page/paginator/
+[forum]: https://discourse.gohugo.io
+[installation]: /installation/
+[requesting help]: https://discourse.gohugo.io/t/requesting-help/9132
--- /dev/null
- : The path to the template, relative to the layouts directory.
+---
+title: Performance
+description: Tools and suggestions for evaluating and improving performance.
+categories: [troubleshooting]
+keywords: []
+menu:
+ docs:
+ parent: troubleshooting
+ weight: 60
+weight: 60
+toc: true
+aliases: [/troubleshooting/build-performance/]
+---
+
+## Virus scanning
+
+Virus scanners are an essential component of system protection, but the performance impact can be severe for applications like Hugo that frequently read and write to disk. For example, with Microsoft Defender Antivirus, build times for some sites may increase by 400% or more.
+
+Before building a site, your virus scanner has already evaluated the files in your project directory. Scanning them again while building the site is superfluous. To improve performance, add Hugo's executable to your virus scanner's process exclusion list.
+
+For example, with Microsoft Defender Antivirus:
+
+**Start** > **Settings** > **Privacy & security** > **Windows Security** > **Open Windows Security** > **Virus & threat protection** > **Manage settings** > **Add or remove exclusions** > **Add an exclusion** > **Process**
+
+Then type `hugo.exe` add press the **Add** button.
+
+{{% note %}}
+Virus scanning exclusions are common, but use caution when changing these settings. See the [Microsoft Defender Antivirus documentation](https://support.microsoft.com/en-us/topic/how-to-add-a-file-type-or-process-exclusion-to-windows-security-e524cbc2-3975-63c2-f9d1-7c2eb5331e53) for details.
+{{% /note %}}
+
+Other virus scanners have similar exclusion mechanisms. See their respective documentation.
+
+## Template metrics
+
+Hugo is fast, but inefficient templates impede performance. Enable template metrics to determine which templates take the most time, and to identify caching opportunities:
+
+```sh
+hugo --templateMetrics --templateMetricsHints
+```
+
+The result will look something like this:
+
+```text
+Template Metrics:
+
+ cumulative average maximum cache percent cached total
+ duration duration duration potential cached count count template
+ ---------- -------- -------- --------- ------- ------ ----- --------
+ 36.037476822s 135.990478ms 225.765245ms 11 0 0 265 partials/head.html
+ 35.920040902s 164.018451ms 233.475072ms 0 0 0 219 articles/single.html
+ 34.163268129s 128.917992ms 224.816751ms 23 0 0 265 partials/head/meta/opengraph.html
+ 1.041227437s 3.92916ms 186.303376ms 47 0 0 265 partials/head/meta/schema.html
+ 805.628827ms 27.780304ms 114.678523ms 0 0 0 29 _default/list.html
+ 624.08354ms 15.221549ms 108.420729ms 8 0 0 41 partials/utilities/render-page-collection.html
+ 545.968801ms 775.523µs 105.045775ms 0 0 0 704 _default/summary.html
+ 334.680981ms 1.262947ms 127.412027ms 100 0 0 265 partials/head/js.html
+ 272.763205ms 2.050851ms 24.371757ms 0 0 0 133 _default/_markup/render-codeblock.html
+ 230.490038ms 8.865001ms 177.4615ms 0 0 0 26 shortcodes/template.html
+ 176.921913ms 176.921913ms 176.921913ms 0 0 0 1 examples.tmpl
+ 163.951469ms 14.904679ms 70.267953ms 0 0 0 11 articles/list.html
+ 153.07021ms 577.623µs 73.593597ms 100 0 0 265 partials/head/init.html
+ 150.910984ms 150.910984ms 150.910984ms 0 0 0 1 _default/single.html
+ 146.785804ms 146.785804ms 146.785804ms 0 0 0 1 _default/contact.html
+ 115.364617ms 115.364617ms 115.364617ms 0 0 0 1 authors/term.html
+ 87.392071ms 329.781µs 10.687132ms 100 0 0 265 partials/head/css.html
+ 86.803122ms 86.803122ms 86.803122ms 0 0 0 1 _default/home.html
+```
+
+From left to right, the columns represent:
+
+cumulative duration
+: The cumulative time spent executing the template.
+
+average duration
+: The average time spent executing the template.
+
+maximum duration
+: The maximum time spent executing the template.
+
+cache potential
+: Displayed as a percentage, any partial template with a 100% cache potential should be called with the [`partialCached`] function instead of the [`partial`] function. See the [caching](#caching) section below.
+
+percent cached
+: The number of times the rendered templated was cached divided by the number of times the template was executed.
+
+cached count
+: The number of times the rendered templated was cached.
+
+total count
+: The number of times the template was executed.
+
+template
- Use the `debug.Timer` function to determine execution time for a block of code, useful for finding performance bottle necks in templates. See [details](/functions/debug/timer/).
++: The path to the template, relative to the `layouts` directory.
+
+[`partial`]: /functions/partials/include/
+[`partialCached`]: /functions/partials/includecached/
+
+{{% note %}}
+Hugo builds pages in parallel where multiple pages are generated simultaneously. Because of this parallelism, the sum of "cumulative duration" values is usually greater than the actual time it takes to build a site.
+{{% /note %}}
+
+## Caching
+
+Some partial templates such as sidebars or menus are executed many times during a site build. Depending on the content within the partial template and the desired output, the template may benefit from caching to reduce the number of executions. The [`partialCached`] template function provides caching capabilities for partial templates.
+
+{{% note %}}
+Note that you can create cached variants of each partial by passing additional arguments to `partialCached` beyond the initial context. See the `partialCached` documentation for more details.
+{{% /note %}}
+
+## Timers
+
++Use the `debug.Timer` function to determine execution time for a block of code, useful for finding performance bottlenecks in templates. See [details](/functions/debug/timer/).
--- /dev/null
- - gleam>
+chroma:
+ lexers:
+ - Aliases:
+ - abap
+ Name: ABAP
+ - Aliases:
+ - abnf
+ Name: ABNF
+ - Aliases:
+ - as
+ - actionscript
+ Name: ActionScript
+ - Aliases:
+ - as3
+ - actionscript3
+ Name: ActionScript 3
+ - Aliases:
+ - ada
+ - ada95
+ - ada2005
+ Name: Ada
+ - Aliases:
+ - agda
+ Name: Agda
+ - Aliases:
+ - al
+ Name: AL
+ - Aliases:
+ - alloy
+ Name: Alloy
+ - Aliases:
+ - ng2
+ Name: Angular2
+ - Aliases:
+ - antlr
+ Name: ANTLR
+ - Aliases:
+ - apacheconf
+ - aconf
+ - apache
+ Name: ApacheConf
+ - Aliases:
+ - apl
+ Name: APL
+ - Aliases:
+ - applescript
+ Name: AppleScript
+ - Aliases:
+ - aql
+ Name: ArangoDB AQL
+ - Aliases:
+ - arduino
+ Name: Arduino
+ - Aliases:
+ - armasm
+ Name: ArmAsm
++ - Aliases:
++ - atl
++ Name: ATL
+ - Aliases:
+ - autohotkey
+ - ahk
+ Name: AutoHotkey
+ - Aliases:
+ - autoit
+ Name: AutoIt
+ - Aliases:
+ - awk
+ - gawk
+ - mawk
+ - nawk
+ Name: Awk
+ - Aliases:
+ - ballerina
+ Name: Ballerina
+ - Aliases:
+ - bash
+ - sh
+ - ksh
+ - zsh
+ - shell
+ Name: Bash
+ - Aliases:
+ - bash-session
+ - console
+ - shell-session
+ Name: Bash Session
+ - Aliases:
+ - bat
+ - batch
+ - dosbatch
+ - winbatch
+ Name: Batchfile
++ - Aliases:
++ - beef
++ Name: Beef
+ - Aliases:
+ - bib
+ - bibtex
+ Name: BibTeX
+ - Aliases:
+ - bicep
+ Name: Bicep
+ - Aliases:
+ - blitzbasic
+ - b3d
+ - bplus
+ Name: BlitzBasic
+ - Aliases:
+ - bnf
+ Name: BNF
+ - Aliases:
+ - bqn
+ Name: BQN
+ - Aliases:
+ - brainfuck
+ - bf
+ Name: Brainfuck
+ - Aliases:
+ - c
+ Name: C
+ - Aliases:
+ - csharp
+ - c#
+ Name: C#
+ - Aliases:
+ - cpp
+ - c++
+ Name: C++
+ - Aliases:
+ - caddyfile
+ - caddy
+ Name: Caddyfile
+ - Aliases:
+ - caddyfile-directives
+ - caddyfile-d
+ - caddy-d
+ Name: Caddyfile Directives
+ - Aliases:
+ - capnp
+ Name: Cap'n Proto
+ - Aliases:
+ - cassandra
+ - cql
+ Name: Cassandra CQL
+ - Aliases:
+ - ceylon
+ Name: Ceylon
+ - Aliases:
+ - cfengine3
+ - cf3
+ Name: CFEngine3
+ - Aliases:
+ - cfs
+ Name: cfstatement
+ - Aliases:
+ - chai
+ - chaiscript
+ Name: ChaiScript
+ - Aliases:
+ - chapel
+ - chpl
+ Name: Chapel
+ - Aliases:
+ - cheetah
+ - spitfire
+ Name: Cheetah
+ - Aliases:
+ - clojure
+ - clj
+ - edn
+ Name: Clojure
+ - Aliases:
+ - cmake
+ Name: CMake
+ - Aliases:
+ - cobol
+ Name: COBOL
+ - Aliases:
+ - coffee-script
+ - coffeescript
+ - coffee
+ Name: CoffeeScript
+ - Aliases:
+ - common-lisp
+ - cl
+ - lisp
+ Name: Common Lisp
+ - Aliases:
+ - coq
+ Name: Coq
+ - Aliases:
+ - cr
+ - crystal
+ Name: Crystal
+ - Aliases:
+ - css
+ Name: CSS
++ - Aliases:
++ - csv
++ Name: CSV
+ - Aliases:
+ - cue
+ Name: CUE
+ - Aliases:
+ - cython
+ - pyx
+ - pyrex
+ Name: Cython
+ - Aliases:
+ - d
+ Name: D
+ - Aliases:
+ - dart
+ Name: Dart
+ - Aliases:
+ - dax
+ Name: Dax
+ - Aliases:
+ - desktop
+ - desktop_entry
+ Name: Desktop file
+ - Aliases:
+ - diff
+ - udiff
+ Name: Diff
+ - Aliases:
+ - django
+ - jinja
+ Name: Django/Jinja
+ - Aliases:
+ - zone
+ - bind
+ Name: dns
+ - Aliases:
+ - docker
+ - dockerfile
+ Name: Docker
+ - Aliases:
+ - dtd
+ Name: DTD
+ - Aliases:
+ - dylan
+ Name: Dylan
+ - Aliases:
+ - ebnf
+ Name: EBNF
+ - Aliases:
+ - elixir
+ - ex
+ - exs
+ Name: Elixir
+ - Aliases:
+ - elm
+ Name: Elm
+ - Aliases:
+ - emacs
+ - elisp
+ - emacs-lisp
+ Name: EmacsLisp
+ - Aliases:
+ - erlang
+ Name: Erlang
+ - Aliases:
+ - factor
+ Name: Factor
+ - Aliases:
+ - fennel
+ - fnl
+ Name: Fennel
+ - Aliases:
+ - fish
+ - fishshell
+ Name: Fish
+ - Aliases:
+ - forth
+ Name: Forth
+ - Aliases:
+ - fortran
+ - f90
+ Name: Fortran
+ - Aliases:
+ - fortranfixed
+ Name: FortranFixed
+ - Aliases:
+ - fsharp
+ Name: FSharp
+ - Aliases:
+ - gas
+ - asm
+ Name: GAS
+ - Aliases:
+ - gdscript
+ - gd
+ Name: GDScript
+ - Aliases:
+ - gdscript3
+ - gd3
+ Name: GDScript3
+ - Aliases:
+ - genshi
+ - kid
+ - xml+genshi
+ - xml+kid
+ Name: Genshi
+ - Aliases:
+ - html+genshi
+ - html+kid
+ Name: Genshi HTML
+ - Aliases:
+ - genshitext
+ Name: Genshi Text
+ - Aliases:
+ - cucumber
+ - Cucumber
+ - gherkin
+ - Gherkin
+ Name: Gherkin
+ - Aliases:
- Name: mcfunction
++ - gleam
+ Name: Gleam
+ - Aliases:
+ - glsl
+ Name: GLSL
+ - Aliases:
+ - gnuplot
+ Name: Gnuplot
+ - Aliases:
+ - go
+ - golang
+ Name: Go
+ - Aliases:
+ - go-html-template
+ Name: Go HTML Template
+ - Aliases:
+ - go-template
+ Name: Go Template
+ - Aliases:
+ - go-text-template
+ Name: Go Text Template
+ - Aliases:
+ - graphql
+ - graphqls
+ - gql
+ Name: GraphQL
+ - Aliases:
+ - groff
+ - nroff
+ - man
+ Name: Groff
+ - Aliases:
+ - groovy
+ Name: Groovy
+ - Aliases:
+ - handlebars
+ - hbs
+ Name: Handlebars
+ - Aliases:
+ - hare
+ Name: Hare
+ - Aliases:
+ - haskell
+ - hs
+ Name: Haskell
+ - Aliases:
+ - hx
+ - haxe
+ - hxsl
+ Name: Haxe
+ - Aliases:
+ - hcl
+ Name: HCL
+ - Aliases:
+ - hexdump
+ Name: Hexdump
+ - Aliases:
+ - hlb
+ Name: HLB
+ - Aliases:
+ - hlsl
+ Name: HLSL
+ - Aliases:
+ - holyc
+ Name: HolyC
+ - Aliases:
+ - html
+ Name: HTML
+ - Aliases:
+ - http
+ Name: HTTP
+ - Aliases:
+ - hylang
+ Name: Hy
+ - Aliases:
+ - idris
+ - idr
+ Name: Idris
+ - Aliases:
+ - igor
+ - igorpro
+ Name: Igor
+ - Aliases:
+ - ini
+ - cfg
+ - dosini
+ Name: INI
+ - Aliases:
+ - io
+ Name: Io
+ - Aliases:
+ - iscdhcpd
+ Name: ISCdhcpd
+ - Aliases:
+ - j
+ Name: J
+ - Aliases:
+ - java
+ Name: Java
+ - Aliases:
+ - js
+ - javascript
+ Name: JavaScript
+ - Aliases:
+ - json
+ Name: JSON
++ - Aliases:
++ - jsonata
++ Name: JSONata
++ - Aliases:
++ - jsonnet
++ Name: Jsonnet
+ - Aliases:
+ - julia
+ - jl
+ Name: Julia
+ - Aliases:
+ - jungle
+ Name: Jungle
+ - Aliases:
+ - kotlin
+ Name: Kotlin
+ - Aliases:
+ - lighty
+ - lighttpd
+ Name: Lighttpd configuration file
+ - Aliases:
+ - llvm
+ Name: LLVM
+ - Aliases:
+ - lua
+ Name: Lua
+ - Aliases:
+ - make
+ - makefile
+ - mf
+ - bsdmake
+ Name: Makefile
+ - Aliases:
+ - mako
+ Name: Mako
+ - Aliases:
+ - md
+ - mkd
+ Name: markdown
+ - Aliases:
+ - mason
+ Name: Mason
+ - Aliases:
+ - materialize
+ - mzsql
+ Name: Materialize SQL dialect
+ - Aliases:
+ - mathematica
+ - mma
+ - nb
+ Name: Mathematica
+ - Aliases:
+ - matlab
+ Name: Matlab
+ - Aliases:
+ - mcfunction
- noHl: false
++ - mcf
++ Name: MCFunction
+ - Aliases:
+ - meson
+ - meson.build
+ Name: Meson
+ - Aliases:
+ - metal
+ Name: Metal
+ - Aliases:
+ - minizinc
+ - MZN
+ - mzn
+ Name: MiniZinc
+ - Aliases:
+ - mlir
+ Name: MLIR
+ - Aliases:
+ - modula2
+ - m2
+ Name: Modula-2
+ - Aliases:
+ - monkeyc
+ Name: MonkeyC
+ - Aliases:
+ - morrowind
+ - mwscript
+ Name: MorrowindScript
+ - Aliases:
+ - myghty
+ Name: Myghty
+ - Aliases:
+ - mysql
+ - mariadb
+ Name: MySQL
+ - Aliases:
+ - nasm
+ Name: NASM
+ - Aliases:
+ - natural
+ Name: Natural
+ - Aliases:
+ - ndisasm
+ Name: NDISASM
+ - Aliases:
+ - newspeak
+ Name: Newspeak
+ - Aliases:
+ - nginx
+ Name: Nginx configuration file
+ - Aliases:
+ - nim
+ - nimrod
+ Name: Nim
+ - Aliases:
+ - nixos
+ - nix
+ Name: Nix
++ - Aliases:
++ - nsis
++ - nsi
++ - nsh
++ Name: NSIS
+ - Aliases:
+ - objective-c
+ - objectivec
+ - obj-c
+ - objc
+ Name: Objective-C
+ - Aliases:
+ - objectpascal
+ Name: ObjectPascal
+ - Aliases:
+ - ocaml
+ Name: OCaml
+ - Aliases:
+ - octave
+ Name: Octave
+ - Aliases:
+ - odin
+ Name: Odin
+ - Aliases:
+ - ones
+ - onesenterprise
+ - 1S
+ - 1S:Enterprise
+ Name: OnesEnterprise
+ - Aliases:
+ - openedge
+ - abl
+ - progress
+ - openedgeabl
+ Name: OpenEdge ABL
+ - Aliases:
+ - openscad
+ Name: OpenSCAD
+ - Aliases:
+ - org
+ - orgmode
+ Name: Org Mode
+ - Aliases:
+ - pacmanconf
+ Name: PacmanConf
+ - Aliases:
+ - perl
+ - pl
+ Name: Perl
+ - Aliases:
+ - php
+ - php3
+ - php4
+ - php5
+ Name: PHP
+ - Aliases:
+ - phtml
+ Name: PHTML
+ - Aliases:
+ - pig
+ Name: Pig
+ - Aliases:
+ - pkgconfig
+ Name: PkgConfig
+ - Aliases:
+ - plpgsql
+ Name: PL/pgSQL
+ - Aliases:
+ - text
+ - plain
+ - no-highlight
+ Name: plaintext
+ - Aliases:
+ - plutus-core
+ - plc
+ Name: Plutus Core
+ - Aliases:
+ - pony
+ Name: Pony
+ - Aliases:
+ - postgresql
+ - postgres
+ Name: PostgreSQL SQL dialect
+ - Aliases:
+ - postscript
+ - postscr
+ Name: PostScript
+ - Aliases:
+ - pov
+ Name: POVRay
+ - Aliases:
+ - powerquery
+ - pq
+ Name: PowerQuery
+ - Aliases:
+ - powershell
+ - posh
+ - ps1
+ - psm1
+ - psd1
+ - pwsh
+ Name: PowerShell
+ - Aliases:
+ - prolog
+ Name: Prolog
+ - Aliases:
+ - promela
+ Name: Promela
+ - Aliases:
+ - promql
+ Name: PromQL
+ - Aliases:
+ - java-properties
+ Name: properties
+ - Aliases:
+ - protobuf
+ - proto
+ Name: Protocol Buffer
+ - Aliases:
+ - prql
+ Name: PRQL
+ - Aliases:
+ - psl
+ Name: PSL
+ - Aliases:
+ - puppet
+ Name: Puppet
+ - Aliases:
+ - python
+ - py
+ - sage
+ - python3
+ - py3
+ Name: Python
+ - Aliases:
+ - python2
+ - py2
+ Name: Python 2
+ - Aliases:
+ - qbasic
+ - basic
+ Name: QBasic
+ - Aliases:
+ - qml
+ - qbs
+ Name: QML
+ - Aliases:
+ - splus
+ - s
+ - r
+ Name: R
+ - Aliases:
+ - racket
+ - rkt
+ Name: Racket
+ - Aliases:
+ - ragel
+ Name: Ragel
+ - Aliases:
+ - perl6
+ - pl6
+ - raku
+ Name: Raku
+ - Aliases:
+ - jsx
+ - react
+ Name: react
+ - Aliases:
+ - reason
+ - reasonml
+ Name: ReasonML
+ - Aliases:
+ - registry
+ Name: reg
+ - Aliases:
+ - rego
+ Name: Rego
+ - Aliases:
+ - rst
+ - rest
+ - restructuredtext
+ Name: reStructuredText
+ - Aliases:
+ - rexx
+ - arexx
+ Name: Rexx
+ - Aliases:
+ - spec
+ Name: RPMSpec
+ - Aliases:
+ - rb
+ - ruby
+ - duby
+ Name: Ruby
+ - Aliases:
+ - rust
+ - rs
+ Name: Rust
+ - Aliases:
+ - sas
+ Name: SAS
+ - Aliases:
+ - sass
+ Name: Sass
+ - Aliases:
+ - scala
+ Name: Scala
+ - Aliases:
+ - scheme
+ - scm
+ Name: Scheme
+ - Aliases:
+ - scilab
+ Name: Scilab
+ - Aliases:
+ - scss
+ Name: SCSS
+ - Aliases:
+ - sed
+ - gsed
+ - ssed
+ Name: Sed
+ - Aliases:
+ - sieve
+ Name: Sieve
+ - Aliases:
+ - smali
+ Name: Smali
+ - Aliases:
+ - smalltalk
+ - squeak
+ - st
+ Name: Smalltalk
+ - Aliases:
+ - smarty
+ Name: Smarty
++ - Aliases:
++ - snbt
++ Name: SNBT
+ - Aliases:
+ - snobol
+ Name: Snobol
+ - Aliases:
+ - sol
+ - solidity
+ Name: Solidity
+ - Aliases:
+ - sp
+ Name: SourcePawn
+ - Aliases:
+ - sparql
+ Name: SPARQL
+ - Aliases:
+ - sql
+ Name: SQL
+ - Aliases:
+ - squidconf
+ - squid.conf
+ - squid
+ Name: SquidConf
+ - Aliases:
+ - sml
+ Name: Standard ML
+ - Aliases: null
+ Name: stas
+ - Aliases:
+ - stylus
+ Name: Stylus
+ - Aliases:
+ - svelte
+ Name: Svelte
+ - Aliases:
+ - swift
+ Name: Swift
+ - Aliases:
+ - systemd
+ Name: SYSTEMD
+ - Aliases:
+ - systemverilog
+ - sv
+ Name: systemverilog
+ - Aliases:
+ - tablegen
+ Name: TableGen
+ - Aliases:
+ - tal
+ - uxntal
+ Name: Tal
+ - Aliases:
+ - tasm
+ Name: TASM
+ - Aliases:
+ - tcl
+ Name: Tcl
+ - Aliases:
+ - tcsh
+ - csh
+ Name: Tcsh
+ - Aliases:
+ - termcap
+ Name: Termcap
+ - Aliases:
+ - terminfo
+ Name: Terminfo
+ - Aliases:
+ - terraform
+ - tf
+ Name: Terraform
+ - Aliases:
+ - tex
+ - latex
+ Name: TeX
+ - Aliases:
+ - thrift
+ Name: Thrift
+ - Aliases:
+ - toml
+ Name: TOML
+ - Aliases:
+ - tradingview
+ - tv
+ Name: TradingView
+ - Aliases:
+ - tsql
+ - t-sql
+ Name: Transact-SQL
+ - Aliases:
+ - turing
+ Name: Turing
+ - Aliases:
+ - turtle
+ Name: Turtle
+ - Aliases:
+ - twig
+ Name: Twig
+ - Aliases:
+ - ts
+ - tsx
+ - typescript
+ Name: TypeScript
+ - Aliases:
+ - typoscript
+ Name: TypoScript
+ - Aliases:
+ - typoscriptcssdata
+ Name: TypoScriptCssData
+ - Aliases:
+ - typoscripthtmldata
+ Name: TypoScriptHtmlData
++ - Aliases:
++ - typst
++ Name: Typst
+ - Aliases: null
+ Name: ucode
+ - Aliases:
+ - v
+ - vlang
+ Name: V
+ - Aliases:
+ - vsh
+ - vshell
+ Name: V shell
+ - Aliases:
+ - vala
+ - vapi
+ Name: Vala
+ - Aliases:
+ - vb.net
+ - vbnet
+ Name: VB.net
+ - Aliases:
+ - verilog
+ - v
+ Name: verilog
+ - Aliases:
+ - vhdl
+ Name: VHDL
+ - Aliases:
+ - vhs
+ - tape
+ - cassette
+ Name: VHS
+ - Aliases:
+ - vim
+ Name: VimL
+ - Aliases:
+ - vue
+ - vuejs
+ Name: vue
+ - Aliases: null
+ Name: WDTE
+ - Aliases:
+ - wgsl
+ Name: WebGPU Shading Language
++ - Aliases:
++ - vtt
++ Name: WebVTT
+ - Aliases:
+ - whiley
+ Name: Whiley
+ - Aliases:
+ - xml
+ Name: XML
+ - Aliases:
+ - xorg.conf
+ Name: Xorg
+ - Aliases:
+ - yaml
+ Name: YAML
+ - Aliases:
+ - yang
+ Name: YANG
+ - Aliases:
+ - z80
+ Name: Z80 Assembly
+ - Aliases:
+ - zed
+ Name: Zed
+ - Aliases:
+ - zig
+ Name: Zig
+config:
+ HTTPCache:
+ cache:
+ for:
+ excludes:
+ - '**'
+ includes: null
+ polls:
+ - disable: true
+ for:
+ excludes: null
+ includes:
+ - '**'
+ high: 0s
+ low: 0s
+ archeTypeDir: archetypes
+ assetDir: assets
+ author: {}
+ baseURL: ""
+ build:
+ buildStats:
+ disableClasses: false
+ disableIDs: false
+ disableTags: false
+ enable: false
+ cacheBusters:
+ - source: (postcss|tailwind)\.config\.js
+ target: (css|styles|scss|sass)
+ noJSConfigInAssets: false
+ useResourceCacheWhen: fallback
+ buildDrafts: false
+ buildExpired: false
+ buildFuture: false
+ cacheDir: ""
+ caches:
+ assets:
+ dir: :resourceDir/_gen
+ maxAge: -1
+ getcsv:
+ dir: :cacheDir/:project
+ maxAge: -1
+ getjson:
+ dir: :cacheDir/:project
+ maxAge: -1
+ getresource:
+ dir: :cacheDir/:project
+ maxAge: -1
+ images:
+ dir: :resourceDir/_gen
+ maxAge: -1
+ misc:
+ dir: :cacheDir/:project
+ maxAge: -1
+ modules:
+ dir: :cacheDir/modules
+ maxAge: -1
+ canonifyURLs: false
+ capitalizeListTitles: true
+ cascade: []
+ cleanDestinationDir: false
+ contentDir: content
+ copyright: ""
+ dataDir: data
+ defaultContentLanguage: en
+ defaultContentLanguageInSubdir: false
++ defaultOutputFormat: html
+ deployment:
+ confirm: false
+ dryRun: false
+ force: false
+ invalidateCDN: true
+ matchers: null
+ maxDeletes: 256
+ order: null
+ target: ""
+ targets: null
+ workers: 10
+ disableAliases: false
+ disableDefaultLanguageRedirect: false
+ disableHugoGeneratorInject: false
+ disableKinds: null
+ disableLanguages: null
+ disableLiveReload: false
+ disablePathToLower: false
+ enableEmoji: false
+ enableGitInfo: false
+ enableMissingTranslationPlaceholders: false
+ enableRobotsTXT: false
+ environment: production
+ frontmatter:
+ date:
+ - date
+ - publishdate
+ - pubdate
+ - published
+ - lastmod
+ - modified
+ expiryDate:
+ - expirydate
+ - unpublishdate
+ lastmod:
+ - :git
+ - lastmod
+ - modified
+ - date
+ - publishdate
+ - pubdate
+ - published
+ publishDate:
+ - publishdate
+ - pubdate
+ - published
+ - date
+ hasCJKLanguage: false
+ i18nDir: i18n
+ ignoreCache: false
+ ignoreFiles: []
+ ignoreLogs: null
+ ignoreVendorPaths: ""
+ imaging:
+ bgColor: '#ffffff'
+ hint: photo
+ quality: 75
+ resampleFilter: box
+ languageCode: ""
+ languages:
+ en:
+ disabled: false
+ languageCode: ""
+ languageDirection: ""
+ languageName: ""
+ title: ""
+ weight: 0
+ layoutDir: layouts
+ mainSections: null
+ markup:
+ asciidocExt:
+ attributes: {}
+ backend: html5
+ extensions: []
+ failureLevel: fatal
+ noHeaderOrFooter: true
+ preserveTOC: false
+ safeMode: unsafe
+ sectionNumbers: false
+ trace: false
+ verbose: false
+ workingFolderCurrent: false
+ defaultMarkdownHandler: goldmark
+ goldmark:
+ duplicateResourceFiles: false
+ extensions:
+ cjk:
+ eastAsianLineBreaks: false
+ eastAsianLineBreaksStyle: simple
+ enable: false
+ escapedSpace: false
+ definitionList: true
+ extras:
+ delete:
+ enable: false
+ insert:
+ enable: false
+ mark:
+ enable: false
+ subscript:
+ enable: false
+ superscript:
+ enable: false
+ footnote: true
+ linkify: true
+ linkifyProtocol: https
+ passthrough:
+ delimiters:
+ block: []
+ inline: []
+ enable: false
+ strikethrough: true
+ table: true
+ taskList: true
+ typographer:
+ apostrophe: '’'
+ disable: false
+ ellipsis: '…'
+ emDash: '—'
+ enDash: '–'
+ leftAngleQuote: '«'
+ leftDoubleQuote: '“'
+ leftSingleQuote: '‘'
+ rightAngleQuote: '»'
+ rightDoubleQuote: '”'
+ rightSingleQuote: '’'
+ parser:
+ attribute:
+ block: false
+ title: true
+ autoHeadingID: true
+ autoHeadingIDType: github
+ wrapStandAloneImageWithinParagraph: true
+ renderHooks:
+ image:
+ enableDefault: false
+ link:
+ enableDefault: false
+ renderer:
+ hardWraps: false
+ unsafe: false
+ xhtml: false
+ highlight:
+ anchorLineNos: false
+ codeFences: true
+ guessSyntax: false
+ hl_Lines: ""
+ hl_inline: false
+ lineAnchors: ""
+ lineNoStart: 1
+ lineNos: false
+ lineNumbersInTable: true
+ noClasses: true
+ style: monokai
+ tabWidth: 4
+ wrapperClass: highlight
+ tableOfContents:
+ endLevel: 3
+ ordered: false
+ startLevel: 2
+ mediaTypes:
+ application/json:
+ delimiter: .
+ suffixes:
+ - json
+ application/manifest+json:
+ delimiter: .
+ suffixes:
+ - webmanifest
+ application/octet-stream:
+ delimiter: .
+ application/pdf:
+ delimiter: .
+ suffixes:
+ - pdf
+ application/rss+xml:
+ delimiter: .
+ suffixes:
+ - xml
+ - rss
+ application/toml:
+ delimiter: .
+ suffixes:
+ - toml
+ application/wasm:
+ delimiter: .
+ suffixes:
+ - wasm
+ application/xml:
+ delimiter: .
+ suffixes:
+ - xml
+ application/yaml:
+ delimiter: .
+ suffixes:
+ - yaml
+ - yml
+ font/otf:
+ delimiter: .
+ suffixes:
+ - otf
+ font/ttf:
+ delimiter: .
+ suffixes:
+ - ttf
+ image/bmp:
+ delimiter: .
+ suffixes:
+ - bmp
+ image/gif:
+ delimiter: .
+ suffixes:
+ - gif
+ image/jpeg:
+ delimiter: .
+ suffixes:
+ - jpg
+ - jpeg
+ - jpe
+ - jif
+ - jfif
+ image/png:
+ delimiter: .
+ suffixes:
+ - png
+ image/svg+xml:
+ delimiter: .
+ suffixes:
+ - svg
+ image/tiff:
+ delimiter: .
+ suffixes:
+ - tif
+ - tiff
+ image/webp:
+ delimiter: .
+ suffixes:
+ - webp
+ text/asciidoc:
+ delimiter: .
+ suffixes:
+ - adoc
+ - asciidoc
+ - ad
+ text/calendar:
+ delimiter: .
+ suffixes:
+ - ics
+ text/css:
+ delimiter: .
+ suffixes:
+ - css
+ text/csv:
+ delimiter: .
+ suffixes:
+ - csv
+ text/html:
+ delimiter: .
+ suffixes:
+ - html
+ - htm
+ text/javascript:
+ delimiter: .
+ suffixes:
+ - js
+ - jsm
+ - mjs
+ text/jsx:
+ delimiter: .
+ suffixes:
+ - jsx
+ text/markdown:
+ delimiter: .
+ suffixes:
+ - md
+ - mdown
+ - markdown
+ text/org:
+ delimiter: .
+ suffixes:
+ - org
+ text/pandoc:
+ delimiter: .
+ suffixes:
+ - pandoc
+ - pdc
+ text/plain:
+ delimiter: .
+ suffixes:
+ - txt
+ text/rst:
+ delimiter: .
+ suffixes:
+ - rst
+ text/tsx:
+ delimiter: .
+ suffixes:
+ - tsx
+ text/typescript:
+ delimiter: .
+ suffixes:
+ - ts
+ text/x-sass:
+ delimiter: .
+ suffixes:
+ - sass
+ text/x-scss:
+ delimiter: .
+ suffixes:
+ - scss
+ video/3gpp:
+ delimiter: .
+ suffixes:
+ - 3gpp
+ - 3gp
+ video/mp4:
+ delimiter: .
+ suffixes:
+ - mp4
+ video/mpeg:
+ delimiter: .
+ suffixes:
+ - mpg
+ - mpeg
+ video/ogg:
+ delimiter: .
+ suffixes:
+ - ogv
+ video/webm:
+ delimiter: .
+ suffixes:
+ - webm
+ video/x-msvideo:
+ delimiter: .
+ suffixes:
+ - avi
+ menus: {}
+ minify:
+ disableCSS: false
+ disableHTML: false
+ disableJS: false
+ disableJSON: false
+ disableSVG: false
+ disableXML: false
+ minifyOutput: false
+ tdewolff:
+ css:
+ inline: false
+ keepCSS2: true
+ precision: 0
+ html:
+ keepComments: false
+ keepConditionalComments: false
+ keepDefaultAttrVals: true
+ keepDocumentTags: true
+ keepEndTags: true
+ keepQuotes: false
+ keepSpecialComments: true
+ keepWhitespace: false
+ templateDelims:
+ - ""
+ - ""
+ js:
+ keepVarNames: false
+ precision: 0
+ version: 2022
+ json:
+ keepNumbers: false
+ precision: 0
+ svg:
+ inline: false
+ keepComments: false
+ precision: 0
+ xml:
+ keepWhitespace: false
+ module:
+ hugoVersion:
+ extended: false
+ max: ""
+ min: ""
+ imports: null
+ mounts:
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: content
+ target: content
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: data
+ target: data
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: layouts
+ target: layouts
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: i18n
+ target: i18n
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: archetypes
+ target: archetypes
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: assets
+ target: assets
+ - disableWatch: false
+ excludeFiles: null
+ includeFiles: null
+ lang: ""
+ source: static
+ target: static
+ noProxy: none
+ noVendor: ""
+ params: null
+ private: '*.*'
+ proxy: direct
+ replacements: null
+ vendorClosest: false
+ workspace: "off"
+ newContentEditor: ""
+ noBuildLock: false
+ noChmod: false
+ noTimes: false
+ outputFormats:
+ amp:
+ baseName: index
+ isHTML: true
+ isPlainText: false
+ mediaType: text/html
+ noUgly: false
+ notAlternative: false
+ path: amp
+ permalinkable: true
+ protocol: ""
+ rel: amphtml
+ root: false
+ ugly: false
+ weight: 0
+ calendar:
+ baseName: index
+ isHTML: false
+ isPlainText: true
+ mediaType: text/calendar
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: webcal://
+ rel: alternate
+ root: false
+ ugly: false
+ weight: 0
+ css:
+ baseName: styles
+ isHTML: false
+ isPlainText: true
+ mediaType: text/css
+ noUgly: false
+ notAlternative: true
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: stylesheet
+ root: false
+ ugly: false
+ weight: 0
+ csv:
+ baseName: index
+ isHTML: false
+ isPlainText: true
+ mediaType: text/csv
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: alternate
+ root: false
+ ugly: false
+ weight: 0
+ html:
+ baseName: index
+ isHTML: true
+ isPlainText: false
+ mediaType: text/html
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: true
+ protocol: ""
+ rel: canonical
+ root: false
+ ugly: false
+ weight: 10
+ json:
+ baseName: index
+ isHTML: false
+ isPlainText: true
+ mediaType: application/json
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: alternate
+ root: false
+ ugly: false
+ weight: 0
+ markdown:
+ baseName: index
+ isHTML: false
+ isPlainText: true
+ mediaType: text/markdown
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: alternate
+ root: false
+ ugly: false
+ weight: 0
+ robots:
+ baseName: robots
+ isHTML: false
+ isPlainText: true
+ mediaType: text/plain
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: alternate
+ root: true
+ ugly: false
+ weight: 0
+ rss:
+ baseName: index
+ isHTML: false
+ isPlainText: false
+ mediaType: application/rss+xml
+ noUgly: true
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: alternate
+ root: false
+ ugly: false
+ weight: 0
+ sitemap:
+ baseName: sitemap
+ isHTML: false
+ isPlainText: false
+ mediaType: application/xml
+ noUgly: false
+ notAlternative: false
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: sitemap
+ root: false
+ ugly: true
+ weight: 0
+ webappmanifest:
+ baseName: manifest
+ isHTML: false
+ isPlainText: true
+ mediaType: application/manifest+json
+ noUgly: false
+ notAlternative: true
+ path: ""
+ permalinkable: false
+ protocol: ""
+ rel: manifest
+ root: false
+ ugly: false
+ weight: 0
+ outputs:
+ home:
+ - html
+ - rss
+ page:
+ - html
+ rss:
+ - rss
+ section:
+ - html
+ - rss
+ taxonomy:
+ - html
+ - rss
+ term:
+ - html
+ - rss
+ page:
+ nextPrevInSectionSortOrder: desc
+ nextPrevSortOrder: desc
+ paginate: 0
+ paginatePath: ""
+ pagination:
+ disableAliases: false
+ pagerSize: 10
+ path: page
+ panicOnWarning: false
+ params: {}
+ permalinks:
+ page: {}
+ section: {}
+ taxonomy: {}
+ term: {}
+ pluralizeListTitles: true
+ printI18nWarnings: false
+ printPathWarnings: false
+ printUnusedTemplates: false
+ privacy:
+ disqus:
+ disable: false
+ googleAnalytics:
+ disable: false
+ respectDoNotTrack: false
+ instagram:
+ disable: false
+ simple: false
+ twitter:
+ disable: false
+ enableDNT: false
+ simple: false
+ vimeo:
+ disable: false
+ enableDNT: false
+ simple: false
++ x:
++ disable: false
++ enableDNT: false
++ simple: false
+ youTube:
+ disable: false
+ privacyEnhanced: false
+ publishDir: public
+ refLinksErrorLevel: ""
+ refLinksNotFoundURL: ""
+ related:
+ includeNewer: false
+ indices:
+ - applyFilter: false
+ cardinalityThreshold: 0
+ name: keywords
+ pattern: ""
+ toLower: false
+ type: basic
+ weight: 100
+ - applyFilter: false
+ cardinalityThreshold: 0
+ name: date
+ pattern: ""
+ toLower: false
+ type: basic
+ weight: 10
+ - applyFilter: false
+ cardinalityThreshold: 0
+ name: tags
+ pattern: ""
+ toLower: false
+ type: basic
+ weight: 80
+ threshold: 80
+ toLower: false
+ relativeURLs: false
+ removePathAccents: false
+ renderSegments: null
+ resourceDir: resources
+ sectionPagesMenu: ""
+ security:
+ enableInlineShortcodes: false
+ exec:
+ allow:
+ - ^(dart-)?sass(-embedded)?$
+ - ^go$
+ - ^git$
+ - ^npx$
+ - ^postcss$
+ - ^tailwindcss$
+ osEnv:
+ - (?i)^((HTTPS?|NO)_PROXY|PATH(EXT)?|APPDATA|TE?MP|TERM|GO\w+|(XDG_CONFIG_)?HOME|USERPROFILE|SSH_AUTH_SOCK|DISPLAY|LANG|SYSTEMDRIVE)$
+ funcs:
+ getenv:
+ - ^HUGO_
+ - ^CI$
+ http:
+ mediaTypes: null
+ methods:
+ - (?i)GET|POST
+ urls:
+ - .*
+ segments: {}
+ server:
+ headers: null
+ redirects:
+ - force: false
+ from: '**'
+ status: 404
+ to: /404.html
+ services:
+ disqus:
+ shortname: ""
+ googleAnalytics:
+ id: ""
+ instagram:
+ accessToken: ""
+ disableInlineCSS: false
+ rss:
+ limit: -1
+ twitter:
+ disableInlineCSS: false
++ x:
++ disableInlineCSS: false
+ sitemap:
+ changeFreq: ""
+ disable: false
+ filename: sitemap.xml
+ priority: -1
+ social: null
+ staticDir:
+ - static
+ staticDir0: null
+ staticDir1: null
+ staticDir2: null
+ staticDir3: null
+ staticDir4: null
+ staticDir5: null
+ staticDir6: null
+ staticDir7: null
+ staticDir8: null
+ staticDir9: null
+ staticDir10: null
+ summaryLength: 70
+ taxonomies:
+ category: categories
+ tag: tags
+ templateMetrics: false
+ templateMetricsHints: false
+ theme: null
+ themesDir: themes
+ timeZone: ""
+ timeout: 30s
+ title: ""
+ titleCaseStyle: AP
+ uglyURLs: false
+ workingDir: ""
+config_helpers:
+ mergeStrategy:
+ build:
+ _merge: none
+ caches:
+ _merge: none
+ cascade:
+ _merge: none
+ deployment:
+ _merge: none
+ frontmatter:
+ _merge: none
+ httpcache:
+ _merge: none
+ imaging:
+ _merge: none
+ languages:
+ _merge: none
+ en:
+ _merge: none
+ menus:
+ _merge: shallow
+ params:
+ _merge: deep
+ markup:
+ _merge: none
+ mediatypes:
+ _merge: shallow
+ menus:
+ _merge: shallow
+ minify:
+ _merge: none
+ module:
+ _merge: none
+ outputformats:
+ _merge: shallow
+ outputs:
+ _merge: none
+ page:
+ _merge: none
+ pagination:
+ _merge: none
+ params:
+ _merge: deep
+ permalinks:
+ _merge: none
+ privacy:
+ _merge: none
+ related:
+ _merge: none
+ security:
+ _merge: none
+ segments:
+ _merge: none
+ server:
+ _merge: none
+ services:
+ _merge: none
+ sitemap:
+ _merge: none
+ taxonomies:
+ _merge: none
+output:
+ layouts:
+ - Example: Single page in "posts" section
+ Kind: page
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/single.html.html
+ - layouts/posts/single.html
+ - layouts/_default/single.html.html
+ - layouts/_default/single.html
+ - Example: Base template for single page in "posts" section
+ Kind: page
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/single-baseof.html.html
+ - layouts/posts/baseof.html.html
+ - layouts/posts/single-baseof.html
+ - layouts/posts/baseof.html
+ - layouts/_default/single-baseof.html.html
+ - layouts/_default/baseof.html.html
+ - layouts/_default/single-baseof.html
+ - layouts/_default/baseof.html
+ - Example: Single page in "posts" section with layout set to "demolayout"
+ Kind: page
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/demolayout.html.html
+ - layouts/posts/single.html.html
+ - layouts/posts/demolayout.html
+ - layouts/posts/single.html
+ - layouts/_default/demolayout.html.html
+ - layouts/_default/single.html.html
+ - layouts/_default/demolayout.html
+ - layouts/_default/single.html
+ - Example: Base template for single page in "posts" section with layout set to "demolayout"
+ Kind: page
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/demolayout-baseof.html.html
+ - layouts/posts/single-baseof.html.html
+ - layouts/posts/baseof.html.html
+ - layouts/posts/demolayout-baseof.html
+ - layouts/posts/single-baseof.html
+ - layouts/posts/baseof.html
+ - layouts/_default/demolayout-baseof.html.html
+ - layouts/_default/single-baseof.html.html
+ - layouts/_default/baseof.html.html
+ - layouts/_default/demolayout-baseof.html
+ - layouts/_default/single-baseof.html
+ - layouts/_default/baseof.html
+ - Example: AMP single page in "posts" section
+ Kind: page
+ OutputFormat: amp
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/single.amp.html
+ - layouts/posts/single.html
+ - layouts/_default/single.amp.html
+ - layouts/_default/single.html
+ - Example: AMP single page in "posts" section, French language
+ Kind: page
+ OutputFormat: amp
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/single.fr.amp.html
+ - layouts/posts/single.amp.html
+ - layouts/posts/single.fr.html
+ - layouts/posts/single.html
+ - layouts/_default/single.fr.amp.html
+ - layouts/_default/single.amp.html
+ - layouts/_default/single.fr.html
+ - layouts/_default/single.html
+ - Example: Home page
+ Kind: home
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/index.html.html
+ - layouts/home.html.html
+ - layouts/list.html.html
+ - layouts/index.html
+ - layouts/home.html
+ - layouts/list.html
+ - layouts/_default/index.html.html
+ - layouts/_default/home.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/index.html
+ - layouts/_default/home.html
+ - layouts/_default/list.html
+ - Example: Base template for home page
+ Kind: home
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/index-baseof.html.html
+ - layouts/home-baseof.html.html
+ - layouts/list-baseof.html.html
+ - layouts/baseof.html.html
+ - layouts/index-baseof.html
+ - layouts/home-baseof.html
+ - layouts/list-baseof.html
+ - layouts/baseof.html
+ - layouts/_default/index-baseof.html.html
+ - layouts/_default/home-baseof.html.html
+ - layouts/_default/list-baseof.html.html
+ - layouts/_default/baseof.html.html
+ - layouts/_default/index-baseof.html
+ - layouts/_default/home-baseof.html
+ - layouts/_default/list-baseof.html
+ - layouts/_default/baseof.html
+ - Example: Home page with type set to "demotype"
+ Kind: home
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/demotype/index.html.html
+ - layouts/demotype/home.html.html
+ - layouts/demotype/list.html.html
+ - layouts/demotype/index.html
+ - layouts/demotype/home.html
+ - layouts/demotype/list.html
+ - layouts/index.html.html
+ - layouts/home.html.html
+ - layouts/list.html.html
+ - layouts/index.html
+ - layouts/home.html
+ - layouts/list.html
+ - layouts/_default/index.html.html
+ - layouts/_default/home.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/index.html
+ - layouts/_default/home.html
+ - layouts/_default/list.html
+ - Example: Base template for home page with type set to "demotype"
+ Kind: home
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/demotype/index-baseof.html.html
+ - layouts/demotype/home-baseof.html.html
+ - layouts/demotype/list-baseof.html.html
+ - layouts/demotype/baseof.html.html
+ - layouts/demotype/index-baseof.html
+ - layouts/demotype/home-baseof.html
+ - layouts/demotype/list-baseof.html
+ - layouts/demotype/baseof.html
+ - layouts/index-baseof.html.html
+ - layouts/home-baseof.html.html
+ - layouts/list-baseof.html.html
+ - layouts/baseof.html.html
+ - layouts/index-baseof.html
+ - layouts/home-baseof.html
+ - layouts/list-baseof.html
+ - layouts/baseof.html
+ - layouts/_default/index-baseof.html.html
+ - layouts/_default/home-baseof.html.html
+ - layouts/_default/list-baseof.html.html
+ - layouts/_default/baseof.html.html
+ - layouts/_default/index-baseof.html
+ - layouts/_default/home-baseof.html
+ - layouts/_default/list-baseof.html
+ - layouts/_default/baseof.html
+ - Example: Home page with layout set to "demolayout"
+ Kind: home
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/demolayout.html.html
+ - layouts/index.html.html
+ - layouts/home.html.html
+ - layouts/list.html.html
+ - layouts/demolayout.html
+ - layouts/index.html
+ - layouts/home.html
+ - layouts/list.html
+ - layouts/_default/demolayout.html.html
+ - layouts/_default/index.html.html
+ - layouts/_default/home.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/demolayout.html
+ - layouts/_default/index.html
+ - layouts/_default/home.html
+ - layouts/_default/list.html
+ - Example: AMP home, French language
+ Kind: home
+ OutputFormat: amp
+ Suffix: html
+ Template Lookup Order:
+ - layouts/index.fr.amp.html
+ - layouts/home.fr.amp.html
+ - layouts/list.fr.amp.html
+ - layouts/index.amp.html
+ - layouts/home.amp.html
+ - layouts/list.amp.html
+ - layouts/index.fr.html
+ - layouts/home.fr.html
+ - layouts/list.fr.html
+ - layouts/index.html
+ - layouts/home.html
+ - layouts/list.html
+ - layouts/_default/index.fr.amp.html
+ - layouts/_default/home.fr.amp.html
+ - layouts/_default/list.fr.amp.html
+ - layouts/_default/index.amp.html
+ - layouts/_default/home.amp.html
+ - layouts/_default/list.amp.html
+ - layouts/_default/index.fr.html
+ - layouts/_default/home.fr.html
+ - layouts/_default/list.fr.html
+ - layouts/_default/index.html
+ - layouts/_default/home.html
+ - layouts/_default/list.html
+ - Example: JSON home
+ Kind: home
+ OutputFormat: json
+ Suffix: json
+ Template Lookup Order:
+ - layouts/index.json.json
+ - layouts/home.json.json
+ - layouts/list.json.json
+ - layouts/index.json
+ - layouts/home.json
+ - layouts/list.json
+ - layouts/_default/index.json.json
+ - layouts/_default/home.json.json
+ - layouts/_default/list.json.json
+ - layouts/_default/index.json
+ - layouts/_default/home.json
+ - layouts/_default/list.json
+ - Example: RSS home
+ Kind: home
+ OutputFormat: rss
+ Suffix: xml
+ Template Lookup Order:
+ - layouts/index.rss.xml
+ - layouts/home.rss.xml
+ - layouts/rss.xml
+ - layouts/list.rss.xml
+ - layouts/index.xml
+ - layouts/home.xml
+ - layouts/list.xml
+ - layouts/_default/index.rss.xml
+ - layouts/_default/home.rss.xml
+ - layouts/_default/rss.xml
+ - layouts/_default/list.rss.xml
+ - layouts/_default/index.xml
+ - layouts/_default/home.xml
+ - layouts/_default/list.xml
+ - layouts/_internal/_default/rss.xml
+ - Example: Section list for "posts"
+ Kind: section
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/posts.html.html
+ - layouts/posts/section.html.html
+ - layouts/posts/list.html.html
+ - layouts/posts/posts.html
+ - layouts/posts/section.html
+ - layouts/posts/list.html
+ - layouts/section/posts.html.html
+ - layouts/section/section.html.html
+ - layouts/section/list.html.html
+ - layouts/section/posts.html
+ - layouts/section/section.html
+ - layouts/section/list.html
+ - layouts/_default/posts.html.html
+ - layouts/_default/section.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/posts.html
+ - layouts/_default/section.html
+ - layouts/_default/list.html
+ - Example: Section list for "posts" with type set to "blog"
+ Kind: section
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/blog/posts.html.html
+ - layouts/blog/section.html.html
+ - layouts/blog/list.html.html
+ - layouts/blog/posts.html
+ - layouts/blog/section.html
+ - layouts/blog/list.html
+ - layouts/posts/posts.html.html
+ - layouts/posts/section.html.html
+ - layouts/posts/list.html.html
+ - layouts/posts/posts.html
+ - layouts/posts/section.html
+ - layouts/posts/list.html
+ - layouts/section/posts.html.html
+ - layouts/section/section.html.html
+ - layouts/section/list.html.html
+ - layouts/section/posts.html
+ - layouts/section/section.html
+ - layouts/section/list.html
+ - layouts/_default/posts.html.html
+ - layouts/_default/section.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/posts.html
+ - layouts/_default/section.html
+ - layouts/_default/list.html
+ - Example: Section list for "posts" with layout set to "demolayout"
+ Kind: section
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/posts/demolayout.html.html
+ - layouts/posts/posts.html.html
+ - layouts/posts/section.html.html
+ - layouts/posts/list.html.html
+ - layouts/posts/demolayout.html
+ - layouts/posts/posts.html
+ - layouts/posts/section.html
+ - layouts/posts/list.html
+ - layouts/section/demolayout.html.html
+ - layouts/section/posts.html.html
+ - layouts/section/section.html.html
+ - layouts/section/list.html.html
+ - layouts/section/demolayout.html
+ - layouts/section/posts.html
+ - layouts/section/section.html
+ - layouts/section/list.html
+ - layouts/_default/demolayout.html.html
+ - layouts/_default/posts.html.html
+ - layouts/_default/section.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/demolayout.html
+ - layouts/_default/posts.html
+ - layouts/_default/section.html
+ - layouts/_default/list.html
+ - Example: Section list for "posts"
+ Kind: section
+ OutputFormat: rss
+ Suffix: xml
+ Template Lookup Order:
+ - layouts/posts/section.rss.xml
+ - layouts/posts/rss.xml
+ - layouts/posts/list.rss.xml
+ - layouts/posts/section.xml
+ - layouts/posts/list.xml
+ - layouts/section/section.rss.xml
+ - layouts/section/rss.xml
+ - layouts/section/list.rss.xml
+ - layouts/section/section.xml
+ - layouts/section/list.xml
+ - layouts/_default/section.rss.xml
+ - layouts/_default/rss.xml
+ - layouts/_default/list.rss.xml
+ - layouts/_default/section.xml
+ - layouts/_default/list.xml
+ - layouts/_internal/_default/rss.xml
+ - Example: Taxonomy list for "categories"
+ Kind: taxonomy
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/categories/category.terms.html.html
+ - layouts/categories/terms.html.html
+ - layouts/categories/taxonomy.html.html
+ - layouts/categories/list.html.html
+ - layouts/categories/category.terms.html
+ - layouts/categories/terms.html
+ - layouts/categories/taxonomy.html
+ - layouts/categories/list.html
+ - layouts/category/category.terms.html.html
+ - layouts/category/terms.html.html
+ - layouts/category/taxonomy.html.html
+ - layouts/category/list.html.html
+ - layouts/category/category.terms.html
+ - layouts/category/terms.html
+ - layouts/category/taxonomy.html
+ - layouts/category/list.html
+ - layouts/taxonomy/category.terms.html.html
+ - layouts/taxonomy/terms.html.html
+ - layouts/taxonomy/taxonomy.html.html
+ - layouts/taxonomy/list.html.html
+ - layouts/taxonomy/category.terms.html
+ - layouts/taxonomy/terms.html
+ - layouts/taxonomy/taxonomy.html
+ - layouts/taxonomy/list.html
+ - layouts/_default/category.terms.html.html
+ - layouts/_default/terms.html.html
+ - layouts/_default/taxonomy.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/category.terms.html
+ - layouts/_default/terms.html
+ - layouts/_default/taxonomy.html
+ - layouts/_default/list.html
+ - Example: Taxonomy list for "categories"
+ Kind: taxonomy
+ OutputFormat: rss
+ Suffix: xml
+ Template Lookup Order:
+ - layouts/categories/category.terms.rss.xml
+ - layouts/categories/terms.rss.xml
+ - layouts/categories/taxonomy.rss.xml
+ - layouts/categories/rss.xml
+ - layouts/categories/list.rss.xml
+ - layouts/categories/category.terms.xml
+ - layouts/categories/terms.xml
+ - layouts/categories/taxonomy.xml
+ - layouts/categories/list.xml
+ - layouts/category/category.terms.rss.xml
+ - layouts/category/terms.rss.xml
+ - layouts/category/taxonomy.rss.xml
+ - layouts/category/rss.xml
+ - layouts/category/list.rss.xml
+ - layouts/category/category.terms.xml
+ - layouts/category/terms.xml
+ - layouts/category/taxonomy.xml
+ - layouts/category/list.xml
+ - layouts/taxonomy/category.terms.rss.xml
+ - layouts/taxonomy/terms.rss.xml
+ - layouts/taxonomy/taxonomy.rss.xml
+ - layouts/taxonomy/rss.xml
+ - layouts/taxonomy/list.rss.xml
+ - layouts/taxonomy/category.terms.xml
+ - layouts/taxonomy/terms.xml
+ - layouts/taxonomy/taxonomy.xml
+ - layouts/taxonomy/list.xml
+ - layouts/_default/category.terms.rss.xml
+ - layouts/_default/terms.rss.xml
+ - layouts/_default/taxonomy.rss.xml
+ - layouts/_default/rss.xml
+ - layouts/_default/list.rss.xml
+ - layouts/_default/category.terms.xml
+ - layouts/_default/terms.xml
+ - layouts/_default/taxonomy.xml
+ - layouts/_default/list.xml
+ - layouts/_internal/_default/rss.xml
+ - Example: Term list for "categories"
+ Kind: term
+ OutputFormat: html
+ Suffix: html
+ Template Lookup Order:
+ - layouts/categories/term.html.html
+ - layouts/categories/category.html.html
+ - layouts/categories/taxonomy.html.html
+ - layouts/categories/list.html.html
+ - layouts/categories/term.html
+ - layouts/categories/category.html
+ - layouts/categories/taxonomy.html
+ - layouts/categories/list.html
+ - layouts/term/term.html.html
+ - layouts/term/category.html.html
+ - layouts/term/taxonomy.html.html
+ - layouts/term/list.html.html
+ - layouts/term/term.html
+ - layouts/term/category.html
+ - layouts/term/taxonomy.html
+ - layouts/term/list.html
+ - layouts/taxonomy/term.html.html
+ - layouts/taxonomy/category.html.html
+ - layouts/taxonomy/taxonomy.html.html
+ - layouts/taxonomy/list.html.html
+ - layouts/taxonomy/term.html
+ - layouts/taxonomy/category.html
+ - layouts/taxonomy/taxonomy.html
+ - layouts/taxonomy/list.html
+ - layouts/category/term.html.html
+ - layouts/category/category.html.html
+ - layouts/category/taxonomy.html.html
+ - layouts/category/list.html.html
+ - layouts/category/term.html
+ - layouts/category/category.html
+ - layouts/category/taxonomy.html
+ - layouts/category/list.html
+ - layouts/_default/term.html.html
+ - layouts/_default/category.html.html
+ - layouts/_default/taxonomy.html.html
+ - layouts/_default/list.html.html
+ - layouts/_default/term.html
+ - layouts/_default/category.html
+ - layouts/_default/taxonomy.html
+ - layouts/_default/list.html
+ - Example: Term list for "categories"
+ Kind: term
+ OutputFormat: rss
+ Suffix: xml
+ Template Lookup Order:
+ - layouts/categories/term.rss.xml
+ - layouts/categories/category.rss.xml
+ - layouts/categories/taxonomy.rss.xml
+ - layouts/categories/rss.xml
+ - layouts/categories/list.rss.xml
+ - layouts/categories/term.xml
+ - layouts/categories/category.xml
+ - layouts/categories/taxonomy.xml
+ - layouts/categories/list.xml
+ - layouts/term/term.rss.xml
+ - layouts/term/category.rss.xml
+ - layouts/term/taxonomy.rss.xml
+ - layouts/term/rss.xml
+ - layouts/term/list.rss.xml
+ - layouts/term/term.xml
+ - layouts/term/category.xml
+ - layouts/term/taxonomy.xml
+ - layouts/term/list.xml
+ - layouts/taxonomy/term.rss.xml
+ - layouts/taxonomy/category.rss.xml
+ - layouts/taxonomy/taxonomy.rss.xml
+ - layouts/taxonomy/rss.xml
+ - layouts/taxonomy/list.rss.xml
+ - layouts/taxonomy/term.xml
+ - layouts/taxonomy/category.xml
+ - layouts/taxonomy/taxonomy.xml
+ - layouts/taxonomy/list.xml
+ - layouts/category/term.rss.xml
+ - layouts/category/category.rss.xml
+ - layouts/category/taxonomy.rss.xml
+ - layouts/category/rss.xml
+ - layouts/category/list.rss.xml
+ - layouts/category/term.xml
+ - layouts/category/category.xml
+ - layouts/category/taxonomy.xml
+ - layouts/category/list.xml
+ - layouts/_default/term.rss.xml
+ - layouts/_default/category.rss.xml
+ - layouts/_default/taxonomy.rss.xml
+ - layouts/_default/rss.xml
+ - layouts/_default/list.rss.xml
+ - layouts/_default/term.xml
+ - layouts/_default/category.xml
+ - layouts/_default/taxonomy.xml
+ - layouts/_default/list.xml
+ - layouts/_internal/_default/rss.xml
+tpl:
+ funcs:
+ cast:
+ ToFloat:
+ Aliases:
+ - float
+ Args:
+ - v
+ Description: ToFloat converts v to a float.
+ Examples:
+ - - '{{ "1234" | float | printf "%T" }}'
+ - float64
+ ToInt:
+ Aliases:
+ - int
+ Args:
+ - v
+ Description: ToInt converts v to an int.
+ Examples:
+ - - '{{ "1234" | int | printf "%T" }}'
+ - int
+ ToString:
+ Aliases:
+ - string
+ Args:
+ - v
+ Description: ToString converts v to a string.
+ Examples:
+ - - '{{ 1234 | string | printf "%T" }}'
+ - string
+ collections:
+ After:
+ Aliases:
+ - after
+ Args:
+ - "n"
+ - l
+ Description: After returns all the items after the first n items in list l.
+ Examples: []
+ Append:
+ Aliases:
+ - append
+ Args:
+ - args
+ Description: "Append appends args up to the last one to the slice in the last
+ argument.\nThis construct allows template constructs like this:\n\n\t{{
+ $pages = $pages | append $p2 $p1 }}\n\nNote that with 2 arguments where
+ both are slices of the same type,\nthe first slice will be appended to the
+ second:\n\n\t{{ $pages = $pages | append .Site.RegularPages }}"
+ Examples: []
+ Apply:
+ Aliases:
+ - apply
+ Args:
+ - ctx
+ - c
+ - fname
+ - args
+ Description: Apply takes an array or slice c and returns a new slice with
+ the function fname applied over it.
+ Examples: []
+ Complement:
+ Aliases:
+ - complement
+ Args:
+ - ls
+ Description: "Complement gives the elements in the last element of ls that
+ are not in\nany of the others.\n\nAll elements of ls must be slices or arrays
+ of comparable types.\n\nThe reasoning behind this rather clumsy API is so
+ we can do this in the templates:\n\n\t{{ $c := .Pages | complement $last4
+ }}"
+ Examples:
+ - - '{{ slice "a" "b" "c" "d" "e" "f" | complement (slice "b" "c") (slice
+ "d" "e") }}'
+ - '[a f]'
+ Delimit:
+ Aliases:
+ - delimit
+ Args:
+ - ctx
+ - l
+ - sep
+ - last
+ Description: |-
+ Delimit takes a given list l and returns a string delimited by sep.
+ If last is passed to the function, it will be used as the final delimiter.
+ Examples:
+ - - '{{ delimit (slice "A" "B" "C") ", " " and " }}'
+ - A, B and C
+ Dictionary:
+ Aliases:
+ - dict
+ Args:
+ - values
+ Description: |-
+ Dictionary creates a new map from the given parameters by
+ treating values as key-value pairs. The number of values must be even.
+ The keys can be string slices, which will create the needed nested structure.
+ Examples: []
+ First:
+ Aliases:
+ - first
+ Args:
+ - limit
+ - l
+ Description: First returns the first limit items in list l.
+ Examples: []
+ Group:
+ Aliases:
+ - group
+ Args:
+ - key
+ - items
+ Description: |-
+ Group groups a set of items by the given key.
+ This is currently only supported for Pages.
+ Examples: []
+ In:
+ Aliases:
+ - in
+ Args:
+ - l
+ - v
+ Description: In returns whether v is in the list l. l may be an array or
+ slice.
+ Examples:
+ - - '{{ if in "this string contains a substring" "substring" }}Substring found!{{
+ end }}'
+ - Substring found!
+ Index:
+ Aliases:
+ - index
+ Args:
+ - item
+ - args
+ Description: |-
+ Index returns the result of indexing its first argument by the following
+ arguments. Thus "index x 1 2 3" is, in Go syntax, x[1][2][3]. Each
+ indexed item must be a map, slice, or array.
+
+ Adapted from Go stdlib src/text/template/funcs.go.
+
+ We deviate from the stdlib mostly because of https://github.com/golang/go/issues/14751.
+ Examples: []
+ Intersect:
+ Aliases:
+ - intersect
+ Args:
+ - l1
+ - l2
+ Description: |-
+ Intersect returns the common elements in the given sets, l1 and l2. l1 and
+ l2 must be of the same type and may be either arrays or slices.
+ Examples: []
+ IsSet:
+ Aliases:
+ - isSet
+ - isset
+ Args:
+ - c
+ - key
+ Description: |-
+ IsSet returns whether a given array, channel, slice, or map in c has the given key
+ defined.
+ Examples: []
+ KeyVals:
+ Aliases:
+ - keyVals
+ Args:
+ - key
+ - values
+ Description: KeyVals creates a key and values wrapper.
+ Examples:
+ - - '{{ keyVals "key" "a" "b" }}'
+ - 'key: [a b]'
+ Last:
+ Aliases:
+ - last
+ Args:
+ - limit
+ - l
+ Description: Last returns the last limit items in the list l.
+ Examples: []
+ Merge:
+ Aliases:
+ - merge
+ Args:
+ - params
+ Description: |-
+ Merge creates a copy of the final parameter in params and merges the preceding
+ parameters into it in reverse order.
+
+ Currently only maps are supported. Key handling is case insensitive.
+ Examples:
+ - - '{{ dict "title" "Hugo Rocks!" | collections.Merge (dict "title" "Default
+ Title" "description" "Yes, Hugo Rocks!") | sort }}'
+ - '[Yes, Hugo Rocks! Hugo Rocks!]'
+ - - '{{ merge (dict "title" "Default Title" "description" "Yes, Hugo Rocks!")
+ (dict "title" "Hugo Rocks!") | sort }}'
+ - '[Yes, Hugo Rocks! Hugo Rocks!]'
+ - - '{{ merge (dict "title" "Default Title" "description" "Yes, Hugo Rocks!")
+ (dict "title" "Hugo Rocks!") (dict "extra" "For reals!") | sort }}'
+ - '[Yes, Hugo Rocks! For reals! Hugo Rocks!]'
+ NewScratch:
+ Aliases:
+ - newScratch
+ Args: null
+ Description: |-
+ NewScratch creates a new Scratch which can be used to store values in a
+ thread safe way.
+ Examples:
+ - - '{{ $scratch := newScratch }}{{ $scratch.Add "b" 2 }}{{ $scratch.Add "b"
+ 2 }}{{ $scratch.Get "b" }}'
+ - "4"
+ Querify:
+ Aliases:
+ - querify
+ Args:
+ - params
+ Description: |-
+ Querify returns a URL query string composed of the given key-value pairs,
+ encoded and sorted by key.
+ Examples:
+ - - '{{ (querify "foo" 1 "bar" 2 "baz" "with spaces" "qux" "this&that=those")
+ | safeHTML }}'
+ - bar=2&baz=with+spaces&foo=1&qux=this%26that%3Dthose
+ - - <a href="https://www.google.com?{{ (querify "q" "test" "page" 3) | safeURL
+ }}">Search</a>
+ - <a href="https://www.google.com?page=3&q=test">Search</a>
+ - - '{{ slice "foo" 1 "bar" 2 | querify | safeHTML }}'
+ - bar=2&foo=1
+ Reverse:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Seq:
+ Aliases:
+ - seq
+ Args:
+ - args
+ Description: "Seq creates a sequence of integers from args. It's named and
+ used as GNU's seq.\n\nExamples:\n\n\t3 => 1, 2, 3\n\t1 2 4 => 1, 3\n\t-3
+ => -1, -2, -3\n\t1 4 => 1, 2, 3, 4\n\t1 -2 => 1, 0, -1, -2"
+ Examples:
+ - - '{{ seq 3 }}'
+ - '[1 2 3]'
+ Shuffle:
+ Aliases:
+ - shuffle
+ Args:
+ - l
+ Description: Shuffle returns list l in a randomized order.
+ Examples: []
+ Slice:
+ Aliases:
+ - slice
+ Args:
+ - args
+ Description: Slice returns a slice of all passed arguments.
+ Examples:
+ - - '{{ slice "B" "C" "A" | sort }}'
+ - '[A B C]'
+ Sort:
+ Aliases:
+ - sort
+ Args:
+ - ctx
+ - l
+ - args
+ Description: Sort returns a sorted copy of the list l.
+ Examples: []
+ SymDiff:
+ Aliases:
+ - symdiff
+ Args:
+ - s2
+ - s1
+ Description: |-
+ SymDiff returns the symmetric difference of s1 and s2.
+ Arguments must be either a slice or an array of comparable types.
+ Examples:
+ - - '{{ slice 1 2 3 | symdiff (slice 3 4) }}'
+ - '[1 2 4]'
+ Union:
+ Aliases:
+ - union
+ Args:
+ - l1
+ - l2
+ Description: |-
+ Union returns the union of the given sets, l1 and l2. l1 and
+ l2 must be of the same type and may be either arrays or slices.
+ If l1 and l2 aren't of the same type then l1 will be returned.
+ If either l1 or l2 is nil then the non-nil list will be returned.
+ Examples:
+ - - '{{ union (slice 1 2 3) (slice 3 4 5) }}'
+ - '[1 2 3 4 5]'
+ Uniq:
+ Aliases:
+ - uniq
+ Args:
+ - l
+ Description: Uniq returns a new list with duplicate elements in the list l
+ removed.
+ Examples:
+ - - '{{ slice 1 2 3 2 | uniq }}'
+ - '[1 2 3]'
+ Where:
+ Aliases:
+ - where
+ Args:
+ - ctx
+ - c
+ - key
+ - args
+ Description: Where returns a filtered subset of collection c.
+ Examples: []
+ compare:
+ Conditional:
+ Aliases:
+ - cond
+ Args:
+ - cond
+ - v1
+ - v2
+ Description: |-
+ Conditional can be used as a ternary operator.
+
+ It returns v1 if cond is true, else v2.
+ Examples:
+ - - '{{ cond (eq (add 2 2) 4) "2+2 is 4" "what?" | safeHTML }}'
+ - 2+2 is 4
+ Default:
+ Aliases:
+ - default
+ Args:
+ - defaultv
+ - givenv
+ Description: |-
+ Default checks whether a givenv is set and returns the default value defaultv if it
+ is not. "Set" in this context means non-zero for numeric types and times;
+ non-zero length for strings, arrays, slices, and maps;
+ any boolean or struct value; or non-nil for any other types.
+ Examples:
+ - - '{{ "Hugo Rocks!" | default "Hugo Rules!" }}'
+ - Hugo Rocks!
+ - - '{{ "" | default "Hugo Rules!" }}'
+ - Hugo Rules!
+ Eq:
+ Aliases:
+ - eq
+ Args:
+ - first
+ - others
+ Description: Eq returns the boolean truth of arg1 == arg2 || arg1 == arg3
+ || arg1 == arg4.
+ Examples:
+ - - '{{ if eq .Section "blog" }}current-section{{ end }}'
+ - current-section
+ Ge:
+ Aliases:
+ - ge
+ Args:
+ - first
+ - others
+ Description: Ge returns the boolean truth of arg1 >= arg2 && arg1 >= arg3
+ && arg1 >= arg4.
+ Examples:
+ - - '{{ if ge hugo.Version "0.80" }}Reasonable new Hugo version!{{ end }}'
+ - Reasonable new Hugo version!
+ Gt:
+ Aliases:
+ - gt
+ Args:
+ - first
+ - others
+ Description: Gt returns the boolean truth of arg1 > arg2 && arg1 > arg3 &&
+ arg1 > arg4.
+ Examples: []
+ Le:
+ Aliases:
+ - le
+ Args:
+ - first
+ - others
+ Description: Le returns the boolean truth of arg1 <= arg2 && arg1 <= arg3
+ && arg1 <= arg4.
+ Examples: []
+ Lt:
+ Aliases:
+ - lt
+ Args:
+ - first
+ - others
+ Description: Lt returns the boolean truth of arg1 < arg2 && arg1 < arg3 &&
+ arg1 < arg4.
+ Examples: []
+ LtCollate:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Ne:
+ Aliases:
+ - ne
+ Args:
+ - first
+ - others
+ Description: Ne returns the boolean truth of arg1 != arg2 && arg1 != arg3
+ && arg1 != arg4.
+ Examples: []
+ crypto:
+ FNV32a:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ HMAC:
+ Aliases:
+ - hmac
+ Args:
+ - h
+ - k
+ - m
+ - e
+ Description: HMAC returns a cryptographic hash that uses a key to sign a message.
+ Examples:
+ - - '{{ hmac "sha256" "Secret key" "Hello world, gophers!" }}'
+ - b6d11b6c53830b9d87036272ca9fe9d19306b8f9d8aa07b15da27d89e6e34f40
+ MD5:
+ Aliases:
+ - md5
+ Args:
+ - v
+ Description: MD5 hashes the v and returns its MD5 checksum.
+ Examples:
+ - - '{{ md5 "Hello world, gophers!" }}'
+ - b3029f756f98f79e7f1b7f1d1f0dd53b
+ - - '{{ crypto.MD5 "Hello world, gophers!" }}'
+ - b3029f756f98f79e7f1b7f1d1f0dd53b
+ SHA1:
+ Aliases:
+ - sha1
+ Args:
+ - v
+ Description: SHA1 hashes v and returns its SHA1 checksum.
+ Examples:
+ - - '{{ sha1 "Hello world, gophers!" }}'
+ - c8b5b0e33d408246e30f53e32b8f7627a7a649d4
+ SHA256:
+ Aliases:
+ - sha256
+ Args:
+ - v
+ Description: SHA256 hashes v and returns its SHA256 checksum.
+ Examples:
+ - - '{{ sha256 "Hello world, gophers!" }}'
+ - 6ec43b78da9669f50e4e422575c54bf87536954ccd58280219c393f2ce352b46
+ css:
+ PostCSS:
+ Aliases:
+ - postCSS
+ Args:
+ - args
+ Description: PostCSS processes the given Resource with PostCSS.
+ Examples: []
+ Quoted:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Sass:
+ Aliases:
+ - toCSS
+ Args:
+ - args
+ Description: Sass processes the given Resource with SASS.
+ Examples: []
+ TailwindCSS:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Unquoted:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ data:
+ GetCSV:
+ Aliases:
+ - getCSV
+ Args:
+ - sep
+ - args
+ Description: |-
+ GetCSV expects the separator sep and one or n-parts of a URL to a resource which
+ can either be a local or a remote one.
+ The data separator can be a comma, semi-colon, pipe, etc, but only one character.
+ If you provide multiple parts for the URL they will be joined together to the final URL.
+ GetCSV returns nil or a slice slice to use in a short code.
+ Examples: []
+ GetJSON:
+ Aliases:
+ - getJSON
+ Args:
+ - args
+ Description: |-
+ GetJSON expects one or n-parts of a URL in args to a resource which can either be a local or a remote one.
+ If you provide multiple parts they will be joined together to the final URL.
+ GetJSON returns nil or parsed JSON to use in a short code.
+ Examples: []
+ debug:
+ Dump:
+ Aliases: null
+ Args:
+ - val
+ Description: |-
+ Dump returns a object dump of val as a string.
+ Note that not every value passed to Dump will print so nicely, but
+ we'll improve on that.
+
+ We recommend using the "go" Chroma lexer to format the output
+ nicely.
+
+ Also note that the output from Dump may change from Hugo version to the next,
+ so don't depend on a specific output.
+ Examples:
+ - - |-
+ {{ $m := newScratch }}
+ {{ $m.Set "Hugo" "Rocks!" }}
+ {{ $m.Values | debug.Dump | safeHTML }}
+ - |-
+ {
+ "Hugo": "Rocks!"
+ }
+ TestDeprecationErr:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ TestDeprecationInfo:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ TestDeprecationWarn:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Timer:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ VisualizeSpaces:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ diagrams:
+ Goat:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ encoding:
+ Base64Decode:
+ Aliases:
+ - base64Decode
+ Args:
+ - content
+ Description: Base64Decode returns the base64 decoding of the given content.
+ Examples:
+ - - '{{ "SGVsbG8gd29ybGQ=" | base64Decode }}'
+ - Hello world
+ - - '{{ 42 | base64Encode | base64Decode }}'
+ - "42"
+ Base64Encode:
+ Aliases:
+ - base64Encode
+ Args:
+ - content
+ Description: Base64Encode returns the base64 encoding of the given content.
+ Examples:
+ - - '{{ "Hello world" | base64Encode }}'
+ - SGVsbG8gd29ybGQ=
+ Jsonify:
+ Aliases:
+ - jsonify
+ Args:
+ - args
+ Description: |-
+ Jsonify encodes a given object to JSON. To pretty print the JSON, pass a map
+ or dictionary of options as the first value in args. Supported options are
+ "prefix" and "indent". Each JSON element in the output will begin on a new
+ line beginning with prefix followed by one or more copies of indent according
+ to the indentation nesting.
+ Examples:
+ - - '{{ (slice "A" "B" "C") | jsonify }}'
+ - '["A","B","C"]'
+ - - '{{ (slice "A" "B" "C") | jsonify (dict "indent" " ") }}'
+ - |-
+ [
+ "A",
+ "B",
+ "C"
+ ]
+ fmt:
+ Errorf:
+ Aliases:
+ - errorf
+ Args:
+ - format
+ - args
+ Description: |-
+ Errorf formats args according to a format specifier and logs an ERROR.
+ It returns an empty string.
+ Examples:
+ - - '{{ errorf "%s." "failed" }}'
+ - ""
+ Erroridf:
+ Aliases:
+ - erroridf
+ Args:
+ - id
+ - format
+ - args
+ Description: |-
+ Erroridf formats args according to a format specifier and logs an ERROR and
+ an information text that the error with the given id can be suppressed in config.
+ It returns an empty string.
+ Examples:
+ - - '{{ erroridf "my-err-id" "%s." "failed" }}'
+ - ""
+ Errormf:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Print:
+ Aliases:
+ - print
+ Args:
+ - args
+ Description: Print returns a string representation of args.
+ Examples:
+ - - '{{ print "works!" }}'
+ - works!
+ Printf:
+ Aliases:
+ - printf
+ Args:
+ - format
+ - args
+ Description: Printf returns string representation of args formatted with the
+ layout in format.
+ Examples:
+ - - '{{ printf "%s!" "works" }}'
+ - works!
+ Println:
+ Aliases:
+ - println
+ Args:
+ - args
+ Description: Println returns string representation of args ending with a
+ newline.
+ Examples:
+ - - '{{ println "works!" }}'
+ - |
+ works!
+ Warnf:
+ Aliases:
+ - warnf
+ Args:
+ - format
+ - args
+ Description: |-
+ Warnf formats args according to a format specifier and logs a WARNING.
+ It returns an empty string.
+ Examples:
+ - - '{{ warnf "%s." "warning" }}'
+ - ""
+ Warnidf:
+ Aliases:
+ - warnidf
+ Args:
+ - id
+ - format
+ - args
+ Description: |-
+ Warnidf formats args according to a format specifier and logs an WARNING and
+ an information text that the warning with the given id can be suppressed in config.
+ It returns an empty string.
+ Examples:
+ - - '{{ warnidf "my-warn-id" "%s." "warning" }}'
+ - ""
+ Warnmf:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ hash:
+ FNV32a:
+ Aliases: null
+ Args:
+ - v
+ Description: FNV32a hashes v using fnv32a algorithm.
+ Examples:
+ - - '{{ hash.FNV32a "Hugo Rocks!!" }}'
+ - "1515779328"
+ XxHash:
+ Aliases:
+ - xxhash
+ Args:
+ - v
+ Description: XxHash returns the xxHash of the input string.
+ Examples:
+ - - '{{ hash.XxHash "The quick brown fox jumps over the lazy dog" }}'
+ - 0b242d361fda71bc
+ hugo:
+ Deps:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Generator:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsDevelopment:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsExtended:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsMultiHost:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsMultihost:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsMultilingual:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsProduction:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsServer:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Store:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Version:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ WorkingDir:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ images:
+ AutoOrient:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Brightness:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ ColorBalance:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Colorize:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Config:
+ Aliases:
+ - imageConfig
+ Args:
+ - path
+ Description: |-
+ Config returns the image.Config for the specified path relative to the
+ working directory.
+ Examples: []
+ Contrast:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Dither:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Filter:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Gamma:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ GaussianBlur:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Grayscale:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Hue:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Invert:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
++ Mask:
++ Aliases: null
++ Args: null
++ Description: ""
++ Examples: null
+ Opacity:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Overlay:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Padding:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Pixelate:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Process:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
++ QR:
++ Aliases: null
++ Args: null
++ Description: ""
++ Examples: null
+ Saturation:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Sepia:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Sigmoid:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Text:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ UnsharpMask:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ inflect:
+ Humanize:
+ Aliases:
+ - humanize
+ Args:
+ - v
+ Description: |-
+ Humanize returns the humanized form of v.
+
+ If v is either an integer or a string containing an integer
+ value, the behavior is to add the appropriate ordinal.
+ Examples:
+ - - '{{ humanize "my-first-post" }}'
+ - My first post
+ - - '{{ humanize "myCamelPost" }}'
+ - My camel post
+ - - '{{ humanize "52" }}'
+ - 52nd
+ - - '{{ humanize 103 }}'
+ - 103rd
+ Pluralize:
+ Aliases:
+ - pluralize
+ Args:
+ - v
+ Description: Pluralize returns the plural form of the single word in v.
+ Examples:
+ - - '{{ "cat" | pluralize }}'
+ - cats
+ Singularize:
+ Aliases:
+ - singularize
+ Args:
+ - v
+ Description: Singularize returns the singular form of a single word in v.
+ Examples:
+ - - '{{ "cats" | singularize }}'
+ - cat
+ js:
+ Babel:
+ Aliases:
+ - babel
+ Args:
+ - args
+ Description: Babel processes the given Resource with Babel.
+ Examples: []
+ Batch:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Build:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ lang:
+ FormatAccounting:
+ Aliases: null
+ Args:
+ - precision
+ - currency
+ - number
+ Description: |-
+ FormatAccounting returns the currency representation of number for the given currency and precision
+ for the current language in accounting notation.
+
+ The return value is formatted with at least two decimal places.
+ Examples:
+ - - '{{ 512.5032 | lang.FormatAccounting 2 "NOK" }}'
+ - NOK512.50
+ FormatCurrency:
+ Aliases: null
+ Args:
+ - precision
+ - currency
+ - number
+ Description: |-
+ FormatCurrency returns the currency representation of number for the given currency and precision
+ for the current language.
+
+ The return value is formatted with at least two decimal places.
+ Examples:
+ - - '{{ 512.5032 | lang.FormatCurrency 2 "USD" }}'
+ - $512.50
+ FormatNumber:
+ Aliases: null
+ Args:
+ - precision
+ - number
+ Description: FormatNumber formats number with the given precision for the
+ current language.
+ Examples:
+ - - '{{ 512.5032 | lang.FormatNumber 2 }}'
+ - "512.50"
+ FormatNumberCustom:
+ Aliases: null
+ Args:
+ - precision
+ - number
+ - options
+ Description: |-
+ FormatNumberCustom formats a number with the given precision. The first
+ options parameter is a space-delimited string of characters to represent
+ negativity, the decimal point, and grouping. The default value is `- . ,`.
+ The second options parameter defines an alternate delimiting character.
+
+ Note that numbers are rounded up at 5 or greater.
+ So, with precision set to 0, 1.5 becomes `2`, and 1.4 becomes `1`.
+
+ For a simpler function that adapts to the current language, see FormatNumber.
+ Examples:
+ - - '{{ lang.FormatNumberCustom 2 12345.6789 }}'
+ - 12,345.68
+ - - '{{ lang.FormatNumberCustom 2 12345.6789 "- , ." }}'
+ - 12.345,68
+ - - '{{ lang.FormatNumberCustom 6 -12345.6789 "- ." }}'
+ - "-12345.678900"
+ - - '{{ lang.FormatNumberCustom 0 -12345.6789 "- . ," }}'
+ - -12,346
+ - - '{{ lang.FormatNumberCustom 0 -12345.6789 "-|.| " "|" }}'
+ - -12 346
+ - - '{{ -98765.4321 | lang.FormatNumberCustom 2 }}'
+ - -98,765.43
+ FormatPercent:
+ Aliases: null
+ Args:
+ - precision
+ - number
+ Description: |-
+ FormatPercent formats number with the given precision for the current language.
+ Note that the number is assumed to be a percentage.
+ Examples:
+ - - '{{ 512.5032 | lang.FormatPercent 2 }}'
+ - 512.50%
+ Merge:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Translate:
+ Aliases:
+ - i18n
+ - T
+ Args:
+ - ctx
+ - id
+ - args
+ Description: Translate returns a translated string for id.
+ Examples: []
+ math:
+ Abs:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Abs returns the absolute value of n.
+ Examples:
+ - - '{{ math.Abs -2.1 }}'
+ - "2.1"
+ Acos:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Acos returns the arccosine, in radians, of n.
+ Examples:
+ - - '{{ math.Acos 1 }}'
+ - "0"
+ Add:
+ Aliases:
+ - add
+ Args:
+ - inputs
+ Description: Add adds the multivalued addends n1 and n2 or more values.
+ Examples:
+ - - '{{ add 1 2 }}'
+ - "3"
+ Asin:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Asin returns the arcsine, in radians, of n.
+ Examples:
+ - - '{{ math.Asin 1 }}'
+ - "1.5707963267948966"
+ Atan:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Atan returns the arctangent, in radians, of n.
+ Examples:
+ - - '{{ math.Atan 1 }}'
+ - "0.7853981633974483"
+ Atan2:
+ Aliases: null
+ Args:
+ - "n"
+ - m
+ Description: Atan2 returns the arc tangent of n/m, using the signs of the
+ two to determine the quadrant of the return value.
+ Examples:
+ - - '{{ math.Atan2 1 2 }}'
+ - "0.4636476090008061"
+ Ceil:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Ceil returns the least integer value greater than or equal to
+ n.
+ Examples:
+ - - '{{ math.Ceil 2.1 }}'
+ - "3"
+ Cos:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Cos returns the cosine of the radian argument n.
+ Examples:
+ - - '{{ math.Cos 1 }}'
+ - "0.5403023058681398"
+ Counter:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Div:
+ Aliases:
+ - div
+ Args:
+ - inputs
+ Description: Div divides n1 by n2.
+ Examples:
+ - - '{{ div 6 3 }}'
+ - "2"
+ Floor:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Floor returns the greatest integer value less than or equal to
+ n.
+ Examples:
+ - - '{{ math.Floor 1.9 }}'
+ - "1"
+ Log:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Log returns the natural logarithm of the number n.
+ Examples:
+ - - '{{ math.Log 1 }}'
+ - "0"
+ Max:
+ Aliases: null
+ Args:
+ - inputs
+ Description: Max returns the greater of all numbers in inputs. Any slices
+ in inputs are flattened.
+ Examples:
+ - - '{{ math.Max 1 2 }}'
+ - "2"
+ Min:
+ Aliases: null
+ Args:
+ - inputs
+ Description: Min returns the smaller of all numbers in inputs. Any slices
+ in inputs are flattened.
+ Examples:
+ - - '{{ math.Min 1 2 }}'
+ - "1"
+ Mod:
+ Aliases:
+ - mod
+ Args:
+ - n1
+ - n2
+ Description: Mod returns n1 % n2.
+ Examples:
+ - - '{{ mod 15 3 }}'
+ - "0"
+ ModBool:
+ Aliases:
+ - modBool
+ Args:
+ - n1
+ - n2
+ Description: ModBool returns the boolean of n1 % n2. If n1 % n2 == 0, return
+ true.
+ Examples:
+ - - '{{ modBool 15 3 }}'
+ - "true"
+ Mul:
+ Aliases:
+ - mul
+ Args:
+ - inputs
+ Description: Mul multiplies the multivalued numbers n1 and n2 or more values.
+ Examples:
+ - - '{{ mul 2 3 }}'
+ - "6"
+ Pi:
+ Aliases: null
+ Args: null
+ Description: Pi returns the mathematical constant pi.
+ Examples:
+ - - '{{ math.Pi }}'
+ - "3.141592653589793"
+ Pow:
+ Aliases:
+ - pow
+ Args:
+ - n1
+ - n2
+ Description: Pow returns n1 raised to the power of n2.
+ Examples:
+ - - '{{ math.Pow 2 3 }}'
+ - "8"
+ Product:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Rand:
+ Aliases: null
+ Args: null
+ Description: Rand returns, as a float64, a pseudo-random number in the half-open
+ interval [0.0,1.0).
+ Examples:
+ - - '{{ math.Rand }}'
+ - "0.6312770459590062"
+ Round:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Round returns the integer nearest to n, rounding half away from
+ zero.
+ Examples:
+ - - '{{ math.Round 1.5 }}'
+ - "2"
+ Sin:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Sin returns the sine of the radian argument n.
+ Examples:
+ - - '{{ math.Sin 1 }}'
+ - "0.8414709848078965"
+ Sqrt:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Sqrt returns the square root of the number n.
+ Examples:
+ - - '{{ math.Sqrt 81 }}'
+ - "9"
+ Sub:
+ Aliases:
+ - sub
+ Args:
+ - inputs
+ Description: Sub subtracts multivalued.
+ Examples:
+ - - '{{ sub 3 2 }}'
+ - "1"
+ Sum:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Tan:
+ Aliases: null
+ Args:
+ - "n"
+ Description: Tan returns the tangent of the radian argument n.
+ Examples:
+ - - '{{ math.Tan 1 }}'
+ - "1.557407724654902"
+ ToDegrees:
+ Aliases: null
+ Args:
+ - "n"
+ Description: ToDegrees converts radians into degrees.
+ Examples:
+ - - '{{ math.ToDegrees 1.5707963267948966 }}'
+ - "90"
+ ToRadians:
+ Aliases: null
+ Args:
+ - "n"
+ Description: ToRadians converts degrees into radians.
+ Examples:
+ - - '{{ math.ToRadians 90 }}'
+ - "1.5707963267948966"
+ openapi3:
+ Unmarshal:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: []
+ os:
+ FileExists:
+ Aliases:
+ - fileExists
+ Args:
+ - i
+ Description: FileExists checks whether a file exists under the given path.
+ Examples:
+ - - '{{ fileExists "foo.txt" }}'
+ - "false"
+ Getenv:
+ Aliases:
+ - getenv
+ Args:
+ - key
+ Description: |-
+ Getenv retrieves the value of the environment variable named by the key.
+ It returns the value, which will be empty if the variable is not present.
+ Examples: []
+ ReadDir:
+ Aliases:
+ - readDir
+ Args:
+ - i
+ Description: ReadDir lists the directory contents relative to the configured
+ WorkingDir.
+ Examples:
+ - - '{{ range (readDir "files") }}{{ .Name }}{{ end }}'
+ - README.txt
+ ReadFile:
+ Aliases:
+ - readFile
+ Args:
+ - i
+ Description: |-
+ ReadFile reads the file named by filename relative to the configured WorkingDir.
+ It returns the contents as a string.
+ There is an upper size limit set at 1 megabytes.
+ Examples:
+ - - '{{ readFile "files/README.txt" }}'
+ - Hugo Rocks!
+ Stat:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ partials:
+ Include:
+ Aliases:
+ - partial
+ Args:
+ - ctx
+ - name
+ - contextList
+ Description: |-
+ Include executes the named partial.
+ If the partial contains a return statement, that value will be returned.
+ Else, the rendered output will be returned:
+ A string if the partial is a text/template, or template.HTML when html/template.
+ Note that ctx is provided by Hugo, not the end user.
+ Examples:
+ - - '{{ partial "header.html" . }}'
+ - <title>Hugo Rocks!</title>
+ IncludeCached:
+ Aliases:
+ - partialCached
+ Args:
+ - ctx
+ - name
+ - context
+ - variants
+ Description: |-
+ IncludeCached executes and caches partial templates. The cache is created with name+variants as the key.
+ Note that ctx is provided by Hugo, not the end user.
+ Examples: []
+ path:
+ Base:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ BaseName:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Clean:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Dir:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Ext:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Join:
+ Aliases: null
+ Args:
+ - elements
+ Description: |-
+ Join joins any number of path elements into a single path, adding a
+ separating slash if necessary. All the input
+ path elements are passed into filepath.ToSlash converting any Windows slashes
+ to forward slashes.
+ The result is Cleaned; in particular,
+ all empty strings are ignored.
+ Examples:
+ - - '{{ slice "my/path" "filename.txt" | path.Join }}'
+ - my/path/filename.txt
+ - - '{{ path.Join "my" "path" "filename.txt" }}'
+ - my/path/filename.txt
+ - - '{{ "my/path/filename.txt" | path.Ext }}'
+ - .txt
+ - - '{{ "my/path/filename.txt" | path.Base }}'
+ - filename.txt
+ - - '{{ "my/path/filename.txt" | path.Dir }}'
+ - my/path
+ Split:
+ Aliases: null
+ Args:
+ - path
+ Description: |-
+ Split splits path immediately following the final slash,
+ separating it into a directory and file name component.
+ If there is no slash in path, Split returns an empty dir and
+ file set to path.
+ The input path is passed into filepath.ToSlash converting any Windows slashes
+ to forward slashes.
+ The returned values have the property that path = dir+file.
+ Examples:
+ - - '{{ "/my/path/filename.txt" | path.Split }}'
+ - /my/path/|filename.txt
+ - - '{{ "/my/path/filename.txt" | path.Split }}'
+ - /my/path/|filename.txt
+ reflect:
+ IsMap:
+ Aliases: null
+ Args:
+ - v
+ Description: IsMap reports whether v is a map.
+ Examples:
+ - - '{{ if reflect.IsMap (dict "a" 1) }}Map{{ end }}'
+ - Map
+ IsSlice:
+ Aliases: null
+ Args:
+ - v
+ Description: IsSlice reports whether v is a slice.
+ Examples:
+ - - '{{ if reflect.IsSlice (slice 1 2 3) }}Slice{{ end }}'
+ - Slice
+ resources:
+ Babel:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ ByType:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Concat:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Copy:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ ExecuteAsTemplate:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Fingerprint:
+ Aliases:
+ - fingerprint
+ Args:
+ - args
+ Description: |-
+ Fingerprint transforms the given Resource with a MD5 hash of the content in
+ the RelPermalink and Permalink.
+ Examples: []
+ FromString:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Get:
+ Aliases: null
+ Args:
+ - filename
+ Description: |-
+ Get locates the filename given in Hugo's assets filesystem
+ and creates a Resource object that can be used for further transformations.
+ Examples: []
+ GetMatch:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ GetRemote:
+ Aliases: null
+ Args:
+ - args
+ Description: |-
+ GetRemote gets the URL (via HTTP(s)) in the first argument in args and creates Resource object that can be used for
+ further transformations.
+
+ A second argument may be provided with an option map.
+
+ Note: This method does not return any error as a second return value,
+ for any error situations the error can be checked in .Err.
+ Examples: []
+ Match:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Minify:
+ Aliases:
+ - minify
+ Args:
+ - r
+ Description: |-
+ Minify minifies the given Resource using the MediaType to pick the correct
+ minifier.
+ Examples: []
+ PostCSS:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ PostProcess:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ ToCSS:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ safe:
+ CSS:
+ Aliases:
+ - safeCSS
+ Args:
+ - s
+ Description: CSS returns the string s as html/template CSS content.
+ Examples:
+ - - '{{ "Bat&Man" | safeCSS | safeCSS }}'
+ - Bat&Man
+ HTML:
+ Aliases:
+ - safeHTML
+ Args:
+ - s
+ Description: HTML returns the string s as html/template HTML content.
+ Examples:
+ - - '{{ "Bat&Man" | safeHTML | safeHTML }}'
+ - Bat&Man
+ - - '{{ "Bat&Man" | safeHTML }}'
+ - Bat&Man
+ HTMLAttr:
+ Aliases:
+ - safeHTMLAttr
+ Args:
+ - s
+ Description: HTMLAttr returns the string s as html/template HTMLAttr content.
+ Examples: []
+ JS:
+ Aliases:
+ - safeJS
+ Args:
+ - s
+ Description: JS returns the given string as a html/template JS content.
+ Examples:
+ - - '{{ "(1*2)" | safeJS | safeJS }}'
+ - (1*2)
+ JSStr:
+ Aliases:
+ - safeJSStr
+ Args:
+ - s
+ Description: JSStr returns the given string as a html/template JSStr content.
+ Examples: []
+ URL:
+ Aliases:
+ - safeURL
+ Args:
+ - s
+ Description: URL returns the string s as html/template URL content.
+ Examples:
+ - - '{{ "http://gohugo.io" | safeURL | safeURL }}'
+ - http://gohugo.io
+ site:
+ AllPages:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Author:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Authors:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ BaseURL:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ BuildDrafts:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ CheckReady:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Config:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Copyright:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Current:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Data:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ ForEeachIdentityByName:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ GetPage:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Home:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Hugo:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ IsMultiLingual:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Key:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Language:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ LanguageCode:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ LanguagePrefix:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Languages:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ LastChange:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Lastmod:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ MainSections:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Menus:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Pages:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Param:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Params:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ RegularPages:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Sections:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ ServerPort:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Sites:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Social:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Store:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Taxonomies:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Title:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ strings:
+ Chomp:
+ Aliases:
+ - chomp
+ Args:
+ - s
+ Description: Chomp returns a copy of s with all trailing newline characters
+ removed.
+ Examples:
+ - - '{{ chomp "<p>Blockhead</p>\n" | safeHTML }}'
+ - <p>Blockhead</p>
+ Contains:
+ Aliases: null
+ Args:
+ - s
+ - substr
+ Description: Contains reports whether substr is in s.
+ Examples:
+ - - '{{ strings.Contains "abc" "b" }}'
+ - "true"
+ - - '{{ strings.Contains "abc" "d" }}'
+ - "false"
+ ContainsAny:
+ Aliases: null
+ Args:
+ - s
+ - chars
+ Description: ContainsAny reports whether any Unicode code points in chars
+ are within s.
+ Examples:
+ - - '{{ strings.ContainsAny "abc" "bcd" }}'
+ - "true"
+ - - '{{ strings.ContainsAny "abc" "def" }}'
+ - "false"
+ ContainsNonSpace:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Count:
+ Aliases: null
+ Args:
+ - substr
+ - s
+ Description: |-
+ Count counts the number of non-overlapping instances of substr in s.
+ If substr is an empty string, Count returns 1 + the number of Unicode code points in s.
+ Examples:
+ - - '{{ "aabab" | strings.Count "a" }}'
+ - "3"
+ CountRunes:
+ Aliases:
+ - countrunes
+ Args:
+ - s
+ Description: CountRunes returns the number of runes in s, excluding whitespace.
+ Examples: []
+ CountWords:
+ Aliases:
+ - countwords
+ Args:
+ - s
+ Description: CountWords returns the approximate word count in s.
+ Examples: []
+ Diff:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ FindRE:
+ Aliases:
+ - findRE
+ Args:
+ - expr
+ - content
+ - limit
+ Description: |-
+ FindRE returns a list of strings that match the regular expression. By default all matches
+ will be included. The number of matches can be limited with an optional third parameter.
+ Examples:
+ - - '{{ findRE "[G|g]o" "Hugo is a static side generator written in Go." 1
+ }}'
+ - '[go]'
+ FindRESubmatch:
+ Aliases:
+ - findRESubmatch
+ Args:
+ - expr
+ - content
+ - limit
+ Description: |-
+ FindRESubmatch returns a slice of all successive matches of the regular
+ expression in content. Each element is a slice of strings holding the text
+ of the leftmost match of the regular expression and the matches, if any, of
+ its subexpressions.
+
+ By default all matches will be included. The number of matches can be
+ limited with the optional limit parameter. A return value of nil indicates
+ no match.
+ Examples:
+ - - '{{ findRESubmatch `<a\s*href="(.+?)">(.+?)</a>` `<li><a href="#foo">Foo</a></li>
+ <li><a href="#bar">Bar</a></li>` | print | safeHTML }}'
+ - '[[<a href="#foo">Foo</a> #foo Foo] [<a href="#bar">Bar</a> #bar Bar]]'
+ FirstUpper:
+ Aliases: null
+ Args:
+ - s
+ Description: FirstUpper converts s making the first character upper case.
+ Examples:
+ - - '{{ "hugo rocks!" | strings.FirstUpper }}'
+ - Hugo rocks!
+ HasPrefix:
+ Aliases:
+ - hasPrefix
+ Args:
+ - s
+ - prefix
+ Description: HasPrefix tests whether the input s begins with prefix.
+ Examples:
+ - - '{{ hasPrefix "Hugo" "Hu" }}'
+ - "true"
+ - - '{{ hasPrefix "Hugo" "Fu" }}'
+ - "false"
+ HasSuffix:
+ Aliases:
+ - hasSuffix
+ Args:
+ - s
+ - suffix
+ Description: HasSuffix tests whether the input s begins with suffix.
+ Examples:
+ - - '{{ hasSuffix "Hugo" "go" }}'
+ - "true"
+ - - '{{ hasSuffix "Hugo" "du" }}'
+ - "false"
+ Repeat:
+ Aliases: null
+ Args:
+ - "n"
+ - s
+ Description: Repeat returns a new string consisting of n copies of the string
+ s.
+ Examples:
+ - - '{{ "yo" | strings.Repeat 4 }}'
+ - yoyoyoyo
+ Replace:
+ Aliases:
+ - replace
+ Args:
+ - s
+ - old
+ - new
+ - limit
+ Description: |-
+ Replace returns a copy of the string s with all occurrences of old replaced
+ with new. The number of replacements can be limited with an optional fourth
+ parameter.
+ Examples:
+ - - '{{ replace "Batman and Robin" "Robin" "Catwoman" }}'
+ - Batman and Catwoman
+ - - '{{ replace "aabbaabb" "a" "z" 2 }}'
+ - zzbbaabb
+ ReplaceRE:
+ Aliases:
+ - replaceRE
+ Args:
+ - pattern
+ - repl
+ - s
+ - "n"
+ Description: |-
+ ReplaceRE returns a copy of s, replacing all matches of the regular
+ expression pattern with the replacement text repl. The number of replacements
+ can be limited with an optional fourth parameter.
+ Examples:
+ - - '{{ replaceRE "a+b" "X" "aabbaabbab" }}'
+ - XbXbX
+ - - '{{ replaceRE "a+b" "X" "aabbaabbab" 1 }}'
+ - Xbaabbab
+ RuneCount:
+ Aliases: null
+ Args:
+ - s
+ Description: RuneCount returns the number of runes in s.
+ Examples: []
+ SliceString:
+ Aliases:
+ - slicestr
+ Args:
+ - a
+ - startEnd
+ Description: |-
+ SliceString slices a string by specifying a half-open range with
+ two indices, start and end. 1 and 4 creates a slice including elements 1 through 3.
+ The end index can be omitted, it defaults to the string's length.
+ Examples:
+ - - '{{ slicestr "BatMan" 0 3 }}'
+ - Bat
+ - - '{{ slicestr "BatMan" 3 }}'
+ - Man
+ Split:
+ Aliases:
+ - split
+ Args:
+ - a
+ - delimiter
+ Description: Split slices an input string into all substrings separated by
+ delimiter.
+ Examples: []
+ Substr:
+ Aliases:
+ - substr
+ Args:
+ - a
+ - nums
+ Description: |-
+ Substr extracts parts of a string, beginning at the character at the specified
+ position, and returns the specified number of characters.
+
+ It normally takes two parameters: start and length.
+ It can also take one parameter: start, i.e. length is omitted, in which case
+ the substring starting from start until the end of the string will be returned.
+
+ To extract characters from the end of the string, use a negative start number.
+
+ In addition, borrowing from the extended behavior described at http://php.net/substr,
+ if length is given and is negative, then that many characters will be omitted from
+ the end of string.
+ Examples:
+ - - '{{ substr "BatMan" 0 -3 }}'
+ - Bat
+ - - '{{ substr "BatMan" 3 3 }}'
+ - Man
+ Title:
+ Aliases:
+ - title
+ Args:
+ - s
+ Description: |-
+ Title returns a copy of the input s with all Unicode letters that begin words
+ mapped to their title case.
+ Examples:
+ - - '{{ title "Bat man" }}'
+ - Bat Man
+ - - '{{ title "somewhere over the rainbow" }}'
+ - Somewhere Over the Rainbow
+ ToLower:
+ Aliases:
+ - lower
+ Args:
+ - s
+ Description: |-
+ ToLower returns a copy of the input s with all Unicode letters mapped to their
+ lower case.
+ Examples:
+ - - '{{ lower "BatMan" }}'
+ - batman
+ ToUpper:
+ Aliases:
+ - upper
+ Args:
+ - s
+ Description: |-
+ ToUpper returns a copy of the input s with all Unicode letters mapped to their
+ upper case.
+ Examples:
+ - - '{{ upper "BatMan" }}'
+ - BATMAN
+ Trim:
+ Aliases:
+ - trim
+ Args:
+ - s
+ - cutset
+ Description: |-
+ Trim returns converts the strings s removing all leading and trailing characters defined
+ contained.
+ Examples:
+ - - '{{ trim "++Batman--" "+-" }}'
+ - Batman
+ TrimLeft:
+ Aliases: null
+ Args:
+ - cutset
+ - s
+ Description: |-
+ TrimLeft returns a slice of the string s with all leading characters
+ contained in cutset removed.
+ Examples:
+ - - '{{ "aabbaa" | strings.TrimLeft "a" }}'
+ - bbaa
+ TrimPrefix:
+ Aliases: null
+ Args:
+ - prefix
+ - s
+ Description: |-
+ TrimPrefix returns s without the provided leading prefix string. If s doesn't
+ start with prefix, s is returned unchanged.
+ Examples:
+ - - '{{ "aabbaa" | strings.TrimPrefix "a" }}'
+ - abbaa
+ - - '{{ "aabbaa" | strings.TrimPrefix "aa" }}'
+ - bbaa
+ TrimRight:
+ Aliases: null
+ Args:
+ - cutset
+ - s
+ Description: |-
+ TrimRight returns a slice of the string s with all trailing characters
+ contained in cutset removed.
+ Examples:
+ - - '{{ "aabbaa" | strings.TrimRight "a" }}'
+ - aabb
+ TrimSpace:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ TrimSuffix:
+ Aliases: null
+ Args:
+ - suffix
+ - s
+ Description: |-
+ TrimSuffix returns s without the provided trailing suffix string. If s
+ doesn't end with suffix, s is returned unchanged.
+ Examples:
+ - - '{{ "aabbaa" | strings.TrimSuffix "a" }}'
+ - aabba
+ - - '{{ "aabbaa" | strings.TrimSuffix "aa" }}'
+ - aabb
+ Truncate:
+ Aliases:
+ - truncate
+ Args:
+ - s
+ - options
+ Description: Truncate truncates the string in s to the specified length.
+ Examples:
+ - - '{{ "this is a very long text" | truncate 10 " ..." }}'
+ - this is a ...
+ - - '{{ "With [Markdown](/markdown) inside." | markdownify | truncate 14 }}'
+ - With <a href="/markdown">Markdown …</a>
+ templates:
+ Defer:
+ Aliases: null
+ Args:
+ - args
+ Description: Defer defers the execution of a template block.
+ Examples: []
+ DoDefer:
+ Aliases:
+ - doDefer
+ Args:
+ - ctx
+ - id
+ - optsv
+ Description: |-
+ DoDefer defers the execution of a template block.
+ For internal use only.
+ Examples: []
+ Exists:
+ Aliases: null
+ Args:
+ - name
+ Description: |-
+ Exists returns whether the template with the given name exists.
+ Note that this is the Unix-styled relative path including filename suffix,
+ e.g. partials/header.html
+ Examples:
+ - - '{{ if (templates.Exists "partials/header.html") }}Yes!{{ end }}'
+ - Yes!
+ - - '{{ if not (templates.Exists "partials/doesnotexist.html") }}No!{{ end
+ }}'
+ - No!
+ time:
+ AsTime:
+ Aliases: null
+ Args:
+ - v
+ - args
+ Description: |-
+ AsTime converts the textual representation of the datetime string into
+ a time.Time interface.
+ Examples:
+ - - '{{ (time "2015-01-21").Year }}'
+ - "2015"
+ Duration:
+ Aliases:
+ - duration
+ Args:
+ - unit
+ - number
+ Description: |-
+ Duration converts the given number to a time.Duration.
+ Unit is one of nanosecond/ns, microsecond/us/µs, millisecond/ms, second/s, minute/m or hour/h.
+ Examples:
+ - - '{{ mul 60 60 | duration "second" }}'
+ - 1h0m0s
+ Format:
+ Aliases:
+ - dateFormat
+ Args:
+ - layout
+ - v
+ Description: |-
+ Format converts the textual representation of the datetime string in v into
+ time.Time if needed and formats it with the given layout.
+ Examples:
+ - - 'dateFormat: {{ dateFormat "Monday, Jan 2, 2006" "2015-01-21" }}'
+ - 'dateFormat: Wednesday, Jan 21, 2015'
+ Now:
+ Aliases:
+ - now
+ Args: null
+ Description: Now returns the current local time or `clock` time
+ Examples: []
+ ParseDuration:
+ Aliases: null
+ Args:
+ - s
+ Description: |-
+ ParseDuration parses the duration string s.
+ A duration string is a possibly signed sequence of
+ decimal numbers, each with optional fraction and a unit suffix,
+ such as "300ms", "-1.5h" or "2h45m".
+ Valid time units are "ns", "us" (or "µs"), "ms", "s", "m", "h".
+ See https://golang.org/pkg/time/#ParseDuration
+ Examples:
+ - - '{{ "1h12m10s" | time.ParseDuration }}'
+ - 1h12m10s
+ transform:
+ CanHighlight:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Emojify:
+ Aliases:
+ - emojify
+ Args:
+ - s
+ Description: |-
+ Emojify returns a copy of s with all emoji codes replaced with actual emojis.
+
+ See http://www.emoji-cheat-sheet.com/
+ Examples:
+ - - '{{ "I :heart: Hugo" | emojify }}'
+ - I ❤️ Hugo
+ HTMLEscape:
+ Aliases:
+ - htmlEscape
+ Args:
+ - s
+ Description: HTMLEscape returns a copy of s with reserved HTML characters
+ escaped.
+ Examples:
+ - - '{{ htmlEscape "Cathal Garvey & The Sunshine Band <cathal@foo.bar>" |
+ safeHTML }}'
+ - Cathal Garvey & The Sunshine Band <cathal@foo.bar>
+ - - '{{ htmlEscape "Cathal Garvey & The Sunshine Band <cathal@foo.bar>" }}'
+ - Cathal Garvey &amp; The Sunshine Band &lt;cathal@foo.bar&gt;
+ - - '{{ htmlEscape "Cathal Garvey & The Sunshine Band <cathal@foo.bar>" |
+ htmlUnescape | safeHTML }}'
+ - Cathal Garvey & The Sunshine Band <cathal@foo.bar>
+ HTMLUnescape:
+ Aliases:
+ - htmlUnescape
+ Args:
+ - s
+ Description: |-
+ HTMLUnescape returns a copy of s with HTML escape requences converted to plain
+ text.
+ Examples:
+ - - '{{ htmlUnescape "Cathal Garvey & The Sunshine Band <cathal@foo.bar>"
+ | safeHTML }}'
+ - Cathal Garvey & The Sunshine Band <cathal@foo.bar>
+ - - '{{ "Cathal Garvey &amp; The Sunshine Band &lt;cathal@foo.bar&gt;"
+ | htmlUnescape | htmlUnescape | safeHTML }}'
+ - Cathal Garvey & The Sunshine Band <cathal@foo.bar>
+ - - '{{ "Cathal Garvey &amp; The Sunshine Band &lt;cathal@foo.bar&gt;"
+ | htmlUnescape | htmlUnescape }}'
+ - Cathal Garvey & The Sunshine Band <cathal@foo.bar>
+ - - '{{ htmlUnescape "Cathal Garvey & The Sunshine Band <cathal@foo.bar>"
+ | htmlEscape | safeHTML }}'
+ - Cathal Garvey & The Sunshine Band <cathal@foo.bar>
+ Highlight:
+ Aliases:
+ - highlight
+ Args:
+ - s
+ - lang
+ - opts
+ Description: |-
+ Highlight returns a copy of s as an HTML string with syntax
+ highlighting applied.
+ Examples: []
+ HighlightCodeBlock:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Markdownify:
+ Aliases:
+ - markdownify
+ Args:
+ - ctx
+ - s
+ Description: Markdownify renders s from Markdown to HTML.
+ Examples:
+ - - '{{ .Title | markdownify }}'
+ - <strong>BatMan</strong>
+ Plainify:
+ Aliases:
+ - plainify
+ Args:
+ - s
+ Description: Plainify returns a copy of s with all HTML tags removed.
+ Examples:
+ - - '{{ plainify "Hello <strong>world</strong>, gophers!" }}'
+ - Hello world, gophers!
+ Remarshal:
+ Aliases: null
+ Args:
+ - format
+ - data
+ Description: |-
+ Remarshal is used in the Hugo documentation to convert configuration
+ examples from YAML to JSON, TOML (and possibly the other way around).
+ The is primarily a helper for the Hugo docs site.
+ It is not a general purpose YAML to TOML converter etc., and may
+ change without notice if it serves a purpose in the docs.
+ Format is one of json, yaml or toml.
+ Examples:
+ - - '{{ "title = \"Hello World\"" | transform.Remarshal "json" | safeHTML
+ }}'
+ - |
+ {
+ "title": "Hello World"
+ }
+ ToMath:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Unmarshal:
+ Aliases:
+ - unmarshal
+ Args:
+ - args
+ Description: |-
+ Unmarshal unmarshals the data given, which can be either a string, json.RawMessage
+ or a Resource. Supported formats are JSON, TOML, YAML, and CSV.
+ You can optionally provide an options map as the first argument.
+ Examples:
+ - - '{{ "hello = \"Hello World\"" | transform.Unmarshal }}'
+ - map[hello:Hello World]
+ - - '{{ "hello = \"Hello World\"" | resources.FromString "data/greetings.toml"
+ | transform.Unmarshal }}'
+ - map[hello:Hello World]
+ XMLEscape:
+ Aliases: null
+ Args:
+ - s
+ Description: |-
+ XMLEscape returns the given string, removing disallowed characters then
+ escaping the result to its XML equivalent.
+ Examples:
+ - - '{{ transform.XMLEscape "<p>abc</p>" }}'
+ - '<p>abc</p>'
+ urls:
+ AbsLangURL:
+ Aliases:
+ - absLangURL
+ Args:
+ - s
+ Description: |-
+ AbsLangURL the string s and converts it to an absolute URL according
+ to a page's position in the project directory structure and the current
+ language.
+ Examples: []
+ AbsURL:
+ Aliases:
+ - absURL
+ Args:
+ - s
+ Description: AbsURL takes the string s and converts it to an absolute URL.
+ Examples: []
+ Anchorize:
+ Aliases:
+ - anchorize
+ Args:
+ - s
+ Description: |-
+ Anchorize creates sanitized anchor name version of the string s that is compatible
+ with how your configured markdown renderer does it.
+ Examples:
+ - - '{{ "This is a title" | anchorize }}'
+ - this-is-a-title
+ JoinPath:
+ Aliases: null
+ Args:
+ - elements
+ Description: |-
+ JoinPath joins the provided elements into a URL string and cleans the result
+ of any ./ or ../ elements. If the argument list is empty, JoinPath returns
+ an empty string.
+ Examples:
+ - - '{{ urls.JoinPath "https://example.org" "foo" }}'
+ - https://example.org/foo
+ - - '{{ urls.JoinPath (slice "a" "b") }}'
+ - a/b
+ Parse:
+ Aliases: null
+ Args: null
+ Description: ""
+ Examples: null
+ Ref:
+ Aliases:
+ - ref
+ Args:
+ - p
+ - args
+ Description: Ref returns the absolute URL path to a given content item from
+ Page p.
+ Examples: []
+ RelLangURL:
+ Aliases:
+ - relLangURL
+ Args:
+ - s
+ Description: |-
+ RelLangURL takes the string s and prepends the relative path according to a
+ page's position in the project directory structure and the current language.
+ Examples: []
+ RelRef:
+ Aliases:
+ - relref
+ Args:
+ - p
+ - args
+ Description: RelRef returns the relative URL path to a given content item
+ from Page p.
+ Examples: []
+ RelURL:
+ Aliases:
+ - relURL
+ Args:
+ - s
+ Description: |-
+ RelURL takes the string s and prepends the relative path according to a
+ page's position in the project directory structure.
+ Examples: []
+ URLize:
+ Aliases:
+ - urlize
+ Args:
+ - s
+ Description: URLize returns the strings s formatted as an URL.
+ Examples: []
--- /dev/null
- 'comment' = 'shortcodes/comment.html'
+# Used by the embedded template URL (eturl.html) shortcode.
+# Quoted all keys because some are not valid identifiers.
+
+# BaseURL
+'base_url' = 'https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates'
+
+# Templates
+'alias' = 'alias.html'
+'disqus' = 'disqus.html'
+'google_analytics' = 'google_analytics.html'
+'opengraph' = 'opengraph.html'
+'pagination' = 'pagination.html'
+'robots' = '_default/robots.txt'
+'rss' = '_default/rss.xml'
+'schema' = 'schema.html'
+'sitemap' = '_default/sitemap.xml'
+'sitemapindex' = '_default/sitemapindex.xml'
+'twitter_cards' = 'twitter_cards.html'
+
+# Render hooks
+'render-codeblock-goat' = '_default/_markup/render-codeblock-goat.html'
+'render-image' = '_default/_markup/render-image.html'
+'render-link' = '_default/_markup/render-link.html'
+'render-table' = '_default/_markup/render-table.html'
+
+# Shortcodes
+'details' = 'shortcodes/details.html'
+'figure' = 'shortcodes/figure.html'
+'gist' = 'shortcodes/gist.html'
+'highlight' = 'shortcodes/highlight.html'
+'instagram' = 'shortcodes/instagram.html'
+'param' = 'shortcodes/param.html'
+'qr' = 'shortcodes/qr.html'
+'ref' = 'shortcodes/ref.html'
+'relref' = 'shortcodes/relref.html'
+'twitter' = 'shortcodes/twitter.html'
++'twitter_simple' = 'shortcodes/twitter_simple.html'
+'vimeo' = 'shortcodes/vimeo.html'
++'vimeo_simple' = 'shortcodes/vimeo_simple.html'
++'x' = 'shortcodes/x.html'
++'x_simple' = 'shortcodes/x_simple.html'
+'youtube' = 'shortcodes/youtube.html'
--- /dev/null
- require github.com/gohugoio/gohugoioTheme v0.0.0-20250106044328-feb60697e056 // indirect
+module github.com/gohugoio/hugoDocs
+
+go 1.22.0
+
++require github.com/gohugoio/gohugoioTheme v0.0.0-20250116152525-2d382cae7743 // indirect
--- /dev/null
- github.com/gohugoio/gohugoioTheme v0.0.0-20250106044328-feb60697e056 h1:nPfHricsQXtVewK865bX2LDLhUImhIZEuajlYPM2Bho=
- github.com/gohugoio/gohugoioTheme v0.0.0-20250106044328-feb60697e056/go.mod h1:GOYeAPQJ/ok8z7oz1cjfcSlsFpXrmx6VkzQ5RpnyhZM=
++github.com/gohugoio/gohugoioTheme v0.0.0-20250116152525-2d382cae7743 h1:gjoqq8+RnGwpuU/LQVYGGR/LsDplrfUjOabWwoROYsM=
++github.com/gohugoio/gohugoioTheme v0.0.0-20250116152525-2d382cae7743/go.mod h1:GOYeAPQJ/ok8z7oz1cjfcSlsFpXrmx6VkzQ5RpnyhZM=
--- /dev/null
--- /dev/null
++project: hugoDocs
++release_settings:
++ name: ${HUGORELEASER_TAG}
++ type: github
++ repository: hugoDocs
++ repository_owner: gohugoio
++ draft: true
++ prerelease: false
++ release_notes_settings:
++ generate: true
++ generate_on_host: false
++ short_threshold: 10
++ short_title: What's Changed
++ groups:
++ - regexp: snapcraft:|Merge commit|Merge branch|netlify:|release:|Squashed
++ ignore: true
++ - title: Typo fixes
++ regexp: typo
++ ordinal: 20
++ - title: Dependency Updates
++ regexp: deps
++ ordinal: 30
++ - title: Improvements
++ regexp: .*
++ ordinal: 10
++releases:
++ - paths:
++ - archives/**
++ path: myrelease
--- /dev/null
--- /dev/null
++{{- /* Last modified: 2025-01-19T14:44:56-08:00 */}}
++
++{{- /*
++Copyright 2025 Veriphor LLC
++
++Licensed under the Apache License, Version 2.0 (the "License"); you may not
++use this file except in compliance with the License. You may obtain a copy of
++the License at
++
++https://www.apache.org/licenses/LICENSE-2.0
++
++Unless required by applicable law or agreed to in writing, software
++distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
++WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
++License for the specific language governing permissions and limitations under
++the License.
++*/}}
++
++{{- /*
++This render hook resolves internal destinations by looking for a matching:
++
++ 1. Content page
++ 2. Page resource (a file in the current page bundle)
++ 3. Section resource (a file in the current section)
++ 4. Global resource (a file in the assets directory)
++
++It skips the section resource lookup if the current page is a leaf bundle.
++
++External destinations are not modified.
++
++You must place global resources in the assets directory. If you have placed
++your resources in the static directory, and you are unable or unwilling to move
++them, you must mount the static directory to the assets directory by including
++both of these entries in your site configuration:
++
++ [[module.mounts]]
++ source = 'assets'
++ target = 'assets'
++
++ [[module.mounts]]
++ source = 'static'
++ target = 'assets'
++
++By default, if this render hook is unable to resolve a destination, including a
++fragment if present, it passes the destination through without modification. To
++emit a warning or error, set the error level in your site configuration:
++
++ [params.render_hooks.link]
++ errorLevel = 'warning' # ignore (default), warning, or error (fails the build)
++
++When you set the error level to warning, and you are in a development
++environment, you can visually highlight broken internal links:
++
++ [params.render_hooks.link]
++ errorLevel = 'warning' # ignore (default), warning, or error (fails the build)
++ highlightBroken = true # true or false (default)
++
++This will add a "broken" class to anchor elements with invalid src attributes.
++Add a rule to your CSS targeting the broken links:
++
++ a.broken {
++ background: #ff0;
++ border: 2px solid #f00;
++ padding: 0.1em 0.2em;
++ }
++
++This render hook may be unable to resolve destinations created with the ref and
++relref shortcodes. Unless you set the error level to ignore you should not use
++either of these shortcodes in conjunction with this render hook.
++
++@context {string} Destination The link destination.
++@context {page} Page A reference to the page containing the link.
++@context {string} PlainText The link description as plain text.
++@context {string} Text The link description.
++@context {string} Title The link title.
++
++@returns {template.html}
++*/}}
++
++{{- /* Initialize. */}}
++{{- $renderHookName := "link" }}
++
++{{- /* Verify minimum required version. */}}
++{{- $minHugoVersion := "0.141.0" }}
++{{- if lt hugo.Version $minHugoVersion }}
++ {{- errorf "The %q render hook requires Hugo v%s or later." $renderHookName $minHugoVersion }}
++{{- end }}
++
++{{- /* Error level when unable to resolve destination: ignore, warning, or error. */}}
++{{- $errorLevel := or site.Params.render_hooks.link.errorLevel "ignore" | lower }}
++
++{{- /* If true, adds "broken" class to broken links. Applicable in development environment when errorLevel is warning. */}}
++{{- $highlightBrokenLinks := or site.Params.render_hooks.link.highlightBroken false }}
++
++{{- /* Validate error level. */}}
++{{- if not (in (slice "ignore" "warning" "error") $errorLevel) }}
++ {{- errorf "The %q render hook is misconfigured. The errorLevel %q is invalid. Please check your site configuration." $renderHookName $errorLevel }}
++{{- end }}
++
++{{- /* Determine content path for warning and error messages. */}}
++{{- $contentPath := .Page.String }}
++
++{{- /* Parse destination. */}}
++{{- $u := urls.Parse .Destination }}
++
++{{- /* Set common message. */}}
++{{- $msg := printf "The %q render hook was unable to resolve the destination %q in %s" $renderHookName $u.String $contentPath }}
++
++{{- /* Set attributes for anchor element. */}}
++{{- $attrs := dict "href" $u.String }}
++{{- if eq $u.String "g" }}
++ {{- /* Destination is a glossary term. */}}
++ {{- $ctx := dict
++ "contentPath" $contentPath
++ "errorLevel" $errorLevel
++ "renderHookName" $renderHookName
++ "text" .Text
++ }}
++ {{- $attrs = partial "inline/h-rh-l/get-glossary-link-attributes.html" $ctx }}
++{{- else if $u.IsAbs }}
++ {{- /* Destination is a remote resource. */}}
++ {{- $attrs = merge $attrs (dict "rel" "external") }}
++{{- else }}
++ {{- with $u.Path }}
++ {{- with $p := or ($.PageInner.GetPage .) ($.PageInner.GetPage (strings.TrimRight "/" .)) }}
++ {{- /* Destination is a page. */}}
++ {{- $href := .RelPermalink }}
++ {{- with $u.RawQuery }}
++ {{- $href = printf "%s?%s" $href . }}
++ {{- end }}
++ {{- with $u.Fragment }}
++ {{- $ctx := dict
++ "contentPath" $contentPath
++ "errorLevel" $errorLevel
++ "page" $p
++ "parsedURL" $u
++ "renderHookName" $renderHookName
++ }}
++ {{- partial "inline/h-rh-l/validate-fragment.html" $ctx }}
++ {{- $href = printf "%s#%s" $href . }}
++ {{- end }}
++ {{- $attrs = dict "href" $href }}
++ {{- else with $.PageInner.Resources.Get $u.Path }}
++ {{- /* Destination is a page resource; drop query and fragment. */}}
++ {{- $attrs = dict "href" .RelPermalink }}
++ {{- else with (and (ne $.Page.BundleType "leaf") ($.Page.CurrentSection.Resources.Get $u.Path)) }}
++ {{- /* Destination is a section resource, and current page is not a leaf bundle. */}}
++ {{- $attrs = dict "href" .RelPermalink }}
++ {{- else with resources.Get $u.Path }}
++ {{- /* Destination is a global resource; drop query and fragment. */}}
++ {{- $attrs = dict "href" .RelPermalink }}
++ {{- else }}
++ {{- if eq $errorLevel "warning" }}
++ {{- warnf $msg }}
++ {{- if and $highlightBrokenLinks hugo.IsDevelopment }}
++ {{- $attrs = merge $attrs (dict "class" "broken") }}
++ {{- end }}
++ {{- else if eq $errorLevel "error" }}
++ {{- errorf $msg }}
++ {{- end }}
++ {{- end }}
++ {{- else }}
++ {{- with $u.Fragment }}
++ {{- /* Destination is on the same page; prepend relative permalink. */}}
++ {{- $ctx := dict
++ "contentPath" $contentPath
++ "errorLevel" $errorLevel
++ "page" $.Page
++ "parsedURL" $u
++ "renderHookName" $renderHookName
++ }}
++ {{- partial "inline/h-rh-l/validate-fragment.html" $ctx }}
++ {{- $attrs = dict "href" (printf "%s#%s" $.Page.RelPermalink .) }}
++ {{- else }}
++ {{- if eq $errorLevel "warning" }}
++ {{- warnf $msg }}
++ {{- if and $highlightBrokenLinks hugo.IsDevelopment }}
++ {{- $attrs = merge $attrs (dict "class" "broken") }}
++ {{- end }}
++ {{- else if eq $errorLevel "error" }}
++ {{- errorf $msg }}
++ {{- end }}
++ {{- end }}
++ {{- end }}
++{{- end }}
++
++{{- /* Render anchor element. */ -}}
++<a
++ {{- with .Title }} title="{{ . }}" {{- end }}
++ {{- range $k, $v := $attrs }}
++ {{- if $v }}
++ {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr }}
++ {{- end }}
++ {{- end -}}
++>{{ .Text }}</a>
++
++{{- define "partials/inline/h-rh-l/validate-fragment.html" }}
++ {{- /*
++ Validates the fragment portion of a link destination.
++
++ @context {string} contentPath The page containing the link.
++ @context {string} errorLevel The error level when unable to resolve destination; ignore (default), warning, or error.
++ @context {page} page The page corresponding to the link destination
++ @context {struct} parsedURL The link destination parsed by urls.Parse.
++ @context {string} renderHookName The name of the render hook.
++ */}}
++
++ {{- /* Initialize. */}}
++ {{- $contentPath := .contentPath }}
++ {{- $errorLevel := .errorLevel }}
++ {{- $p := .page }}
++ {{- $u := .parsedURL }}
++ {{- $renderHookName := .renderHookName }}
++
++ {{- /* Validate. */}}
++ {{- with $u.Fragment }}
++ {{- if $p.Fragments.Identifiers.Contains . }}
++ {{- if gt ($p.Fragments.Identifiers.Count .) 1 }}
++ {{- $msg := printf "The %q render hook detected duplicate heading IDs %q in %s" $renderHookName . $contentPath }}
++ {{- if eq $errorLevel "warning" }}
++ {{- warnf $msg }}
++ {{- else if eq $errorLevel "error" }}
++ {{- errorf $msg }}
++ {{- end }}
++ {{- end }}
++ {{- else }}
++ {{- /* Determine target path for warning and error message. */}}
++ {{- $targetPath := "" }}
++ {{- with $p.File }}
++ {{- $targetPath = .Path }}
++ {{- else }}
++ {{- $targetPath = .Path }}
++ {{- end }}
++ {{- /* Set common message. */}}
++ {{- $msg := printf "The %q render hook was unable to find heading ID %q in %s. See %s" $renderHookName . $targetPath $contentPath }}
++ {{- if eq $targetPath $contentPath }}
++ {{- $msg = printf "The %q render hook was unable to find heading ID %q in %s" $renderHookName . $targetPath }}
++ {{- end }}
++ {{- /* Throw warning or error. */}}
++ {{- if eq $errorLevel "warning" }}
++ {{- warnf $msg }}
++ {{- else if eq $errorLevel "error" }}
++ {{- errorf $msg }}
++ {{- end }}
++ {{- end }}
++ {{- end }}
++{{- end }}
++
++{{- define "partials/inline/h-rh-l/get-glossary-link-attributes.html" }}
++ {{- /*
++ Returns the anchor element attributes for a link to the given glossary term.
++
++ It first checks for the existence of a glossary page for the given term. If
++ no page is found, it then checks for a glossary page for the singular form of
++ the term. If neither page exists it throws a warning or error dependent on
++ the errorLevel setting
++
++ The returned href attribute does not point to the glossary term page.
++ Instead, via its fragment, it points to an entry on the glossary page.
++
++ @context {string} contentPath The page containing the link.
++ @context {string} errorLevel The error level when unable to resolve destination; ignore (default), warning, or error.
++ @context {string} renderHookName The name of the render hook.
++ @context {string} text The link text.
++ */}}
++
++ {{- /* Get context.. */}}
++ {{- $contentPath := .contentPath }}
++ {{- $errorLevel := .errorLevel }}
++ {{- $renderHookName := .renderHookName }}
++ {{- $text := .text | transform.Plainify | strings.ToLower }}
++
++ {{- /* Initialize. */}}
++ {{- $glossaryPath := "/getting-started/glossary" }}
++ {{- $termGiven := $text }}
++ {{- $termActual := "" }}
++ {{- $termSingular := inflect.Singularize $termGiven }}
++
++ {{- /* Verify that the glossary page exists. */}}
++ {{- $glossaryPage := site.GetPage $glossaryPath }}
++ {{- if not $glossaryPage }}
++ {{- errorf "The %q render hook was unable to find %s: see %s" $renderHookName $glossaryPath $contentPath }}
++ {{- end }}
++
++ {{- /* Theres a better way to handle this, but it works for now. */}}
++ {{- $cheating := dict
++ "chaining" "chain"
++ "localize" "localization"
++ "localized" "localization"
++ "paginating" "paginate"
++ "walking" "walk"
++ }}
++
++ {{- /* Verify that a glossary term page exists for the given term. */}}
++ {{- if site.GetPage (urls.JoinPath $glossaryPath ($termGiven | urlize)) }}
++ {{- $termActual = $termGiven }}
++ {{- else if site.GetPage (urls.JoinPath $glossaryPath ($termSingular | urlize)) }}
++ {{- $termActual = $termSingular }}
++ {{- else }}
++ {{- $termToTest := index $cheating $termGiven }}
++ {{- if site.GetPage (urls.JoinPath $glossaryPath ($termToTest | urlize)) }}
++ {{- $termActual = $termToTest }}
++ {{- end }}
++ {{- end }}
++
++ {{- if not $termActual }}
++ {{- errorf "The %q render hook was unable to find a glossary page for either the singular or plural form of the term %q: see %s" $renderHookName $termGiven $contentPath }}
++ {{- end }}
++
++ {{- /* Create the href attribute. */}}
++ {{- $href := ""}}
++ {{- if $termActual }}
++ {{- $href = fmt.Printf "%s#%s" $glossaryPage.RelPermalink (anchorize $termActual) }}
++ {{- end }}
++
++ {{- return (dict "href" $href) }}
++{{- end -}}
--- /dev/null
--- /dev/null
++{{- /*
++Renders the definition of the given glossary term.
++
++@param {string} (.Get 0) The glossary term.
++@returns {template.HTML}
++
++@example {{% glossary-term float %}}
++@example {{% glossary-term "floating point" %}}
++*/}}
++
++{{- with .Get 0 }}
++ {{- $path := printf "/getting-started/glossary/%s" (urlize .) }}
++ {{- with site.GetPage $path }}
++{{ .RenderShortcodes }}{{/* Do not indent. */}}
++ {{- else }}
++ {{- errorf "The glossary term (%s) shortcode was unable to find %s: see %s" $.Name $path $.Position }}
++ {{- end }}
++{{- else }}
++ {{- errorf "The glossary term (%s) shortcode requires one positional parameter: see %s" $.Name $.Position }}
++{{- end }}
--- /dev/null
--- /dev/null
++{{- /*
++Renders the glossary of terms.
++
++When you call this shortcode using the {{% %}} notation, the glossary terms are
++Markdown headings (level 6) which means they are members of .Page.Fragments.
++This allows the link render hook to verify links to glossary terms.
++
++Yes, the terms themselves are pages, but we don't want to link to the pages, at
++least not right now. Instead, we want to link to the fragments rendered by this
++shortcode.
++
++@returns {template.HTML}
++
++@example {{% glossary %}}
++*/}}
++{{- $path := "/getting-started/glossary" }}
++{{- with site.GetPage $path }}
++ {{- with $p := .Pages.ByTitle }}
++
++ {{- /* Build and render alphabetical index. */}}
++ {{- $m := dict }}
++ {{- range $p }}
++ {{- $k := substr .Title 0 1 | strings.ToUpper }}
++ {{- if index $m $k }}
++ {{- continue }}
++ {{- end }}
++ {{- $anchor := path.BaseName .Path | anchorize }}
++ {{- $m = merge $m (dict $k $anchor) }}
++ {{- end }}
++ {{- range $k, $v := $m }}
++[{{ $k }}](#{{ $v }}) {{/* Do not indent. */}}
++ {{- end }}
++
++ {{- /* Render glossary terms. */}}
++ {{- range $p }}
++###### {{ .Title }}{{/* Do not indent. */}}
++{{ .RenderShortcodes }}{{/* Do not indent. */}}
++ {{- end }}
++
++ {{- end }}
++{{- else }}
++ {{- errorf "The %q shortcode was unable to get %s: see %s" .Name $path .Position}}
++{{- end }}
--- /dev/null
- HUGO_VERSION = "0.140.2"
+[build]
+ publish = "public"
+ command = "hugo --gc --minify"
+
+ [build.environment]
++ HUGO_VERSION = "0.142.0"
+
+[context.production.environment]
+ HUGO_ENV = "production"
+ HUGO_ENABLEGITINFO = "true"
+
+[context.split1]
+ command = "hugo --gc --minify --enableGitInfo"
+
+ [context.split1.environment]
+ HUGO_ENV = "production"
+
+[context.deploy-preview]
+ command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy]
+ command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
+
+[context.next.environment]
+ HUGO_ENABLEGITINFO = "true"
+
+[[redirects]]
+ from = "/npmjs/*"
+ to = "/npmjs/"
+ status = 200
projects / brevno-suite / hugo / commitdiff
