Spoiler shortcodes (also known as "cut tags") allow you to write text that some users may not want to see and hide until the reader chooses to see it.
- Download repository content and put into your Hugo site structure (into root or inside of theme)
- Include
spoiler.cssandspoiler.json your site via modification of<head>tag or with your theme properties. - Include JQuery on your site via modification of
<head>tag. For example,<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
Syntax is quite basic
https://gohugo.io/content-management/shortcodes/#shortcodes-without-markdown
{{< spoiler >}}
Hidden content!
{{< /spoiler >}}
https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown
{{% spoiler %}}
- Hidden
- **content**
{{% /spoiler %}}
{{< spoiler >}}
Foo
{{% spoiler %}}
Bar
{{% /spoiler %}}
{{< /spoiler >}}
{{% spoiler text="Foo" %}}
`bar`
{{% /spoiler %}}
- Nesting issue
-
- Parent level spoiler should be non-markdown due to nature of Hugo markdown processing.
-
- It also affect case with more than 2 levels - only latest level could be Markdown.