mirror of
https://github.com/McShelby/hugo-theme-relearn
synced 2025-04-30 11:29:05 +08:00
85 lines
2.5 KiB
Markdown
85 lines
2.5 KiB
Markdown
|
+++
|
||
|
|
categories = ['howto', 'reference']
|
||
|
|
description = 'Display a list as a tree'
|
||
|
|
title = 'Tree'
|
||
|
|
+++
|
||
|
|
|
||
|
|
The `tree` shortcode displays a list as a tree with configurable icons and colors.
|
||
|
|
|
||
|
|
````tree
|
||
|
|
- home::folder
|
||
|
|
- .config::folder
|
||
|
|
- My Documents::folder::magic
|
||
|
|
- home.php::fa-fw fab fa-php::#888cc4
|
||
|
|
````
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
{{< tabs groupid="shortcode-parameter">}}
|
||
|
|
{{% tab title="codefence" %}}
|
||
|
|
|
||
|
|
````md
|
||
|
|
```tree
|
||
|
|
- home::folder
|
||
|
|
- .config::folder
|
||
|
|
- My Documents::folder::magic
|
||
|
|
- home.php::fa-fw fab fa-php::#888cc4
|
||
|
|
```
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{% tab title="shortcode" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{%/* tree */%}}
|
||
|
|
- home::folder
|
||
|
|
- .config::folder
|
||
|
|
- My Documents::folder::magic
|
||
|
|
- home.php::fa-fw fab fa-php::#888cc4
|
||
|
|
{{%/* /tree */%}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{% tab title="partial" %}}
|
||
|
|
|
||
|
|
````go
|
||
|
|
{{ partial "shortcodes/tree.html" (dict
|
||
|
|
"page" .
|
||
|
|
"content" `- home::folder
|
||
|
|
- .config::folder
|
||
|
|
- My Documents::folder::magic
|
||
|
|
- home.php::fa-fw fab fa-php::#888cc4`
|
||
|
|
)}}
|
||
|
|
````
|
||
|
|
|
||
|
|
{{% /tab %}}
|
||
|
|
{{< /tabs >}}
|
||
|
|
|
||
|
|
Codefence syntax is widely available in other Markdown parsers like GitHub and therefore is the recommend syntax for generating portable Markdown.
|
||
|
|
|
||
|
|
### Parameter
|
||
|
|
|
||
|
|
| Name | Default | Notes |
|
||
|
|
|-----------------------|------------------|-------------|
|
||
|
|
| _**<content>**_ | _<empty>_ | Your list as Markdown. |
|
||
|
|
|
||
|
|
### Item Syntax
|
||
|
|
|
||
|
|
`<TEXT> [ :: <ICON> [ :: <COLOR> ] ]`
|
||
|
|
|
||
|
|
Text can be followed by optional double colons (`::`) to define an icon and another optional double colons to define the icon's color.
|
||
|
|
|
||
|
|
- **ICON**: [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the text. If you give a single string, it is selected from Font Awesome's [solid](https://fontawesome.com/icons?d=gallery&s=solid&m=free) icons. If you want to use a different set, you have to give the complete styles after the double colons. See above example for the `home.php`.
|
||
|
|
|
||
|
|
- **COLOR**: The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the primary color will be used.
|
||
|
|
|
||
|
|
You can also set a **style** value known from other shortcodes.
|
||
|
|
|
||
|
|
- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`
|
||
|
|
- by brand color: `primary`, `secondary`, `accent`
|
||
|
|
- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`
|
||
|
|
- by special color: `default`, `transparent`, `code`
|
||
|
|
- you can also [define your own styles](#defining-own-styles).
|
||
|
|
|
||
|
|
If a **style** and a named HTML color have the same name, the HTML color will be used.
|