Layout

Hinode uses a grid-based, responsive design for the home page, single pages and list pages.

Hinode uses Bootstrap’s grid system and breakpoints to create a responsive layout across devices or viewport sizes. All pages follow the same base layout, which includes headers and footers. The next paragraphs explain the layout styles in more detail.

Base layout

The base layout defines a page skeleton of which all other pages are derived. It consists of four major sections, being a header, body, social footer, and bottom footer. It also loads sytlesheets, scripts, and generates the metadata. The header includes the main navigation and can be optionally fixed to the top. By default, the base layout is expanded to fill the entire available viewport. This means that all elements stretch horizontally across the entire viewport. The body also expands vertically, where the footers align to the bottom of the viewport.

Example

The following diagram illustrates the conceptual base design:

Header .col-12 (optionally fixed)

Body .col-12 .flex-fill

expands to fill viewport

Social .col-12

Footer .col-12

Configuration

Hinode uses several settings from Hugo’s main configuration. Several extensions are defined in the custom site parameters and language-specific configuration.

Main configuration

The base layout uses the main configuration of Hugo. The settings below are actively used by Hinode:

Setting	Default	Description
title	-	Title of the website, joined with the separator and title of the current page.
copyright	-	Copyright notice added to the page footer.
paginate	9	Maximum number of elements to display on a list page before pagination.
enableGitInfo	-	Enables git information, which is used by documentation pages.

The below configuration shows the default configuration set in config/_default/config.toml.

/config/_default/config.toml

title = "Hinode"
copyright = "Copyright © 2023 Mark Dumay."
paginate = 9
enableGitInfo = true

Extended configuration

Hinode uses the following extended settings in the main section of the site parameters:

Setting	Default	Description
separator	“-”	Seperator to join the website title and page title.
description	-	Short description of the website that is added to the page metadata.
enableDarkMode	true	Enables switcher for light mode and dark mode.

The below configuration shows the default configuration set in config/_default/params.toml.

/config/_default/params.toml

[main]
    separator = "-"
    description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
    enableDarkMode = true

Language-specific configuration

Hinode supports multilingual content. The following parameters are used in the site’s footer, header, and meta data. Refer to the languages section to review the various configuration options to enable multilingual content.

Section	Setting	Default	Description
head	tagline	-	Tagline used on the site’s title for the home page.
feature	link	-	Call to action link in the featured section on the home page.
feature	caption	“About”	Call to action title in the featured section on the home page.
footer	license	-	License displayed on the site’s footer.
footer	socialTitle	-	Title displayed in the site’s social footer.
footer	socialCaption	-	Caption displayed in the site’s social footer.

The below configuration shows the default configuration set in config/_default/languages.toml for the English language.

/config/_default/languages.toml

    [en.params.head]
        tagline = "A Hugo Theme"
    [en.params.feature]
        link = "/en/about"
        caption = "About"
    [en.params.footer]
        license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank'>CC BY-NC-SA 4.0</a>)."
        socialTitle = "Follow me"
        socialCaption = "I work on everything coding and tweet developer memes"

Home page

The home page introduces a feature element and provides a selection of the three most recent items in a section, such as blog posts and project descriptions. The items are displayed as card groups and alternate between a vertical grid and a horizontal grid. A button that links to the related section is added below each group. The feature element can optionally cover the entire viewscreen.

Example

The following diagram illustrates the conceptual layout of the home page:

Header .col-12

Feature .col-12

optionally spans viewport

Card .col-4

Card .col-12

Social .col-12

Footer .col-12

Configuration

The configuration of the home page is set in the home section of the site parameters. The folllowing settings are supported:

Setting	Default	Description
sections	-	Sections to include on the home page, e.g. [“blog”, “projects”].
featurePhoto	-	Url of the photo to include in the feature element.
fullCover	false	Flag to indicate if the feature element should cover the entire front page.
style	-	Optional class attributes to add to the main `<div>` element of the base page. Applies to the homepage only.

The below configuration shows the default configuration set in config/_default/params.toml.

/config/_default/params.toml

[home]
    sections = ["blog", "projects"]
    featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
    fullCover = false
    style = ""

List pages

List pages provide an overview of available content within a section as a card group. By default, the most recent nine items are displayed. Adjust the setting paginate in the main configuration as needed. If the section contains more items, a paginator is added below the card group.

Example

The following diagram illustrates the conceptual layout of a list page:

Header .col-12

Card

Social .col-12

Footer .col-12

Configuration

The configuration of the list pages is set in the list section of the site parameters. You can specify the settings for each section of your content. The entire configuration is fully optional and uses default settings if omitted. The folllowing settings are supported per section:

Setting	Default	Description
title	Section name	Title of the list page, displayed above the card group. By default, the title defined in the page’s frontmatter is used.
sort	“date”	Type of sorting to be used, either “date” (default), “weight”, “publication”, “expiration”, “lastmod”, “length”, “title”, “linktitle”, or “<param>”. See Hugo’s content ordering for more details.
reverse	true	Flag to indicate the sorting of the section content should be reversed, defaults to true.
cols	3	Number of columns to display in the card group, defaults to 3.
color	-	Theme color of the card, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”. By default, no color is specified.
padding	“auto”	Padding of the content, either “0”, “1”, “2”, “3”, “4”, “5”, or “auto” (default).
header	“full”	Header components of the card, displayed in small caps. Supported values are “full” (default), “publication”, “tags”, and “none”.
footer	“none”	Footer components of the card, displayed in small caps. Supported values are “full”, “publication”, “tags”, and “none” (default).
orientation	“stacked”	Placecement of the thumbnail, either “stacked” (default), “horizontal”, or “none”.
style	-	Optional styling attributes added to card class, e.g. “border-0” to remove the borders.
homepage	3	Maximum number of items to display on the home page (if defined in the configuration), defaults to 3.
separator	false	Flag to indicate a horizontal line should be added between items on small screens.

The below configuration shows the default configuration set in config/_default/params.toml.

/config/_default/params.toml

[list]
    [blog]
        title = "Blog"
        sort = "date"
        reverse = false
        cols = 3
        color = ""
        padding = "0"
        header = "full"
        footer = "none"
        orientation = "stacked"
        style = "border-0 card-zoom"
        homepage = 3
        separator = true
    [projects]
        title = "Projects"
        sort = "title"
        reverse = false
        cols = 1
        color = ""
        padding = "3"
        header = "none"
        footer = "tags"
        orientation = "none"
        style = "border-1 card-emphasize"
        homepage = 3
        separator = false

Single pages

Single pages follow the base layout but introduce two columns next to the body content. The left column shows a sidebar navigation if applicable and is left empty otherwise. The right column shows a table of contents for the current page if applicable. On smaller viewscreens, the sidebar navigation folds into an offcanvas element, whilst the table of contents is hidden. On medium-sized screens the sidebar navigation takes precedence over the table of contents.

Example

Header .col-12

Sidebar

sticky

Body .col-8 .flex-fill

expands to fill viewport

TOC

sticky

Social .col-12

Footer .col-12

Configuration

The configuration of the documentation pages is set in the docs section of the site parameters. The folllowing settings are supported:

Setting	Default	Description
docs_version	-	Default version to use in documentation links.
basePath	-	Base path to use for file references.

The below configuration shows the default configuration set in config/_default/params.toml.

/config/_default/params.toml

[docs]
    version = "0.8"
    basePath = ""

Last updated: February 26, 2023 • Add separator argument (1d59b10)

On this page

Docs

Layout

Base layout

Example

Configuration

Main configuration

Extended configuration

Language-specific configuration

Home page

Example

Configuration

List pages

Example

Configuration

Single pages

Example

Configuration