Add a nav bar to all templates

Question

I want to show a nav bar on every page. In PHP, I would write the nav bar then include it on the other pages. I tried to include or extend the nav bar template into the other templates, but it didn't work. It only outputs "This is the home page." How do I correctly include the nav bar in every template?

layout.html

<!doctype html>
<html>
    <body>
        {% block navbar %}
            <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> 
        {% endblock %}

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

index.html

This is the home page.
{% extends "layout.html" %}

{% block navbar %} {% endblock %}

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

But how it is possible to highlight which page been active in nav? — jOSe, Nov 19 '20 at 05:50

score 17 · Answer 1 · answered Sep 15 '15 at 13:04

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.

Thank you. `{% include 'nav.html' %}` is exactly what I was looking for. I wanted to explicitly keep my base and navbar (etc.) in different files to allow for swapping of navbar, easy editing. But I could not find how to "import" navbar.html into base.html. — Timothy Pulliam, May 21 '17 at 18:57

score 12 · Accepted Answer · edited May 19 '20 at 02:31

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.

score -1 · Answer 3 · answered Sep 14 '15 at 14:34

-1

If you want to use the same navbar in every page, you don't need the {% block navbar %}...{% endblock %} in layout.html. Alternatively, you might have to use {{ super() }} as described here.

answered Sep 14 '15 at 14:34

David

624
6
15

Add a nav bar to all templates

3 Answers3

Linked