Unleashing Jekyll's hidden powers with custom Liquid templating

How I use Liquid templating with HTML to create dynamic components on my website.

# What is custom components and templates?

I refer to custom components as reusable HTML elements that I can easily use over and over and customize easily each time I use them. Essentially, components are a set of building blocks that you can utilize on your website, for example this dropdown,

which I easily added to the post by adding the following very simple piece of include code in the .md file:

{%  include components/dropdown.html
    title='Click me!'
    color='alert'
    icon='fa-solid fa-arrow-pointer fa-beat' 
    content='I dropped down and revealed more information.' %}

or how about a progressbar?

by adding

{% include components/progressbar.html
    percent='63'
    color='success'
    title='I am almost there! (progressbar title)' %}

These weird pieces of code are examples of the Liquid templating language used to include templates. In general, Liquid tags provide a way to inject dynamic behavior into templates by evaluating logic and rendering content accordingly.

All this evaluation and rendering happens automatically when exporting the jekyll website to the _site folder such that the website is still static when served on the webserver as usual.

You can read more about Liquid in the docs of Jekyll.

# How-to

The first step is to create the .html files with the components themselves, I only cover the progressbar here as the dropdown is more advanced; however, at some point I will add the code of the dropdown to my GitHub page.

# Adding HTML

I added a file called progressbar.html to the _includes/components folder with the following code:

<div>
    {% if include.title %}<b>{{ include.title }}</b>{% endif %}
    <div class="progressbar-container"> 
        <div class="progressbar-percent {% if include.color%} {{ include.color }} {% else %} default {% endif %}" style="width:{{ include.percent }}%;">
        {{ include.percent }}%
        </div> 
    </div> 
</div>

It is important to notice here that the outer <div></div> tags are strictly necessary to prevent the Jekyll engine of nesting the component in <p></p> tags when building the site as this might break your code.

Here again I use Liquid tags. The code should be fairly self-explanatory; however, I will note that the

{% if include.variable %}<b>{{ include.variable }}</b>{% endif %}

tags allows us to parse variables from the include call in the post and use them in the .html file. Super cool! For more details refer to the Liquid documentation.

# Styling with Sass / CSS

I use Sass to style my website so that is what I will show here; however, you could easily do the same in ordinary CSS or whatever you use…

In my components .scss file I added the following code:

.progressbar-container { 
    background-color: $default-bg; 
    width: 100%; 
    border-radius: 15px; 
    margin: 1em 0px;
} 

.progressbar-percent { 
    color: white; 
    font-size: 1rem;
    text-align: right;
    padding: 10px; 
    border-radius: 15px; 


    &.default {background-color: $default-bg;}
    &.alert {background-color: $alert;}
    &.warning {background-color: $warning;}
    &.success {background-color: $success;}
}

Where all the variables prefixed by $ are color variables that I have defined in my variables Sass file. And that is pretty much it, super simple right!

If you want to check out my custom components you can find my Github repo here where I plan to upload them later.

Return to top