RoneoOrg/hugo-shortcode-roneo-button-icon-badge
Insert fancy buttons and badges with this Hugo Theme Component
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.