thymeleaf 模板使用 提取公共页面

thymeleaf 模板使用 提取公共页面

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

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

---

  

    org.springframework.boot
    spring-boot-starter-thymeleaf




    net.sourceforge.nekohtml
    nekohtml
    1.9.22



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标签所在位置

　　 
    
th:replace="common_navigation">

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

class="banner-main">
    
    "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    "https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    "https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
    "https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css" rel="stylesheet">
    "https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css" rel="stylesheet" type="text/css">
    "stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

三、效果如下

    
    
class="banner-main">
        
        "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        "https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
        "https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
        "https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css" rel="stylesheet">
        "https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css" rel="stylesheet" type="text/css">
        "//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet">
    

 

---

 

posted @ 2018-01-31 00:19 ^梦幻星空^ 阅读( ...) 评论( ...) 编辑 收藏