Добавить панель навигации ко всем шаблонам

Я хочу показать панель навигации на каждой странице. В 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 %}

python flask jinja2
person Murad Elboudy    schedule 14.09.2015    source источник
comment
Но как можно выделить, какая страница была активной в навигации?   -  person jOSe    schedule 19.11.2020

Ответы (3)


arrow_upward
10
arrow_downward

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

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 %}

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

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

person davidism    schedule 14.09.2015

arrow_upward
13
arrow_downward

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

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, чтобы использовать их.

person lord63. j    schedule 15.09.2015
comment
Спасибо. {% include 'nav.html' %} это именно то, что я искал. Я хотел явно хранить свою базу и панель навигации (и т. д.) в разных файлах, чтобы можно было менять местами панель навигации и легко редактировать. Но я не смог найти, как импортировать navbar.html в base.html. - person Timothy Pulliam; 21.05.2017

arrow_upward
-1
arrow_downward

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

person David    schedule 14.09.2015