thymeleaf 定義公共header 和公共js

時間 2019-12-11

標籤 thymeleaf 定義公共 header 欄目 JavaScript 简体版

原文原文鏈接

在common文件夾下建立common_header.html文件css

內容以下html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links,styles)">
<meta charset="utf-8">
<title th:replace="${title}">The awesome application</title>html5

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" th:href="@{/content/ui/global/bootstrap/css/bootstrap.min.css}">

<link th:href="@{/content/ui/global/font-awesome/css/font-awesome.css}" rel="stylesheet" />

<link rel="stylesheet" th:href="@{/content/adminlte/dist/css/AdminLTE.css}">
<link rel="stylesheet" th:href="@{/content/adminlte/dist/css/skins/_all-skins.css}">
<link th:href="@{/content/min/css/supershopui.common.min.css}" rel="stylesheet" />jquery

<th:block th:replace="${links}" />

<th:block th:replace="${styles}" />ui

</head>.net

使用以下：

1：能夠自帶標題也能夠追加css引入,若是須要自定義 style 樣式加上標籤，在common_header 參數加上便可

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:replace="common/common_header :: common_header(~{::title},~{::link},~{})">
<title>用戶首頁</title>

<link rel="stylesheet" th:href="@{/content/plugins/ueditor/themes/default/css/ueditor.css}">

</head>

在common文件夾下建立common_foot.html文件

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="foot">
<script th:src="@{/content/ui/global/jQuery/jquery.min.js}"></script>
<script th:src="@{/content/common/common.js}"></script>

<script th:src="@{/content/ui/global/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/content/min/js/supershopui.common.js}"></script>
<script th:src="@{/content/plugins/iCheck/icheck.min.js}"></script>
<script th:src="@{/content/ui/global/bootstrap-switch/js/bootstrap-switch.js}"></script>
<script th:src="@{/content/plugins/my97DatePicker/WdatePicker.js}"></script>
<script th:src="@{/content/common/layer/layer.js}"></script>
<script th:src="@{/content/plugins/bootstrap-select/js/bootstrap-select.js}"></script>
<script th:src="@{/content/plugins/select2/js/select2.full.min.js}"></script>
<script th:src="@{/content/plugins/moment/moment.js}"></script>
</div>

使用以下：

<div th:replace="common/common_foot :: foot"></div>注意引入模板不能夠用/開頭要不發佈以後會找不到文件--------------------- 做者：奮鬥青年LOVE 來源：CSDN 原文：https://blog.csdn.net/qq_33842795/article/details/80322829 版權聲明：本文爲博主原創文章，轉載請附上博文連接！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

thymeleaf 定義公共header 和 公共js

thymeleaf 定義公共header 和公共js