Hinzufügen einer Navigationsleiste zu allen Vorlagen

Ich möchte eine Navigationsleiste auf jeder Seite anzeigen. In PHP würde ich die Navigationsleiste schreiben und sie dann auf den anderen Seiten einfügen. Ich habe versucht, die Nav-Bar-Vorlage in die anderen Vorlagen einzufügen oder zu erweitern, aber es hat nicht funktioniert. Es gibt nur "Dies ist die Homepage" aus. Wie schließe ich die Navigationsleiste korrekt in jede Vorlage ein?Hinzufügen einer Navigationsleiste zu allen Vorlagen

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

Quelle

2015-09-14 Tony Lee

Erstellen Sie eine Basisvorlage mit Layout und Navigation, die allen Seiten gemeinsam ist. Dann erweitern Sie diese Vorlage, um die eigentlichen Seiten zu erstellen. Fügen Sie der Basisvorlage Blöcke hinzu, die in den anderen überschrieben werden können.

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

beachte, dass die Navigationsleiste nur in der Basisvorlage definiert ist. Es wird kein Block benötigt und der Inhalt der untergeordneten Vorlagen wird danach ersetzt.

Quelle

2015-09-14 14:39:05 davidism

@TonyLee, um Ihre nächste Frage anticiapte, hier ist, wie [den aktiven Link in der Navigationsleiste für jede Vorlage festlegen] (http://stackoverflow.com/a/21992246/400617) – davidism

-1

Wenn Sie die gleiche navbar auf jeder Seite verwenden möchten, müssen Sie die {% block navbar %}...{% endblock %} in layout.html nicht brauchen. Alternativ dazu müssen Sie möglicherweise {{ super() }} wie beschrieben here verwenden.

Quelle

2015-09-14 14:34:22 David

Sie können die Navigationsleiste auf jeder Seite einfügen.

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: beachten Sie die {% 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 %}

manchmal ist es ein guter Weg, Sie Web-Seite zu entwerfen. Sie brechen Ihre Seite auf, zum Beispiel: head.html, nav.html, footer.html ... Sie können sie in die layout.html einbinden, um sie zu verwenden.

Quelle

2015-09-15 13:04:06

Vielen Dank. '{% include 'nav.html'%}' ist genau das was ich gesucht habe. Ich wollte explizit meine Basis und Navbar (etc.) in verschiedenen Dateien behalten, um das Austauschen von Navbar zu ermöglichen, einfache Bearbeitung. Aber ich konnte nicht finden, wie man navbar.html in base.html "importiert". –

Hinzufügen einer Navigationsleiste zu allen Vorlagen

Antwort

Verwandte Themen