Add a nav bar to all templates

Create a base template with the layout and naviagation that will be common to all pages. Then extend this template to create the actual pages. Add blocks to the base template that can be overriden in the others.

base.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>{% block title %} - My Site {% endblock %}</title>
    </head>
    <body>
        <div>Navbar</div>
        {% block content %}{% endblock %}
    </body>
</html>

index.html

{% extends 'base.html' %}

{% block content %}
<h3>{% block title %}Home{% endblock %}</h3>
<p>Hello, World!</p>
{% endblock %}

Note that the navbar is just defined in the base template. It does not need a block, and the content from the child templates will be substituded in after it.

You can use a similar technique to control which item is highlighted in a navigation bar.


You can include the nav bar in every page.

nav.html

<style>
    body {
        margin: 0;
        padding: 0;
    }

    div{
        background: #333;
        color: #f9f9f9;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>

<div>NAVBAR</div>

layout.html: note the {% include 'nav.html' %}

<!doctype html>
<html>
    <body>
    {% include 'nav.html' %}

    {% block content %}
    {% endblock %}
    </body>
</html>

index.html

{% extends "layout.html" %}

{% block content %}
    <h1>This is the homepage!</h1>
{% endblock %}

sometimes, it is a good way to design you web page. You break you page to, for example: head.html, nav.html, footer.html... you can include them in the layout.html to use them.

Tags:

Python

Jinja2

Flask

Recent Posts