Hugo Shortcode for Buy Me a Coffee #

Minimal example #

Here is a simple embedded button for getting a donation via the Buy Me a Coffee service:

Code:

{{< bmc-button slug="isqua" >}}

Full example #

You can customize colors and text:

Code:

{{< bmc-button
    slug="isqua"
    text="Buy me a milk"
    font="Bree"
    button-color="614484"
    coffee-color="FFFFFF"
    cup-color="FFDD00"
    font-color="FFFFFF"
    >}}

Or use any emoji instead of the cup:

Code:

{{< bmc-button
    slug="isqua"
    text="Buy me a croissant"
    emoji="🥐"
    font="Lato"
    button-color="F5F5EA"
    font-color="C2410C"
    >}}

Parameters #

Parameter	Default	Description
`slug`	—	Slug of your Buy Me a Coffee account. You can get it from the URL of your page url on Buy Me a Coffee
`emoji`	—	If you don’t want coffee, you can draw some emoji instead of the cup
`text`	Buy me a coffee	The text on the button
`font`	Cookie	The font family of the button text. See all the available fonts at the Buy Me a Coffee buttons page
`button-color`	`ffdd00`	The color of the button
`font-color`	`000000`	The color of the text
`coffee-color`	`ffffff`	The color of the drink in the cup
`cup-color`	`000000`	The color of the cup

Site Parameters #

You can set defaults in Site Parameters. For config.toml:

[params.HugoShortcodes.BuyMeACoffee]
    Slug = 'isqua'
    Text = 'Buy me a croissant'
    Font = 'Lato'
    Emoji = '🥐'
    ButtonColor = 'ffdd00'
    FontColor = '000000'
    CoffeeColor = 'ffffff'
    CupColor = '000000'

For config.yaml:

params:
  HugoShortcodes:
    BuyMeACoffee:
      Slug: "isqua"
      Text: "Buy me a croissant"
      Font: "Lato"
      Emoji: "🥐"
      ButtonColor: "ffdd00"
      FontColor: "000000"
      CoffeeColor: "ffffff"
      CupColor: "000000"

Installation #

Don’t forget to install shortcode before usage.

Install all shortcodes at once

If you need dozens of them, it’s better to attach this repository as a theme to your website.

First, add the theme as a git submodule:

git submodule add -b theme https://github.com/isqua/hugo-shortcodes.git themes/hugo-shortcodes

Then add the theme to your config.toml. Most likely you have the following line in your config:

theme = 'ananke'

There may be another theme in place of “ananke”.

Then surround the theme with square brackets, and appends 'hugo-shortcodes' with a comma at the end:

theme = [ 'ananke', 'hugo-shortcodes' ]

That’s it! If your hugo server is running, it is better to restart it to avoid unexpected behavior.

Now you can use all the shortcodes on any content page of your site.

Install only current shortcode

If you need only one shortcode or installing a theme is too complicated, you may get it easier.

First, download shortcode file.
Put the file into your layouts/shortcodes folder.

That’s it! If your hugo server is running, it is better to restart it to avoid unexpected behavior.

Now you can use the shortcode on any content page of your site.