How to use Thymeleaf to include html file into another html file

Question

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;}
}

It's th:fragment. Not th:fragments. Also you must use correct paths. Right now you are assuming that your html files are in the same directory but they're not. — Juan Carlos Mendoza
– Juan Carlos Mendoza, Commented Sep 20, 2017 at 20:05
Thanks! So, I tried the below answer and it didn't work. Then, based off not having the correct path, I changed th:insert="../templates/navbar :: navbar" to use the correct path. This also didn't work. Any further hints? — Cody Ferguson
– Cody Ferguson, Commented Sep 20, 2017 at 20:31

egorlitvinenko · Accepted Answer · 2017-09-23 14:50:59Z

6

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;
    }
}

edited Sep 23, 2017 at 14:50

answered Sep 20, 2017 at 20:05

egorlitvinenko

2,7762 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Cody Ferguson Over a year ago

So, I tried this, but it did not work. Are you also implying to take out class='"navbar"?

Cody Ferguson Over a year ago

Also, with my NavBar.html file having a capital N, should it be templates/Narbar :: navbar ?

egorlitvinenko Over a year ago

I suppose, yes. If this still not work, check your thymeleaf suffix/prefix settings.

Cody Ferguson Over a year ago

Sorry for my ignorance, how to I set the Thymeleaf settings. I see in the tutorial document it talks about the Template Resolver and they use templateResolver.setPrefix and templateResolver.setSuffix, but I do not know where to set these. In my controller class?

egorlitvinenko Over a year ago

There are different approaches. It could be @ Configuration class or properties. For example, stackoverflow.com/questions/29479403/….

|

Vitalii Dmitriev · Accepted Answer · 2019-10-09 03:50:13Z

1

Try with:

th:replace="/navbar::navbar"

or

th:insert="/navbar::navbar"

It works for me. No need to specify "template/navbar".

edited Oct 9, 2019 at 3:50

Vitalii Dmitriev

8091 gold badge11 silver badges21 bronze badges

answered Dec 11, 2018 at 5:19

MangduYogii

9851 gold badge10 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to use Thymeleaf to include html file into another html file

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related