https://github.com/tgagor/hugo-shortcode-kofi
A collection of custom shortcodes tailored for Hugo static site generator, designed to seamlessly integrate Ko-fi buttons and widgets into any blog post
https://github.com/tgagor/hugo-shortcode-kofi
hugo hugo-shortcode hugo-shortcodes hugo-theme hugo-theme-component hugo-themes
Last synced: 5 months ago
JSON representation
A collection of custom shortcodes tailored for Hugo static site generator, designed to seamlessly integrate Ko-fi buttons and widgets into any blog post
- Host: GitHub
- URL: https://github.com/tgagor/hugo-shortcode-kofi
- Owner: tgagor
- License: gpl-3.0
- Created: 2024-03-08T15:39:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-01T17:26:49.000Z (7 months ago)
- Last Synced: 2025-12-04T05:59:51.279Z (7 months ago)
- Topics: hugo, hugo-shortcode, hugo-shortcodes, hugo-theme, hugo-theme-component, hugo-themes
- Language: HTML
- Homepage: https://gagor.pro/2024/03/monetize-your-blog-with-ko-fi-shortcodes-for-hugo-sites/
- Size: 36.1 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hugo shortcodes for Ko-fi
[](https://github.com/tgagor/hugo-shortcode-kofi/actions/workflows/test-and-release.yml)


This is a set of shortcodes to allow easy integration with [Ko-fi](https://ko-fi.com/).
[Live demo on my blog](https://gagor.pro/2024/03/monetize-your-blog-with-ko-fi-shortcodes-for-hugo-sites/).
# Installation
1. Clone hugo-shortcode-kofi repo to your project:
- as submodule (recommended)
```bash
cd your-site-location
git submodule add --depth=1 https://github.com/tgagor/hugo-shortcode-kofi.git themes/hugo-shortcode-kofi
```
You might need to initialize any uninitialized submodules in the repository and then recursively update all submodules to their latest versions to make it fully available:
```bash
git submodule update --init --recursive
```
- or by just cloning
```bash
cd your-site-location
git clone --depth=1 https://github.com/tgagor/hugo-shortcode-kofi.git themes/hugo-shortcode-kofi
```
3. Update blog config:
```yaml
theme:
- YourThemeOfChoice
- hugo-shortcode-kofi
```
Original theme should be first, followed up by extension.
If you're unable to get it working, check [`exampleSite`](./exampleSite/) directory.
# List of shortcodes
| Animated button |
| ---------------------------------------------------------------------------- |
| `{{< kofi/button >}}` or
`{{< kofi/button color="#13C3FF" >}}` |
| `{{< kofi/button color="#FF5E5B" >}}` |
| `{{< kofi/button color="#434b57" >}}` |
| Image style 1 |
| ------------------------------------------------------------------------- |
| `{{< kofi/image1 >}}` or
`{{< kofi/image1 style="blue" >}}` |
| `{{< kofi/image1 style="grey" >}}` |
| `{{< kofi/image1 style="red" >}}` |
| `{{< kofi/image1 style="green" >}}` |
| `{{< kofi/image1 style="dark" >}}` |
| Image style 2 |
| ------------------------------------------------------------------------- |
| `{{< kofi/image2 >}}` or
`{{< kofi/image2 style="blue" >}}` |
| `{{< kofi/image2 style="red" >}}` |
| `{{< kofi/image2 style="stroke" >}}` |
| `{{< kofi/image2 style="dark" >}}` |
### Logotypes
| Logos |
| --------------------------------------------------------------------- |
| `{{< kofi/logo >}}` or
`{{< kofi/logo style="logo" >}}` |
| `{{< kofi/logo style="mug" >}}` |
| `{{< kofi/logo style="pixel" >}}` |
### Badges
| Badges |
| ---------------------------------------------------------------------- |
| `{{< kofi/badge >}}` or
`{{< kofi/badge style=white >}}` |
| `{{< kofi/badge style=dark >}}` |
| `{{< kofi/badge style=bg-white >}}` |
| `{{< kofi/badge style=bg-dark >}}` |
### Dynamic widgets
| Widgets |
| ---------------------------------- |
| `{{< kofi/floating-button >}}` |
| `{{< kofi/donation-panel >}}` |
### Custom images
| Custom images |
| ----------------------------------------------------------------------------------------------------- |
| `{{< kofi/custom height=200 url="https://media.giphy.com/media/kgKFcQk6oa1WIdHNSl/giphy.gif" >}}` |
| |