https://v0-122-0--gohugoio.netlify.app/categories/templates/Recent content in templates on HugoHugo -- gohugo.ioenhttps://v0-122-0--gohugoio.netlify.app/templates/introduction/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/introduction/The following is only a primer on Go Templates. For an in-depth look into Go Templates, check the official Go docs. Go Templates provide an extremely simple template language that adheres to the belief that only the most basic of logic belongs in the template or view layer. Basic syntax Go Templates are HTML files with the addition of variables and functions. Go Template variables and functions are accessible within {{ }}.https://v0-122-0--gohugoio.netlify.app/templates/lookup-order/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/lookup-order/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.https://v0-122-0--gohugoio.netlify.app/templates/base/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/base/The block keyword allows you to define the outer shell of your pages’ one or more master template(s) and then fill in or override portions as necessary. Base template lookup order The base template lookup order closely follows that of the template it applies to (e.g. _default/list.html). See Template Lookup Order for details and examples. Define the base template The following defines a simple base template at _default/baseof.html. As a default template, it is the shell from which all your pages will be rendered unless you specify another *baseof.https://v0-122-0--gohugoio.netlify.app/templates/single-page-templates/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/single-page-templates/Single page template lookup order See Template Lookup. Example single page templates Content pages are of the type page and will therefore have all the page variables and site variables available to use in their templates. posts/single.html This single page template makes use of Hugo base templates, the .Format function for dates, the .WordCount page variable, and ranges through the single content’s specific taxonomies. with is also used to check whether the taxonomies are set in the front matter.https://v0-122-0--gohugoio.netlify.app/templates/lists/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/lists/What is a list page template? A list page template is a template used to render multiple pieces of content in a single HTML page. The exception to this rule is the homepage, which is still a list but has its own dedicated template. Hugo uses the term list in its truest sense; i.e. a sequential arrangement of material, especially in alphabetical or numerical order. Hugo uses list templates on any output HTML page where content is traditionally listed:https://v0-122-0--gohugoio.netlify.app/templates/homepage/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/homepage/Homepage is a Page and therefore has all the page variables and site variables available for use. The homepage 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. Homepage template lookup order See Template Lookup. Add content and front matter to the homepage The homepage, similar to other list pages in Hugo, accepts content and front matter from an _index.https://v0-122-0--gohugoio.netlify.app/templates/section-templates/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/section-templates/Add content and front matter to section templates To effectively leverage section page templates, you should first understand Hugo’s content organization and, specifically, the purpose of _index.md for adding content and front matter to section and other list pages. Section template lookup order See Template Lookup. Page kinds Every Page in Hugo has a .Kind attribute. Kind Description Example home The landing page for the home page /index.html page The landing page for a given page my-post page (/posts/my-post/index.https://v0-122-0--gohugoio.netlify.app/templates/taxonomy-templates/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/taxonomy-templates/Hugo includes support for user-defined groupings of content called taxonomies. Taxonomies are classifications that demonstrate logical relationships between content. See Taxonomies under Content Management if you are unfamiliar with how Hugo leverages this powerful feature. Hugo provides multiple ways to use taxonomies throughout your project templates: Order the way content associated with a taxonomy term is displayed in a taxonomy list template Order the way the terms for a taxonomy are displayed in a taxonomy terms template List a single content’s taxonomy terms within a single page template Taxonomy list templates Taxonomy list page templates are lists and therefore have all the variables and methods available to list pages.https://v0-122-0--gohugoio.netlify.app/templates/pagination/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/pagination/The real power of Hugo pagination shines when combined with the where function and its SQL-like operators: first, last, and after. You can even order the content the way you’ve become used to with Hugo. Configure pagination Pagination can be configured in your site configuration: paginate default = 10. This setting can be overridden within the template. paginatePath default = page. Allows you to set a different path for your pagination pages.https://v0-122-0--gohugoio.netlify.app/templates/views/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/views/These alternative content views are especially useful in list templates. The following are common use cases for content views: You want content of every type to be shown on the homepage but only with limited summary views. You only want a bulleted list of your content on a taxonomy list page. 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.https://v0-122-0--gohugoio.netlify.app/templates/partials/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/partials/Partial template lookup order Partial templates—like single page templates and list page templates—have a specific lookup order. However, partials are simpler in that Hugo will only check in two places: layouts/partials/*<PARTIALNAME>.html themes/<THEME>/layouts/partials/*<PARTIALNAME>.html This allows a theme’s end user to copy a partial’s contents into a file of the same name for further customization. Use partials in your templates All partials for your Hugo project are located in a single layouts/partials directory.https://v0-122-0--gohugoio.netlify.app/templates/shortcode-templates/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/shortcode-templates/Shortcodes are a means to consolidate templating into small, reusable snippets that you can embed directly inside your content. Hugo also ships with built-in shortcodes for common use cases. (See Content Management: Shortcodes.) Create custom shortcodes Hugo’s built-in 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. File location To create a shortcode, place an HTML template in the layouts/shortcodes directory of your source organization.https://v0-122-0--gohugoio.netlify.app/templates/menu-templates/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/menu-templates/Overview After defining menu entries, use menu variables and methods to render a menu. Three factors determine how to render a menu: The method used to define the menu entries: automatic, in front matter, or in site configuration The menu structure: flat or nested The method used to localize the menu entries: site configuration or translation tables The example below handles every combination. Example This partial template recursively “walks” a menu structure, rendering a localized, accessible nested list.https://v0-122-0--gohugoio.netlify.app/templates/data-templates/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/data-templates/Hugo supports loading data from YAML, JSON, XML, and TOML files located in the data directory at the root of your Hugo project. The data directory The data directory should store additional data for Hugo to use when generating your site. Data files are not for generating standalone pages. They should supplement content files by: Extending the content when the front matter fields grow out of control, or Showing a larger dataset in a template (see the example below).https://v0-122-0--gohugoio.netlify.app/templates/rss/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/rss/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: hugo. yaml   toml   json   outputs: home: - html - rss section: - html - rss taxonomy: - html term: - html [outputs] home = ['html', 'rss'] section = ['html', 'rss'] taxonomy = ['html'] term = ['html'] { "outputs": { "home": [ "html", "rss" ], "section": [ "html", "rss" ], "taxonomy": [ "html" ], "term": [ "html" ] } } To disable feed generation for all page kinds:https://v0-122-0--gohugoio.netlify.app/templates/sitemap-template/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/sitemap-template/Overview Hugo’s built-in 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 built-in sitemap.xml template. With a multilingual project, Hugo generates: A sitemap.xml file in the root of each site (language) using the built-in sitemap.xml template A sitemap.xml file in the root of the publishDir using the built-in sitemapindex.xml template Configuration Set the default values for change frequency and priority, and the name of the generated file, in your site configuration.https://v0-122-0--gohugoio.netlify.app/templates/files/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/files/Traverse local files With Hugo’s readDir and readFile template functions, you can traverse your website’s files on your server. Use readDir The readDir function returns an array of os.FileInfo structures. It takes the file’s path as a single string argument. This path can be to any directory of your website (i.e., as found on your server’s file system). Whether the path is absolute or relative does not matter because—at least for readDir—the root of your website (typically .https://v0-122-0--gohugoio.netlify.app/templates/internal/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/internal/While the following internal templates are called similar to partials, they do not observe the partial template lookup order. Google Analytics Hugo ships with an internal template supporting Google Analytics 4. Configure Google Analytics Provide your tracking ID in your configuration file: Google Analytics 4 (gtag.js) hugo. yaml   toml   json   services: googleAnalytics: ID: G-MEASUREMENT_ID [services] [services.googleAnalytics] ID = 'G-MEASUREMENT_ID' { "services": { "googleAnalytics": { "ID": "G-MEASUREMENT_ID" } } } Use the Google Analytics template Include the Google Analytics internal template in your templates where you want the code to appear:https://v0-122-0--gohugoio.netlify.app/templates/render-hooks/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/render-hooks/Note that this is only supported with the Goldmark renderer. You can override certain parts of the default Markdown rendering to HTML by creating templates with base names render-{kind} in layouts/_default/_markup. You can also create type/section specific hooks in layouts/[type/section]/_markup, e.g.: layouts/blog/_markup. The hook kinds currently supported are: image link heading codeblock New in v0.93.0 You can define Output-Format- and language-specific templates if needed. Your layouts folder may look like this:https://v0-122-0--gohugoio.netlify.app/templates/output-formats/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/output-formats/This page describes how to properly configure your site with the media types and output formats, as well as where to create your templates for your custom outputs. Media types A media type (formerly known as a MIME type) is a two-part identifier for file formats and format contents transmitted on the internet. This is the full set of built-in media types in Hugo: Type suffixes application/json [json] application/manifest+json [webmanifest] application/octet-stream [webmanifest] application/pdf [pdf] application/rss+xml [xml rss] application/toml [toml] application/wasm [wasm] application/xml [xml] application/yaml [yaml yml] font/otf [otf] font/ttf [ttf] image/bmp [bmp] image/gif [gif] image/jpeg [jpg jpeg jpe jif jfif] image/png [png] image/svg+xml [svg] image/tiff [tif tiff] image/webp [webp] text/calendar [ics] text/css [css] text/csv [csv] text/html [html] text/javascript [js jsm mjs] text/jsx [jsx] text/markdown [md markdown] text/plain [txt] text/tsx [tsx] text/typescript [ts] text/x-sass [sass] text/x-scss [scss] video/3gpp [3gpp 3gp] video/mp4 [mp4] video/mpeg [mpg mpeg] video/ogg [ogv] video/webm [webm] video/x-msvideo [avi] Note:https://v0-122-0--gohugoio.netlify.app/templates/404/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/404/When using Hugo with GitHub Pages, you can provide your own template for a custom 404 error page by creating a 404.html template file in the root of your layouts folder. When Hugo generates your site, the 404.html file will be placed in the root. 404 pages will have all the regular page variables available to use in the templates. In addition to the standard page variables, the 404 page has access to all site content accessible from .https://v0-122-0--gohugoio.netlify.app/templates/robots/Mon, 01 Jan 0001 00:00:00 +0000https://v0-122-0--gohugoio.netlify.app/templates/robots/To generate a robots.txt file from a template, change the site configuration: hugo. yaml   toml   json   enableRobotsTXT: true enableRobotsTXT = true { "enableRobotsTXT": true } By default, Hugo generates robots.txt using an internal template. 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.