É comum que tenhamos diversas páginas que, muitas vezes, possui muitas características semelhantes entre elas, seja uma barra de navegação, arquivos de css e js, etc. Para compartilhar essas informações entre diferentes páginas, utilizamos o conceito de herança em nossos templates. Sendo assim, neste artigo veremos como herdar templates com Jinja2.
Criando template base
O primeiro passo para reaproveitar a base de um template utilizando a herança no Jinja2 é criar o template base. É este template que vai definir toda a estrutura base que os outros templates irão herdar.
Para isso, vamos criar um template chamado base.html em nossa aplicação Flask com o seguinte conteúdo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Listagem</h1>
{% block conteudo %}
{% endblock conteudo %}
</body>
</html>
Dentro da tag body temos o que chamamos de blocos de conteúdo. São nestes blocos que adicionaremos os conteúdos das páginas que herdarão a página base.
Curso Flask - Templates com Jinja2
Conhecer o cursoVale lembrar que podemos criar quantas tags forem necessárias, desde que possuam nomes diferentes para que possamos referenciá-las nos templates filhos.
Herdando o template base
Agora que já possuímos nosso template base, estamos prontos para herdá-lo e, assim, reaproveitar boa parte do código HTML nas páginas filhas do nosso projeto.
Para isso, é muito simples, basta definir qual o nome do template a ser herdado e qual conteúdo será inserido nos blocos definidos anteriormente.
Para exemplificar, teremos dois templates, um para listagem de funcionários e outro para listagem de clientes e seu código é bem similar, como podemos ver abaixo:
{% extends 'base.html' %}
{% block conteudo %}
{% for cliente in clientes %}
<h1>{{cliente}}</h1>
{% endfor %}
{% endblock conteudo %}
{% extends 'base.html' %}
{% block conteudo %}
{% for funcionario in funcionarios %}
<h1>{{funcionario}}</h1>
{% endfor %}
{% endblock conteudo %}
Basicamente, estamos definindo que estes arquivos herdarão do arquivo base.html criado anteriormente e, no bloco conteúdo, iremos adicionar as informações relativas às páginas em questão.
Curso Flask - Fundamentos
Conhecer o cursoIsso faz com que não precisemos, por exemplo, escrever toda a estrutura padrão de uma página HTML, apenas o conteúdo das páginas.
Com isso, criamos duas rotas para acessar as páginas com seus dados em questão, como podemos ver abaixo:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/clientes")
def clientes():
clientes = ["Cliente João da Silva", "Cliente Maria da Silva", "Cliente Joana da Silva",
"Cliente Pedro da Silva", "Cliente José da Silva"]
return render_template('clientes.html', clientes=clientes)
@app.route("/funcionarios")
def funcionarios():
funcionarios = ["Funcionario João da Silva", "Funcionario Maria da Silva", "Funcionario Joana da Silva",
"Funcionario Pedro da Silva", "Funcionario José da Silva"]
return render_template('funcionarios.html', funcionarios=funcionarios)
if __name__ == "__main__":
app.run()
Agora, ao acessar as rotas /clientes e /funcionarios, teremos o seguinte resultado:
Toda a estrutura da página HTML criada no template base foi herdado, inclusive a string “Listagem” e apenas o conteúdo das páginas em questão foram alterados.
Agora, para cada página que precisemos criar, basta herdá-la do arquivo base.html e, assim, aproveitar toda a estrutura já pronta.
