blog.lazkani.io/content/posts/modifying-a-nikola-theme.md

2.9 KiB

+++ title = "Modifying a Nikola theme" author = ["Elia el Lazkani"] date = 2020-09-01T21:00:00+02:00 lastmod = 2021-06-28T00:01:25+02:00 tags = ["theme", "blog"] categories = ["nikola"] draft = false +++

After publishing my blog in new form yesterday night, I have received some suggestions for changes to the theme.

First off, I noticed that the footer is not showing after the blog was deployed. That reminded me that I have made changes to the original theme on disk. The pipeline, though, install the theme fresh before deploying the website.

I needed to fix that. Here's how I did it.

Create a new theme

This might be counter intuitive but themes in Nikola can actually have parents. So what we need to do is clone the theme we want to modify while keeping it as parent to our theme. I'll show you.

First, create your new theme.

$ nikola theme --new custom-willy-theme --parent willy-theme --engine=jinja

Note

I had to use --engine=jinja because willy-theme uses jinja templating. If you are using the mako engine, you don't need to add thihs as the default is mako.

warning

You will probably need both themes in your themes/ directory. The willy-theme needs to be installed before creating your custom theme from it.

This should create themes/custom-willy-theme/. If we look inside, we'll see one file that describes this theme with its parent.

Go to your conf.py and change the theme to custom-willy-theme.

Let's talk hierarchy

Now that we have our own custom theme out of the willy-theme, if we rebuild the blog we can see that nothing changes. Of course, we have not made any modifications. But did you ever ask yourself the question, why did the site not change ?

If your theme points to a parent, whatever Nikola expects will have to be your theme first with a failover to the parent theme. Ok, if you've followed so far, you will need to know what Nikola is expecting right ?

You can dig into the documentation here to find out what you can do, but I wanted to change a few things to the theme. I wanted to add a footer, for example.

It turns out for willy-theme that is located in the templates/base.tmpl. All I did was the following

$ mkdir themes/custom-willy-theme/templates
$ cp themes/willy-theme/templates/base.tmpl themes/custom-willy-theme/templates/

I made my modification to the base.tmpl and rendered the blog. It was that simple. My changes were made.

Conclusion

You can always clone the theme repository and make your modifications to it. But maintenance becomes an issue. This seems to be a cleaner way for me to make modifications on the original theme I'm using. This is how you can too.