При разработке веб-сайта многие HTML-страницы одинаковы, и если каждая страница написана один раз, это не только очень хлопотно, но и очень неблагоприятно для последующих изменений. Обычно, такие как панель навигации, нижний колонтитул и т. Д., Все HTML-страницы почти одинаковы.
В Thymeleaf мы используем следующий механизм для извлечения общедоступных страниц и импорта этой страницы при необходимости.
Создайте общедоступную страницу для хранения фрагментов общедоступного кода
Используется для th:fragmentопределения общего сегмента кода. Два общих сегмента кода определены следующим образом th:fragment="head(title)"(заголовок - это параметр, передаваемый при ссылке на общий сегмент кода); th:fragment="menu(n)"(n - параметр, передаваемый при ссылке на сегмент кода).
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"><!--title为传参-->
<meta charset="UTF-8">
<title th:replace="${title}">Home</title>
<link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.css" th:href="@{/bootstrap/css/bootstrap.css}">
<script src="../../static/jquery/jquery-3.5.1.min.js" th:src="@{/jquery/jquery-3.5.1.min.js}"></script>
<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<style>
body {
background: url(/images/bg3.jpg)
no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
<nav th:fragment="menu(n)" class="navbar navbar-inverse" style="font-size: 18px; background: rgba(0,0,0,0.75);">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="glyphicon glyphicon-align-justify" ></span>
</button>
<a class="navbar-brand" href="/index">EXCELLENT BLOG</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="text-center" th:classappend="${n==1}?'active'"><a href="/index">首页</a></li>
<li class="text-center" th:classappend="${n==2}?'active'"><a href="#">说说</a></li>
<li class="text-center" th:classappend="${n==3}?'active'"><a href="#">博客</a></li>
<li class="text-center" th:classappend="${n==4}?'active'"><a href="#">社区</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
其它<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">相册</a></li>
<li><a href="#">博客分类</a></li>
<li><a href="#">网站地图</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">留言板</a></li>
</ul>
</li>
<li>
<form class="navbar-form form-group">
<input class="form-control" type="text" placeholder="Search">
<input class=" btn btn-default" type="submit" value="搜索">
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:classappend="${n==6}?'active'">
<a href="#" th:href="${session.user==null}?'/login':'#'">
<span class="text-center" th:text="${session.user==null}?'登录':${session.user.username}">
uokaa
</span>
</a>
</li>
<li>
<a href="/logout">
<span class="text-center" th:text="${session.user==null}?'':'注销'">
退出登录
</span>
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
<script>
$('.dropdown-toggle').dropdown();
</script>
Цитирование общих фрагментов кода в других файлах HTML
Например, обратитесь к общему фрагменту кода в index.html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: head(~{::title})">
<title>Home</title>
</head>
<body>
<nav th:replace="common/header :: menu(1)"></nav>
<div class="container-fluid">
<br><br><br><br><br>
<div class="row">
<div class="col-sm-6 col-sm-offset-3"><h1 class="text-center" style="color: white; font-size: 100px;"> W E L C O M E </h1></div>
</div>
</div>
</body>
</html>
1.Это <head th:replace="common/header :: head(~{::title})">означает заменить здесь common/header.htmlсегмент публичного кода "head"в <head>.
При замене вы также можете передавать параметры, что head(~{::title})означает, <title>что следующее значение указывается в качестве параметра, передаваемого в общий сегмент кода (такой синтаксис кажется очень необычным).
2. Это <nav th:replace="common/header :: menu(1)"></nav>означает заменить здесь common/header.htmlсегментом публичного кода Zhong Gong ."menu"<nav>
При замене вы также можете передавать параметры, что menu(1)означает, что они будут 1переданы в сегмент открытого кода в качестве параметра.После того, как открытый код получит параметр, соответствующая операция выполняется в соответствии с другими значениями, так что большая часть кода то же самое, и только небольшая часть контента требует внесения соответствующих изменений.