Aggiungere una barra di navigazione a tutti i modelli

Voglio mostrare una barra di navigazione in ogni pagina. In PHP, scriverei la barra di navigazione, quindi includila nelle altre pagine. Ho provato a includere o estendere il modello della barra di navigazione negli altri modelli, ma non ha funzionato. Produce solo "Questa è la home page". Come inserisco correttamente la barra di navigazione in ogni modello?Aggiungere una barra di navigazione a tutti i modelli

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

fonte

2015-09-14 Tony Lee

Creare un modello di base con il layout e la navigazione che saranno comuni a tutte le pagine. Quindi estendi questo modello per creare le pagine effettive. Aggiungi blocchi al modello base che possono essere sostituiti negli altri.

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

Nota che la barra di navigazione è solo definito nel modello di base. Non ha bisogno di un blocco e il contenuto dei modelli figlio verrà sostituito in seguito.

fonte

2015-09-14 14:39:05 davidism

@TonyLee per annullare la tua prossima domanda, ecco come [impostare il collegamento attivo nella barra di navigazione per ogni modello] (http://stackoverflow.com/a/21992246/400617) – davidism

-1

Se si desidera utilizzare la stessa barra di navigazione in ogni pagina, non è necessario il {% block navbar %}...{% endblock %} in layout.html. In alternativa, potrebbe essere necessario utilizzare {{ super() }} come descritto here.

fonte

2015-09-14 14:34:22 David

È possibile includere la barra di navigazione in ogni pagina.

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: notare la {% 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 %}

a volte, è un buon modo di progettare voi pagina web. Si interrompe la pagina, ad esempio: head.html, nav.html, footer.html ... è possibile includerli nel file layout.html per utilizzarli.

fonte

2015-09-15 13:04:06

Grazie. '{% include 'nav.html'%}' è esattamente quello che stavo cercando. Volevo mantenere esplicitamente la mia base e la barra di navigazione (ecc.) In file diversi per consentire lo scambio di navbar, facile modifica. Ma non sono riuscito a trovare come "importare" navbar.html in base.html. –

Aggiungere una barra di navigazione a tutti i modelli

risposta

Problemi correlati