Objective

This Hugo Theme Component allows to easily insert Badges and Buttons in your content and templates

Both a Shortcode and a Partial Template are provided.

Screenshot

Usage

{{< badge text="CSS" icon="css" >}}

Options

text= "string" # REQUIRED
icon= "SVG icon name"
href= "URL"
id= "string"
class= "custom-class"

Only the text parameter is required.

The icon parameter must match one of the filenames at /layouts/partials/svg/.
You can add more files by creating the same directory structure in project root.

Installation

(Requires Hugo > 0.42)

Install as a Git submodule:

git submodule add https://gitlab.com/roneo.org/hugo-shortcode-roneo-button-icon-badge.git themes/hugo-shortcode-roneo-button-icon-badge

Edit config.toml:

theme = ["hugo-shortcode-roneo-button-icon-badge", "YourCurrentTheme"]

To learn more about "Theme components", see the Hugo documentation

Insert in a Markdown file

with the following Shortcode:

{{< badge text="CSS" >}}

Insert a badge with an icon:

{{< badge text="CSS" icon="css" >}}

Call from a template

{{ partial "badge.html" (dict "context" . "pages" $.Site.Pages "text" "Hi there" "icon" "git") }}

Add more icons

Add SVG files in /assets/svg/.
You can edit the Component directory or create the same folder structure at the root of your project.

Note that some SVG files do not work (#TODO:investigate), see /assets/svg/ to get inspiration.

Contribute

Please star this repo on Github or Gitlab, to help this project gain some visibility and reach new contributors.

Code contributions are welcome, and the main place for development is this Gitlab repo. Feel free to use this Github repo.

References

• Inspired by the Button Shortcode from the Axiom Theme
• Hugo documentation about Theme Components
• Hugo documentation about Shortcodes
• Hugo documentation about Partial Templates.