首页 前端知识 Springboot整合Thymeleaf引入公共的CSS和JS文件的方法

Springboot整合Thymeleaf引入公共的CSS和JS文件的方法

2024-05-31 20:05:55 前端知识 前端哥 583 831 我要收藏

最近想搭建一个简单的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})

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10279.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!