Spring MVC 如何使用Thymeleaf将html文件包含到另一个html文件中

dgsult0t 于 2022-12-04 发布在 Spring

关注(0)|答案(2)|浏览(236)

我一直在寻找所有关于如何使用Thymeleaf的th：insert将一个html文件包含到另一个html文件中的资源。我想知道是否有人能告诉我我做错了什么，因为我觉得这个html看起来和我看到的例子完全一样。
我的索引. 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>

我的导航栏. 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>

另外，通过屏幕截图

显示了项目的资源层次结构
如果我把之间的代码放到index.html中并链接css文件，导航栏会显示并工作。所以，我不确定为什么插入不工作。下面是我的配置文件，它是根据下面的例子编辑的：

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

spring-mvc

来源：https://stackoverflow.com/questions/46330830/how-to-use-thymeleaf-to-include-html-file-into-another-html-file

2条答案

按热度按时间

rbl8hiat1#

更改为

th:insert="templates/Navbar :: navbar"

和

th:fragment="navbar"

配置示例：

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

赞(0）回复(0）举报 2022-12-04

yzckvree2#

尝试使用：
"/导航栏：：导航栏”
或
"/导航栏：：导航栏”
它对我有效。不需要指定"template/navbar"。

赞(0）回复(0）举报 2022-12-04