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. 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:

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:

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

• config/_default/hugo.toml

title = "Hinode"
copyright = "Copyright © 2024 Mark Dumay."
enableGitInfo = true

Extended configuration  

  Important

The --minify flag of hugo purges HTML whitespace by default. Unfortunately, this also removes the spacing behind the visual cue of external links. When setting externalLinks.cue to true, be sure to add the following configuration to your main configuration to suppress the removal of whitespace:

[minify]
  [minify.tdewolff.html]
    keepWhitespace = true

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

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
    enableLanguageSelectionStorage = false
    modes = ["light", "dark"]
    canonifyAssetsURLs = false
    endorse = true
    footerBelowFold = false
    loading = "lazy"
    breakpoint = "md"
    [main.internalLinks]
        validate = true
    [main.externalLinks]
        cue = false
        tab = false
    [main.build]
        transpiler = "libsass"

Message configuration  

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:

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

• config/_default/params.toml

[messages]
    placement = "bottom-right"

Social sharing configuration  

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:

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

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

• config/_default/params.toml

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

[[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 x-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.

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.social]
        title = "Follow me"
        caption = "I work on everything coding and tweet developer memes"
    [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 nofollow'>CC BY-NC-SA 4.0</a>)."

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 separate 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:

Configuration  

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

The below configuration shows the default configuration set in config/_default/params.toml. The sections are commented out, meaning all root sections are enabled by default.

• config/_default/params.toml

[home]
    # sections = ["posts"]
    fullCover = false
    centerHeadline = false
    style = ""
    [home.feature]
        orientation = "horizontal"
        color = "primary"
        width = 4
        align = "start"

List pages  

  Note

List pages support content view templates  since release v0.21.0  . Set the type in the page’s frontmatter.

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 pagerSize in the main configuration  as needed.

Example  

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

Configuration  

The list page uses the configuration of a single section.

Single pages  

  Important

Single pages support content view templates  since release v0.21.0  . Set the type in the page’s frontmatter. The type parameter replaces the previous layout parameter.

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 (note: this may best be viewed on a larger screen).

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.

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:

---
type: docs
---

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

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:

---
type: minimal
---

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

Configuration  

Please refer to the content management section to review the elements available in the page’s frontmatter. You can also set the default behavior by page type in the pages section of the site parameters. For example, the following configuration hides the modification date of all news articles, unless overridden in the page’s frontmatter.

[pages]
    [pages.news]
        metadata = "original"

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

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

• config/_default/params.toml

[docs]
    basePath = "_vendor/github.com/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.

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.

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.

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 following settings are supported per section:

The card layout supports the following additional arguments:

The nav layout supports the following additional arguments:

The below configuration shows an example configuration of the guides available on this site. The configuration is set in config/_default/params.toml.

• config/_default/params.toml

[sections]
    [sections.guides]
        title = "Check our guides to get you started"
        layout = "card"
        sort = "date"
        reverse = true
        background = ""
        color = "body-tertiary"
        style = "border-0 shadow card-zoom card-body-margin"
        cols = 3
        padding = "3"
        header = "full"
        footer = "none"
        orientation = "stacked"
        homepage = 3