Hinode logo
  • About 
  • Docs 
  • Components 
  • Guides 
  • Releases 
  •  
Docs
  • Getting Started
    • Introduction
    • Commands
    • Hosting and Deployment
    • Upgrading
    • Private Modules and Packages
    • Contribute
    • Troubleshooting
  • Content
    • Content Management
    • Content Organization
    • Typography
    • Links and Cross-References
    • Images and Figures
    • Tables
    • Icons
  • Configuration
    • Layout
    • Colors
    • Color Modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Cookie Consent
    • Digital Asset Managers
  • Components
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Card
    • Card Group
    • Carousel
    • Collapse
    • Command Prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Ins
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and Tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • Video
  • Advanced Settings
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial Development
    • Module Development
    • Server Headers
    • Server-Side Redirection
  • About
    • Credits
    • License
  • Getting Started
    • Introduction
    • Commands
    • Hosting and Deployment
    • Upgrading
    • Private Modules and Packages
    • Contribute
    • Troubleshooting
  • Content
    • Content Management
    • Content Organization
    • Typography
    • Links and Cross-References
    • Images and Figures
    • Tables
    • Icons
  • Configuration
    • Layout
    • Colors
    • Color Modes
    • Fonts
    • Languages
    • Navigation
    • Documentation
    • Analytics
    • Modules
    • Cookie Consent
    • Digital Asset Managers
  • Components
    • Abbr
    • Accordion
    • Alert
    • Animation
    • Args
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Card
    • Card Group
    • Carousel
    • Collapse
    • Command Prompt
    • Docs
    • Example
    • File
    • Icon
    • Image
    • Ins
    • Kbd
    • Link
    • Map
    • Mark
    • Navbar
    • Navs and Tabs
    • Persona
    • Release
    • Spinner
    • Sub
    • Sup
    • Table
    • Timeline
    • Toast
    • Tooltip
    • Video
  • Advanced Settings
    • Overview
    • Styles
    • Scripts
    • Icons
    • Partial Development
    • Module Development
    • Server Headers
    • Server-Side Redirection
  • About
    • Credits
    • License

Content Management

Share via
Hinode
Link copied to clipboard

Use Markdown and templates to define the content for your website.

On this page
Overview   Front Matter   Mixed Content   Templates   Shortcodes   Single Pages   Default Layout   Documentation Layout   Minimal Layout  

Hinode uses Markdown and templates to define the content for your website. Hugo is used to generate the final static website. The next paragraph provides an overview of Markdown and the key elements added by Hinode. Three different document layouts are introduced next.

Overview  

Markdown is a simple and easy-to-use markup language. It uses formatting elements in plaintext documents to format documents. Using Markdown is different than using a WYSIWYG editor. Such editors apply the formatting styles as you go. Instead, Markdown shows the formatting codes next to the content. Although this may require getting used to, the advantage is that you have full control over your document. The Markdown Guide  provides a comprehensive overview of the Markdown format. Hugo supports additional content formats next to Markdown. See Hugo’s documentation for a full overview of Supported Content Formats  .

Front Matter  

  Important

When using a local file, the page’s thumbnail should be available as a global site asset. You cannot use a Page Resource  as thumbnail, as the thumbnail image is being referenced on other pages too.

Hinode uses so-called front matter to capture the metadata of a document. The front matter usually includes the document title, the creation date, and a summary description. By convention, the front matter is defined at the top of the document. Hugo supports Four Types of Front Matter Formats  . Hinode uses the YAML format by default, denoted by --- as the opening and closing tags. The following example shows the front matter of the page you are currently reading.

---
title: Content management
description: Use Markdown and templates to define the content for your website.
date: 2023-02-19
---

Hinode supports the following additional front matter parameters.

Argument Description
icon Shorthand notation for an Icon to be used on a Card.
photoCredits Deprecated in v0.18.0      Use thumbnail.author instead.
photoSource Deprecated in v0.18.0      Use thumbnail.origin instead.
searchExclude Added in 0.21.8      If true, the current page is excluded from the search index.
thumbnail URL or local path of the thumbnail image, shorthand notation for thumbnail.url. When using shorthand notation, the additional thumbnail metadata is unavailable (and will throw an error when specified).
thumbnail.url URL or local path of the thumbnail image. When set, be sure to clear the shorthand thumbnail value.
thumbnail.author Name of the thumbnail author, added as caption to the thumbnail on single pages.
thumbnail.authorURL URL of the thumbnail author, added as caption link to the thumbnail on single pages.
thumbnail.origin Name of the thumbnail origin, e.g. Unsplash or Pexels.
thumbnail.originURL URL of the thumbnail origin, added as caption link to the thumbnail on single pages.

Mixed Content  

  Caution

Mixing Markdown with HTML is considered unsafe. Hinode disables HTML support by default since release v0.19.0. If you trust the input, you can enable this setting in the Goldmark Configuration  , the default Markdown processor of Hugo. If you disable HTML, you can optionally set purgeHTMLComments in params.debugging to prevent HTML comments from generating a warning by Goldmark.

As explained in the Overview, Hinode uses Markdown to format the content of a document. However, you can mix this content with HTML as needed. The final output is rendered to HTML.

Templates  

Hinode uses several templates to prescribe the final output in HTML. Each template can be overridden with a specific Lookup Order  . In the core, Hinode uses the following templates defined in layouts/_default:

└── layouts
    ├── _default
    │   ├── baseof.html  // defines the base layout, including the HTML header and body
    │   ├── list.html    // defines the layout for a list page
    │   └── single.html  // defines the layout for a single page
    └── index.html       // defines the layout for the homepage

The Layout Section provides more details about the available templates.

Shortcodes  

Shortcodes are an addition provided by Hugo to simplify the inclusion of common elements, such as images, buttons, and tooltips. The shortcode calls an template that can contain extensive HTML content. This approach separates raw HTML from your plain Markdown content and promotes reuse. Shortcodes can be defined in two ways:

  • {{< shortcodename parameters >}}: a shortcode without inner text.
  • {{< shortcodename parameters >}}Inner content{{< /shortcodename >}}: a shortcode with inner text.

Hugo provides more details about the Usage of Shortcodes  . Hinode provides several shortcodes that wrap common Bootstrap elements. Explore the components section in the docs navigation for an overview of the available shortcodes. As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio:

Figure Caption
Figure Caption
markdown
{{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" >}}

Single Pages  

Single pages define the content for a specific page, such as the Introduction Page. Hinodes supports three types of single pages, which can be configured in the front matter. The next paragraphs describe each layout type in more detail. Refer to the Layout Section to see additional configuration options.

Default Layout  

By default, single pages, such as a blog page, include the following elements in the body:

Element Description
Title The title of the page as set in the page’s frontmatter.
Metadata The date of the page, the modification date (if applicable), the read time, and the amount of words on the page.
Tags Links to any tags defined in the page’s frontmatter.
Description The description as defined in the page’s frontmatter, or as summarized by Hugo if omitted in the frontmatter.
Thumbnail A thumbnail image with figure caption that links to the photo credits (if defined in the frontmatter).
Download v0.21.0      a link to a local file that represents a downloadable version of the current article.
Navigation links Links on the bottom of the page that link to the previous and next page within the current section.

The below example illustrates the parameters used in the page’s frontmatter:

---
author: Mark Dumay
title: Another project
date: 2021-07-15
description: Another project.
tags: ["javascript", "golang"]
thumbnail: 
    url: img/coffee.jpg
    author: Karl Fredrickson
    authorURL: https://unsplash.com/@kfred
    origin: Unsplash
    originURL: https://unsplash.com/photos/TYIzeCiZ_60
download: /media/article.en.pdf
---

Documentation Layout  

Documentation pages use a more straightforward, simplified layout compared to the default layout. They include the following elements in their body:

  • Title - the title of the page as set in the page’s frontmatter.
  • Description - the description as defined in the page’s frontmatter, or as summarized by Hugo if omitted in the frontmatter.
  • Metadata - a revision date and link to the latest git commit on the bottom of the page. Enable enableGitInfo in the Main Configuration for the git commit message to work.

Be sure to select the docs layout in the page’s frontmatter to enable the documentation layout:

---
layout: docs
---

Minimal Layout  

Pages with a minimal layout are similar to documentation pages, but do not include a footer at all:

  • Title - the title of the page as set in the page’s frontmatter.
  • Description - the description as defined in the page’s frontmatter, or as summarized by Hugo if omitted in the frontmatter.

Be sure to select the minimal layout in the page’s frontmatter to enable the documentation layout:

---
layout: minimal
---
• Update to Hinode v0.27.13 (b6f5054)
On this page:
Overview   Front Matter   Mixed Content   Templates   Shortcodes   Single Pages   Default Layout   Documentation Layout   Minimal Layout  
Content management
Content management
Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
Code licensed MIT, docs CC BY-NC 4.0
Currently v0.29.3
Privacy | Cookies
 
Links
Home 
About 
Docs 
Components 
Releases 
Guides
Getting Started 
Developing Modules 
Optimization 
Versioning 
Community
Issues   
Discussions   
Contribute 
Hinode
Code copied to clipboard