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.
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.
The following diagram illustrates the conceptual base design:
Body .col-12 .flex-fill
expands to fill viewportHinode uses several settings from Hugo’s main configuration. Several extensions are defined in the custom site parameters and language-specific 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
.
title = "Hinode"
copyright = "Copyright © 2023 Mark Dumay."
paginate = 9
enableGitInfo = true
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
.
[main]
separator = "-"
description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
enableDarkMode = true
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.
[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"
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.
The following diagram illustrates the conceptual layout of the home page:
Feature .col-12
optionally spans viewportThe 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
.
[home]
sections = ["blog", "projects"]
featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
fullCover = false
style = ""
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.
The following diagram illustrates the conceptual layout of a list page:
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
.
[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 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.
Sidebar
stickyBody .col-8 .flex-fill
expands to fill viewportTOC
stickyThe 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
.
[docs]
version = "0.8"
basePath = ""