# Layout
Hinode uses a grid-based, responsive design for the home page, single pages and list pages.
> [!IMPORTANT]
> The page rendering has been revised in Hinode Added in v1.0.0
. The documentation on this page is still to be updated. Visit this [GitHub issue](https://github.com/gethinode/hinode/issues/1430#issuecomment-2988697852) for more information.
Hinode uses Bootstrap's [grid system](https://getbootstrap.com/docs/5.3/layout/grid) and [breakpoints](https://getbootstrap.com/docs/5.3/layout/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 stylesheets, scripts, and generates the metadata. The header includes the [main navigation](navigation#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](https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work)). 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](https://gohugo.io/getting-started/configuration/#all-configuration-settings). Several extensions are defined in the [custom site parameters](https://gohugo.io/getting-started/configuration/#configuration-directory) and [language-specific configuration](https://gohugo.io/content-management/multilingual/#configure-languages).
#### Main configuration
The base layout uses the [main configuration](https://gohugo.io/getting-started/configuration/#all-configuration-settings) 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. |
| `enableGitInfo` | - | Enables git information, which is used by [documentation pages](content-management#documentation-layout). |
The below configuration shows the default configuration set in `config/_default/hugo.toml`.
```toml
title = "Hinode"
copyright = "Copyright © 2026 Hinode Team"
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:
>
> ```toml
> [minify]
> [minify.tdewolff.html]
> keepWhitespace = true
> ```
Hinode uses the following extended settings in the `main` section of the `site parameters`:
| Setting | Default | Description |
|----------------------------------|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `separator` | "-" | Separator to join the website title and page title. |
| `description` | - | Short description of the website that is added to the page metadata. |
| `enableDarkMode` | true | {{< release version="v1.12.0" release-state="deprecated" short="true" button-size="sm" inline="true" >}} Enables switcher for [light mode and dark mode](color-modes). |
| `modes` | ["light", "dark"] | {{< release version="v1.12.0" release-state="deprecated" short="true" button-size="sm" inline="true" >}}Supported color modes, used as identifier for color-mode aware images. |
| `endorse` | true | By default, the theme adds a link to Hinode in the page's footer. You can disable it by setting `endorse` to `false`, but we would appreciate it if you leave it enabled. |
| `enableLanguageSelectionStorage` | false | If set, stores the last selected language in the site's local storage. Pages are automatically redirected to the related page translation, if available. |
| `footerBelowFold` | false | If set, pushes the footer including social links to below the page fold. |
| `loading` | "eager" | {{< release version="v0.21.0" short="true" button-size="sm" inline="true" >}} Sets the default loading behavior of images below the page fold. Supported values are either "eager" (default) or "lazy". In practice, Hinode can only determine if an image is below the page fold when `fullCover` is set to true and the current page is a list page or the homepage. The [image shortcode documentation](image) provides more details. |
| `canonifyAssetsURLs` | false | If set, makes permalinks to site assets (favicons, images, scripts, and stylesheets) absolute instead of relative. |
| `breakpoint` | "md" | {{< release version="v0.21.7" short="true" button-size="sm" inline="true" >}} Breakpoint for single pages and list pages to start showing the sidebar navigation and table of content panel. Card groups use the same breakpoint to decide how many columns to display in the current viewport. |
| `titleCase` | false | {{< release version="v0.29.0" short="true" button-size="sm" inline="true" >}} If set, applies title case to headers and other select elements. Configure the title style in the [site configuration](https://gohugo.io/getting-started/configuration/#configure-title-case). |
| `internalLinks.validate` | true | If set, validates if internal links reference a valid page. |
| `internalLinks.pretty` | false | {{< release version="v0.27.19" short="true" button-size="sm" inline="true" >}} If set, adds a trailing slash to rendered links. |
| `externalLinks.cue` | false | If set, adds a visual cue `{{< icon icon="fas up-right-from-square fa-2xs" spacing=false >}}` as suffix to [managed external links](links-and-cross-references#managed-links). |
| `externalLinks.tab` | false | If set, opens [managed external links](links-and-cross-references#managed-links) in a new browser tab using the HTML attributes `target="_blank" rel= "noopener noreferrer"`. |
| `build.transpiler` | "dartsass" | {{< release version="v0.20.0" short="true" button-size="sm" inline="true" >}} Defines the Sass transpiler to be used, either "libsass" or "dartsass" (default). The Dart Sass transpiler requires [installation of a separate binary on your machine](https://gohugo.io/hugo-pipes/transpile-sass-to-css/#installing-in-a-development-environment). This includes any production servers used for {{< abbr "CI/CD" >}} automation and deployment. |
| `build.silenceDeprecations` | false | {{< release version="v0.27.9" short="true" button-size="sm" inline="true" >}} Silences any deprecation warnings raised by the Dart Sass transpiler. |
| `colorMode.enabled` | true | {{< release version="v1.12.0" short="true" button-size="sm" inline="true" >}} Enables switcher for [light mode and dark mode](color-modes). |
| `colorMode.modes` | ["light", "dark"] | {{< release version="v1.12.0" short="true" button-size="sm" inline="true" >}}Supported color modes, used as identifier for color-mode aware images. |
| `colorMode.toggle` | false | If set, uses a toggle instead of a switch to change the color mode. |
| `colorMode.iconLight` | "fas sun" | Icon to use for light mode. |
| `colorMode.iconDark` | "fas moon" | Icon to use for dark mode. |
| `language.icon` | "fas globe" | Icon to use for the language selector. |
The below configuration shows the default configuration set in `config/_default/params.toml`.
```toml
[main]
separator = "-"
description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
enableLanguageSelectionStorage = false
canonifyAssetsURLs = false
endorse = true
footerBelowFold = false
loading = "lazy"
breakpoint = "md"
titleCase = false
[main.padding]
x = 4
y = 4
[main.internalLinks]
validate = true
pretty = false
[main.externalLinks]
cue = false
tab = false
[main.build]
transpiler = "dartsass"
silenceDeprecations = true
[main.colorMode]
enabled = true
modes = ["light", "dark"]
toggle = false
[main.cards]
linkIcon = false
```
#### Message configuration
Added in v0.14.4
You can show informative messages using the [toast shortcode](toast). 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`.
```toml
[messages]
placement = "bottom-right"
```
#### Social sharing configuration
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 `sharing: false` 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. |
| `webshare` | false | Flag to indicate if native sharing provided by the Operating System should be enabled (via the web share API). If set and [supported by the browser](https://caniuse.com/?search=navigator.share), an additional button is added. |
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](../content/icons) 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](toast) is shown to inform the user. |
The below configuration shows the default configuration set in `config/_default/params.toml`.
```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](https://gohugo.io/content-management/multilingual/#configure-languages). The following parameters are used in the site's footer, header, and meta data. Refer to the [languages](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` | - | {{< release version="v0.18.0" short="true" release-state="deprecated" button-size="sm" inline="true" >}} Modify `content/{LANG}/_index.md` directly (`{LANG}` is optional, pending on your [language settings](languages)). |
| `feature` | `caption` | "About" | {{< release version="v0.18.0" short="true" release-state="deprecated" button-size="sm" inline="true" >}} See `feature.link`. |
| `social` | `title` | - | Title displayed in the site's social footer. |
| `social` | `caption` | - | Caption displayed in the site's social footer. |
| `footer` | `license` | - | License displayed on the site's footer. |
| `footer` | `socialTitle` | - | {{< release version="v0.18.0" short="true" release-state="deprecated" button-size="sm" inline="true" >}} Use `social.title` instead. |
| `footer` | `socialCaption` | - | {{< release version="v0.18.0" short="true" release-state="deprecated" button-size="sm" inline="true" >}} Use `social.caption` instead. |
The below configuration shows the default configuration set in `config/_default/languages.toml` for the English language.
```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 (CC BY-NC-SA 4.0)."
```
## Home page
The home page introduces a feature section and several [configurable sections](#page-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:
Header .col-12
Feature .col-12 .flex-fill
*vertically expands to fill 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 following settings are supported:
| Setting | Default | Description |
|-----------------------|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `sections` | All root sections | Sections to include on the home page, e.g. `["blog", "projects"]` - defaults to [all root sections.](https://gohugo.io/content-management/sections) |
| `featurePhoto` | - | {{< release version="v0.18.0" short="true" release-state="deprecated" button-size="sm" inline="true" >}} Use `thumbnail` of the homepage (e.g. `content/_index.md`) instead. |
| `fullCover` | false | Flag to indicate if the feature element should cover the entire front page. |
| `style` | - | Optional class attributes to add to the main `` element of the base page. Applies to the homepage only. |
| `feature.orientation` | "stacked" | {{< release version="v0.21.0" short="true" button-size="sm" inline="true" >}} Orientation of the featured section, either "stacked" (default) or "horizontal". |
| `feature.color` | - | {{< release version="v0.21.0" short="true" button-size="sm" inline="true" >}} Optional background color of the featured section, used in conjunction with `style.themeOpacity` in the site's parameters. |
| `feature.width` | 6 | {{< release version="v0.21.0" short="true" button-size="sm" inline="true" >}} Optional column width of the main featured section, supported values are 1 - 12. |
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.
```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](https://gohugo.io/templates/views/) since release Added in v0.21.0
. Set the `type` in the page's frontmatter.
List pages define one [configurable section](#page-sections) 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](https://gohugo.io/templates/pagination/#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](#configuration-4).
## Single pages
> [!IMPORTANT]
> Single pages support [content view templates](https://gohugo.io/templates/views/) since release Added in 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](navigation#sidebar-navigation) if applicable and is left empty otherwise. The right column shows a [table of contents](navigation#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).
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
Tags
Description
{{< fas image >}} Thumbnail
**Page content**
**Page footer**
Navigation links
### 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:
```yml
---
type: 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:
```yml
---
type: minimal
---
```
The following diagram illustrates the minimal layout of a single page.
**Page header**
Description
**Page content**
### Configuration
Please refer to the [content management section](content-management#single-pages) 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.
```toml
[pages]
[pages.news]
metadata = "original"
```
| Setting | Default | Description |
|------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `metadata` | "full" | {{< release version="v0.21.2" short="true" button-size="sm" inline="true" >}} Defines the metadata to include in the header of a single page type. Supported values are "full" (default), "original", and "none". In the default configuration, the header includes metadata elements for the original publication date, modification date (if applicable), reading time, and word count. When set to `original`, the modification date is always omitted. Set `metadata` to `none` to suppress all metadata elements. |
| `sharing` | true | {{< release version="v0.21.2" short="true" button-size="sm" inline="true" >}} Optional flag to indicate if a single page should include sharing options (when the {{< link "#social-sharing-configuration" >}}social sharing configuration{{< /link >}} is enabled). |
The configuration of the **documentation pages** is set in the `docs` section of the site parameters. The following 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](release). |
The below configuration shows the default configuration set in `config/_default/params.toml`.
```toml
[docs]
basePath = "_vendor/github.com/gethinode/hinode/v2"
github = "https://github.com/gethinode/docs"
release = "https://github.com/gethinode/hinode/releases/tag/"
```