Thymeleaf - Herança de Templates \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 44 Min 48 Seg Tempo restante da oferta: 13 44 48 [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) Thymeleaf - Herança de Templates [ Java ](https://www.treinaweb.com.br/blog/categoria/java) # Thymeleaf - Herança de Templates Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. [ Cleyson Lima ](https://www.treinaweb.com.br/blog/autor/cleyson-lima) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments.png) No último artigo dessa série, vimos [como utilizar os fragments do Thymeleaf](https://www.treinaweb.com.br/blog/thymeleaf-reaproveitando-codigo-com-fragments/) para obter um maior reaproveitamento dos códigos de nossos templates. . Continuando essa série de artigos sobre Thymeleaf, veremos como podemos utilizar uma das funcionalidades mais interessantes das template engines, a herança de templates. ## Sobre a herança de templates Durante o desenvolvimento de nossas aplicações web é bem comum que por diversas vezes nossas páginas web possuam características semelhantes, como por exemplo uma barra de navegação, um rodapé, importações de arquivos css e js, etc. Uma forma de resolver esse problema seria com o uso dos fragments que falamos no post passado, porém da forma que foi apresentada não é uma solução muito boa, pois os fragments são um pequeno bloco de código que representa um determinado componente de nossas páginas, então teríamos um fragment para a barra de navegação e outro para o rodapé por exemplo, e todos esses fragments teriam que ser incluídos nas nossas páginas. Uma solução mais interessante seria sermos capazes de criar um template base que possui o que é comum para os demais templates da nossa aplicação e então os demais templates iriam herdar desse template base, logo iriam possuir todas as características do template base que foi herdado e também teriam suas próprias características. Na teoria tudo parece funcionar, mas na prática nos encontramos um problema, o Thymeleaf não possui uma funcionalidade de herança de templates. Então quer dizer que o Thymeleaf é uma template engine inferior? De maneira alguma, o que acontece é que o Thymeleaf não possui uma funcionalidade específica para a herança de templates como a maioria das template engines, porém é possível alcançar o mesmo resultado utilizando os fragments parametrizados. ## Fragments parametrizados Antes de falarmos sobre a implementação da herança de templates, primeiro precisamos falar sobre o que são e como utilizar fragments parametrizados. Podemos imaginar um fragment parametrizado como sendo uma função com parâmetros, então é basicamente um fragment que pode receber parâmetros e que pode ter seu comportamento ou exibição alterada de acordo com o parâmetro que for passado. ## Criando fragments parametrizados Para criarmos um fragment parametrizado é bem similar a criação de fragments que não recebem parâmetros, primeiro é preciso criar novo arquivo HTML que conterá o código do fragment, utilizamos novamente o atributo th:fragment na tag que envolve todo o código, a única diferença é que após o nome do fragment colocamos entre parênteses quais os parâmetros que o fragment em questão precisa receber. Vejamos um exemplo prático, vamos recriar o fragment do artigo passado, só que dessa vez ele irá receber um parâmetro. No exemplo acima o fragment `cabecalho` recebe um parâmetro chamado `texto` que deve ser passado por quem chamar esse fragment e então o valor passado para o parâmetro `texto` será inserido na tag `h1` pelo atributo `th:text`. ## Utilizando fragments parametrizados Para utilizar um fragment parametrizado não é muito diferente do que vimos no artigo passado, podemos utilizar um dos atributos `th:insert`, `th:include` ou `th:replace`, a diferença é que além de informamos qual fragment vamos inserir também devemos informar o valor dos parâmetros necessários. Vejamos o exemplo abaixo: Importante notar que o valor que está sendo passado como parâmetro na chamada do fragment `cabecalho` está entre aspas simples, pois o valor é um dado do tipo `string`. Com isso, quando o template acima for renderizado pelo Thymeleaf iremos obter o seguinte resultado em HTML: Dessa maneira o nosso fragment `cabecalho` é mais flexível, pois não exibe apenas valores estáticos e sim valores que são dinâmicos de acordo com os parâmetros que forem passados para o mesmo. ## Criando o template base Entendido o que são e como funcionam os fragments parametrizados, agora vamos ver como podemos utilizar tal funcionalidade para implementar uma herança de templates em nossos layouts. O primeiro passo é criarmos o nosso template base, é esse template que irá conter toda a estrutura base que os outros templates irão herdar, ou seja tudo aquilo que é comum em todas as páginas de nossa aplicação. Para isso vamos criar um template chamado `base.html` com o seguinte conteúdo: O que estamos fazendo no código acima é criando um fragment chamado layout que recebe um parâmetro chamado `conteudo`, perceba que o valor do parâmetro `conteudo` está sendo colocado na tag `main` através do atributo `th:include`, ou seja, o valor esperado pelo parâmetro `conteudo` é um outro fragment e isso é perfeitamente possível de ser feito com o Thymeleaf. ## 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 de nosso projeto. Para isso, é muito simples, basta fazer uso do fragment layout passando como parâmetro o conteúdo a ser inserido no template base. Para exemplificar, teremos dois templates, um para listagem de funcionários e outro para listagem de clientes, veja o código dos templates filhos abaixo. O que está acontecendo acima é que estamos dizendo que todo o conteúdo HTML de nossos templates filhos serão substituídos pelo conteúdo do fragment `layout` definido em nosso template `base.html`, porém estamos passando para o parâmetro do fragment `layout` toda a nossa tag `main`. Veja que durante a passagem do parâmetro estamos utilizando a sintaxe do Thymeleaf quando trabalhamos com fragments, o que você pode estar estranhando é que estamos passando um fragment chamando `main` mas não estamos informando o local onde o fragment está localizado, o que acontece é que quando omitimos o arquivo onde se localiza o fragment, o Thymeleaf busca por tal fragment no arquivo de template atual e também não é necessário definirmos a tag `main` como um fragment, pois é possível informar uma tag diretamente, como estamos fazendo nos exemplos acima. Agora, para ver isso funcionando vamos criar duas rotas para acessar as páginas com seus dados em questão, vamos então criar duas actions no nosso arquivo `HomeController.java`. Agora ao acessar a rota `/clientes` e `/funcionarios` teremos os seguintes resultados: ![Página com o resultado do uso da hernaça de templates na com a listagem de clientes](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/pagina-lista-de-clientes.jpg) ![Página com o resultado do uso da hernaça de templates na com a listagem de funcionários](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/pagina-lista-de-funcionarios.jpg) Toda a estrutura da página HTML criada no template base foi herdado, inclusive o cabeçalho e o rodapé definidos no arquivo `base.html` e apenas o conteúdo das páginas em questão foram alterados. Agora, para cada página que precisamos criar, basta herdar o nosso fragment `layout` e assim aproveitar toda a estrutura já pronta. [ ![Spring Framework - Templates com Thymeleaf](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/spring-boot.svg) Curso Spring Framework - Templates com Thymeleaf Conhecer o curso ](https://www.treinaweb.com.br/curso/spring-framewok-templates-com-thymeleaf) ## Conclusão Nesse artigo vimos como podemos fazer uso da herança de templates com uso dos fragments parametrizados do Thymeleaf. E com isso damos fim a nossa série de artigos sobre o Thymeleaf, mas os estudos não param por aqui, ainda existem diversas funcionalidades no Thymeleaf que não foram abordadas nessas série e recomendo fortemente que continuem seus estudos nessa incrível template engine do ecossistema Java, uma ótima fonte de estudo é a [documentação oficial](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html). - [ #Spring Boot ](https://www.treinaweb.com.br/blog/tag/spring-boot) - [ #thymeleaf ](https://www.treinaweb.com.br/blog/tag/thymeleaf) - [ #desenvolvimento web ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-web) Autor ![Cleyson Lima](//secure.gravatar.com/avatar/db30efb102ffa5d5204cebe12060b111?d=mm) ## Cleyson Lima Professor, programador, fã de One Piece e finge saber cozinhar. Cleyson é graduando em Licenciatura em Informática pelo IFPI - Campus Teresina Zona Sul, nos anos de 2019 e 2020 esteve envolvido em vários projetos coordenados pela secretaria municipal de educação da cidade de Teresina, onde o foco era introduzir alunos da rede pública no mundo da programação e robótica. Hoje é instrutor dos cursos de Spring na TreinaWeb, mas diz que seu coração sempre pertencerá ao Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/cleyson-lima) ## 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/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Reaproveitando código com fragments ](https://www.treinaweb.com.br/blog/thymeleaf-reaproveitando-codigo-com-fragments) Neste artigo veremos como utilizar a funcionalidade de fragments da template engine Thymeleaf para reaproveitarmos o código de nossos templates. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/THYMELEAF-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ O que é o Thymeleaf? ](https://www.treinaweb.com.br/blog/o-que-e-o-thymeleaf) Neste artigo veremos o que é e os principais recursos de uma das template engines mais utilizadas no ecossistema Java, o Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/13150804/template-engine-1-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O que é Template Engine? ](https://www.treinaweb.com.br/blog/o-que-e-template-engine) Veja neste artigo o que é Template Engine e as principais opções do mercado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/THYMELEAF-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Estruturas de condição e repetição ](https://www.treinaweb.com.br/blog/thymeleaf-estruturas-de-condicao-e-repeticao) Neste artigo veremos como utilizar estruturas de condição e as estruturas de repetição da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/THYMELEAF-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf, veja como enviar e exibir dados em seus templates ](https://www.treinaweb.com.br/blog/thymeleaf-veja-como-enviar-e-exibir-dados-em-seus-templates) Neste artigo veremos como enviar informações de aplicação Spring Boot para serem exibidas em templates do Thyemeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/01/WEB-JARS-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ WebJars: Simplifique o gerenciamento de dependências front-end ](https://www.treinaweb.com.br/blog/webjars-simplifique-o-gerenciamento-de-dependencias-front-end) Otimize seu desenvolvimento Java! Descubra como o WebJars simplifica o gerenciamento de dependências front-end. Integre com facilidade e eficiência. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Spring Boot - Trabalhando com Controllers ](https://www.treinaweb.com.br/blog/spring-boot-trabalhando-com-controllers) Veja nesse artigo como trabalhar com controllers em uma aplicação Spring Web MVC com Spring Boot. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/o-que-e-o-spring-boot-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ O que é o Spring Boot? ](https://www.treinaweb.com.br/blog/o-que-e-o-spring-boot) Neste artigo veremos o que é o Spring Boot e como ele pode nos auxiliar no desenvolvimento de aplicações Spring. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/deploy-de-uma-aplicacao-spring-boot-no-heroku-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Deploy de uma aplicação Spring Boot no Heroku ](https://www.treinaweb.com.br/blog/deploy-de-uma-aplicacao-spring-boot-no-heroku) Neste artigo veremos como podemos realizar o deploy de uma aplicação Spring Boot na nuvem com o Heroku. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/DEPLOY-SPRING-DIGITAL-OCEAN-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Deploy de uma aplicação Spring Boot na DigitalOcean ](https://www.treinaweb.com.br/blog/deploy-de-uma-aplicacao-spring-boot-na-digitalocean) Aprenda nesse artigo como realizar o Deploy de uma aplicação Spring Boot em uma VPS da DigitalOcena, usando ferramentas como o Nginx. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no MacOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no MacOS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-linux-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no Linux ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-linux) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no Linux 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 44min 48s** - 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