将 Html 模板转换为 Thymeleaf 模板答案

【问题标题】：Converting Html Template to Thymeleaf Template将 Html 模板转换为 Thymeleaf 模板
【发布时间】：2017-05-07 07:00:39
【问题描述】：

我正在尝试为我的 spring 项目转换我的 html5 模板。在这个项目中，我使用百里香模板。为了进行转换，我将所有脚本 src 更改为 th:src 或所有样式文件（css 文件更改为）th:href 等。但设计似乎错误。

<script th:src="@{/resources/js/jquery.min.js}" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Fonts -->
<link th:href="@{http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700}" rel='stylesheet' type='text/css'/>
<link th:href="@{http://fonts.googleapis.com/css?family=Pacifico}" href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link th:href="@{/resources/font-awesome/css/font-awesome.css}" href='font-awesome/css/font-awesome.css' rel="stylesheet" type="text/css"/>
<!-- Bootstrap -->
<link th:href="@{/resources/bootstrap/css/bootstrap.min.css}" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Main Style -->
<link rel="stylesheet" th:href="@{/resources/style.css}" href="style.css" />

<!-- owl Style -->
<link rel="stylesheet" th:href="@{/resources/css/owl.carousel.css}" href="css/owl.carousel.css" />
<link rel="stylesheet" th:href="@{/resources/css/owl.transitions.css}" href="css/owl.transitions.css" />

<!-- rating -->
<script th:src="@{/resources/js/rate/jquery.raty.js}" src="js/rate/jquery.raty.js"></script>
<script th:src="@{/resources/js/labs.js}" src="js/labs.js" type="text/javascript"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" th:src="@{/resources/js/product/lib/jquery.mousewheel-3.0.6.pack.js}" src="js/product/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- fancybox -->
<script type="text/javascript" th:src="@{/resources/js/product/jquery.fancybox.js?v=2.1.5}" src="js/product/jquery.fancybox.js?v=2.1.5"></script>

<!-- custom js -->
<script th:src="@{/resources/js/shop.js}" src="js/shop.js"></script>

这些是转换后的标签。而且当我执行我的页面时，我得到如下所示的异常。该图像在我的 bootstrap/img 文件夹中不存在，模板文件夹中也不存在。但是模板似乎在没有 Thymeleaf 的情况下工作。

jquery.fancybox.js?v=2.1.5:1994 GET http://localhost:8080/resources/bootstrap/img/glyphicons-halflings.png 404 (Not Found)

【问题讨论】：

它没有被百里香叶处理。 th:src 应该替换 src 属性。你真的在你的应用程序中集成了百里香吗？ thymeleaf.org/doc/tutorials/3.0/…
我已经这样做了。但是有些文件运行良好，有些文件似乎不行
它们是否有可能与配置不匹配的不同路径（前缀或后缀）？我知道这将是一个简单的解决方案，但有时这是监督错误；）最后一个问题与引导相关。 Bootstrap 附带了此处引用的 glyphicons 字体。但首先你应该解决基本的百里香叶问题。

标签： html css spring-mvc thymeleaf template-engine

【解决方案1】：

对于那些带有“http://”前缀的资源，不需要使用th:href。对于站内资源，“/resources/bootstrap/img/glyphicons-halflings.png”，请去掉“/resources”，Spring Framework默认追加。

以下来自 Spring 文档供您参考。默认情况下，Spring 将从名为 /static（或 /public 或 / resources 或 /META-INF/resources）在类路径中或从 ServletContext 的根目录。它使用 Spring MVC 中的 ResourceHttpRequestHandler，因此您可以通过以下方式修改该行为添加您自己的 WebMvcConfigurerAdapter 并覆盖 addResourceHandlers 方法。

【讨论】：