Customization of CMS Grav

As always, there are two options. One is complicated—manual customization with a lengthy preparation of the theme to an acceptable look. The other is simpler: download a Skeleton and just unpack it in the root of the site, replacing the files. Which will you choose, the simple option or learning Twig and SCSS?

Alright, here is the link to the skeletons: https://getgrav.org/downloads/skeletons

Choose one to your liking, download and unpack it in the site folder. At the time of writing this article, I switched to the Stripped theme. It turns out I was reinventing the wheel, considering that a Skeleton based on this theme already exists.

Editing a Grav Theme

It is quite possible that even the Skeleton didn’t provide everything you need. In this case, we move on to more complex actions, as you will have to change the theme itself. Yes, don’t forget to go to Settings → Content and check the Twig processing option. Save. Great, now let’s get to work with the template.

Themes in this CMS are based on the Twig template engine. Symfony enthusiasts can breathe a sigh of relief, while WordPress users might be taken aback. Let’s be honest, themes in WP are much more complex. If someone with even a little experience can handle it here, for WordPress, you need to know much more.

Well, to each their own. Some might find Grav more challenging. Let’s move on to customization.

Templates of a theme look something like this. Files are in the .html.twig format. The best part is that you can change them as much as you want; they don’t need updates and thus your changes won’t be overwritten. My main page is assigned to the file blog.html. This means I need to open the file blog.html.twig. Files with the twig extension are responsible for templating. For example, I decided to change the calendar and update the sharing links with icons. I need to find where they are stored.

The file base.html.twig is responsible for linking external files, placing the sidebar, and other similar tasks. We won’t touch it, but it’s clear that if we want to make changes to the sidebar, we’ll need to start working with the partials/sidebar.html.twig template. I’ve decided to postpone this fun for later because I really like the current sidebar. However, the sharing links are not quite right. So, we move to the file blog_item.html.twig and find what controls the calendar and sharing functionality.

So, in the screenshot, you can clearly see the code that needs to be replaced with your own. For convenience, you can enable syntax highlighting when editing. I recommend installing ESCRIPT if you’re using Notepad++. Now let’s edit.

So, I just changed the block of code:

{% if site.share.facebook or site.share.twitter %}
            <ul class="stats">
        {% if site.share.facebook %}
                <li><a href="https://vk.com/share.php?url=https://extremal.site" target="_blank" class="icon fa-vk"><i class="fa fa-circle-o-notch fa-spin"></i></a></li>
                {% endif %}
                {% if site.share.twitter %}
                <li><a href="https://twitter.com/share" data-url="{{ page.url(true) }}" data-text="{{ page.title }}" class="icon fa-twitter"><i class="fa fa-circle-o-notch fa-spin"></i></a></li>
                {% endif %}
            </ul>
{% endif %}

As you can see, I just added a sharing link for VK and swapped it with Twitter, while also changing the icon. Nothing more.

It will be much more convenient to work via FTP. In the next article, we’ll create a custom template for the entry pages, as I didn’t particularly like the one that comes with the Skeleton.