2016-03-29 14 views
3

だから私はthymeleaf page layoutsを使用しています。Thymeleafのページレイアウトのヘッダープロパティがオーバーライド

フラグメントを使用するページの<head></head><title></title>プロパティを設定するにはどうすればよいですか?現在、ヘッダーのすべてがヘッダーフラグメントによってオーバーライドされています(下記参照)。

これは私です:resources/templates/fragments/header.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
<head th:fragment="header"> 
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script> 
</head> 
<body></body> 
</html> 

これは私のインデックスページ(Iが表示するタイトルタグをしたい)である:これは、実際のHTML出力である

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:include="fragments/header :: header"> 
    <title>THIS DOES NOT SHOW</title> 
</head> 
<body> 
    <div class="container"> 
     <div th:include="fragments/headerNavbar :: headerNavbar"></div> 

     <h1>hey</h1> 
     <div class="btn btn-success">button</div> 
     <button class="btn btn-success">another</button>  
    </div> 

<head> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/bootstrap.min.js"></script> 
</head> 

私は何が起こっているかを取得します。ヘッダーフラグメントはインデックスページの先頭にロード(インクルード)されているため、すべてのプロパティがオーバーライドされています。

私の問題は、ヘッダ断片をどうやって作成するのか分からず、タイトルのようなプロパティを指定する際にファイルにその断片を使用させることです。

<head> 
    <div th:include="fragments/header :: header"></div> 
    <title>THIS DOES NOT SHOW</title> 
</head> 

しかし、それは本当に私のHTMLを台無しに:

これは私がインデックスファイルにしようとしたものです。簡単な解決策が必要ですか?

+0

おそらく私も聞きたいことでした。 – Prashant

+0

@Prashantそれは奇妙な1つのtbhです!実際には明らかな解決策ではないようです。おそらく、Jqueryでそれを丸める可能性のある方法がありますが、それは厄介です。 – gudthing

+0

はい合意しました!これは、特にthymeleafが自然のテンプレートエンジンであると主張されている場合にのみ、解決策ではなく、解決策ではないと考えられます。私たちがここに何かを見逃しているかどうか本当に知りたいです。 – Prashant

答えて

0

あなたは新しい属性によって階層レイアウトのサポートを提供Thymeleaf Layout Dialectを、使用することができます。これらの属性はThymeleafの属性と似ていますが、追加の機能を提供します。

たとえば、レイアウトヘッドセクションのコンテンツと、ボディセクションを提供するページからのヘッドセクションのコンテンツを混在させることができます。

ページのレイアウトとして使用するテンプレートを作成する必要があります。

<head> 
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script> 
    <title>My app - Home page</title> 
</head> 
:結果のページには、以下のheadセクションを持つことになります。この方法で

ファイルresources/templates/layouts/layout.html

<!DOCTYPE html> 
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 
    <head> 
    <link href="../../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" th:src="@{js/bootstrap.min.js}"></script> 
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">My app</title> 
    </head> 
    <body> 
    <section layout:fragment="content"> 
     <!-- Content replaced by each page's content fragment --> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Praesent scelerisque neque neque, ac elementum quam dignissim interdum. 
     </p> 
    </section> 
    </body> 
</html> 

ファイルresources/templates/index.html

<!DOCTYPE html> 
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
     layout:decorator="layouts/layout"> 
<head> 
    <title>Home page</title> 
</head> 
<body> 
    <div layout:fragment="content"> 
     <h1>hey</h1> 
     <div class="btn btn-success">button</div> 
     <button class="btn btn-success">another</button>  
    </div> 
</body> 
</html> 

:あなたの例に基づいて、あなたはこのような何かを持っているでしょう

に注意してください最終的なタイトルを生成するためのパターンを設定することを可能にする3210属性。レイアウトの方言は、ページのheadセクションにも含まれるスクリプトやスタイルシートをデフォルトでマージします。わかりやすくするために、ヘッダー、フッター、メニューなどのフラグメントは含まれていませんが、サポートされています。

プロジェクトのページを見て、プロジェクトに追加する依存関係と必要な設定を確認してください。ブートを使用している場合、この方言はすでにThymeleafスターターでサポートされているため、依存関係をプロジェクトに追加するだけで自動構成されます。

EDIT: Iレイアウト例でミスを修正したが、レイアウトを使用した:断片:代わりにレイアウトを含みます。

+0

私は私のオリジナルにこの解決策を好むので私はそれを受け入れた。階層的なレイアウトが大好きなので、さらに詳しく調べる必要があります:) – gudthing

+0

は例外のために小さな変更を加えなければなりませんでした。私はレイアウトを変更します: 'layout:include =" content "'を 'layout:include =" :: content "' – gudthing

+0

に変更してください。申し訳ありません、私のせいで、_layout:fragment = "content" _これは、ページの内容を含めるために使用する属性です。答えに訂正されました。 –

4

いいえ私はこれを使って方法を見つけましたsolution。私はまだそれがclunkyだと思う、と私はまだ良い方法がなければならないと思うが、私のニーズのためにこれで十分です(あなたが1つを持っている場合は、解決策を共有してください):

魔法はth:remove="tag"と、実行時に、 objectタグを除去し、適切なフラグメントを表示します

<head> 
    <title>THIS DOES SHOW</title> 
    <object th:include="fragments/header :: header" th:remove="tag"><object> 
</head> 

だから今、出力は次のとおりです。

<head> 
    <title>THIS DOES SHOW</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/bootstrap.min.js"></script> 
</head> 
+0

良い解決策ですが、コードにエラーがありますが、

関連する問題