[Springboot-themeleaf] themeleaf fragmento en páginas y se introdujo

1, dibujada a una barra de menú de la página separada

<Html xmlns: J = "http://www.thymeleaf.org"> Uso thymeleaf motor analiza la página
th: fragmento = "topbar" declarado fragmento

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 顶部导航栏 -->
	<div class="naviBar" th:fragment="topBar">
		<div class="navi">
			<img id="logo" th:src="@{/static/images/tlogo.png}"/>
		    <ul id="menu">
		    	<li><a th:href="@{/code}" class="active" th:class="${activeUri=='code.html'?'active':'unactive'}">在售项目</a></li>
		    	<li><a th:href="@{/booking}" class="active" th:class="${activeUri=='booking.html'?'active':'unactive'}">预定项目</a></li>
		    	<li><a href="#">技术贴吧</a></li>
		    	<li><a th:href="@{/mine}" class="active" th:class="${activeUri=='mine.html'?'active':'unactive'}">个人中心</a></li>
		    	<li>
		    		<div class="logout">
						<a href="/logout">退出</a>
					</div>
		    	</li>
		    </ul>
		</div>
	</div>
 
	<!-- 底部信息栏 -->
	<div class="footerbar" th:fragment="footerBar">
		<hr/>
		&copy 2019 版权所有
	</div>
	
</body>
</html>

2, otras páginas citadas declaración anterior fragmento

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>源码栈</title>
<link rel="icon" type="image/x-icon" th:href="@{/static/images/logo.png}"/>
<link type="text/css" rel="styleSheet"  href="../static/css/navi.css" />
<link type="text/css" rel="styleSheet"  href="../static/css/code.css" />
<link type="text/css" rel="styleSheet"  href="../static/css/element-ui-index.css" />
</head>
<body>
    <!-- 顶部导航栏 -->
    <div th:replace="~{navi :: topBar(activeUri='code.html')}"></div>
 
     <!-- 主内容区 -->
    <div class="mainCenter"></div> 
    
    <!-- 底部信息栏 -->
    <div th:replace="~{navi :: footerBar}"></div>
    
    
    <script type="text/javascript" src="../static/vue/vue.js"></script>
    <script type="text/javascript" src="../static/vue/element-ui-index.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#main',
        });
    </script>
</body>
</html>

th: sustituir = "~ {navi :: barra superior (activeUri = 'code.html')}" referencias declaradas fragmentos, fragmentos en los nombre de archivo navi se declara, como se ha dicho nombre de pieza barra superior, y (activeUri = 'código .html ') se pasa como un parámetro.
th: class = "$ {activeUri == 'code.html' 'activa' :? 'activo'}", adquirida por el parámetro pasado a la configuración de los diferentes atributos de clase de enlace, los enlaces para visualizar el patrón seleccionado.

efecto de la figura de la siguiente manera (estilo CSS no se publica)

3, thymeleaf realización introducción tiene los tres fragmentos siguientes:

<!--声明片段-->
<div id="naviBar" th:fragment="copy">公共内容</div>
 
<!--引用片段的3中方式-->
<div id="mainDiv1" th:insert="footer :: copy"></div>
 
<div id="mainDiv2" th:replace="footer :: copy"></div>
 
<div id="mainDiv3" th:include="footer :: copy"></div>

La diferencia es:

insertar: El id del div Navibar insertado en mainDiv1, en cuyo caso el código de la página

<div id="mainDiv1">
    <div id="naviBar">公共内容</div>
</div>

Reemplazar: el id del div mainDiv2 reemplazar Navibar, después de reemplazar mainDiv2 no existe, entonces el código de página

 <div id="naviBar">公共内容</div>

incluir: sólo el contenido de Navibar, a saber, "contenido público" para poner en mainDiv3, y D no se introduce div nodo Navibar, en cuyo caso el código de la página

<div id="mainDiv3">
    公共内容
</div>

Japathy

Publicado 28 artículos originales · ganado elogios 3 · Vistas a 40000 +

carta privada preocupaciones

[Springboot-themeleaf] themeleaf fragmento en páginas y se introdujo

Supongo que te gusta