7.6 KiB
author, title, date, description, tags, thumbnail, photoCredits, photoSource
| author | title | date | description | tags | thumbnail | photoCredits | photoSource | |
|---|---|---|---|---|---|---|---|---|
| Mark Dumay | Extra shortcodes | 2023-02-12 | Use shortcodes to add common Bootstrap elements with ease. |
|
img/paper.jpg | <a href="https://www.pexels.com/@picjumbo-com-55570/">picjumbo.com</a> | <a href="https://www.pexels.com/photo/blue-pen-beside-black-smartphone-on-white-paper-196646/">Pexels</a> |
Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
Accordion
As an example, the following shortcode displays an accordion with three elements, of which the first element is expanded.
{{< example lang="hugo" >}}
{{</* accordion />}}
{{</ accordion-item header="Accordion Item #1" show="true" />}}
This is the first item's accordion body. It supports HTML content. The item is shown by adding the value
show to the class argument.
{{</ /accordion-item />}}
{{</ accordion-item header="Accordion Item #2" />}}
This is the second item's accordion body. It too supports HTML content.
{{</ /accordion-item />}}
{{</ accordion-item header="Accordion Item #3" />}}
This is the third item's accordion body.
{{</ /accordion-item />}}
{{</ /accordion */>}}
{{< /example >}}
Alert
As an example, the following shortcode displays a simple alert.
{{< example lang="hugo" >}} {{</* alert color="danger" dismissible="true" />}} A simple danger alert—check it out! {{</ /alert */>}} {{< /example >}}
Badge
Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
{{< example >}}
Example heading of size one New
Example heading of size two New
Example heading of size three New
Example heading of size four New
Example heading of size five New
Example heading of size six New
{{< /example >}}Breadcrumb
As an example, the following shortcode displays a breadcrumb for the current page.
{{< example lang="hugo" >}} {{</* breadcrumb path="blog" */>}} {{< /example >}}
Button
As an example, the following shortcode displays a tooltip for a dark button with a badge.
{{< example lang="hugo" >}} {{</* button color="secondary" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" />}} Inbox {{</ /button */>}} {{< /example>}}
Button group
As an example, the following shortcode displays a group of three buttons.
{{< example lang="hugo" >}} {{</* button-group aria-label="Basic example" />}} {{</ button color="primary" href="#" />}}Left{{</ /button />}} {{</ button color="primary" href="#" />}}Middle{{</ /button />}} {{</ button color="primary" href="#" />}}Right{{</ /button />}} {{</ /button-group */>}} {{< /example >}}
Card
As an example, the following shortcode displays a stacked card with icon that links to the [about]({{< ref "about" >}}) page. It includes a custom header and footer.
{{< example lang="hugo" >}} {{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}} {{< /example >}}
Carousel
As an example, the following shortcode displays a centered carousel with three slides, 16x9 aspect ratio, and a relative width of 67% on large screens.
{{< example lang="hugo" >}} {{</* carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" />}} {{</ img src="img/coffee.jpg" caption="slide 1" />}} {{</ img src="img/phone.jpg" caption="slide 2" />}} {{</ img src="img/dunes.jpg" caption="slide 3" />}} {{</ /carousel */>}} {{< /example >}}
Collapse
As an example, the following shortcode displays a button that, when clicked, triggers a panel to appear or disappear.
{{< example lang="hugo" >}} {{</* button collapse="collapse-1" />}} Trigger panel {{</ /button */>}}
{{</* collapse id="collapse-1" class="p-3 border rounded" />}} Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. {{</ /collapse */>}} {{< /example >}}
Command prompt
Use the command shortcode to generate a block with a default bash command prompt.
{{< example lang="hugo" >}} {{</* command />}} export MY_VAR=123 {{</ /command */>}} {{< /example >}}
Specify user and host to add the user context to the prompt. In addition, use (out) to specify an output line and use \ to denote a line continuation.
{{< example lang="hugo" >}}
{{</* command user="user" host="localhost" />}}
export MY_VAR=123
echo "hello"
(out)hello
echo one
two
three
(out)one two three
echo "goodbye"
(out)goodbye
{{</ /command */>}}
{{< /example >}}
Icon
As an example, the following shortcodes show a square check, a brand logo, and a circle check.
{{< example lang="hugo" >}} {{</* fa square-check />}} {{</ fab linkedin />}} {{</ fas circle-check */>}} {{< /example >}}
Image
As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
{{< example lang="hugo" >}} {{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}} {{< /example >}}
Navbar
As an example, the following shortcode displays a light navigation header.
{{< example lang="hugo" >}} {{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}} {{< /example >}}
Spinner
As an example, the following shortcode displays a centered spinner.
{{< example lang="hugo" >}} {{</* spinner color="info" class="text-center" />}} Loading... {{</ /spinner */>}} {{< /example>}}
Toast
As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
{{< example lang="hugo" >}} {{</* button id="toastButton" />}} Show toast {{</ /button */>}}
{{</* toast header="Custom title" />}} This is a toast message. {{</ /toast */>}} {{< /example >}}
Tooltip
As an example, the following shortcode displays a tooltip for a colored hyperlink.
{{< example lang="hugo" >}} {{</* tooltip color="primary" title="Tooltip" href="#" />}} Tooltip demonstration {{</ /tooltip */>}} {{< /example >}}