1
Hello. I am trying to make a simple import of a code snippet via th:insert from Hymeleaf, but something is not going well. From what I read in the documentation, I don’t think there’s anything wrong with it, but because I’m new using it, I think I might have missed something. I declare the snippet this way in the header.html file:
<header th:fragment="menu">
...
</header>
and import it this way into my simple fileHome.html:
<div th:insert="~{header :: menu}"></div>
When I restart the project and open the browser, the interpretation occurs like this:
I mean, he doesn’t understand how he should actually understand.
@Configuration
public class ConfiguracaoSpringMVC extends WebMvcConfigurerAdapter {
//Esse método configura o thymeleaf
@Bean
public SpringTemplateEngine templateEngine (SpringResourceTemplateResolver resolver){
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(resolver);
return templateEngine;
}
@Override
public void addViewControllers (ViewControllerRegistry registry){
registry.addRedirectViewController("/","animais/listar");
registry.addRedirectViewController("/home","animais/listar");
}
}
HTML of the header:
<!DOCTYPE html>
<html lang="pt-br" xmlns:th="http://www.thymeleaf.org">>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header th:fragment="menu">
<nav class="alteracoes-navbar navbar navbar-expand-lg">
<div class="container">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="" class="nav-link"><img src="../img/logo_superior1.png" width="50" height="50"
alt="CatDog"/></a>
</li>
<li class="liindex nav-item">
<a th:href="@{/ocorrencias/listar}" class="alink nav-link">Ocorrências</a>
</li>
<li class="liindex nav-item">
<a href="contato.html" class="alink nav-link">Contato</a>
</li>
<li class="liindex nav-item">
<a href="outros/localizacao.html" class="alink nav-link">Localização</a>
</li>
<li class="liindex nav-item">
<a href="sobre.html" class="alink nav-link">Sobre nós</a>
</li>
<li class="liindex nav-item">
<button type="button" class="btnpadrao btn btn-sm" data-toggle="modal" data-target="#loginModal">
Entrar
</button>
</li>
<li class="lifacebook nav-item">
<a target="_blank" href="https://www.facebook.com/groups/275221866151012/"><img
class="imgimagemfacebook" src="../img/facebook.png"/></a>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
HTML of the simpleHome:
<!DOCTYPE html>
<html lang="pt-br"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:div="http://www.w3.org/1999/html">
<head th:fragment="cabecalho">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>CatDog</title>
<link href="../css/style.css" rel="stylesheet"/>
<link href="/webjars/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="body-config">
<div th:insert="~{header :: menu}"></div>
<main class="main-config">
<div style="background-color: white" class="centralizado jumbotron fundoprincipal">
<div th:if="animais != null" class="container">
<div class="row">
<div th:each="animal : ${listaDeAnimais}" class="col-sm-6 col-md-4">
<div class="card-config card">
<img src="../img/gatopainel.png" class="card-img-top" alt="Foto do animal"/>
<div class="card-body">
<h5 class="card-title" th:text="${animal.nomeAnimal}"></h5>
<p class="card-text" th:text="${animal.historiaAnimal}"></p>
<p class="card-text">
<small class="text-muted">Postado em</small>
<small th:text="${animal.dataEncontroAnimal}"></small>
<small th:text="${animal.idAnimal}" hidden="hidden"></small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!--Corrigir a forma como está buscando os scripts-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
</body>
</html>
Project structure:
Pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>br.com.welberdev</groupId>
<artifactId>ajudaf</artifactId>
<version>1.0-SNAPSHOT</version>
<!--Aqui foi declarada a versão do spring e, portanto, as dependencias não precisam-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.10.RELEASE</version>
</parent>
<!--Fim-->
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!--Dependências padrão para o Spring. (O starter garante um pacote com tudo que precisamos, sem aquele monte de importações)-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<!--Fim-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.1.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<!--Plugin para comunicação do spring com o maven-->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<!--Fim-->
</plugins>
</build>
</project>