Page Templates

Provided Templates

This theme provides a set of default templates that support the basic types of pages needed by most websites.

These templates are highly configurable based on site-wide and page-specific configuration parameters. All templates share the ability to customize primary and secondary menus, side navigation, and other common features through these configuration parameters.

Use of these templates are described in the following subsections.

The Base Template

Source baseof.html

This template is the common template used for each page in the site.

This template provides the following features:

• Inclusion of JQuery, which is required by the JavaScripts used in this site.
• Compilation of the site CSS using Sass. The theme’s Sass files can be customized. Compiled Cascading Style Sheets (CSS) is minified to improve page load speed.
• Inclusion of extra site-wide and page-specific CSS resources. These CSS resources are also minified to improve page load speed.
• Inclusion of extra site-wide and page-specific JavaScript (JS) resources. These JS resources are also minified to improve page load speed.
• Optional inclusion of the USWDS “official government website” banner. This can be controlled using the usabanner page parameter, which allows the banner to be selectively displayed on specific pages.
• Additional arbitrary HTML can be included in the header and footer of all pages.
• Display of the date the page was last modified at the bottom of each page. If Git is used as the source revision control system, this date will be based on the Git metadata for the page.
• Optional link to the source repository allowing viewers to suggest changes to a given page.

Homepage Template

Source index.html

This template provides a basic layout for the site’s homepage. This template uses the Extended Header to provide primary and secondary navigation.

The template will place page content in a USWDS grid-container if the usa-section, usa-grid-container, usa-hero, or usa-tagline shortcodes are not used. If any of these shortcodes are used, then a usa-grid-container must be used for any additional page content not provided by these shortcodes.

List Template

Source index.html

This template provides a layout for each section’s _index.md page. This template uses the Basic Header to provide primary navigation. The Basic Header is used to save vertical space. Page contents are placed inside a grid-container generated by this template with the left portion of the grid dedicated to side navigation, and the page contents using the remaining space on the right side.

This template will also generate a listing of all child pages contained within the page’s section at the end of the page. Generation of this listing can be suppressed using the site-wide parameter suppresstopiclists or the page-specific parameter suppresstopiclist.

Page Template

Source index.html

This template provides a layout for additional pages in a site section. This template uses the Basic Header to provide primary navigation. The Basic Header is used to save vertical space. Page contents are placed inside a grid-container generated by this template with the left portion of the grid dedicated to side navigation, and the page contents using the remaining space on the right side.

Customizing Templates

Partial Templates

Hugo provides the ability to override templates by copying the template from the theme to the site’s layouts directory. Once copied the template can be customized.

The following are templates that can by overriden by creating a template with the same path and name in the site layouts directory.

The header-basic.html Template

Source header-basic.html

Both header implementations provide a default search based on header-search.html template. The search template can by overriden to provide a custom search.

This header uses the following site-wide configurations in the config.yaml file.

• header.project_name(required): A long name for the project.

params:
  header:
    project_name: "My Project Name"

• header.project_shortname(optional): A short, concise name for the project. If the project_shortname is not provided, then the project_name is used instead.

params:
  header:
    project_name: "Project"

• searchAffiliate(required): The search.org affiliate to use for the search.

params:
  searchAffiliate: "project"

The header-extended.html Template

Source header-extended.html

Both header implementations provide a default search based on header-search.html template. The search template can by overriden to provide a custom search.

This header uses the following site-wide configurations in the config.yaml file.

• header.project_name(required): A long name for the project.

params:
  header:
    project_name: "My Project Name"

• searchAffiliate(required): The search.org affiliate to use for the search.

params:
  searchAffiliate: "project"

The header-search.html Template

Source header-extended.html

This template can be customized to override the default search implementation.

The head.html Template

Source header-extended.html

This template can be customized to add arbitrary content to the page head.

The foot.html Template

Source header-extended.html

This template can be customized to add arbitrary content to the end of the page body.

Custom Section and Page Templates

Hugo sites are organized in sections. Hugo provides features that allow for custom templates to be used within specific site sections.