diff options
Diffstat (limited to 'docs/content/en/content-management')
-rw-r--r-- | docs/content/en/content-management/build-options.md | 4 | ||||
-rw-r--r-- | docs/content/en/content-management/comments.md | 2 | ||||
-rw-r--r-- | docs/content/en/content-management/diagrams.md | 60 |
3 files changed, 63 insertions, 3 deletions
diff --git a/docs/content/en/content-management/build-options.md b/docs/content/en/content-management/build-options.md index 93da7c421..c3f6f04c9 100644 --- a/docs/content/en/content-management/build-options.md +++ b/docs/content/en/content-management/build-options.md @@ -18,12 +18,12 @@ toc: true They are stored in a reserved Front Matter object named `_build` with the following defaults: -```yaml +{{< code-toggle >}} _build: render: always list: always publishResources: true -``` +{{< /code-toggle >}} #### render If `always`, the page will be treated as a published page, holding its dedicated output files (`index.html`, etc...) and permalink. diff --git a/docs/content/en/content-management/comments.md b/docs/content/en/content-management/comments.md index bbeb21ada..311f24c14 100644 --- a/docs/content/en/content-management/comments.md +++ b/docs/content/en/content-management/comments.md @@ -30,7 +30,7 @@ Hugo comes with all the code you need to load Disqus into your templates. Before Disqus comments require you set a single value in your [site's configuration file][configuration] like so: {{< code-toggle copy="false" >}} -disqusShortname = "yourdiscussshortname" +disqusShortname = "yourDisqusShortname" {{</ code-toggle >}} For many websites, this is enough configuration. However, you also have the option to set the following in the [front matter][] of a single content file: diff --git a/docs/content/en/content-management/diagrams.md b/docs/content/en/content-management/diagrams.md index 4e3f6164b..cfc0b3644 100644 --- a/docs/content/en/content-management/diagrams.md +++ b/docs/content/en/content-management/diagrams.md @@ -12,8 +12,68 @@ toc: true --- +{{< new-in "0.93.0" >}} + + +## GoAT Diagrams (Ascii) + +Hugo supports [GoAT](https://github.com/bep/goat) natively. This means that this code block: + +```` +```goat + . . . .--- 1 .-- 1 / 1 + / \ | | .---+ .-+ + + / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2 + + + | | | | ---+ ---+ + + / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3 + / \ / \ | | | | | | | | '---+ '-+ + + 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4 + +``` +```` + +Will be rendered as: + +```goat + + . . . .--- 1 .-- 1 / 1 + / \ | | .---+ .-+ + + / \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2 + + + | | | | ---+ ---+ + + / \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3 + / \ / \ | | | | | | | | '---+ '-+ + + 1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4 +``` + + + + + ## Mermaid Diagrams +Hugo currently does not provide default templates for Mermaid diagrams. But you can easily add your own. One way to do it would be to create ` layouts/_default/_markup/render-codeblock-mermaid.html`: + + +```go-html-template +<div class="mermaid"> + {{- .Inner | safeHTML }} +</div> +{{ .Page.Store.Set "hasMermaid" true }} +``` + +And then include this snippet at the bottom of the content template (below `.Content`): + +```go-html-template +{{ if .Page.Store.Get "hasMermaid" }} + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script> + mermaid.initialize({ startOnLoad: true }); + </script> +{{ end }} +``` + +With that you can use the `mermaid` language in Markdown code blocks: + ```mermaid sequenceDiagram participant Alice |