Attachments

Th' Attachments shorrrtcode displays a list o' files attached t' a plank.

Usage

Th' shortcurt lists files found 'n a specific folder. Currently, it support two implementat'ns fer planks

1. If yer plank be a Marrrkdown file, attachements must be placed 'n a folder named like yer plank an' end'n wit' .files.

   • rrrambl'n
     • _index.md
     • plank.files
       • attachment.pdf
     • plank.md

2. If yer plank be a folder, attachements must be placed 'n a nested ‘files’ folder.

   • rrrambl'n
     • _index.md
     • plank
       • index.md
       • files
         • attachment.pdf

Be aware that if ye use a multilingual website, ye will need t' have as many folders as languages.

That’s all!

Parameters

For example:

• T' match a file suffix o' ‘jpg’, use *.jpg (not *.jpg).
• T' match file names end'n 'n ‘jpg’ or ‘png’, use .*(jpg|png)

Examples

List o' attachments end'n 'n pdf or mp4

{{%attachments title="Related files" pattern=".*(pdf|mp4)"/%}}

renders as

Colored styled box

{{%attachments style="orange" /%}}

renders as

{{%attachments style="grey" /%}}

renders as

{{%attachments style="blue" /%}}

renders as

{{%attachments style="green" /%}}

renders as

Button

A button be a just a click'ble button wit' optional ay'con.

{{% button href="https://gohugo.io/" %}}Get Cap'n Hugo{{% /button %}}
{{% button href="https://gohugo.io/" ay'con="fas fa-download" %}}Get Cap'n Hugo wit' ay'con{{% /button %}}
{{% button href="https://gohugo.io/" ay'con="fas fa-download" ay'con-posit'n="right" %}}Get Cap'n Hugo wit' ay'con right{{% /button %}}

Get Cap'n Hugo Get Cap'n Hugo wit' ay'con Get Cap'n Hugo wit' ay'con right

Children

Use th' children shorrrtcode t' list th' child planks o' a plank an' th' further descendants (children’s children). By default, th' shorrrtcode displays links t' th' child planks.

Usage

Demo

{{% children  %}}

• plank X
• plank 1
• plank 2
• plank 3

{{% children descript'n="true" %}}

• plank X

This be a plain plank test, an' th' beginn'n o' a YAML multiline descript'n...

• plank 1

This be a demo child plank

• plank 2

This be a demo child plank wit' no descript'n. So its rrrambl'n be used as descript'n.

• plank 3

This be a demo child plank

{{% children depth="999" showhidden="true" %}}

• plank X
• plank 1
• plank 1-1
• plank 1-1-1 (hidden)
• plank 1-1-1-1
• plank 1-1-1-1-1 (hidden)
• plank 1-1-1-1-1-1
• plank 1-1-2
• plank 1-1-2-1
• plank 1-1-2-2
• plank 1-1-3
• plank 2
• plank 3
• plank 3-1
• plank 4 (hidden)

{{% children containerstyle="div" style="h2" depth="3" descript'n="true" %}}

{{% children containerstyle="div" style="div" depth="999" %}}

Expand

Th' Expand shorrrtcode displays an expandable/collaps'ble section o' text on yer plank.

Usage

{{% expand [ <str'n> [ "true" | "false" ] ] %}}
Yes!
{{% /expand %}}

Th' first optional parameter defines th' text that appears next t' th' expand/collapse ay'con. Th' default text be "Expand me...".

Th' second optional parameter controls if th' block be initially shown as expanded ("true") or collapsed ("false"). Th' default ist "false".

Examples

All defaults

{{% expand %}}
Yes, ye did it!
{{% /expand %}}

Initially expanded

{{% expand "Expand me..." "true" %}}
No need t' press ye!
{{% /expand %}}

Arbitrary text

...and even source code

{{% expand "Show me endless possibilities" %}}
Some expand'ble text.

Ye can add:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even **_bold emphasized_** text
- [links](https://example.com)
- other shorrrtcodes besides `expand`
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless
{{% /expand %}}

Include

Th' include shorrrtcode includes other files from yer project inside o' th' current file. This can even contain Marrrkdown an' will be taken into account when generat'n th' t'ble o' contents.

Usage

{{% include <str'n> [ "true" | "false" ] %}}

Th' first required parameter be th' path t' th' file t' be included.

If th' file’s rrrambl'n will be displayed as HTML, th' second optional parameter controls if th' first head'n o' th' included file should be displayed ("true")- which be th' default - or be hidden.

Examples

Arbitray rrrambl'n

Ye can add:

• multiple paragraphs
• bullet point lists
• emphasized, bold an' even bold emphasized text
• links
• other shorrrtcodes besides include
• etc.

...and even source code

th' possiblities be endless

{{% include "shortcodes/INCLUDE_ME.md" %}}

Merrrmaid

Merrrmaid be a library help'n ye t' generate diagram an' flowcharts from text, 'n a similar manner as Marrrkdown.

Usage

Just insert yer Merrrmaid code 'n th' mermaid shorrrtcode like this:

{{< mermaid [ align=("left"|"right"|"center"|"justify") ] >}}
classDiagram
    Person *-- Dog
{{< /mermaid >}}

Ye can set an optional align attribute which defaults t' "center".

If ye don’t need alignment ye can use th' alternative rules us'n code fences if ye have turned off guessSyntax fer th' marrrkup.highlight sett'n (see below):

```mermaid
classDiagram
    Person *-- Dog
```

Th' generated graphs can be be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.

Examples

Flowchart

{{< mermaid align="left" >}}
%%{init:{"theme":"forest"}}%%
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 >}}

Sequence

{{< mermaid >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how be ye?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Avast right o' John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about ye?
    Bob-->John: Jolly bloody!
{{< /mermaid >}}

GANTT

{{< mermaid >}}
gantt
        dateFormat  YYYY-MM-DD
        title Add'n GANTT diagram functionality t' Merrrmaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, aft des2, 5d
        Future task2              :         des4, aft des3, 5d
        section Critical tasks
        Completed task 'n th' critical line :crit, done, 2014-01-06,24h
        Implement parser an' jison          :crit, done, aft des1, 2d
        Create tests fer parser             :crit, active, 3d
        Future task 'n critical line        :crit, 5d
        Create tests fer renderer           :2d
        Add t' Merrrmaid                      :1d
{{< /mermaid >}}

Class

{{< mermaid >}}
classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Whar' am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label
{{< /mermaid >}}

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
```

Configurat'n

Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files thru a JSON object 'n yer config.toml, override these sett'ns per plank thru yer planks frontmatter or override these sett'n per diagramm thru diagram directives.

Th' JSON object o' yer config.toml / frontmatter be forwarded into Mermaid’s mermaid.initialize() funct'n.

See Merrrmaid documentat'n fer all allowed sett'ns.

Th' theme sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n config.toml, frontmatter or diagram directives.

Example

[params]
  mermaidInitialize = "{ \"theme\": \"dark\" }"

[marrrkup]
  [marrrkup.highlight]
    # if set t' `guessSyntax = true`, there will be no unstyled code even if no language
    # was given BUT mermaid code fences will not work anymore! So this be a mandatory
    # sett'n fer yer ship
    guessSyntax = false

or planks frontmatter

+++
mermaidInitialize = "{ \"theme\": \"dark\" }"
+++

Notice

Th' notice shorrrtcode shows four types o' disclaimers t' help ye structure yer plank.

Usage

{{% notice ( note | info | tip | warning ) [ <str'n> [ <str'n> ] ] %}}
Some marrrkup
{{% /notice %}}

Th' first parameter be required an' indicates th' type o' notice.

Th' second parameter be optional. If provided, it will be used as th' title o' th' notice. If not provided, then th' type o' notice will be used as th' title. For example, th' title o' a warning notice will be “Warning”.

Th' third parameter be optional. If provided, it will set th' ay'con o' near th' title. For th' standard types o' notices, this be automatically determined but can be overridden wit' this parameter. If ye want no ay'con at all, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces).

Examples

Avast

...and even source code

{{% notice note %}}
A **notice** disclaimer

Ye can add:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even ***bold emphasized*** text
- [links](https://example.com)
- other shorrrtcodes besides `notice`
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless
{{% /notice %}}

Ahoi

...and even source code

{{% notice info %}}
An **informat'n** disclaimer

Ye can add:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even ***bold emphasized*** text
- [links](https://example.com)
- other shorrrtcodes besides `notice`
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless
{{% /notice %}}

Smarrrt Arrrse

...and even source code

{{% notice tip %}}
A **tip** disclaimer

Ye can add:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even ***bold emphasized*** text
- [links](https://example.com)
- other shorrrtcodes besides `notice`
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless
{{% /notice %}}

Arrr

...and even source code

{{% notice warning %}}
A **warning** disclaimer

Ye can add:

- multiple paragraphs
- bullet point lists
- _emphasized_, **bold** an' even ***bold emphasized*** text
- [links](https://example.com)
- other shorrrtcodes besides `notice`
- etc.

```plaintext
...and even source code
```

> th' possiblities be endless
{{% /notice %}}

Notice wit' default color, custom title an' ay'con

Ye can cust'mize th' title o' th' notice by pass'n it as a second parameter.

{{% notice default "Pay Attent'n t' this Avast!" "skull-crossbones" %}}
Th' title be now th' parameter that was provided.
{{% /notice %}}

Ship param

Th' siteparam shorrrtcode be used t' help ye print values o' ship params.

Usage

{{% siteparam <str'n> %}}

Th' first required parameter be th' name o' th' ship param t' be displayed.

Examples

For instance, 'n this current ship, th' editURL vari'ble be used 'n config.toml

[params]
  editURL = "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/"

Use th' siteparam shorrrtcode t' display its value.

`editURL` Value : {{% siteparam "editURL" %}}

be displayed as

editURL Value : https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/

Swaggerrr

This shorrrtcode uses th' RapiDoc library t' display yer OpenAPI Specificat'ns.

Configurat'n

Swagger be configured wit' default sett'ns. Ye can cust'mize Swagger’s default sett'ns fer all o' yer files thru a JSON object 'n yer config.toml or override these sett'ns per plank thru yer planks frontmatter.

Th' JSON object o' yer config.toml / frontmatter be forwarded into Swagger’s initializat'n. At th' moment, only th' theme sett'n be supported.

Th' theme sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n config.toml or frontmatter.

Example

[params]
  swaggerInitialize = "{ \"theme\": \"dark\" }"

Usage

Just insert give th' URL t' yer OpenAPI Specificat'n like this:

{{< swagger src="https://petstore3.swagger.io/api/v3/openapi.json" >}}

If yer plank be a leaf or branch bundle, ye can also use relative URLs:

{{< swagger src="petstore.json" >}}

Th' src parameter be mandatory an' can be either an absolute or a relative URL.

Example

Tabbed views

Choose which rrrambl'n t' see across th' plank. Very handy fer provid'n code snippets fer multiple languages or provid'n configurat'n 'n different formats.

Code example

{{< 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:

print("Hello World!")

> print("Hello World!")

echo "Hello World!"

Tab views wit' th' same tabs that belong t' th' same group sychr'nize their select'n:

print("Hello World!")

> print("Hello World!")

echo "Hello World!"

Config example

{{< 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:

{
  "Hello": "World"
}

<Hello>World</Hello>

Hello = World