Layout

Share via

Link copied to clipboard

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. The width of the base layout is maximized to 1320 pixels (see the container-xxl setting of the Bootstrap containers). The height is set to a least 100% of the viewport, to ensure the footer is always aligned to the bottom on the page.

Example

The following diagram illustrates the conceptual base design:

Header .col-12 (optionally fixed)

Body .col-12 .flex-fill

vertically 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.
modes	[“light”, “dark”]	Supported color modes, used as identifier for color-mode aware images.
footerBelowFold	false	If set, pushes the footer including social links to below the page fold.

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
    modes = ["light", "dark"]

Message configuration

Added in v0.14.4

You can show informative messages using the toast shortcode. By default, toast messages are displayed in the bottom right of the viewport. Hinode vertically stacks multiple toast messages automatically. Adjust the configuration by adjusting messages in the site parameters. The following arguments are supported:

Setting	Default	Description
placement	“bottom-right”	Optional position of the toast messages relative to the viewport: “top-left”, “top-center”,“top-right”, “middle-left”, “middle-center”, “middle-right”, “bottom-left”, “bottom-center”, or “bottom-right” (default).

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

/config/_default/params.toml

[messages]
    placement = "bottom-right"

Added in v0.14.3

Hinode can optionally add buttons to share a post via available social media. Use the following extended settings in the sharing section of the site parameters to configure these buttons:

Setting	Default	Description
enabled	false	Define if social sharing should be enabled for all single pages. You can override this setting by adding `enabled` to the individual page’s frontmatter.
sort	“weight”	Sorting key to be used, either “name” or “weight”. You can also reference a custom key defined in the provider configuration.
reverse	false	Flag to indicate if the sorting of the social sharing buttons should be reversed, defaults to false.

Add each available provider to [[sharing.providers]]. The providers support the following arguments:

Setting	Default	Description
name	-	Name of the provider, added as assistive title to improve accessibility.
url	-	Parameterized URL of the social media provider. The `url` supports the parameters `{url}` and `{title}`. The `{url}` is replaced with the page’s permalink, and `{title}` with the page’s title.
icon	-	Shorthand notation of the Font Awesome icon to be used as button, e.g. `fab linkedin`.
weight	-	Weight of the social sharing button, to be used as sorting key.
clipboard	false	If set, the defined url is copied to the clipboard instead of being opened. A toast message is shown to inform the user.

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

/config/_default/params.toml

[sharing]
    enabled = true
    sort = "weight"
    reverse = false

[[sharing.providers]]
    name = "LinkedIn"
    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
    icon = "fab linkedin"
    weight = 10

[[sharing.providers]]
    name = "Twitter"
    url = "https://twitter.com/home?status={url}"
    icon = "fab twitter"
    weight = 20

[[sharing.providers]]
    name = "Facebook"
    url = "https://www.facebook.com/sharer.php?u={url}"
    icon = "fab facebook"
    weight = 30

[[sharing.providers]]
    name = "WhatsApp"
    url = "whatsapp://send?text={title}%20{url}"
    icon = "fab whatsapp"
    weight = 40

[[sharing.providers]]
    name = "email"
    url = "{url}"
    icon = "fas link"
    weight = 50
    clipboard = 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 = "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' rel='noopener noreferrer'>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 section and several configurable sections. The default home page of Hinode displays the three most recent blog posts and projects, each rendered as cards in a seperate section. A button that links to the related list page is added below each group. The feature section 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

Section 1 .col-12

Section 2 .col-12

Section ... .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
    centerHeadline = false
    style = ""

List pages

List pages define one configurable section for the available content within the page bundle. By default, list pages display the most recent nine items as card group. If the section contains more items, a paginator is added below the card group. Adjust the setting paginate in the main configuration as needed.

Example

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

Header .col-12

Section .col-12

optional paginator

Social .col-12

Footer .col-12

Configuration

The list page uses the configuration of a single section.

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. The following diagram illustrates the base layout.

Header .col-12

Sidebar

sticky

Body .col-8 .flex-fill

expands to fill viewport

TOC

sticky

Social .col-12

Footer .col-12

Single pages support three optional layout types, which can be configured in the page’s frontmatter. The next paragraphs describe each layout type in more detail. These layout types apply to the body section of the base layout.

Default layout

By default, single pages, such as a blog page, include multiple elements, such as a rich header, thumbnail, body, and footer. The following diagram illustrates the default layout of a single page.

Page header

Metadata

Documentation layout

Documentation pages use a more straightforward, simplified layout compared to the default layout. Configure the following setting to the page’s frontmatter to apply the documentation layout:

---
layout: docs
---

The following diagram illustrates the documentation layout of a single page.

Page header

Description

Page content

Page footer

Git metadata

Minimal layout

Pages with a minimal layout are similar to documentation pages, but do not include a footer at all. Configure the following setting to the page’s frontmatter to apply the minimal layout:

---
layout: docs
---

The following diagram illustrates the minimal layout of a single page.

---
layout: minimal
---

Page header

Description

Page content

Configuration

Please refer to the content management section to review the elements available in the page’s frontmatter. The configuration of the documentation pages is set in the docs section of the site parameters. The folllowing settings are supported:

Setting	Default	Description
version	-	Default version to use in documentation links.
basePath	-	Base path to use for file references.
github	-	Repository URL for the docs site, overrides `schema/github` in `config/_default/params.toml`.
release	-	Release url for the docs site, e.g. `https://github.com/gethinode/hinode/releases/tag/`. This setting is used by the release shortcode.

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

config/_default/params.toml

[docs]
    version = "0.9"
    basePath = "node_modules/@gethinode/hinode"
    github = "https://github.com/gethinode/docs"
    release = "https://github.com/gethinode/hinode/releases/tag/"

Page sections

Both the home page and the list page use one or more page sections to display a sorted list of items. The lists can contain either regular pages or page snippets. The next paragraphs describe the three available layout types.

Card layout

The card layout displays a group of cards in a grid. The default setting is to show nine items at a time. You can adjust these settings in the page section configuration, including the style of the cards themselves. Refer to the card shortcode documentation to review the available card styles. The next diagram illustrates a typical card layout.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

List layout

The list layout shows the page bundle’s items as a vertical list. The thumbnail alternates between being left-aligned and right-aligned for each row. Remove the description from the page’s frontmatter to display the full content instead of the description. The content of the item is displayed next to the thumbnail.

Item 1

Content .col-6

Item 2

Content .col-6

Nav layout

The nav layout shows a nav element where each tab pane represents a single item of the page bundle. Remove the description from the page’s frontmatter to display the full content instead of the description. The tab pane shows the content of the selected item.

Item 1 | Item 2 | Item 3

Content .col-12

Configuration

The configuration of each section is set in the sections setting of the site parameters. The entire configuration is fully optional and uses default settings if omitted. The folllowing settings are supported per section:

Setting	Default	Description
title	""	Title of the section on the home page. It overrides the title of the page bundle. On list pages, the title defined in the page bundle’s frontmatter is used instead.
layout	“card”	Layout of the section, either “card” (default), “list”, or “nav”.
sort	“date”	Sorting key to be used, based on a frontmatter parameter. Examples are “date” (default), “lastmod”, “weight”, or “title”. You can also use custom parameters, as long as they are defined in the page’s frontmatter.
reverse	true	Flag to indicate the sorting of the section content should be reversed, defaults to true.
nested	true	Flag to indicate the content should be listed recursively for the entire section. You can override this setting for individual branch bundles by adding `nested` to the page’s frontmatter.
background	-	Theme color of the section background, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white”, “black”, “body”, or “body-tertiary”. By default, no color is specified. The background expands across the entire viewport (thus is not constrained to the page’s maximum width of 1320 pixels).
color	-	Theme color of the section elements, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white”, “black”, “body”, or “body-tertiary”. By default, no color is specified.
style	-	Optional styling attributes added to selection elements, e.g. “border-0” to remove the borders.

The card layout supports the following additional arguments:

Setting	Default	Description
cols	3	Number of columns to display in the card group, should be a value betweeen 1 and 5. The default value is 3.
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”.
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 nav layout supports the following additional arguments:

Setting	Default	Description
type	“pills”	Optional type of the tab group, either “tabs”, “pills” (default), or “underline”.
vertical	“false”	Optional flag to show vertical tabs instead of horizontal tabs (default).
class	""	Optional class attribute of the tab group, e.g. “nav-fill”.
pane	“none”	Optional style of the panes, either “none” (default) or “persona”.
width	100	Optional responsive width of the tab group, either 50 or 100 (default).

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

/config/_default/params.toml

[sections]
    [sections.blog]
        title = "Blog"
        sort = "date"
        reverse = true
        nested = true
        cols = 3
        color = ""
        padding = "0"
        header = "full"
        footer = "none"
        orientation = "stacked"
        style = "border-0 card-zoom"
        homepage = 3
        separator = true
    [sections.projects]
        title = "Projects"
        layout = "card"
        sort = "title"
        reverse = false
        nested = true
        cols = 1
        background = "body-tertiary"
        color = "body"
        padding = "3"
        header = "none"
        footer = "tags"
        orientation = "horizontal"
        style = "border-1 card-emphasize"
        homepage = 3
        separator = false

Last updated: May 27, 2023 • Add message placement configuration (5f14a20)

On this page

Docs

Base layout

Example

Configuration

Main configuration

Extended configuration

Message configuration

Social sharing configuration

Language-specific configuration

Home page

Example

Configuration

List pages

Example

Configuration

Single pages

Default layout

Documentation layout

Minimal layout

Configuration

Page sections

Card layout

List layout

Nav layout

Configuration