arvb.net

Template Inheritance

1 min read

We can use template inheritance to separate the data that appears on every page. For example, an index.html file can be broken into two parts:

  1. base.html
  2. index.html

In base.html we can include something like the following:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Fancy title</title>
  </head>
  <body>
 
    {% block content %}{% endblock content %}
  </body>
</html>

The {% block %} creates a block named content that we can fill in using a different template. Thus, in index.html we may include the following:

{% extends "base.html" %}
{% block content %}
  <h1>An H1</h1>
 
  <p>Stuff in a tag</p>
  <p>More stuff!</p>
 
{% endblock content %}

Here is a breakdown of those tags:

  • {% extends %}
    • This tag defines which template will be used to start. As the page is built, the moment the application reaches the content block in the base file it will check to see if the current file also defines that block. If so, fill in the content.

Graph View