How to use Thymeleaf to include html file into another html file
Solution 1
Change to
th:insert="templates/Navbar :: navbar"
and
th:fragment="navbar"
Configuration example:
import org.apache.commons.lang3.CharEncoding;
import org.springframework.context.annotation.*;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;
@Configuration
public class ThymeleafConfiguration {
@Bean
@Description("Thymeleaf template resolver serving HTML 5 emails")
public ClassLoaderTemplateResolver emailTemplateResolver() {
ClassLoaderTemplateResolver emailTemplateResolver = new ClassLoaderTemplateResolver();
emailTemplateResolver.setPrefix("root folder where all thymeleaf files/");
emailTemplateResolver.setSuffix(".html");
emailTemplateResolver.setTemplateMode("HTML5");
emailTemplateResolver.setCharacterEncoding(CharEncoding.UTF_8);
emailTemplateResolver.setOrder(1);
return emailTemplateResolver;
}
}
Solution 2
Try with:
th:replace="/navbar::navbar"
or
th:insert="/navbar::navbar"
It works for me. No need to specify "template/navbar"
.
Cody Ferguson
About me I'm a Associate Software Engineer at the Kohl's Department Store on the Omni-Channel Fulfillment team. I am working with IBM Optimizer, powered by Watson, and I am working on projects dealing with Kafka, Cassandra, Google's PubSub, and many Sterling products. I am interested in Android development, Artificial Intelligence, and developing a better understanding of programming and software engineering. Programming Languages currently known Java, C#, C++, Ruby, Assembly, C, Lisp, Ada
Updated on June 17, 2022Comments
-
Cody Ferguson almost 2 years
I have been looking at all of the resources available on how to include an html file into another html file using Thymeleaf's th:insert. I am wondering if anyone could tell me what I am doing wrong as I feel like this html looks exactly like the examples I have seen.
My index.html
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.thymeleaf.org "> <head> <title>Default Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div th:insert="templates/Navbar :: navbar"> </div> </body> </html>
My Navbar.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.thymeleaf.org "> <head> <meta charset="UTF-8"/> <title>NavigationBar</title> <link rel="stylesheet" type="text/css" media="all" href="../../css/NavBar.css" th:href="@{/css/NavBar.css}" /> </head> <body> <div> <div th:fragment="navbar" class="navbar"> <div class="navbar-inner"> <a th:href="@{/}" href="/home"> Home</a> <a th:href="@{/}" href="/help">Help</a> </div> </div> </div> </body> </html>
Also, here is my project's resource hierarchy via screen shot
If I put the code between the into the index.html and link the css file, the navbar shows up and works. So, I am not sure why the insert is not working. Here is my configuration file which has been edited based on examples below:
@Configuration public class WebPageControllerConfig { private SpringTemplateEngine templateEngine; private ServletContextTemplateResolver templateResolver; @Value("${WebController.startHour}") public String startHour; @Value("${WebController.endHour}") public String endHour; @Value("${WebController.numOfSkus}") public int numOfSkus; @Value("${WebController.skusToQuery}") public File skusToQuery; @Bean public ClassLoaderTemplateResolver webPageTemplateResolver(){ ClassLoaderTemplateResolver webPageTemplateResolver = new ClassLoaderTemplateResolver(); webPageTemplateResolver.setPrefix("templates/"); webPageTemplateResolver.setSuffix(".html"); webPageTemplateResolver.setTemplateMode("HTML5"); webPageTemplateResolver.setCharacterEncoding(CharEncoding.UTF_8); webPageTemplateResolver.setOrder(1); return webPageTemplateResolver; } /* Old way of trying to configure @Bean public MessageSource messageSource() {...} @Bean public ServletContextTemplateResolver setTemplateResolver(){...} @Bean public SpringTemplateEngine setTemplateEngine() {...} @Bean public ViewResolver viewResolver() {...} End of old configuration */ public String getStartHour() {return startHour;} public String getendHour() {return endHour;} public Object getnumOfSkus() {return numOfSkus;} public File getSkusToQuery(){return skusToQuery;} }