本文介绍了如何在HTML中添加Thymeleaf命名空间，并详细配置了Thymeleaf的各项参数，还展示了如何在模板中使用公共部分和访问方式。通过实例讲解了如何利用Thymeleaf进行前后端分离项目的高效开发。
首先需要在html文件的html标签中添加thymeleaf的命名空间。
xmlns: 属性 xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
对thymeleaf进行配置：
# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=true
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否正确（默认值 :true ）
spring.thymeleaf.check-template-location=true
#Content-Type 的值（默认值： text/html ）
spring.thymeleaf.content-type=text/html
# 开启 MVC Thymeleaf 视图解析（默认值： true ）
spring.thymeleaf.enabled=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html
template文件夹是thymeleaf的默认目录，放在该目录下的html可以直接被thymeleaf访问到，同时也添加了默认后缀名。
访问的形式：
@: 访问form目录下的form_layouts.html
th:href="@{/form_layouts}"
等价于，点击超链接，跳转到localhost::8080/form_layouts
然后由我们的controller控制跳转到forms目录下的form_layouts.html
href="forms/form_layouts.html"
<li class="menu-list"><a href=""><i class="fa fa-tasks"></i> <span>Forms</span></a>
<ul class="sub-menu-list">
<li><a th:href="@{/form_layouts}"> Form Layouts</a></li>
<li><a th:href="@{/form_advanced_components}"> Advanced Components</a></li>
<li><a th:href="@{/form_wizard}"> Form Wizards</a></li>
<li><a th:href="@{/form_validation}"> Form Validation</a></li>
<li><a th:href="@{/editors}"> Editors</a></li>
<li><a th:href="@{/inline_editors}"> Inline Editors</a></li>
<li><a th:href="@{/pickers}"> Pickers</a></li>
<li><a th:href="@{/dropzone}"> Dropzone</a></li>
</ul>
</li>
Thymeleaf对公共部分抽取
新建一个common.html，使用如下语法进行抽取
th:fragment="公共名"
common.html
<head th:fragment="commonHead">
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet">
<script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
<script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
</head>
可以在其他html文件中访问抽取的公共部分，上图即head部分
要替换的文件.html
...
<div th:replace="common ::commonHead"></div>
...
意为：在common.html文件取commonHead的公共部分。
扫一扫
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
