最近想搭建一个简单的web网站，以便以后接点私活，所以首先考虑单机模式下的框架搭建，分布式的框架相对前段搭建成本有点高，另外暂时对前端代码不是很熟悉，所以采用了SpringBoot搭配Thymeleaf模版的开发模式，开发过程中想把共通的CSS和JS文件放在一个共通的base.html下，所以根据网上的说明，自己也研究了一阵子，代码如下，亲测好用。
HTML的文件目录如下：signIn.html为我的登录页面，base.html为我的共通的文件
base.html代码如下：
title和links是以变量的形式传入的，因为每个引入base.html的页面的Title和css需要自定义，所以留有变量
注意：application.yml下需要追加如下配置：
mvc:
static-path-pattern: /static/**
view:
prefix: classpath:/templates/
suffix: .html复制
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" lang="en"> <head th:fragment="common_header(title,links)"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Google Font: Source Sans Pro --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <!-- Font Awesome --> <link rel="stylesheet" th:href="@{../../static/plugins/fontawesome-free/css/all.min.css}"> <!-- Theme style --> <link rel="stylesheet" th:href="@{../../static/dist/css/adminlte.min.css}"> <!-- jQuery --> <script type="text/javascript" th:src="@{../../static/plugins/jquery/jquery.min.js}"></script> <!-- jQuery UI 1.11.4 --> <script type="text/javascript" th:src="@{../../static/plugins/jquery-ui/jquery-ui.min.js}"></script> <!-- Bootstrap 4 --> <script type="text/javascript" th:src="@{../../static/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script> <!-- AdminLTE App --> <script type="text/javascript" th:src="@{../../static/dist/js/adminlte.min.js}"></script> <!-- DataTables & Plugins --> <script type="text/javascript" th:src="@{../../static/plugins/datatables/jquery.dataTables.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-responsive/js/dataTables.responsive.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-responsive/js/responsive.bootstrap4.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-buttons/js/dataTables.buttons.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-buttons/js/buttons.bootstrap4.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/jszip/jszip.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/pdfmake/pdfmake.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-buttons/js/buttons.html5.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-buttons/js/buttons.print.min.js}"></script> <script type="text/javascript" th:src="@{../../static/plugins/datatables-buttons/js/buttons.colVis.min.js}"></script> </head> </html>
signIn.html的代码如：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en"> <!--需要添加此行标注为thymeleaf模板 --> <head th:replace="common/base :: common_header(~{::title},~{})"> <title>Sign In</title> </head>
需要注意点：
1.是这里base是没有后缀html的
2.这里的title需要自定义，但是css文件不需要所以格式为：
common_header(~{::title},~{})复制
如果css也需要自定义的话格式为：
common_header(~{::title},~{::link})
