Books - Theme Shortcodes #

This article gives a brief overview about special shortcodes, implemented by the Books - Theme for Hugo. The examples in this article are taken from the projects website. Since I don’t need all of the available options, I will only list those, being used on this page.

1 Columns #

Columns are the perfect tool for additional page styling. They provide a handy method to combine pictures and text. A good example for this is the homepage of this project. The syntax for this shortcode looks like this:

1{{< columns >}} <!-- begin columns block -->
2// Content goes here ...
3<---> <!-- magic separator, between columns -->
4// Content goes here ...
5<---> <!-- magic separator, between columns -->
6// Content goes here ...
7{{< /columns >}}

Left Block

Here is some text inside the left column.

Middle Block

Right Block

Here is some text inside the right column.

There is no specific limitation to the number of columns used. Like shown in the next example,columns can even be used to realize something like a grid layout.

2 Details #

The details shortcode is used to highlight content. It provides a caption to the block and makes the content expandable. The behavior can configured with arguments. The basic syntax is the following:

1{{< details title="Title" open=true >}}
2// Content goes here ...
3{{< /details >}}

This a rendered example:

A closed one looks like this:

3 Hints #

Hints are a good way to highlight content as either a coloroed warning, danger or info box. The basic syntax is:

1{{< hint type >}}
2// Content goes here ...
3{{< /hint >}}

The rendered options look like this:

This is an Info
This is some thing I want to point out.

This is a Warning!
Be aware of the following … Spoilers ahead!

Danger!!!
Don’t do the following, or the application will crash!

4 Tabs #

Sometimes content has to be ordered into different categories. A good example is different use cases in terms of operating systems. Create a tab box with the following syntax:

1{{< tabs uniqueid >}}
2
3{{< tab name >}}
4// Tab Content ... 
5{{< /tab >}}
6
7{{< /tabs >}}

A rendered example looks like this: