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

Cody Ferguson :

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 enter image description here

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

使用gulp-file-include从HTML模板到文件的相对路径

来自分类Java

Thymeleaf中的动态HTML

来自分类Javascript

HTML <input type ='file'>文件选择事件

来自分类Dev

在索引file.html中包含html代码

来自分类Dev

PHP在file_get_contents中对$ use_include_path的定义不清楚

来自分类Dev

Laravel Blade @include .html文件

来自分类Dev

如何显示HTML中的源file.php?

来自分类Dev

HTML Input =“ file”接受属性文件类型(CSV)

来自分类Dev

file_get_contents无法从正确的URL检索html

来自分类Dev

IE 11使用HTML input = file标记时锁定文件

来自分类Dev

如何随机分配file_get_html的用户代理?

来自分类Dev

HTML输入type =“ file”在Chrome中文件过多?

来自分类Dev

HTML,JavaScript和ERR_FILE_NOT_FOUND错误

来自分类Dev

使用Ajax和Javascript从html按钮运行php File

来自分类Dev

如何使用Django在HTML按钮上执行file.py?

来自分类Java

无法加载位于file:///android_asset/file.html的网页,因为:net :: ERR_FILE_NOT_FOUND

来自分类Dev

Thymeleaf:ClassNotFoundException:org.unbescape.html.HtmlEscape

来自分类Java

Spring Boot和Thymeleaf Neko HTML错误

来自分类Java

无法通过Thymeleaf从HTML找到相关的JS

来自分类Java

使用Thymeleaf在HTML上显示数据

来自分类Java

Spring Boot Thymeleaf:如何包含html文件

来自分类Dev

Thymeleaf-严格的HTML解析问题

来自分类Javascript

如何在Canvas上从HTML5 File API绘制图像?

来自分类Dev

完成页面加载后,PHP DOM函数file_get_html调用

来自分类Dev

net :: ERR_FILE_NOT_FOUND文件:///android_asset/www/index.html未找到

来自分类Javascript

HTML5 File.slice方法实际上在做什么?

来自分类Dev

在简单的html页面中,本地css文件不会以相对,绝对或绝对为file:///前缀加载

来自分类Javascript

如何在“ --allow-file-access-from-files”模式下使用Chrome启动HTML?

来自分类Dev

npm run build不起作用。“在file://上打开index.html将不起作用。”

TOP 榜单

热门标签

归档