70 lines
2.9 KiB
Markdown
70 lines
2.9 KiB
Markdown
|
+++
|
||
|
|
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.
|
||
|
|
|
||
|
|
<!--more-->
|
||
|
|
|
||
|
|
|
||
|
|
## Create a new theme {#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.
|
||
|
|
|
||
|
|
```text
|
||
|
|
$ nikola theme --new custom-willy-theme --parent willy-theme --engine=jinja
|
||
|
|
```
|
||
|
|
|
||
|
|
<div class="admonition note">
|
||
|
|
<p class="admonition-title">Note</p>
|
||
|
|
|
||
|
|
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_.
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="admonition warning">
|
||
|
|
<p class="admonition-title">warning</p>
|
||
|
|
|
||
|
|
You will _probably_ need both themes in your `themes/` directory. The _willy-theme_ needs to be installed before creating your _custom_ theme from it.
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
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 {#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
|
||
|
|
|
||
|
|
```text
|
||
|
|
$ 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 {#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.
|