2016-04-09 6 views
3

私はSpringブートを使用して作成したアプリケーションを「開発中」のため、テンプレートの管理方法はあまりよく分かりません。Springブートでテンプレート/インクルードを使用する

私はこれを行うには、2つの方法が取り払わました:

カスタムタグを使用して文字列としてHTML/JSPファイルの値を返すと、それは

何かこの

のように使用します

<th:header></th:header> 
 
<!-- This would be the header (The implementation of this tag in Java) --> 
 

 
<body> 
 
    Things that are not common 
 

 

 
    <th:footer></th:footer> 
 
    <!-- This would be the footer --> 
 
</body>

他の方法はインクルードを使用している可能性がありますが、その方法はわかりません。

Springを使用してこれを行う別の方法がわからない場合は、あなたが私を理解できることを願っています。

お手元にありがとうございました。

答えて

5

Thymeleafを使用できます。そして、あなたは、あなたがそうのような個別のファイルでフラグメントthymeleaf共通ヘッダと共通ナビゲーションバーを持っているでしょう

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

<head th:replace="common/header :: common-header" /> 

<body> 

    <div th:replace="common/navbar :: common-navbar" /> 
    <your content here> 
</body 
</html> 

を使用することができます(第注意:一般的なファイルでフラグメントをまた、これらのファイルは、共通の下にあることに注意してくださいフォルダ):

<head th:fragment="common-header"> 

<title>DevOps Buddy</title> 

<!-- Bootstrap core CSS --> 
<link th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}" 
     rel="stylesheet" media="screen" /> 

<!-- Custom styles for this template --> 
<link type="text/css" th:href="@{/css/styles.css}" rel="stylesheet" media="screen"/> 

そしてそう

<div th:fragment="common-navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a th:text="#{navbar.home.text}" href="/"></a></li> 
       <li><a th:text="#{navbar.about.text}" href="/about"></a></li> 
       <li><a th:text="#{navbar.contact.text}" href="/contact"></a></li> 
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li th:if="${#authorization.expression('!isAuthenticated()')}"> 
        <a th:href="@{/login}" th:text="#{navbar.login.text}" /> 
       </li> 
       <li th:if="${#authorization.expression('isAuthenticated()')}"> 
        <form id="f" th:action="@{/logout}" method="post" role="form" class="navbar-form"> 
         <button type="submit" th:text="#{navbar.logout.text}" class="btn btn-primary" /> 
        </form> 
       </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 
+0

どうもありがとう、私は約を聞いていませんでしたこの。 –

+0

ようこそ。私は、Spring Boot、Thymeleaf、Bootstrap、AWS、Stripeを使ってゼロからWebサイトを作成する方法を教えるためのオンラインコースを作成しています。コースでは、上記のトピックだけでなく、もっと多くを表示します。必要な場合は、http://academy.devopsfolks.com/courses/startup-ready-web-skeleton-with-spring-boot-aws-and-stripe/で興味のあることを登録できます。コースは登録のために開かれています。 –

関連する問題