网站中对于公共元素（如导航栏等）的使用，可以在页面使用th:insert标签嵌入对应的div等元素，以下展示一个简单的嵌套demo。即将导航栏、登入登出模态对话框作为公共元素引入，代码如下：
以下为公共元素的htmld页面，放置在/templates/public目录下，文件名为public.html。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>public</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href="@{default/css/bootstrap.css}" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 导航栏 -->
<div class="row">
<div class="nav col-sm-12 py-2 bg-light border-bottom" th:fragment="public_top">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item">
<img th:src="@{default/svg/hi.svg}" alt width="40" height="40">
</li>
<li class="nav-item">
<a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link-dark px-2">Features</a>
</li>
</ul>
<ul class="nav">
<li class="nav-item">
<!--span class="link-dark px-2" sec:authorize="isAuthenticated()">Welcome,<span sec:authentication="name"></span></span-->
<a sec:authorize="isAnonymous()" href="#" data-bs-toggle="modal" data-bs-target="#public_signin_modal" class="nav-link link-dark px-2">Sing in</a>
<a sec:authorize="isAuthenticated()" href="#" data-bs-toggle="modal" data-bs-target="#public_signout_modal" class="nav-link link-dark px-2">Sing out</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 登录模态对话框 -->
<div class="row">
<div class="modal" tabindex="-1" th:fragment="public_signin_modal" id="public_signin_modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form th:action="@{/dologin}" method = "post">
<div class="modal-header justify-content-center">
<h5 class="modal-title">Sign in</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
<div class="input-group">
<span class="input-group-text">username</span>
<input type="text" name="username" class="form-control">
</div>
</div>
<br>
<div class="form-floating">
<div class="input-group">
<span class="input-group-text">password</span>
<input type="password" name="password" class="form-control">
</div>
</div>
<br/>
<span class="alert alert-warning" style="margin-top: 10px" th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></span>
</div>
<div class="modal-footer">
<button class="btn w-100 btn-lg btn-primary" type="submit" data-bs-dismiss="modal">OK</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 登出模态对话框-->
<div class="row">
<div class="modal" tabindex="-1" th:fragment="public_signout_modal" id="public_signout_modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form th:action="@{/logout}" method = "get">
<div class="modal-header">
<h5 class="modal-title">Sign out</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Sure to sign out ?</p>
</div>
<div class="modal-footer">
<button class="btn w-100 btn-lg btn-primary" type="submit" data-bs-dismiss="modal">OK</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
上述代码中，判断用户是否登录并根据登录情况显示页面右上角的<a>标签显示不同的内容，登录时显示“sign out”，登出后显示"sign in"。
<a sec:authorize="isAnonymous()" href="#" data-bs-toggle="modal" data-bs-target="#public_signin_modal" class="nav-link link-dark px-2">Sing in</a>
<a sec:authorize="isAuthenticated()" href="#" data-bs-toggle="modal" data-bs-target="#public_signout_modal" class="nav-link link-dark px-2">Sing out</a>
以下在index.html页面中对上述公共元素进行引用，代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href="@{default/css/bootstrap.css}" type="text/css" rel="stylesheet">
<script th:src="@{default/js/bootstrap.js}" type="text/javascript"></script>
<title>index</title>
</head>
<body>
<div class="container">
<div class="row" th:insert="~{/public/public :: public_top}"></div>
<div class="row" th:insert="~{/public/public :: public_signin_modal}"></div>
<div class="row" th:insert="~{/public/public :: public_signout_modal}"></div>
</div>
</body>
</html>
至于@{/dologin}、@{/logout}的方法实现请自行解决。
--登录画面
--登出画面
