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.

# 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!

Return to top