フラグメント、番目：置き換え、目：挿入、目：削除番目Thymeleafのテンプレートのレイアウト

目：フラグメントテンプレートのレイアウト

説明テンプレートフラグメント

テンプレート、多くの場合、⻚眉などいくつかの部分から他のテンプレートを⼀、含めたい、⻚足、メニューやその他の公共の部分は、この⼀ポイントを行うために、Thymeleafは第使用することができます：セグメントが含まれているリリースするテンプレートを定義するフラグメントを属性、他のテンプレートのために含まれています。

次のように定義されたテンプレートのフラグメント：

<divの目：フラグメント= "コピー"> 
      ＆コピー; 2011年グッドThymes仮想食料品
 </ div>

コードの画面で定義し⼀コピーと呼ばれるリリースセグメントを、次に目を使用することができます挿入または目：簡単にそれを必要としている含んにページ：属性（含ま番目Thymeleaf 3.0非推奨使用）を交換してください。

<身体> 
     ...      <divの目：挿入= "〜{フッタ::コピー}"> </ div>      ...
 </ボディ>

フッター：それはThymeleaf春ブート設定マッピング検索によると、springboot開発であれば、テンプレートの名前を表すことは、htmlファイルの名前です。

コピーは：の名前フラグメント=「コピー」：テンプレートのフラグメント、すなわち番目の名前を示します

目：〜{...}の挿入はオプションで放出セグメントの発現を表し、次のように一般表現の実際の開発に使用され、書き込まれた画面上のコードと等価です。

<身体> 
     ...      <divの目：挿入= "フッター::コピー"> </ div>      ...
 </ボディ>

表現構文放出セグメント
第1、：挿入/番目：置き換える、断片〜{...}式はオプションで、書き込まれなくてもよいが書くことができます。

図2は、目に引用：断片と鋳型フラグメントは番目に引用：挿入または番目：置き換えるHTMLは、同じファイルであってもよく、HTMLで同じにすることはできません。

リリースセグメントの単純な表現の構文が便利になる、異なる3つの形式があります。

1）}〜{TEMPLATENAMEセレクター:: - ： - TEMPLATENAMEテンプレート（htmlファイル名）の名前を示すspringbootプロジェクトは、「テンプレート」ディレクトリの下にhtmlファイル名で
、thymeleaf するルールspringbootに基づいてマッピングされています。このようなID値タグ、CSSセレクタ、XPathの、等、を選択することができる、断片定義名断片：それは番目のセレクタであってもよいです。

2）〜{TEMPLATENAME} - ： - TEMPLATENAME名前テンプレート全体を含みます。
3）〜{::セレクタ}または{〜本::セレクタ}：テンプレートにそれを含む放出セグメントが指定され⼀セレクタ

TEMPLATENAMEテンプレート名とセレクタセレクタを表現することができます（でも⾄は条件式です！）のような：

<divの目：挿入= "フッター::（$ {user.isAdmin}＃{} footer.admin：？＃{footer.normaluser}）"> </ div>

挿入/目：目、再び注意置き換える〜{...}はオプションです。

〜{TEMPLATENAME ::セレクタ}セレクタは、このようなID値タグ、CSSセレクタ、XPathの、等の一般的な選択であってもよいです。

...
 <DIV ID =「コピーsectionTop」>＆コピー;グッドザ・Thymesの2011バーチャル食料品</ DIV> 
... 

直接（CSSセレクタかもしれID属性を使用しての使用リリースセグメントの画面に組み込むことができます。コンテンツ）、XPathの（// divの[@クラス= 'コンテンツ']）：

...
の<div TH：INSERT = "フッター::＃〜{コピーsectionTop}"> </ div> 
 ------ ---------- 
免責事項：この記事は元の記事CSDNブロガー「カイディセント」であり、CC続く 4.0バイ・SAの著作権契約、再現は、オリジナルのソースリンクと、この文を添付してください。
オリジナルリンク：HTTPS：// blog.csdn.net/wangmx1993328/article/details/84747497

目：挿入して目：違いを置き換えます

Thymeleaf 3.0は、もはや目の撮影のために推奨された後：含まれません。

目：挿入：タグの自身の身体を基準とテンプレートフラグメントの挿入が
目：置き換える：断片が参照されているテンプレートは、その置き換え
番目：含める：番目に似：挿入、ない⽽挿入リリースセグメントを、のみこのリリースセグメントの内容を挿入します。

コピー; 2011年グッドThymes仮想食料品

再び：

1）番目：断片と番目：番目、交換：番目、挿入同じテンプレートを含むことも、別のテンプレートであってもよいです

タグ〜{...}で時間を含む断片の発現を参照することはできないが、書き込みのライン内、など、断片の発現を使用する必要があります：番目、交換：番目、挿入：2）番目{[[〜} ]、[（{〜}）]

パラメトリック断片署名

セグメント・テンプレート機能と同様の機能を有して解放するために、目：放出セグメントは⼀パラメータの断片定義セットを指定することができます。

<DIV番目：断片= "FRAG（onevar、twovar）"> 
     <P番目：テキスト= "$ {onevar} + ' - ' + $ {twovar}"> ... </ P> 
</ div>

だから、目で：テンプレートフラグメントへの参照を交換する時、あなたは過去にパラメータを渡すことができます：番目、挿入します。

<DIV番目：=置き換える"TEMPLATENAME :: FRAG（$ {}をvalue1、$ {}値2）"> ... </ div> // 秩序パラメータで渡された定義
の<div番目：=「TEMPLATENAME置き換えます：：FRAG（onevar = $ {値1 }、twovar = $ {値2}）「> ... </ div> // により渡されるパラメータ名は、その後に関係なくオーダーパラメータの定義します

例えば、このように公衆にメニュー表示を強調表示されたパラメータを渡すことができ、現在、現在のメニューを識別するアクティブなメニューです。

コーディング例

上記のようにSpringBootプロジェクト構造：

1）コモンズ/ commons.html：共通ヘッダを含む公共のページ、共通の底、共通のメニューを残しました。これらのプロジェクトは、公共の一部を抽出しており、各モジュールのために呼び出すことができます。
左側のメニューのHTMLテンプレートに配置することができ、共通の頭、尾は、別のテンプレートに配置することができます。

2）虎/ home.html：虎の家、共通のテンプレートフラグメントを引用し、自分のcssファイルのCSS / tigerHome.css

 3）ユーザー/ home.html：ホームユーザーは、公開参照テンプレートフラグメント、独自のCSSファイルになりますCSS /のためuserHome.css

ので虎/ home.html、ユーザー/ home.html参照commons.html 4）CSS / commons.cssこれは、共通のテンプレートcommons.html参照スタイルの抜粋である
コードスニペット、これらの断片は、スタイルでcommons.cssが必要なのでcommons.cssも虎/ home.html、ユーザー/しなければならないhome.htmlファイルのリンク参照を行います。

あなたがクリックすると：// localhost /をThymeleaf /タイガー/ホーム：HTTP トラ/ home.html時間に

：あなたは、クリックするとHTTP：// localhost /をThymeleaf /ユーザー/ホームユーザー/ home.html時間を入力します。

commons.html共通テンプレート

共通ヘッダ、共通の底部を含む公的なページは、共通のメニューを残しました。プロジェクトの公開部分を抽出することができ、その後、各モジュールに対して起動することができます。左側のメニューのHTMLテンプレートに配置することができ、共通の頭、尾は、別のテンプレートに配置することができます。

<！DOCTYPE HTML> 
<HTMLのxmlns：TH = "http://www.thymeleaf.org"> 
<頭LANG = "EN"> 
    <METAのcharset = "UTF-8"> 
    <タイトル>公共テンプレート</ TITLE> 
    <！ -共通テンプレート、このスタイルは、ブラウザから直接無パブリックアクセステンプレートいるので、参照ファイルが、特定のモジュールにアクセスすることはできません- > 
    < -注意：！あなたはどのスタイルでテンプレートのフラグメントを使用している場合、このパターンファイルをインポートします、参照テンプレートのフラグメントは- > 
    <リンクタイプ= "テキスト/ CSS"のrel = "このスタイルシート" TH：HREF = "@ {/ CSS / commons.css}"> 
</ヘッド> 
<BODY> 
<！ -定義された公共の頭、テンプレートのフラグメントのためのcommonHeader名- > 
<ヘッダーTH：フラグメント= "commonHeader"> 
    <H2>ヴィラは、龍を保護</ H2> 
</ヘッダ> 
 
<Articleこの記事でした> 
    <！ -インデックスがパラメータとして渡され、commonMenuセグメント名が示す、左の共通メニューの定義- >
    <divのクラスは、：= "commonMenu（インデックス）"断片番目= "articleLeft"> 
        < - ？それはそれを決定した場合、現在アクティブなメニュースタイル・インデックス・パラメータは、;!三項演算子、三番目のパラメータのデフォルトを渡さに従って設定をfalseに戻りますヌル - > 
        の<div> <a th:href="@{/user/home}" th: クラス ="${index}==0?'activeMenu'">のユーザーホーム</a>に</ div> 
        <div> <a th:href="@{/tiger/home}" th: クラス ="${index}==1?'activeMenu'">タイガーホーム</a>の</ div> 
        <！ -同様に、他の多くのメニューが順次ダウンがある場合はパラメータを渡すことができます- > 
    </ div> 
    <divのクラス = "コンテンツ"> 
    </ div> 
</ Articleこの記事だった> 
 
<！ - 、共通下を定義しますIDセレクタはもちろん、断片はまた、THなどの名前、使用することができ、本明細書中で使用される：フラグメント= "commonFooterを" - > 
<フッターID = "commonFooter"> 
    著作権© 1998年から2018年YYServerを。
すべての権利予約</フッタ> 
 
</ BODY> 
</ HTML>

ユーザー/ home.htmlテンプレート断片が導入され、

<！DOCTYPE HTML> 
<HTMLのxmlns：TH = "http://www.thymeleaf.org"> 
<頭LANG = "EN"> 
    <METAのcharset = "UTF-8"> 
    <タイトル>ユーザーのホーム</ TITLE> 
    <！ -テンプレート断片が導入で参照commons.cssスタイルモジュールの出願に引用されて来なければならない- > 
    <リンクタイプ=「テキスト/ CSS」のrel =「このスタイルシート」TH：HREF =「@ /css/commons.css} { "> 
    < - > -その文書のスタイルファイルがあるとして！
    <リンクタイプ="テキスト/ CSS "のrel ="このスタイルシート"TH：HREF =" @ {/ CSS / USERHOME }の.css「> 
</ HEAD> 
<BODY> 
国民の頭に、独自のヘッダ・ラベルの代替の使用を置き換える- - <>！
< -ノート:!テンプレート名はspringboot構成規則Thymeleafに基づいてマッピングされます- > 
<！ -デフォルトのテンプレートディレクトリ内のhtmlファイルであります- > 
<目のヘッダー：置き換える= "コモンズ/コモンズ:: commonHeader"> </ヘッダ> 
<記事>
    <！ - 〜独自のdivを交換使用してパブリック左側のメニューの導入; 0パスパラメータが一貫定義されたパラメータに合意- > 
    <divのTH：=「コモンズ/コモンズを交換:: commonMenu（0） "> 
    </ div> 
    <divのクラス ="コンテンツ"> 
        <H2 クラス ="ヒント「>ユーザーのホーム</ H2> 
    </ div> 
</ Articleこの記事だった> 
<！ -本明細書で使用する、公共の底部に導入、IDセレクタ代わりにフラグメント名- > 
<フッタTH：置き換え= "コモンズ/ #commonFooterコモンズ::"> </フッタ> 
</ BODY> 
</ HTML>

同様にこれに、虎/ home.html文言は、左の共通メニューに導入されたときと同じ、異なるパラメータのみが渡されます：

<第DIV：置き換える= "〜{コモンズ/コモンズ:: commonMenu（1）}">

より一般的には、左側のメニューにある場合、あなただけの異なるパラメータを合意することができ渡す必要があります。

業績

目：削除テンプレートのフラグメントを削除

<：削除=「すべて」trの目> ...など、削除：あなたはいくつかのケースでは、直接コード・フラグメントのテンプレートの一部を削除したい場合は、目を使用することができます

目：削除は、5つの異なる削除モードを持つことができます。

1 ）すべて：ラベルとアイテム含むすべてのサブメニュー削除
 2 ）ボディ：標識には削除しますが、すべてのサブメニュー項目は削除されません
 3 ）タグ：削除したラベルが含まれていますが、それをサブメニュー項目は削除されません
 4）全ブトファースト：削除最初の子以外の他のすべての子供たち
 5）はなし：何もしません。動的な計算のための値が使用されています。nullは何も考慮されません

<身体> 
<！ - - divのスタイルのヒントは、1pxの赤い境界線を追加します> 
<divのクラス = "ヒント"> 
    削除<span>を</ span>を</ p型> <！P-> TH 
</ DIVを> 
< -すべての:!独自の含まれている、すべてのラベルを削除する- > 
<divのクラス = "ヒント" THを：削除= "すべて"> 
    <P->すべての<span> @ </ span>を</ p型> 
</ divの> 
< -体:!自分自身を削除しますが、すべての子を削除しないでください- > 
<divのクラス = "ヒント" TH：削除は= "身体"> 
    <p型>ボディの<span>＃</ span>を</ p型> 
</ div> 
< -タグ:!自分自身を削除しますが、すべての子を削除しないでください- > 
<divのクラス = "ヒント" TH：削除= "タグ"> 
    <p型>タグの<span> $ </ span>を</ p型> 
</ div> 
< -最初の子のほかには、all-but-まず:!、すべての子供たちを削除する- > 
<divのクラス = "ヒント"目：削除=「すべてが、 -first」>
    <p型>すべての-しかし-first1の<span>％</ span>を</ p型> 
    <！ -最初の子が削除されることはありません上に、全ての第二子の先頭から削除されます- > 
    <P- >すべての-しかし、first2の<span>％</ span>を</ p型> 
</ div> 
< -なし:!無治療。この値は、動的計算するのに便利です- > 
<divのクラス = "ヒント" TH：削除= "なし"> 
    <P>なし<スパン> ^ </ span>を</ P> 
</ div> 
</ BODY>

限り番目として次のようなThymeleafプロパティを削除任意の正規表現を使用することができ、：文字列を削除する前の値に戻る（すべて、タグ、本体、全しかし、最初、なし）、目を可能にします。

<a href="/something" th:remove="${condition}?タグ：none">リンクテキスト</a>に削除してはなりません

目：なし考えないヌルを除去するので、上記の例と同様に、以下の⼯効果：

<a href="/something" th:remove="${condition}? tag">リンクテキストを</a>を削除してはなりません

$ {条件}がfalseの場合この場合、それはnullを返し、それが削除され実行されません。

このリンク：https://blog.csdn.net/wangmx1993328/article/details/84747497

Thymeleafのテンプレート