如何使用 Thymeleaf 将 html 文件包含到另一个 html 文件中
Posted
技术标签:
【中文标题】如何使用 Thymeleaf 将 html 文件包含到另一个 html 文件中【英文标题】：How to use Thymeleaf to include html file into another html file 【发布时间】：2018-03-02 00:47:21 【问题描述】：我一直在查看有关如何使用 Thymeleaf 的 th:insert 将 html 文件包含到另一个 html 文件中的所有可用资源。我想知道是否有人能告诉我我做错了什么，因为我觉得这个 html 看起来和我看到的例子一模一样。
我的 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>
我的导航栏.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;
【问题讨论】：
它是th:fragment。不是th:fragments。此外，您必须使用正确的路径。现在你假设你的 html 文件在同一个目录中，但它们不是。
谢谢！所以，我尝试了下面的答案，但没有奏效。然后，基于没有正确的路径，我将 th:insert="../templates/navbar :: navbar" 更改为使用正确的路径。这也没有奏效。还有什么提示吗？
【参考方案1】：
改成
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;
【讨论】：
所以，我尝试了这个，但没有成功。你是不是也暗示要取出class='"navbar"？ 另外，我的 NavBar.html 文件有一个大写 N，它应该是 templates/Narbar :: navbar 吗？ 我想，是的。如果这仍然不起作用，请检查您的百里香后缀/前缀设置。 抱歉我的无知，如何设置 Thymeleaf 设置。我在教程文档中看到它谈到了模板解析器，他们使用 templateResolver.setPrefix 和 templateResolver.setSuffix，但我不知道在哪里设置这些。在我的控制器类中？ 有不同的方法。它可以是@Configuration 类或属性。例如，***.com/questions/29479403/…。【参考方案2】：尝试：
th:replace="/navbar::navbar"
或
th:insert="/navbar::navbar"
它对我有用。无需指定"template/navbar"。
【讨论】：
以上是关于如何使用 Thymeleaf 将 html 文件包含到另一个 html 文件中的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 thymeleaf 格式化 HTML 中的数字字符串
Spring Thymeleaf 如何使用 select 和 option html 标签将特定值保存在数据库中