Thymeleaf模版--子頁面單獨引入CSS、JS文件

時間 2019-12-05

原文原文鏈接

https://blog.csdn.net/u010392801/article/details/80465800css

**************************************************************************html

最近在項目中應用到了 Thymeleaf，想寫一個通用的頁面來方便開發。網上有兩種方法一種是經過layout:fragment實現，另外一種是經過th:replace或者th:include實現。可是都不能對子頁單獨引入 CSS、JS 文件，因此記錄下本身的實現方法。
我是經過th:replace的帶參數方法實現的：

這是個人目錄結構
web

咱們拿<head></head>部分來舉例子，首先定義模版頁 head.html：spring

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
 <head th:fragment="head(title,cssPaths)"> 
  <title th:text="${title}"></title> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
  <link rel="shortcut icon" th:href="@{/static/assets/demo/default/media/img/logo/favicon.ico}" /> 
  <link rel="stylesheet" type="text/css" th:href="@{/static/assets/vendors/base/fonts/custom.min.css}" /> 
  <!--begin::基礎樣式 --> 
  <link rel="stylesheet" type="text/css" th:href="@{/static/assets/vendors/base/vendors.bundle.css}" /> 
  <link rel="stylesheet" type="text/css" th:href="@{/static/assets/demo/default/base/style.bundle.css}" /> 
  <!--end::基礎樣式 --> 
  <!--begin::頁面樣式 --> 
  <link rel="stylesheet" type="text/css" th:each="cssPath,status:${#strings.setSplit(cssPaths,',')}" th:href="@{${cssPath}}" /> 
  <!--end::頁面樣式 --> 
 </head> 
 <body> 
 </body>
</html>

在定義 fragment 時把中的可變部分經過參數傳遞進來
title：標題
cssPaths：子頁單獨引入的全部 CSS 文件路徑
在這裏經過拆分和循環把 cssPaths 所包含的全部文件動態加載出來

引用頁面：index.htmlide

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
 <head th:replace="commons/head::head('首頁',
'/static/assets/vendors/custom/datatables/datatables.bundle.css,'+
'/templates/index.css'
)"></head> 
 <body>   
 </body>
</html>

使用這種方法會把頁面的 CSS、JS 文件徹底分離出去。但 HTML 和 CSS、JS 若是不在一根目錄下查看起來仍是很不方便。在 SpringBoot 中 Templates 文件夾下的 CSS、JS 是不能被直接加載的, 須要特殊處理一下:ui

import org.springframework.context.annotation.Configuration; 
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; 
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport; 
/**
 * @Author: Eric
 **/ 
 @Configuration 
 public class WebMvcConfig extends WebMvcConfigurationSupport { 
    @Override 
    public void addResourceHandlers(ResourceHandlerRegistry registry) { 
        //將templates目錄下的CSS、JS文件映射爲靜態資源，防止Spring把這些資源識別成thymeleaf模版 
        registry.addResourceHandler("/templates/**.js").addResourceLocations("classpath:/templates/"); 
        registry.addResourceHandler("/templates/**.css").addResourceLocations("classpath:/templates/"); 
        //其餘靜態資源 
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); 
    } 
}