Добавить панель навигации для всех шаблонов

Я хочу показать навигационную панель на каждой странице. В PHP я бы написал навигационную панель, а затем включил ее на других страницах. Я пытался включить или расширить шаблон панели навигации в другие шаблоны, но это не сработало. Выводит только "Это домашняя страница". Как правильно включить панель навигации в каждом шаблоне?

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 %}
Источник

3 ответа

Решение

Создайте базовый шаблон с макетом и навигацией, которые будут общими для всех страниц. Затем расширьте этот шаблон для создания реальных страниц. Добавьте блоки в базовый шаблон, которые могут быть переопределены в других.

base.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>{% block title %} - My Site</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 %}

Обратите внимание, что панель навигации только что определена в базовом шаблоне. Он не нуждается в блоке, и содержимое дочерних шаблонов будет заменено после него.

Вы можете использовать похожую технику для управления тем, какой элемент выделен на панели навигации.

Источник

Вы можете включить навигационную панель на каждой странице.

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: Обратите внимание {% 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 %}

иногда это хороший способ создать свою веб-страницу. Вы разбиваете страницу, например: head.html, nav.html, footer.html... вы можете включить их в layout.html, чтобы использовать их.

Источник

Если вы хотите использовать одну и ту же панель навигации на каждой странице, вам не нужно {% block navbar %}...{% endblock %} в layout.html. В качестве альтернативы, вы можете использовать {{ super() }} как описано здесь.

Источник
Другие вопросы по тегам