Flask Como herdar templates com Jinja2

Veja neste artigo como herdar templates utilizando o Jinja2.

Fagner Pinheiro 12 de fevereiro de 2021

É 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.

Flask -  Templates com Jinja2
Curso de Flask - Templates com Jinja2
CONHEÇA O CURSO

Vale 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.

Flask - Fundamentos
Curso de Flask - Fundamentos
CONHEÇA O CURSO

Isso 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:

Listagem de clientes

Listagem de funcionários

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.

Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Fagner Pinheiro
    Fagner Pinheiro

    Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python.

    Posts desse Autor

Artigos relacionados