2015-07-16 11 views
11

Quindi sto provando ad aggiungere il piè di pagina e l'intestazione su ogni pagina del mio sito web. Ho creato un file base.html che contiene il layout generale del sito.Django Footer e intestazione su ogni pagina con {% extends}

Nella mia pagina about.html, ho fatto:

{% extends "public/base.html" %} 

<h1>Content goes here</h1> 

posso vedere il mio intestazione e piè di pagina, ma come faccio a visualizzare il contenuto. Voglio scrivere cose in quella pagina about.html. Il contenuto va qui non viene visualizzato nel mezzo.

risposta

17

È necessario definire un blocco in base.html e popolarlo in about.html.

base.html:

<header>...</header> 
{% block content %}{% endblock %} 
<footer>...</footer> 

about.html

{% extends "public/base.html" %} 

{% block content %} 
<h1>Content goes here</h1> 
{% endblock %} 

tutto questo è completamente spiegato nel tutorial.

+0

Grazie! Ho aggiunto il contenuto del blocco e il blocco finale e ha funzionato! – encrypt

+0

Domanda Quickk. Quindi, se volessi modificare il testo e il layout con css, creerei un file css separato solo per quella pagina e come estenderlo? Stessa strada? – encrypt

+0

Quindi il CSS è considerato un file statico, quindi dovresti usare: '{% load staticfiles%}'. Maggiori informazioni qui: https://docs.djangoproject.com/en/1.8/howto/static-files/ Inoltre, segna la risposta corretta se lo è. – wkcamp

4
{% extends "public/base.html" %} 
{% block content %} 
<h1>Content goes here</h1> 
{% endblock %} 

O semplicemente creare about.html e includerlo dove si desidera nel proprio html principale.

Esempio:

{% extends "public/base.html" %} 
    {% block content %} 
     "Your code" 
    {% include "core/about.html" %} 
    {% endblock %} 
1

Diciamo tuo base.html si presenta così:

<html> 
    <body> 
     <!-- header code --> 
     {% block content %} 
     {% endblock %} 
     <!-- footer code --> 
    </body> 
<html> 

Poi, nel tuo altri file che si sarebbe fare questo:

{% extends "base.html" %} 
{% block content %} 
    <!-- Content here --> 
{% endblock %} 

Qualsiasi cosa messa dentro il tag del modello (del file esteso) del corpo verrebbe sovrascritto dal contenuto del file secondario, ma comunque ng al di fuori di quel tag verrebbe esteso o copiato in esso.

Qui ci sono the docs on the block tag

+1

Il nome del blocco dovrebbe essere il caso nei modelli principali e estesi. In questo caso, nell'altro file, il blocco dovrebbe iniziare con '{% block content%}', non '{% block body%}'. –

+0

Giusto. Modificato. –

Problemi correlati