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

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

источник

2015-09-14 Tony Lee

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

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

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

источник

2015-09-14 14:39:05 davidism

@TonyLee, чтобы обсудить следующий вопрос, вот как [установить активную ссылку в панели навигации для каждого шаблона] (http://stackoverflow.com/a/21992246/400617) – davidism

-1

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

источник

2015-09-14 14:34:22 David

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

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

источник

2015-09-15 13:04:06

Спасибо. '{% include 'nav.html'%}' именно то, что я искал. Я хотел явно сохранить базу и навигатор (и т. Д.) В разных файлах, чтобы можно было менять навигацию, легко редактировать. Но я не мог найти, как «импортировать» navbar.html в base.html. –

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

ответ

Смежные вопросы