Spoiler tags for Hugo

Tue, 20 Jun 2023 00:00:00 +0000

I use Hugo to generate the static HTML pages for this website. One of the projects I’m working on involves a storyline which some of my friends do not want spoiled to them. So for this, I had to add a simple spoiler shortcode.

This spoiler shortcode works like this: in-line spoilered content. It can be used to mask out individual phrases or whole blocks of text, as seen below.

An entire paragraph can be put into a spoiler tag. Each spoiler tag is clickable individually, and they can be clicked again to hide the text. They do not require any additional code as they are based on the checkbox functionality. A simple extra style sheet and the shortcode template file are all that's required.

Here is the source code to the spoiler tag functionality on my website:

// /theme/assets/css/spoiler.css

.spoiler_dummy {
 display: none;
}

.spoiler_dummy:checked + label {
 color: $color;
 background: $background;
 transition: color 0.3s ease, background 0.3s ease;
}

.spoiler {
 position: relative;
 display: inline-block;
 cursor: help;

 border-radius: 2px;

 color: black;
 background: black;
 transition: color 0.3s ease, background 0.3s ease;
}

<!-- /theme/layouts/shortcodes/spoiler.html -->

<input class="spoiler_dummy" type="checkbox" id="spoilerTag{{ .Ordinal }}"/>
<label class="spoiler" for="spoilerTag{{ .Ordinal }}">
 {{- .Inner | safeHTML -}}
</label>

web on Transdimensional Phoenix

Spoiler tags for Hugo