Browse Hugo Bootstrap Module

Bootstrap Config Toggle Shortcode

HugoMods Authors March 24, 2023 2 min read Bootstrap Shortcode Docs Module Code Config Toggle TOML YAML JSON
On this page
Donate

This shortcode generates the code blocks in multiple languages from one code base. It is useful for projects that support configuring in multiple languages, such as TOML, JSON and YAML.

Supported Languages

Currently, TOML, YAML and JSON are supported.

Syntax

1{{< bs/config-toggle >}}
2PUT YAML/TOML/JSON CODE HERE.
3{{< /bs/config-toggle >}}

Site Parameters

hugo.yaml

1params:
2  bootstrap:
3    config_toggle:
4      langs:
5      - yaml
6      - toml
7      - json

hugo.toml

1[params]
2  [params.bootstrap]
3    [params.bootstrap.config_toggle]
4      langs = ['yaml', 'toml', 'json']

hugo.json

 1{
 2   "params": {
 3      "bootstrap": {
 4         "config_toggle": {
 5            "langs": [
 6               "yaml",
 7               "toml",
 8               "json"
 9            ]
10         }
11      }
12   }
13}
NameTypeRequiredDefaultDescription
langsarray-["toml", "yaml", "json"]The target languages, can be used to exclude and sort languages globally.

Shortcode Parameters

The following parameters are supported.

PositionNameTypeRequiredDefaultDescription
#0filenamestring--The filename.
#1langsstring-toml,yaml,jsonThe target languages, separated by comma, can be used to exclude and sort languages.
-stylestring-tabstabs, pills or underline.
-fillboolean-falseWhen true the nav items take full width.
-titlestring--The title of configuration.
-delimiterboolean-falseWhen true, wraps code with delimiters.

Examples

Filename Example

1{{< bs/config-toggle hello >}}
2{
3  "hello": "world"
4}
5{{< /bs/config-toggle >}}

hello.yaml

1hello: world

hello.toml

1hello = 'world'

hello.json

1{
2   "hello": "world"
3}

Exclude and Sort Languages

1{{< bs/config-toggle langs=json,toml >}}
2langs = ["toml", "json"]
3{{< /bs/config-toggle >}}

1{
2   "langs": [
3      "toml",
4      "json"
5   ]
6}

1langs = ['toml', 'json']

Hugo Configuration Example With Title, Pills Style And Take Full Width

1{{< bs/config-toggle filename=hugo title="Configuration" style=pills fill=true >}}
2module:
3  imports:
4    - path: github.com/hugomods/bootstrap
5{{< /bs/config-toggle >}}

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/bootstrap

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/bootstrap'

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/bootstrap"
6         }
7      ]
8   }
9}

Hugo Front Matter Example

1{{< bootstrap/config-toggle title="Front Matter" delimiter=true >}}
2title: Hello World!
3{{< /bootstrap/config-toggle >}}

1---
2title: Hello World!
3---

1+++
2title = 'Hello World!'
3+++

1{
2   "title": "Hello World!"
3}
Collapse
Display