Thymeleaf template layout th: fragment, th: replace, th: insert, th: remove
th: fragment template layout
Description template fragments
Template, often want to include other templates ⼀ from some parts, such as ⻚ eyebrow, ⻚ foot, menus and other public part, in order to do this ⼀ point, Thymeleaf can use the th: fragment attributes to define the template will release the segment is included, for other templates included.
Template fragment defined as follows:
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
On the screen for a code defines ⼀ release segment called copy then can use the th: insert or th: replace attribute (Thymeleaf 3.0 deprecated Use th: include) the page into easily comprising in need thereof.
<body> ... <div th:insert="~{footer :: copy}"></div> ... </body>
footer: represents the template name is the name of the html file, if it is springboot development, according to the Thymeleaf Spring Boot configuration mapping lookup.
copy: indicates the name of the template fragments, i.e. th: Name fragment = "copy" of
th: insert of ~ {...} represents release segment expression, which is optional, is equivalent to the code on the screen for written as follows, which is commonly used in the actual development of the wording:
<body> ... <div th:insert="footer :: copy"></div> ... </body>
Expression syntax release segment
1, th: insert / th: replace , the fragment ~ {...} expression is optional, may not be written can be written
2, cited th: fragment and the template fragment cited th: insert or th: replace Html may be in the same file, can not be the same in html.
Release segment simple expression syntax comes in handy, there are different three formats:
1)} ~ {TemplateName Selector :: -: - TemplateName indicate the name of the template (html file name), springboot project is the html file name under "templates" directory,
it is mapped on the basis of rules springboot to thymeleaf. That may be a selector th: fragment defined name fragments, can be selected, such as the id value tag, CSS selectors, XPath, or the like.
2) ~ {templatename} -: - comprising the entire template named templatename.
3) ~ {:: selector} or {~ the this :: Selector}: release segment comprising the same in the template is designated ⼀ selector
Templatename template name and selectors selector can be an expression (even ⾄ is conditional expressions!) Such as:
<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
Note again, th: insert / th: replace the ~ {...} are optional.
~ {Templatename :: selector} The selector may be a common choice, such as the id value tag, CSS selectors, XPath, or the like:
... <div ID = "Copy-sectionTop"> & Copy; 2011 of The Good The Thymes the Virtual Grocery </ div> ... can be directly incorporated on the screen for Use release segment through the ID attribute may be a CSS selectors (. Content), the XPath ( // div [@ class = 'Content']): ... <div TH: INSERT = "footer :: # ~ {Copy-sectionTop}"> </ div> ------ ---------- Disclaimer: this article is the original article CSDN bloggers "Chi descent", and follow CC 4.0 BY- SA copyright agreement, reproduced, please attach the original source link and this statement. Original link: HTTPS: // blog.csdn.net/wangmx1993328/article/details/84747497
th: insert and th: replace the difference
After Thymeleaf 3.0 is no longer recommended for shooting th: include.
th: insert: the template fragment Insert referenced to its own body of the tag
th: replace: the template fragments are referenced replaced their
th: include: similar to th: insert, not ⽽ Insert release segment, only insert the contents of this release segment.
<! - 1, such as the common code fragments extracted as follows ->
<TH footer: the fragment = "Copy">
& Copy; 2011 of The Good The Thymes the Virtual Grocery
</ footer>
<- 2, using the following three ways! reference ->
<div TH: INSERT = "footer :: Copy"> </ div>
<div TH: the replace = "footer :: Copy"> </ div>
<div TH: the include = "footer :: Copy" > </ div>
! <-. 3, the effect corresponding to three kinds of reference are as follows ->
<div>
<footer>
& Copy; 2011 of the Good the Thymes the Virtual Grocery
</ footer>
</ div>
<footer>
& Copy ; 2011 at The Good Thymes Virtual Grocery
</ footer>
<div>
© 2011 The Good Thymes Virtual Grocery
emphasize again:
1) th: fragment and th: insert, th: replace, th: include the same template can also be in a different template
2) th: insert, th: replace, th: can not be referenced fragment expression include the time in the tag ~ {...}, but within the line of writing, must use a fragment expression, such as: [[~} { ]], [({~})]
Parametric fragment signature
In order to release segment template has a function similar function, th: release segment may specify ⼀ fragment defined set of parameters:
<div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
So in th: insert, th: time to replace reference to the template fragment, you can pass parameters in the past:
<div th: replace = "templatename :: frag ($ {value1}, $ {value2})"> ... </ div> // passed by the order parameter definitions
<div th: replace = "templatename : : frag (onevar = $ {value1 }, twovar = $ {value2}) "> ... </ div> // parameter name passed by, then regardless of the order parameters defined
For example highlighted menu display to the public in this way can pass parameters is currently active menu identifying the current menu.
Coding examples
SpringBoot project structure as above:
. 1) Commons / commons.html: public pages, which include a common header, the common bottom, left common menu. These projects are part of the public was extracted, and then for each module can be invoked.
Common head, tail, can be placed in a left menu html template can be placed on a separate template. 2) tiger / home.html: tiger home, will quote a common template fragments, own css files css / tigerHome.css 3) the User / home.html: Home users will be public reference template fragments, own css file for the CSS / userHome.css 4) CSS / commons.css this is a snippet of a common template commons.html referenced style, because tiger / home.html, user / home.html references commons.html
code snippet, these fragments need commons.css in style, so commons.css must also tiger / home.html, user / perform link references home.html file.
When you click: // localhost / Thymeleaf / Tiger / Home: HTTP into the tiger / home.html time
When you click: // localhost / Thymeleaf / the User / Home: HTTP enter the user / home.html time
commons.html common template
Public pages, which include a common header, the common bottom, left common menu. The public part of the project can be extracted, and then for each module can be invoked. Common head, tail, can be placed in a left menu html template can be placed on a separate template.
<! DOCTYPE HTML>
<HTML xmlns: TH = "http://www.thymeleaf.org">
<head lang = "EN">
<Meta charset = "UTF-8">
<title> public template </ title>
<! - a common template, this style can not file references, since no public access template directly from the browser, but access specific modules ->
<-! Note: If you use a template fragment in which style , the reference template fragments who, who will import this pattern files ->
<Link type = "text / CSS" the rel = "this stylesheet" TH: the href = "@ {/ CSS / commons.css}">
</ head>
<body>
<- defined public's head, commonHeader name for the template fragment ->!
<header TH: the fragment = "commonHeader">
<h2> Villa protects the dragon </ h2>
</ header>
<Article This article was>
<! - definition of the left common menu, commonMenu segment name indicates, index passed in as a parameter ->
<div class="articleLeft" th:fragment="commonMenu(index)">
<! -? Set according to the currently active menu style index parameter passed; ternary operator, the third parameter default, if it is determined that to false returnsnull ->
<div> <a th:href="@{/user/home}" th: class ="${index}==0?'activeMenu'"> user Home </a> </ div>
<div> <a th:href="@{/tiger/home}" th: class ="${index}==1?'activeMenu'"> Tiger Home </a> </ div>
<! - Similarly if there are other more menu sequentially down can pass parameters ->
</ div>
<div class = "Content">
</ div>
</ Article This article was>
<-! define a common bottom, id selectors used herein, of course, fragments can also be used names, such as TH: the fragment = "commonFooter" ->
<footer id = "commonFooter">
Copyright © 1998 - 2018 YYServer.
All Rights Reserved
</footer>
</body>
</html>
user / home.html template fragment is introduced
<! DOCTYPE HTML>
<HTML xmlns: TH = "http://www.thymeleaf.org">
<head lang = "EN">
<Meta charset = "UTF-. 8">
<title> User Home </ title>
<! - template fragments are cited in the application of commons.css style modules referenced in the introduction must come ->
<Link type = "text / CSS" the rel = "this stylesheet" TH: the href = "@ /css/commons.css} { ">
<- as is their document style files ->!
<Link type =" text / CSS "the rel =" this stylesheet "TH: the href =" @ {/ CSS / USERHOME } .css ">
</ head>
<body>
<- into the public's head, replace the use of substitute your own header label ->!
<- Note:! template name will be mapped on the basis of springboot configuration rules Thymeleaf ->
<! - default is html file in the templates directory ->
<header th:replace="commons/commons :: commonHeader"></header>
<article>
<! - introduction of a public left menu using replace ~ own div; 0 pass parameters agreed upon parameters defined consistency ->
<div TH: replace = "Commons / Commons :: commonMenu (0) ">
</ div>
<div class =" Content ">
<H2 class =" hint "> user Home </ H2>
</ div>
</ Article this article was>
<-! introduced into the bottom of the public, as used herein, id selector instead fragment name ->
<footer TH: Replace = "Commons / #commonFooter Commons ::"> </ footer>
</ body>
</ HTML>
Similarly to this, tiger / home.html wording is the same, different parameters are only passed when introduced into the left common menu:
<div th:replace="~{commons/commons :: commonMenu(1)}">
If there are more common on the left menu, you only need to pass different parameters can be agreed.
running result
th: remove delete the template fragments
If you want to delete some of the code fragment template directly in some cases, you can use th: remove, such as <tr th: remove = "all"> ....
th: remove can have five different deletion Modes:
1 ) All: Delete all submenus containing labels and item 2 ) body: do not delete labels include, but remove all submenus item 3 ) Tag: delete contains a label, but do not remove it Submenu item 4) All-but- First: Delete All other children other than the first child 5) none: do nothing. The value for the dynamic calculation has Use. null will be considered none
<body> <-! hint as div style will add a 1px red border -> <div class = "hint"> <the p-> TH: the Remove <span> </ span> </ the p->! </ div > <- All:! remove all labels, contains its own -> <div class = "hint" TH: the Remove = "All"> <the p-> All <span> @ </ span> </ the p-> </ div > <- body:! do not remove yourself, but remove all children -> <div class = "hint" TH: the Remove = "body"> <the p-> body <span> # </ span> </ the p-> </ div> <- Tag:! remove yourself, but do not remove all the children -> <div class = "hint" TH: the Remove = "Tag"> <the p->Tag <span> $ </ span> </ the p-> </ div> <- All-But-First:! In addition to the first child, delete all their children -> <div class = "hint" th: remove = "all-but -first"> <the p-> All-But-first1 <span>% </ span> </ the p-> <-! above the first child will not be deleted, all will be deleted from the beginning of the second child -> <the p- > All-But-first2 <span>% </ span> </ the p-> </ div> <- none:! no treatment. This value is useful for dynamic calculation -> <div class = "hint" TH: Remove = "none"> <P> none <span> ^ </ span> </ P> </ div> </ body>
As long as th: remove string allows returns to the previous value (all, tag, body, all-but-first, none), the th: remove Thymeleaf property can use any regular expression, such as:
<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>
th: remove the null considered none, so the following ⼯ effect as same as the above example:
<a href="/something" th:remove="${condition}? tag">Link text not to be removed</a>
In this case, if the $ {condition} is false, it returns null, it will not Perform deleted.
This link: https://blog.csdn.net/wangmx1993328/article/details/84747497