Al desarrollar un sitio Web, muchas páginas HTML son iguales, si cada página se escribe una vez, no solo es muy problemático, sino también muy desfavorable para cambios posteriores. Normalmente, como la barra de navegación, el pie de página, etc., todas las páginas HTML son casi iguales.
En Thymeleaf, utilizamos el siguiente mecanismo para extraer páginas públicas e importar esta página cuando sea necesario.
Cree una página pública para almacenar fragmentos de código públicos
Úselo para th:fragmentdefinir un segmento de código común. Dos segmentos de código común se definen de la siguiente manera th:fragment="head(title)"(el título es el parámetro que se pasa cuando se hace referencia al segmento de código común); th:fragment="menu(n)"(n es el parámetro que se pasa cuando se hace referencia al segmento de código).
<!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>
Citando fragmentos de código comunes en otros archivos HTML
Por ejemplo, consulte el fragmento de código común en 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.It <head th:replace="common/header :: head(~{::title})">medio para reemplazar aquí con common/header.htmlel segmento de código público "head"en <head>.
Al reemplazar, también puede pasar parámetros, lo que head(~{::title})significa <title>que el valor a continuación se cita como un parámetro para pasar al segmento de código común (este tipo de sintaxis parece muy inusual).
2. <nav th:replace="common/header :: menu(1)"></nav>Significa reemplazar aquí con common/header.htmlel segmento de código público de Zhong Gong ."menu"<nav>
Al reemplazar, también puede pasar parámetros, lo que menu(1)significa que se pasarán 1al segmento de código público como un parámetro. Después de que el código público obtiene el parámetro, la operación correspondiente se realiza de acuerdo con diferentes valores, por lo que la mayor parte del código es lo mismo, y solo una pequeña parte del contenido debe hacerse en consecuencia.