Como herdar templates com Jinja2 \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 48 Min 40 Seg Tempo restante da oferta: 13 48 40 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como herdar templates com Jinja2 [ Flask ](https://www.treinaweb.com.br/blog/categoria/flask) # Como herdar templates com Jinja2 Veja neste artigo como herdar templates utilizando o Jinja2. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/HERDANDO-TEMPLATES-JINJA.png) É 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](https://www.treinaweb.com.br/blog/o-que-e-o-jinja2/ "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: ```html Title Listagem {% block conteudo %} {% endblock conteudo %} ``` 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. [ ![Ruby on Rails - Testes unitários](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ruby-on-rails.svg) Curso Ruby on Rails - Testes unitários Conhecer o curso ](https://www.treinaweb.com.br/curso/testes-unitarios-em-aplicacoes-rails) 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: ```python {% extends 'base.html' %} {% block conteudo %} {% for cliente in clientes %} {{cliente}} {% endfor %} {% endblock conteudo %} ``` ```python {% extends 'base.html' %} {% block conteudo %} {% for funcionario in funcionarios %} {{funcionario}} {% 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. [ ![Slim - Microframework PHP](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/slim.svg) Curso Slim - Microframework PHP Conhecer o curso ](https://www.treinaweb.com.br/curso/slim-completo) 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](https://www.treinaweb.com.br/blog/como-enviar-e-exibir-dados-em-templates-com-jinja2/ "páginas com seus dados") em questão, como podemos ver abaixo: ```python 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](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/listagem-clientes.png) ![Listagem de funcionários](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/listagem-funcionarios.png) 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. - [ #Python ](https://www.treinaweb.com.br/blog/tag/python) - [ #Flask ](https://www.treinaweb.com.br/blog/tag/flask) - [ #jinja2 ](https://www.treinaweb.com.br/blog/tag/jinja2) Autor ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm) ## 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. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/10111056/DJANGO-TEMPLATES-400x280.png) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) 8 anos atrás ## [ Herdando templates com Django ](https://www.treinaweb.com.br/blog/herdando-templates-com-django) Veja neste artigo como herdar templates no Django e, assim, facilitar a criação de páginas HTML com um grande reaproveitamento de código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/05114901/ORLEANS-NET-CORE-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Criando uma aplicação distribuída com ASP.NET Core e o Microsoft Orleans ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-distribuida-com-asp-net-core-e-o-microsoft-orleans) Veja o exemplo de uma aplicação ASP.NET Core acessando os dados de um servidor cluster definido com o Microsoft Orleans. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/enviando-e-mails-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Enviando e-mails no ASP.NET Core ](https://www.treinaweb.com.br/blog/enviando-e-mails-no-asp-net-core) O .NET possui um módulo nativo para o envio de e-mails. Entretanto, veja como facilitar este processo utilizando a biblioteca Coravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/16113045/GRPC-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Serviços gRPC no ASP.NET Core ](https://www.treinaweb.com.br/blog/servicos-grpc-no-asp-net-core) Aprenda o que é gRPC e como criar um serviço com esta tecnologia no ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/24104425/heranca-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 8 anos atrás ## [ Utilizando herança no Python ](https://www.treinaweb.com.br/blog/utilizando-heranca-no-python) Veja na prática como usar herança no Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/hybrid-orm-repodb-no-asp-net-core-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ Utilizando o hybrid ORM RepoDb em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/utilizando-o-hybrid-orm-repodb-em-uma-aplicacao-asp-net-core) Um meio termo entre o Dapper e o Entity Framework, o hybrid ORM RepoDb é uma ótima opção de ORM para aplicações intermediárias. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/15020508/rsz_bridge-246913_1920-400x280.png) [ Orientação a Objetos ](https://www.treinaweb.com.br/blog/categoria/orientacao-a-objetos) 8 anos atrás ## [ Os pilares da orientação a objetos ](https://www.treinaweb.com.br/blog/os-pilares-da-orientacao-a-objetos) O paradigma orientado a objetos é um dos mais utilizados no mercado de trabalho. Neste artigo, veremos os pilares da orientação a objetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Como criar comandos customizados no Django ](https://www.treinaweb.com.br/blog/como-criar-comandos-customizados-no-django) Aprenda a criar comandos customizados no Django para automatizar tarefas, personalizar funcionalidades e integrar sistemas externos! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/ARTIGO-DART-400x280.jpg) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 4 anos atrás ## [ Guia da linguagem dart ](https://www.treinaweb.com.br/blog/guia-da-linguagem-dart) Nesse guia da linguagem Dart você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Dart. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/C-SHARP-PROPRIEDADES-INIT-RECORD-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ C# 9.0 - Propriedades init e record ](https://www.treinaweb.com.br/blog/c-9-0-propriedades-init-e-record) Já estamos no C# 9.0, a nova versão lançada no .NET Conf 2020 trouxe uma série de novos recursos, veja neste artigo dois deles: propriedades init e record. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/IDE-PYTHON-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Orientação a objetos em Python ](https://www.treinaweb.com.br/blog/orientacao-a-objetos-em-python) Veja neste artigo os principais conceitos do paradigma orientação a objetos e como eles se aplicam no Python. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **13h 48min 40s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58