Estendendo os templates
Outra coisa boa que o Django tem para você é o template extending - extensão de templates. O que isso significa? Significa que você pode usar as mesmas partes do seu HTML em diferentes páginas do seu site.
Templates ajudam quando você quer usar a mesma informação ou layout em mais de um lugar. Você não precisa se repetir em todos os arquivos. E, caso queira mudar algo, você não precisa fazê-lo em todos os templates, apenas em um!
Criando um template base
Um template base é o template mais básico sobre o qual você construirá em cada página do seu site.
Vamos criar um arquivo base.html na pasta blog/templates/blog/:
blog
└───templates
└───blog
base.html
post_list.htmlEm seguida, abra o arquivo no editor de código e copie tudo de post_list.html para base.html, desse jeito:
<div data-gb-custom-block data-tag="load"></div>
<html>
<head>
<title>Django Girls blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="
<div data-gb-custom-block data-tag="static" data-0='css/blog.css'></div>">
</head>
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
<div data-gb-custom-block data-tag="for">
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h1><a href="">{{ post.title }}</a></h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Então, em base.html, substitua todo o seu <body> (tudo entre <body> e </body>) por isso:
<body>
<div class="page-header">
<h1><a href="/">Django Girls Blog</a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
<div data-gb-custom-block data-tag="block">
</div>
</div>
</div>
</div>
</body>Você pode ver que essa ação substituiu tudo a partir de {% for post in posts %} até {% endfor %} por:
<div data-gb-custom-block data-tag="block">
</div>
Mas por quê? Você acabou de criar um bloco! Você usou o a etiqueta de template (template tag) `
` para criar uma área que terá HTML inserido nela. Esse HTML virá de outro template que vai estender este template (`base.html`). Nós vamos te mostrar como fazer isso já já.
Agora, salve base.html e abra novamente o seu blog/templates/blog/post_list.html no editor de código. Remova tudo acima de {% for post in posts %} e abaixo de {% endfor %}. Quando terminar, o arquivo deve estar parecido com isso:
<div data-gb-custom-block data-tag="for">
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
</div>Queremos usar isso como parte do nosso template para todos os blocos de conteúdo. É hora de adicionar as tags (etiquetas) de blocos neste arquivo!
Você quer que sua etiqueta de bloco coincida com a etiqueta no seu arquivo base.html. Você também quer que inclua todo o código que pertence aos seus blocos de conteúdo. Para isso, coloque tudo entre {% block content %} e {% endblock %}. Assim:
<div data-gb-custom-block data-tag="block">
<div data-gb-custom-block data-tag="for">
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
</div>
</div>
Só falta uma coisa. Precisamos juntar estes dois templates. Isto é o que significa 'estender templates'! Vamos fazer isso adicionando uma etiqueta de extensão ao início do arquivo. Assim:
<div data-gb-custom-block data-tag="extends" data-0='blog/base.html'></div>
<div data-gb-custom-block data-tag="block">
<div data-gb-custom-block data-tag="for">
<div class="post">
<div class="date">
{{ post.published_date }}
</div>
<h2><a href="">{{ post.title }}</a></h2>
<p>{{ post.text|linebreaksbr }}</p>
</div>
</div>
</div>É isso! Salve o arquivo e veja se o seu site ainda está funcionando corretamente. :)
Se você receber o erro
TemplateDoesNotExist, significa que não há um arquivo emblog/base.htmle você está rodando orunserverna janela do terminal. Tente encerrá-lo (apertando Ctrl+C -- as teclas Control e C juntas) e reiniciá-lo rodando o comandopython manage.py runserver.
Last updated