Please help me understand inheritance

Support
1

I am creating my own theme for the learning experience. But I am struggling to come up with the “correct” way of handling template inheritance.

For example, let’s just look at the index.html page. I would like the structure to be reasonably modular.

~/d/main-site [main] ❯ ls templates
base.html  index.html  nav.html


~/d/main-site [main] ❯ cat templates/base.html
<!DOCTYPE html>
<html lang="en">

<head>
  {% block head %}
  <meta charset="utf-8">
  {% block title %}<title>ksynwa.xyz</title{% endblock title %}>
  <link rel="stylesheet" href="{{get_url(path='style.css')}}" type="text/css">
  {% endblock head %}
</head>

<body>
  <div class="container">
    {% block content %} {% endblock %}
  </div>
</body>

</html>


~/d/main-site [main] ❯ cat templates/index.html
{% extends "base.html" %}

{% block content %}
<h1 class="title">
  This is my blog made with Zola.
</h1>
{% endblock content %}

I would like to create a nav.html that is the nav bar of the website. The way I understand things right now, looks like I can’t just import nav.html right now. Instead, I have to make nav.html extend base.html, then make index.html extend nav.html.

Is this correct? If I am wrong please feel free to let me know. If you have suggestions for better ways to handle this I would appreciate that too. :slight_smile:

Edit: Another thing I would like to do is to apply a class to the navbar item depending on whether it’s active or not. So advice for that would be appreciate too.

2

sorry if I got you wrong, but try to think by blocks (like content or nav). You feel free to add all blocks you needed in index.html and overwrite some of that on specific pages. It might be useful to see sources on another themes of Zola.