Initial Commit
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `include`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
@@ -0,0 +1,19 @@
|
||||
+++
|
||||
chapter = true
|
||||
title = "Shortcodes"
|
||||
weight = 3
|
||||
+++
|
||||
|
||||
### Chapter 3
|
||||
|
||||
# Shortcodes
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it's pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/). A shortcode is a simple snippet inside a page.
|
||||
|
||||
The Relearn theme provides multiple shortcodes on top of existing ones.
|
||||
|
||||
{{%children containerstyle="div" style="h2" description="true" %}}
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
chapter = true
|
||||
title = "Shorrrtcodes"
|
||||
weight = 3
|
||||
+++
|
||||
{{< piratify >}}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1 @@
|
||||
This is a small text
|
||||
Binary file not shown.
@@ -0,0 +1,94 @@
|
||||
+++
|
||||
description = "The Attachments shortcode displays a list of files attached to a page"
|
||||
title = "Attachments"
|
||||
+++
|
||||
|
||||
The Attachments shortcode displays a list of files attached to a page.
|
||||
|
||||
{{% attachments /%}}
|
||||
|
||||
## Usage
|
||||
|
||||
The shortcurt lists files found in a **specific folder**.
|
||||
Currently, it support two implementations for pages
|
||||
|
||||
1. If your page is a Markdown file, attachements must be placed in a **folder** named like your page and ending with **.files**.
|
||||
|
||||
> * content
|
||||
> * _index.md
|
||||
> * page.files
|
||||
> * attachment.pdf
|
||||
> * page.md
|
||||
|
||||
2. If your page is a **folder**, attachements must be placed in a nested **'files'** folder.
|
||||
|
||||
> * content
|
||||
> * _index.md
|
||||
> * page
|
||||
> * index.md
|
||||
> * files
|
||||
> * attachment.pdf
|
||||
|
||||
Be aware that if you use a multilingual website, you will need to have as many folders as languages.
|
||||
|
||||
That's all!
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Default | Description |
|
||||
|:--|:--|:--|
|
||||
| title | "Attachments" | List's title |
|
||||
| sort | "asc" | Sorting the output in `asc`ending or `desc`ending order |
|
||||
| style | "" | Choose between `orange`, `grey`, `blue` and `green` for nice style |
|
||||
| pattern | ".*" | A regular expressions, used to filter the attachments by file name. <br/><br/>The **pattern** parameter value must be [regular expressions](https://en.wikipedia.org/wiki/Regular_expression).
|
||||
|
||||
For example:
|
||||
|
||||
* To match a file suffix of 'jpg', use **.*jpg** (not *.jpg).
|
||||
* To match file names ending in 'jpg' or 'png', use **.*(jpg|png)**
|
||||
|
||||
### Examples
|
||||
|
||||
#### List of attachments ending in pdf or mp4
|
||||
|
||||
````go
|
||||
{{%/*attachments title="Related files" pattern=".*(pdf|mp4)"/*/%}}
|
||||
````
|
||||
|
||||
renders as
|
||||
|
||||
{{%attachments title="Related files" pattern=".*(pdf|mp4)"/%}}
|
||||
|
||||
#### Colored styled box
|
||||
|
||||
````go
|
||||
{{%/*attachments style="orange" /*/%}}
|
||||
````
|
||||
|
||||
renders as
|
||||
|
||||
{{% attachments style="orange" /%}}
|
||||
|
||||
````go
|
||||
{{%/*attachments style="grey" /*/%}}
|
||||
````
|
||||
|
||||
renders as
|
||||
|
||||
{{% attachments style="grey" /%}}
|
||||
|
||||
````go
|
||||
{{%/*attachments style="blue" /*/%}}
|
||||
````
|
||||
|
||||
renders as
|
||||
|
||||
{{% attachments style="blue" /%}}
|
||||
|
||||
````go
|
||||
{{%/*attachments style="green" /*/%}}
|
||||
````
|
||||
|
||||
renders as
|
||||
|
||||
{{% attachments style="green" /%}}
|
||||
@@ -0,0 +1 @@
|
||||
Harrr, nothn' to see herre
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
descrption = "Th' Attachments shorrrtcode displays a list o' files attached t' a plank"
|
||||
title = "Attachments"
|
||||
+++
|
||||
{{% attachments /%}}
|
||||
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,16 @@
|
||||
+++
|
||||
description = "Nice buttons on your page"
|
||||
title = "Button"
|
||||
+++
|
||||
|
||||
A button is a just a clickable button with optional icon.
|
||||
|
||||
```go
|
||||
{{%/* button href="https://gohugo.io/" */%}}Get Hugo{{%/* /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" icon="fas fa-download" */%}}Get Hugo with icon{{%/* /button */%}}
|
||||
{{%/* button href="https://gohugo.io/" icon="fas fa-download" icon-position="right" */%}}Get Hugo with icon right{{%/* /button */%}}
|
||||
```
|
||||
|
||||
{{% button href="https://gohugo.io/" %}}Get Hugo{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" icon="fas fa-download" %}}Get Hugo with icon{{% /button %}}
|
||||
{{% button href="https://gohugo.io/" icon="fas fa-download" icon-position="right" %}}Get Hugo with icon right{{% /button %}}
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Nice buttons on yer plank"
|
||||
title = "Button"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,51 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "List the child pages of a page"
|
||||
title = "Children"
|
||||
+++
|
||||
|
||||
Use the children shortcode to list the child pages of a page and the further descendants (children's children). By default, the shortcode displays links to the child pages.
|
||||
|
||||
## Usage
|
||||
|
||||
| Parameter | Default | Description |
|
||||
|:--|:--|:--|
|
||||
| page | _current_ | Specify the page name (section name) to display children for |
|
||||
| containerstyle | "ul" | Choose the style used to group all children. It could be any HTML tag name |
|
||||
| style | "li" | Choose the style used to display each descendant. It could be any HTML tag name |
|
||||
| showhidden | "false" | When true, child pages hidden from the menu will be displayed |
|
||||
| description | "false" | Allows you to include a short text under each page in the list. When no description exists for the page, children shortcode takes the first 70 words of your content. [Read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/) |
|
||||
| depth | 1 | Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages. **Tips:** set 999 to get all descendants |
|
||||
| sort | [ordersectionsby]({{% relref "basics/configuration#global-site-parameters" %}}) | Sort children by **weight**, to sort on menu order - **title**, to sort alphabetically on menu label. If not set it is sorted by the `ordersectionsby` setting of the site and the pages frontmatter |
|
||||
|
||||
## Demo
|
||||
|
||||
````go
|
||||
{{%/* children */%}}
|
||||
````
|
||||
|
||||
{{% children %}}
|
||||
|
||||
````go
|
||||
{{%/* children description="true" */%}}
|
||||
````
|
||||
|
||||
{{%children description="true" %}}
|
||||
|
||||
````go
|
||||
{{%/* children depth="999" showhidden="true" */%}}
|
||||
````
|
||||
|
||||
{{% children depth="999" showhidden="true" %}}
|
||||
|
||||
````go
|
||||
{{%/* children containerstyle="div" style="h2" depth="3" description="true" */%}}
|
||||
````
|
||||
|
||||
{{% children containerstyle="div" style="h2" depth="3" description="true" %}}
|
||||
|
||||
````go
|
||||
{{%/* children containerstyle="div" style="div" depth="999" */%}}
|
||||
````
|
||||
|
||||
{{% children containerstyle="div" style="div" depth="999" %}}
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "List th' child planks on a plank"
|
||||
title = "Children"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,13 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1"
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
This is a demo child page.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,8 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 1"
|
||||
weight = 10
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,12 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1"
|
||||
+++
|
||||
|
||||
This is a demo child page with a hidden child. You can still access the hidden child [directly]({{% relref "shortcodes/children/children-1/children-1-1/children-1-1-1" %}}) or via the search.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 1-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,12 @@
|
||||
+++
|
||||
description = "This is a hidden demo child page"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1 (hidden)"
|
||||
+++
|
||||
|
||||
This is a **hidden** demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren't viewing this page or its children directly.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
descrption = "This be a hidden demo child plank"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "Plank 1-1-1 (hidden)"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,11 @@
|
||||
+++
|
||||
description = "This is a non-hidden demo child page of a hidden parent page"
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1-1"
|
||||
+++
|
||||
|
||||
This is a **non-hidden** demo child page of a hidden parent page with a hidden child. You can still access the hidden child [directly]({{% relref "shortcodes/children/children-1/children-1-1/children-1-1-1/children-1-1-1-1/children-1-1-1-1-1" %}}) or via the search.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a non-hidden demo child plank o' a hidden parrrent plank"
|
||||
tags = ["children", "hidden"]
|
||||
title = "Plank 1-1-1-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,12 @@
|
||||
+++
|
||||
description = "This is a hidden demo child page"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1-1-1 (hidden)"
|
||||
+++
|
||||
|
||||
This is a **hidden** demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren't viewing this page or its children directly.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
descrption = "This be a hidden demo child plank"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "Plank 1-1-1-1-1 (hidden)"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a non-hidden demo child page of a hidden parent page"
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 1-1-1-1-1-1"
|
||||
+++
|
||||
|
||||
This is a **non-hidden** demo child page of a hidden parent page.
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a non-hidden demo child plank on a hidden parrrent plank"
|
||||
tags = ["children", "hidden"]
|
||||
title = "Plank 1-1-1-1-1-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,11 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-2"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 1-1-2"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-2-1"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 1-1-2-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-2-2"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 1-1-2-2"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 1-1-3"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 1-1-3"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,10 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 2"
|
||||
weight = 20
|
||||
+++
|
||||
|
||||
This is a demo child page with no description.
|
||||
|
||||
So its content is used as description.
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 2"
|
||||
weight = 20
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,13 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a demo child page"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 3"
|
||||
weight = 30
|
||||
+++
|
||||
|
||||
This is a demo child page.
|
||||
|
||||
## Subpages of this page
|
||||
|
||||
{{% children showhidden="true" %}}
|
||||
@@ -0,0 +1,8 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a demo child plank"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 3"
|
||||
weight = 30
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
description = "This is a plain page test nested in a parent"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "page 3-1"
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a plain plank test nested 'n a parrrent"
|
||||
tags = ["children", "non-hidden"]
|
||||
title = "Plank 3-1"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,10 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
description = "This is a hidden demo child page"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "page 4 (hidden)"
|
||||
weight = 40
|
||||
+++
|
||||
|
||||
This is a **hidden** demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren't viewing this page or its children directly.
|
||||
@@ -0,0 +1,9 @@
|
||||
+++
|
||||
alwaysopen = false
|
||||
descrption = "This be a hidden demo child plank"
|
||||
hidden = true
|
||||
tags = ["children", "hidden"]
|
||||
title = "Plank 4 (hidden)"
|
||||
weight = 40
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,8 @@
|
||||
+++
|
||||
description: |
|
||||
This is a plain page test, and the beginning of a YAML multiline description...
|
||||
title: "page X"
|
||||
weight: 1
|
||||
+++
|
||||
|
||||
This is a plain demo child page.
|
||||
@@ -0,0 +1,6 @@
|
||||
+++
|
||||
descrption = "This be a plain plank test"
|
||||
title = "Plank X"
|
||||
weight = 1
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,95 @@
|
||||
+++
|
||||
description = "Displays an expandable/collapsible section of text on your page"
|
||||
title = "Expand"
|
||||
+++
|
||||
|
||||
The Expand shortcode displays an expandable/collapsible section of text on your page.
|
||||
|
||||
## Usage
|
||||
|
||||
````go
|
||||
{{%/* expand "Does this Relearn theme rock?" { "true" | "false" } */%}}
|
||||
Yes!
|
||||
{{%/* /expand */%}}
|
||||
````
|
||||
|
||||
The first optional parameter defines the text that appears next to the expand/collapse icon. The default text is `"Expand me..."`.
|
||||
|
||||
The second optional parameter controls if the block is initially shown as expanded (`"true"`) or collapsed (`"false"`). The default ist `"false"`.
|
||||
## Examples
|
||||
|
||||
{{% expand "I'll tell you a secret..." %}}
|
||||
...maybe the next time you'll open this expander!
|
||||
{{% /expand %}}
|
||||
|
||||
### All defaults
|
||||
|
||||
{{% expand %}}
|
||||
Yes, you did it!
|
||||
{{% /expand %}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
{{%/* expand */%}}
|
||||
Yes, you did it!
|
||||
{{%/* /expand */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Initially expanded
|
||||
|
||||
{{% expand "Expand me..." "true" %}}
|
||||
No need to press you!
|
||||
{{% /expand %}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
{{%/* expand "Expand me..." "true" */%}}
|
||||
No need to press you!
|
||||
{{%/* /expand */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Arbitrary text
|
||||
|
||||
{{% expand "Show me endless possibilities" %}}
|
||||
Some expandable text.
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `expand`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{% /expand %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````go
|
||||
{{%/* expand "Show me endless possibilities" */%}}
|
||||
Some expandable text.
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `expand`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{%/* /expand */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Displays an expand'ble/collaps'ble sect'n o' text on yer plank"
|
||||
title = "Expand"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,28 @@
|
||||
+++
|
||||
description = "Displays content from other Markdown files"
|
||||
title = "Include"
|
||||
+++
|
||||
|
||||
The include shortcode includes other files from your project inside of the current file. This can even contain Markdown and will be taken into account when generating the table of contents.
|
||||
|
||||
## Usage
|
||||
|
||||
````go
|
||||
{{%/* include "<file>" { "true" | "false" } */%}}
|
||||
````
|
||||
|
||||
The first parameter is the path to the file to be included.
|
||||
|
||||
If the file's content will be displayed as HTML, the second optional parameter controls if the first heading of the included file should be displayed ("true")- which is the default - or be hidden.
|
||||
|
||||
## Examples
|
||||
|
||||
### Arbitray content
|
||||
|
||||
{{% include "shortcodes/INCLUDE_ME.md" %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````go
|
||||
{{%/* include "shortcodes/INCLUDE_ME.md" */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Displays content from other Marrrkdown files"
|
||||
title = "Include"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,226 @@
|
||||
+++
|
||||
description = "Generation of diagram and flowchart from text in a similar manner as Markdown"
|
||||
title = "Mermaid"
|
||||
+++
|
||||
|
||||
[Mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown.
|
||||
|
||||
## Usage
|
||||
|
||||
Just insert your Mermaid code in the `mermaid` shortcode like this:
|
||||
|
||||
````go
|
||||
{{</* mermaid [ align=(left|right|center|justify) ] */>}}
|
||||
classDiagram
|
||||
Person *-- Dog
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
|
||||
You can set an optional `align` attribute which defaults to `center`.
|
||||
|
||||
If you don't need alignment you can use the alternative syntax using code fences if you have turned off `guessSyntax` for the `markup.highlight` setting (see below):
|
||||
|
||||
````plaintext
|
||||
```mermaid
|
||||
classDiagram
|
||||
Person *-- Dog
|
||||
```
|
||||
````
|
||||
|
||||
The generated graphs can be be panned by dragging them and zoomed by using the mousewheel. On mobile devices you can use finger gestures.
|
||||
|
||||
## Examples
|
||||
|
||||
### Flowchart
|
||||
|
||||
{{< mermaid align="left" >}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{<strong>Decision</strong>}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
{{</* mermaid align="left" */>}}
|
||||
graph LR;
|
||||
A[Hard edge] -->|Link text| B(Round edge)
|
||||
B --> C{<strong>Decision</strong>}
|
||||
C -->|One| D[Result one]
|
||||
C -->|Two| E[Result two]
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Sequence
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->Alice: Great!
|
||||
John->Bob: How about you?
|
||||
Bob-->John: Jolly good!
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### GANTT
|
||||
|
||||
{{< mermaid >}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to Mermaid
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to Mermaid :1d
|
||||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to Mermaid
|
||||
section A section
|
||||
Completed task :done, des1, 2014-01-06,2014-01-08
|
||||
Active task :active, des2, 2014-01-09, 3d
|
||||
Future task : des3, after des2, 5d
|
||||
Future task2 : des4, after des3, 5d
|
||||
section Critical tasks
|
||||
Completed task in the critical line :crit, done, 2014-01-06,24h
|
||||
Implement parser and jison :crit, done, after des1, 2d
|
||||
Create tests for parser :crit, active, 3d
|
||||
Future task in critical line :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to Mermaid :1d
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Class
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
{{< /mermaid >}}
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
{{</* mermaid */>}}
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class03 *-- Class04
|
||||
Class05 o-- Class06
|
||||
Class07 .. Class08
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
Class09 --|> Class07
|
||||
Class07 : equals()
|
||||
Class07 : Object[] elementData
|
||||
Class01 : size()
|
||||
Class01 : int chimp
|
||||
Class01 : int gorilla
|
||||
Class08 <--> C2: Cool label
|
||||
{{</* /mermaid */>}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### State
|
||||
|
||||
````mermaid
|
||||
stateDiagram-v2
|
||||
open: Open Door
|
||||
closed: Closed Door
|
||||
locked: Locked Door
|
||||
open --> closed: Close
|
||||
closed --> locked: Lock
|
||||
locked --> closed: Unlock
|
||||
closed --> open: Open
|
||||
````
|
||||
|
||||
{{% expand "Show markup" "true" %}}
|
||||
````go
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
open: Open Door
|
||||
closed: Closed Door
|
||||
locked: Locked Door
|
||||
open --> closed: Close
|
||||
closed --> locked: Lock
|
||||
locked --> closed: Unlock
|
||||
closed --> open: Open
|
||||
```
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
## Configuration
|
||||
|
||||
Mermaid is configured with default settings. You can customize Mermaid's default settings for all of your files thru a JSON object in your `config.toml` or override these settings sidewise thru your pages frontmatter.
|
||||
|
||||
This JSON object is forwarded into Mermaid's `mermaid.initialize()` function.
|
||||
|
||||
See [Mermaid documentation](http://mermaid-js.github.io/mermaid/getting-started/Setup.html#mermaidapi-configuration-defaults) for all allowed settings.
|
||||
|
||||
Also, if you want to use mermaid codefences, you have to turn off `guessSyntax` for the `markup.highlight` setting.
|
||||
|
||||
### Example
|
||||
|
||||
````toml
|
||||
[params]
|
||||
mermaidInitialize = "{ \"theme\": \"dark\" }"
|
||||
|
||||
[markup]
|
||||
[markup.highlight]
|
||||
guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
|
||||
````
|
||||
|
||||
or pages frontmatter
|
||||
````toml
|
||||
+++
|
||||
mermaidInitialize = "{ \"theme\": \"dark\" }"
|
||||
+++
|
||||
````
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Generrrat'n o' diagrrram an' flowcharrrt frrrom text 'n a similar manner as Marrrkdown"
|
||||
title = "Merrrmaid"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,192 @@
|
||||
+++
|
||||
description = "Disclaimers to help you structure your page"
|
||||
title = "Notice"
|
||||
+++
|
||||
|
||||
The notice shortcode shows four types of disclaimers to help you structure your page.
|
||||
|
||||
## Usage
|
||||
|
||||
````go
|
||||
{{%/* notice [ note | info | tip | warning ] */%}}
|
||||
Some markup
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
## Examples
|
||||
|
||||
### Note
|
||||
|
||||
{{% notice note %}}
|
||||
A **notice** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````go
|
||||
{{%/* notice note */%}}
|
||||
A **notice** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Info
|
||||
|
||||
{{% notice info %}}
|
||||
An **information** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````go
|
||||
{{%/* notice info */%}}
|
||||
An **information** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Tip
|
||||
|
||||
{{% notice tip %}}
|
||||
A **tip** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````go
|
||||
{{%/* notice tip */%}}
|
||||
A **tip** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
|
||||
### Warning
|
||||
|
||||
{{% notice warning %}}
|
||||
A **warning** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{% /notice %}}
|
||||
|
||||
{{% expand "Show markup" %}}
|
||||
````go
|
||||
{{%/* notice warning */%}}
|
||||
A **warning** disclaimer
|
||||
|
||||
You can add:
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- other shortcodes besides `notice`
|
||||
- etc.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
|
||||
> the possiblities are endless
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
{{% /expand %}}
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Disclaimerrrs t' help ye strrructurrre yer plank"
|
||||
title = "Notice"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,23 @@
|
||||
+++
|
||||
description = "Get value of site params variables in your page"
|
||||
title = "Site param"
|
||||
+++
|
||||
|
||||
`siteparam` shortcode is used to help you print values of site params.
|
||||
|
||||
For instance, in this current site, the `editURL` variable is used in `config.toml`
|
||||
|
||||
```toml
|
||||
[params]
|
||||
editURL = "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/"
|
||||
```
|
||||
|
||||
Use the `siteparam` shortcode to display its value.
|
||||
|
||||
```go
|
||||
`editURL` Value : {{%/* siteparam "editURL" */%}}
|
||||
```
|
||||
|
||||
is displayed as
|
||||
|
||||
`editURL` Value : {{% siteparam "editURL" %}}
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Get value o' ship parrrams varrriables 'n yer plank"
|
||||
title = "Ship param"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
@@ -0,0 +1,123 @@
|
||||
+++
|
||||
description = "Synchronize selection of content in different tabbed views"
|
||||
title = "Tabbed views"
|
||||
+++
|
||||
|
||||
Choose which content to see across the page. Very handy for providing code
|
||||
snippets for multiple languages or providing configuration in different formats.
|
||||
|
||||
## Code example
|
||||
|
||||
````go
|
||||
{{</* tabs */>}}
|
||||
{{%/* tab name="python" */%}}
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab name="R" */%}}
|
||||
```R
|
||||
> print("Hello World!")
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab name="Bash" */%}}
|
||||
```Bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
Renders as:
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab name="python" %}}
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab name="R" %}}
|
||||
```R
|
||||
> print("Hello World!")
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab name="Bash" %}}
|
||||
```Bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
Tab views with the same tabs that belong to the same group sychronize their selection:
|
||||
|
||||
{{< tabs >}}
|
||||
{{% tab name="python" %}}
|
||||
```python
|
||||
print("Hello World!")
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab name="R" %}}
|
||||
```R
|
||||
> print("Hello World!")
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab name="Bash" %}}
|
||||
```Bash
|
||||
echo "Hello World!"
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Config example
|
||||
|
||||
````go
|
||||
{{</* tabs groupId="config" */>}}
|
||||
{{%/* tab name="json" */%}}
|
||||
```json
|
||||
{
|
||||
"Hello": "World"
|
||||
}
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab name="XML" */%}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{%/* tab name="properties" */%}}
|
||||
```properties
|
||||
Hello = World
|
||||
```
|
||||
{{%/* /tab */%}}
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
Renders as:
|
||||
|
||||
{{< tabs groupId="config" >}}
|
||||
{{% tab name="json" %}}
|
||||
```json
|
||||
{
|
||||
"Hello": "World"
|
||||
}
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab name="XML" %}}
|
||||
```xml
|
||||
<Hello>World</Hello>
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{% tab name="properties" %}}
|
||||
```ini
|
||||
Hello = World
|
||||
```
|
||||
{{% /tab %}}
|
||||
{{< /tabs >}}
|
||||
|
||||
{{% notice warning %}}
|
||||
When using tab views with different content sets, make sure to use a common `groupId` for equal sets but distinct
|
||||
`groupId` for different sets. The `groupId` defaults to `'default'`.
|
||||
**Take this into account across the whole site!**
|
||||
The tab selection is restored automatically based on the `groupId` and if it cannot find a tab item because it came
|
||||
from the `'default'` group on a different page then all tabs will be empty at first.
|
||||
{{% /notice %}}
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
descrption = "Synchr'nize select'n o' content 'n different tabbed views"
|
||||
title = "Tabbed views"
|
||||
+++
|
||||
{{< piratify >}}
|
||||
Reference in New Issue
Block a user