diff options
Diffstat (limited to 'exampleSite/content/shortcodes')
| -rw-r--r-- | exampleSite/content/shortcodes/_index.md | 11 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/alerts.md | 27 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/buttons.md | 38 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/childpages.md | 13 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/code.md | 37 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/collapse.md | 23 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/doublecode.md | 36 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/lead.md | 17 | ||||
| -rw-r--r-- | exampleSite/content/shortcodes/panel.md | 32 |
9 files changed, 234 insertions, 0 deletions
diff --git a/exampleSite/content/shortcodes/_index.md b/exampleSite/content/shortcodes/_index.md new file mode 100644 index 0000000..70bdaf6 --- /dev/null +++ b/exampleSite/content/shortcodes/_index.md @@ -0,0 +1,11 @@ ++++ +title = "Shortcodes" +description = "" +weight = 0 ++++ + +{{< lead >}} +Shortcodes are a great way to add some more advanced elements to your page. Code highlighting, a 'lead' style paragraph, images, videos, and more. +{{< /lead >}} + +{{< childpages >}}
\ No newline at end of file diff --git a/exampleSite/content/shortcodes/alerts.md b/exampleSite/content/shortcodes/alerts.md new file mode 100644 index 0000000..8673457 --- /dev/null +++ b/exampleSite/content/shortcodes/alerts.md @@ -0,0 +1,27 @@ ++++ +title = "Alerts" +description = "" +weight = 1 ++++ + +The alerts shortcode allows you to let information stand out by means of an alert styled box. This can be used to indicate danger, warning, success or info. + +{{< alert style="danger" >}} I'm a danger alert {{< /alert >}} +{{< alert style="warning" >}} I'm a warning alert {{< /alert >}} +{{< alert style="success" >}} I'm a success alert {{< /alert >}} +{{< alert style="info" >}} I'm an info alert {{< /alert >}} + +## Usage +Place the following shortcode on the page +{{< code lang="html" >}} +{{</* alert style="STYLE" */>}} [content] {{</* /alert */>}} +{{< /code >}} + +### Parameters +#### Style +The style parameter is directly applied to the alert as a class in the format *"alert-{STYLE}"*. Bootstrap comes with four styles that can be used with this: +- danger +- warning +- success +- info + diff --git a/exampleSite/content/shortcodes/buttons.md b/exampleSite/content/shortcodes/buttons.md new file mode 100644 index 0000000..5d3a462 --- /dev/null +++ b/exampleSite/content/shortcodes/buttons.md @@ -0,0 +1,38 @@ ++++ +title = "Buttons" +description = "" +weight = 2 ++++ + +The button shortcode allows you to add a button to the page. This button is a HTML *anchor* element and can thus be used to link to another page or website. + +{{< button style="primary" >}} Button {{< /button >}} +{{< button style="secondary" >}} Button {{< /button >}} +{{< button style="outline-primary" >}} Button {{< /button >}} +{{< button style="danger" >}} Button {{< /button >}} +{{< button style="warning" >}} Button {{< /button >}} +{{< button style="success" >}} Button {{< /button >}} +{{< button style="info" >}} Button {{< /button >}} + +## Usage +Place the following shortcode on the page +{{< code lang="html" >}} +{{</* button style="STYLE" link="https://yourwebsite.com" */>}} [content] {{</* /button */>}} +{{< /code >}} + +### Parameters +#### *style* +The style parameter is directly applied to the alert as a class in the format *"btn-{STYLE}"*. Bootstrap comes with a variety of styles that can be used with this: +- primary +- secondary +- danger +- warning +- success +- info + +Each style can also be presented as an 'outline' variant by prefixing the style with 'outline-'. +Example: <code>style="outline-primary"</code>. + +#### *link* +The link parameter may consist of an URL leading to a page or other website. Simply use it by defining a URL for the button to link to. +Example: <code>link="https://google.com"</code>.
\ No newline at end of file diff --git a/exampleSite/content/shortcodes/childpages.md b/exampleSite/content/shortcodes/childpages.md new file mode 100644 index 0000000..e789272 --- /dev/null +++ b/exampleSite/content/shortcodes/childpages.md @@ -0,0 +1,13 @@ ++++ +title = "Childpages" +description = "" +weight = 3 ++++ + +The childpages shortcode allows you to show a list of sub-pages of the current page. For example, the *Getting started* page of this documentation has three child pages: *Installation*, *Configuration* and *Creating content*. Placing the childpages shortcode in the *Getting started* page will place a create a list of these sub-pages in that page. + +## Usage +Simply place the following shortcode on the page +{{< code lang="html" >}} +{{</* childpages */>}} +{{< /code >}}
\ No newline at end of file diff --git a/exampleSite/content/shortcodes/code.md b/exampleSite/content/shortcodes/code.md new file mode 100644 index 0000000..c4e5797 --- /dev/null +++ b/exampleSite/content/shortcodes/code.md @@ -0,0 +1,37 @@ ++++ +title = "Code" +description = "" +weight = 4 ++++ + +Add code to your page with syntax highlighting and a copy button so your users can easily copy the code to their clipboard with the press of a button. The code may be entered inside the shortcode or come from an external file. + +{{< code lang="html" >}} +<div class="mydiv bg-primary shadow text-white"> + <h1 class="title">Hi there</h1> + <p class="lead">I'm inside a code shortcode. Check out my syntax highlighting!.</p> +</div> +{{< /code >}} + +## Usage +Simply place the following shortcode on the page +#### Code in the shortcode +{{< code lang="html" >}} +{{</* code lang="LANG" */>}} [your code] {{</* /code */>}} +{{< /code >}} +#### Code from a file +{{< code lang="html" >}} +{{</* code lang="LANG" file="code/mycode.html" */>}} +{{< /code >}} + + + +### Parameters +#### *lang* +The lang parameter defines the language to be used for code highlighting. You can find a complete list of supported languages <a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" target="_blank">here</a>. + +Example: <code>lang="html"</code> + +#### *file* +The file parameter allows you to define an external file that contains your code to be displayed. This is done by giving a path to that file, starting from the root directory of your site. +For example, a HTML file named *'mycode.html'* you wish to link that is in the *docs/code/* directory can be defined as follows: <code>file="code/mycode.html"</code>.
\ No newline at end of file diff --git a/exampleSite/content/shortcodes/collapse.md b/exampleSite/content/shortcodes/collapse.md new file mode 100644 index 0000000..4986013 --- /dev/null +++ b/exampleSite/content/shortcodes/collapse.md @@ -0,0 +1,23 @@ ++++ +title = "Collapse" +description = "" +weight = 5 ++++ + +Feel like hiding some content from your visitor in a collapsible element? The collapse shortcode does exactly that. It creates a button that shows or hides the content in the shortcode on request. + +{{< collapse title="Click me to show content" >}} +Hi there, I'm the hidden content. Didn't see that one coming, huh? +{{< /collapse >}} + +## Usage +Simply place the following shortcode on the page +{{< code lang="html" >}} +{{</* collapse title="TITLE" */>}} [content] {{</* /collapse */>}} +{{< /code >}} + + +### Parameters +#### *title* +The lang parameter defines the text to show in the button that toggles the collapse content. +Example: <code>title="Click me to show content"</code>. diff --git a/exampleSite/content/shortcodes/doublecode.md b/exampleSite/content/shortcodes/doublecode.md new file mode 100644 index 0000000..0b6642b --- /dev/null +++ b/exampleSite/content/shortcodes/doublecode.md @@ -0,0 +1,36 @@ ++++ +title = "Doublecode" +description = "" +weight = 6 ++++ + +The *doublecode* shortcode works the same as the [code](/shortcodes/code/) shortcode, but extends the functionality by also rendering the code in the page. This is useful for showing the code of HTML elements in your page. + +{{< doublecode lang="html" >}} +<div class="mydiv bg-primary shadow text-white p-3 m-4 border-primary"> + <p class="h4 title">Hi there</p> + <p class="lead mb-0">I'm inside a doublecode shortcode, that's why I look so fancy.</p> +</div> +{{< /doublecode >}} + +## Usage +Simply place the following shortcode on the page +#### Code in the shortcode +{{< code lang="html" >}} +{{</* doublecode lang="LANG" */>}} [your code] {{</* /doublecode */>}} +{{< /code >}} +#### Code from a file +{{< code lang="html" >}} +{{</* doublecode lang="LANG" file="code/mycode.html" */>}} +{{< /code >}} + + +### Parameters +#### *lang* +The lang parameter defines the language to be used for code highlighting. You can find a complete list of supported languages <a href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" target="_blank">here</a>. + +Example: <code>lang="html"</code> + +#### *file* +The file parameter allows you to define an external file that contains your code to be displayed. This is done by giving a path to that file, starting from the root directory of your site. +For example, a HTML file named *'mycode.html'* you wish to link that is in the *docs/code/* directory can be defined as follows: <code>file="code/mycode.html"</code>.
\ No newline at end of file diff --git a/exampleSite/content/shortcodes/lead.md b/exampleSite/content/shortcodes/lead.md new file mode 100644 index 0000000..dea42e6 --- /dev/null +++ b/exampleSite/content/shortcodes/lead.md @@ -0,0 +1,17 @@ ++++ +title = "Lead" +description = "" +weight = 7 ++++ + +The lead shortcode creates a paragraph with the *lead* class to make it stand out. Great for introductions or summaries. + +{{< lead >}} +I'm a lead paragraph. That means I'm more important. And you can see that. +{{< /lead >}} + +## Usage +Simply place the following shortcode on the page +{{< code lang="html" >}} +{{</* lead */>}} [content] {{</* /lead */>}} +{{< /code >}} diff --git a/exampleSite/content/shortcodes/panel.md b/exampleSite/content/shortcodes/panel.md new file mode 100644 index 0000000..9868b14 --- /dev/null +++ b/exampleSite/content/shortcodes/panel.md @@ -0,0 +1,32 @@ ++++ +title = "Panel" +description = "" +weight = 8 ++++ + +Draw your visitor's attention by separating information from the rest of the page using a panel. Convey meaning to this information by using colors implying danger, warning, success or info in a similar fashion as alerts. + +{{< panel title="I'm important" style="danger" >}} +Be sure to read me, I might have important information for you. +{{< /panel >}} + +## Usage +Simply place the following shortcode on the page +{{< code lang="html" >}} +{{</* panel title="TITLE" style="STYLE" */>}} [content] {{</* /panel */>}} +{{< /code >}} + +### Parameters +#### Style +The style parameter is directly applied to the alert as a class in the format *"border-{STYLE}"*. Bootstrap comes with a variety of styles that can be used with this: +- primary +- secondary +- danger +- warning +- success +- info +Example: <code>style="danger"</code>. + +#### Title +The title paramter defines the text shown as a title in the panel. It will have the same color as the style. +Example: <code>title="I'm important"</code>.
\ No newline at end of file |