快捷導(dǎo)航

Springboot整合Thymeleaf引入公共的CSS和JS文件的方法及注意點(diǎn)

更新時間：2024年06月21日 09:23:56 作者：specialHeych

有時候很多css文件是公共的,我們必須要在每個html文件中引入它們,下面這篇文章主要給大家介紹了關(guān)于Springboot整合Thymeleaf引入公共的CSS和JS文件的方法及注意點(diǎn),需要的朋友可以參考下

最近想搭建一個簡單的web網(wǎng)站，以便以后接點(diǎn)私活，所以首先考慮單機(jī)模式下的框架搭建，分布式的框架相對前段搭建成本有點(diǎn)高，另外暫時對前端代碼不是很熟悉，所以采用了SpringBoot搭配Thymeleaf模版的開發(fā)模式，開發(fā)過程中想把共通的CSS和JS文件放在一個共通的base.html下，所以根據(jù)網(wǎng)上的說明，自己也研究了一陣子，代碼如下，親測好用。

HTML的文件目錄如下：signIn.html為我的登錄頁面，base.html為我的共通的文件

base.html代碼如下：

title和links是以變量的形式傳入的，因?yàn)槊總€引入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"
           rel="external nofollow" >
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{../../static/plugins/fontawesome-free/css/all.min.css}" rel="external nofollow" >
   <!-- Theme style -->
    <link rel="stylesheet" th:href="@{../../static/dist/css/adminlte.min.css}" rel="external nofollow" >
    <!-- 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">
<!--需要添加此行標(biāo)注為thymeleaf模板 -->
<head th:replace="common/base :: common_header(~{::title},~{})">
    <title>Sign In</title>
</head>

需要注意點(diǎn)：

1.是這里base是沒有后綴html的

2.這里的title需要自定義，但是css文件不需要所以格式為：

common_header(~{::title},~{})

如果css也需要自定義的話格式為：

common_header(~{::title},~{::link})

附：不能引用最可能的原因

SpringBoot項(xiàng)目的所有文件都必須要編譯到target文件夾下才能運(yùn)行，因此首先檢查你的target目錄下有沒有靜態(tài)資源。

如果這里根本就沒有靜態(tài)資源，自然肯定不能引用了。

是什么原因?qū)е聇arget/classes文件夾下沒有靜態(tài)資源的呢？

最可能的原因就是在項(xiàng)目的pom文件中，你沒有指明要將.css、.js等這些文件編譯進(jìn)target文件夾中。必須要申明，這些文件才會被正確編譯進(jìn)去。

<build>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.*</include>
            </includes>
            <filtering>true</filtering>
        </resource>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
                <include>**/*.yml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
    </resources>
</build>

這里申明了，resources目錄下，**/*.*類型的文件將被編譯進(jìn)target/classes文件夾，也即是所有的文件，因此.css和.js類的文件就可以正確的編譯進(jìn)去。

如果改成如下這樣：

<build>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
                <include>**/*.yml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.properties</include>
                <include>**/*.xml</include>
                <include>**/*.yml</include>
            </includes>
            <filtering>true</filtering>
        </resource>
    </resources>
</build>

代表只將resources下的.properties文件、.xml文件、.yml文件編譯進(jìn)去target/classes文件夾，自然就沒有靜態(tài)資源了，就沒法引用了。編譯得到的target文件夾如下：

可以看到，按照如上pom文件，編譯得到的target/classes文件夾下根本就沒有靜態(tài)資源，不可能引用成功。

總結(jié)

到此這篇關(guān)于Springboot整合Thymeleaf引入公共的CSS和JS文件的方法及注意點(diǎn)的文章就介紹到這了,更多相關(guān)Springboot引入公共CSS和JS文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！