As tags extends
e block
funcionam em conjunto e servem para construir templates com ideias de herança, sobreposição e reuso.
Em um template você pode definir inúmeras tags block
, as quais podem posteriormente ser sobrepostas ou reutilizadas por templates "filhos". Os filhos tem a intenção de utilizar os templates "pais" através do block extends
, que importa o template e agora o filho passa a "ver" os blocos do pai. Os filhos irão preencher as tags block
com o conteúdo desejado, ou mesmo reutilizar o que já está no pai com o comando super
.
Aqui abaixo um exemplo completo retirado da documentação do Jinja2:
Arquivo base.html
que será utilizado como template (pai) para os outros filhos.
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by <a href="http://domain.invalid/">you</a>.
{% endblock %}
</div>
</body>
</html>
Arquivo child.html
que "estende" o pai base.html
, sobrescreve alguns block
que deseja e também utiliza porções do código do pai usando super()
.
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome to my awesome homepage.
</p>
{% endblock %}
Perceba o uso do comando extends
antes de iniciar os blocos. É importante salientar que os blocos devem ser únicos no arquivo, ou seja, você não pode definir múltiplos blocos de mesmo nome. Essa limitação existe para que o filho saiba exatamente qual porção de bloco preencher. Além disso, caso queira reutilizar o mesmo bloco várias vezes no seu template, basta utilizar o comando self.bloco()
onde bloco()
é o nome do bloco que deseja reaproveitar.