thymeleaf 模板使用提取公共页面

最新推荐文章于 2022-03-05 19:31:19 发布

weixin_30337157

最新推荐文章于 2022-03-05 19:31:19 发布

阅读量535

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/zxguan/p/8388042.html

版权

切记！！！thymeleaf模板的使用，姿势很重要！！！姿势不对，可能导致样式、js等的使用受到影响

前台开发中，由于页面目录结构不同，可能导致引入的公共页面中的的跳转路径在部分页面能用，部分页面不能用，这时可以通过为页面提供相同层次的目录结构避免该问题

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- https://mvnrepository.com/artifact/net.sourceforge.nekohtml/nekohtml -->
<!-- 不闭合标签，添加这个引用，就OK了 -->
<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.22</version>
</dependency>


spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.content-type=text/html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.cache-period=0
spring.template.cache=false

一、replace，使用同一文件夹下的 common_navigation 文件内容，替换此 div标签所在位置

<!--导航栏开始-->
　　 <!-- replace后跟templates下文件结构 -->
    <div th:replace="common_navigation"></div>
<!--导航栏结束-->

二、common_navigation.html文件，文件内容

<!-- 此处代码没有实际意义，只是为了演示效果 -->
<div class="banner-main">
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
</div>

三、效果如下

<!--导航栏开始-->
    <!-- 此处代码没有实际意义，只是为了演示效果 -->
    <div class="banner-main">
        <!-- Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css" rel="stylesheet" type="text/css">
        <link href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet">
    </div>
<!--导航栏结束-->