To create your own shortcodes in Hugo, add an HTML file in layouts/shortcodes/. This theme provides the following useful custom shortcodes:
Info card
Displays information in a card format.
Shortcode
{{/* < info_cards header="lorem-ipsum" title="What is Lorem Ipsum?" content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." > */}}
Output
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Read this for more details and code.
Card shortcode
Adds cards with text and links.
Shortcode
{{/* < bs_img_card title="Some" link="https://some.com/"
descr="Lorem Ipsum is simply dummy text of the printing and typesetting industry." > */}}
{{/* < bs_img_card title="Example" link="https://www.example.io/"
descr="Lorem Ipsum is simply dummy text of the printing and typesetting industry." > */}}
{{/* < bs_img_card title="Here" link="https://www.here.com/"
descr="Lorem Ipsum is simply dummy text of the printing and typesetting industry." > */}}
Output
Read this for more details and code.
Details
This simply adds the html5 detail attribute, supported on all modern browsers. Use it like this:
Shortcode
{{/* < details "This is the details title (click to expand)" > */ }}
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
{{ /* < /details > */}}
Output
This is the details title (click to expand)
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Split
This adds a two column side-by-side environment (will turn into 1 col for narrow devices):
Shortcode
{{ /* < columns > */ }}
This is column 1.
{{ /* < column > */ }}
This is column 2.
{{ /* < endcolumns > */ }}
Output
This is column 1.
This is column 2.
Use the share button below if you liked it.
It makes me smile, when I see it.