Separated layout from content with Thymeleaf

[demos/testing] / src / main / resources / templates / layout.html
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html

index bc5799a..233b937 100644 (file)
--- a/src/main/resources/templates/layout.html
+++ b/src/main/resources/templates/layout.html
@@ -1,9 +1,9 @@
  <!doctype html>
-<html xmlns:th="http://www.thymeleaf.org" lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="pagelayout(title,header,body)">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Shows Remote-Content</title>
+    <title th:replace="${title}">TITLE</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>
@@ -11,11 +11,9 @@
        <h2 class="navbar-brand">Demo: Unit-Test or Integration-Test &mdash; A Practical Guide</h2>
      </nav>
      <main class="container mt-5">
-      <div class="card">
-        <div class="card-header" id="content"><h1>Information About Fetched Data</h1></div>
-        <div class="card-body">
-          <p class="card-text"><pre th:text="${text}">TEXT</pre></p>
-        </div>
+      <div id="content" class="card">
+        <div class="card-header"><h1 th:replace="${header}">HEADER</h1></div>
+        <div class="card-body"><div th:replace="${body}">BODY</div></div>
        </div>
      </main>
    </body>