In this post I will explain how to use the plugin called jekyll-patreon. I created this plugin to be able to implement a widget that shows information about our Patreon profile.

Note: This plugin requires Ruby 2.5+ and Jekyll 3.8+

What is this used for?

A Jekyll plugin that adds Patreon support in your blog to easily embed a widget with goals

Features

• Supports several designs: default, fancy, minimal, streamlined, reversed, swapped
• Supports several colors: red, green, orange, red nostripes, green nostripes, orange nostripes, blue nostripes
• Supports i18n (compatible with jekyll-language-plugin)
• Supports Markdown on your Patreon goals

To see the possible styles && designs navigate to the assets folder of the main repo where the screenshots are located

Installation

Add this line to your site’s Gemfile:

gem 'jekyll-patreon'

Add this configuration to your _config.yml file:

####################
# Patreon Settings #
####################

patreon:
    enabled: true
    design: 'default' # Supports the following desings: default, fancy, minimal, streamlined, reversed, swapped
    title: 'Example title'
    metercolor: 'green' # Supports the following colors: red, green, orange, red nostripes, green nostripes, orange nostripes, blue nostripes
    toptext: 'Example top text' # Text that appears in before the progress bar (optional)
    bottomtext: 'Example bottom text' # Text that appears in after the progress bar (optional)
    showgoaltext: true # Display the goal text?
    showbutton: true # Display the "Become a patron" button?
    username: 'Your username here'
    default_lang: "en" # The default language to use (to avoid writing twice the same text from Patreon)

Usage

Simply just put the following tag where you need this:

   
        {% patreon %}
   

i18n

To support languages just use jekyll-language-plugin configuration. Or if you don’t use it, do the following steps.

First, in your main index.html (or wherever you need the i18n support) declare the following lines:

–––
layout: <layout>
language: en
–––

Or if you want to support several languages in the same page:

–––
layout: <layout>
languages:
- en
- es
–––

Then, in “_data/lang/” create one file for each lang.

Example: en.yml and es.yml.

Then, write the translations of you goals like this:

#################
# Patreon Goals #
#################

patreon_goal_0: "..."
patreon_goal_1: "..."
patreon_goal_2: "..."
# etc etc...

There you will need to create as much translations as the number of goals that your Patreon page have. (Note: starting index is 0 (zero))

Issues

Having issues? Just report in the issue section. Thanks for the feedback!

Best regards!