Content management

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

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.

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:

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:

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