Umstellung auf Thymeleaf: Schritt 3 RELOADED - Thymleaf mit LayoutDialect

[website] / src / main / webapp / thymeleaf / templates / fragments.html
diff --git a/src/main/webapp/thymeleaf/templates/fragments.html b/src/main/webapp/thymeleaf/templates/fragments.html

new file mode 100644 (file)

index 0000000..28115d7
--- /dev/null
+++ b/src/main/webapp/thymeleaf/templates/fragments.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
+  <head>
+    <title>Fragments</title>
+    <link rel="stylesheet/less" type="text/css" href="../../less/all.less" th:remove="all"/>
+    <script src="../../js/less-1.5.1.js" th:remove="all"></script>
+  </head>
+  <body>
+    <h1>Explanation fo the german word "Impressum"</h1>
+    <hr />
+    <aside class="m" th:fragment="about">
+      <h1>What the f*#!@ is an <em>Impressum</em> ?!?</h1>
+      The german law enforces the so called <em>Impressum</em> to enable
+      customers to easily find out all juristically relevant informations
+      about the company, that rules a site.
+      <h1>Find out more...</h1>
+      If you just want to learn more about juplo you should better
+      <a href="../about.html" th:href="@{/about.html}" title="Learn more about juplo now">visit our about-pages</a>.
+    </aside>
+    <hr />
+    <h1>Work-in-progress-hint</h1>
+    <hr />
+    <article class="main" layout:fragment="wip(title)">
+      <header><h1 th:text="${title}">PAGE-TITLE</h1></header>
+      <div class="wip" th:fragment="wip">
+        <img class="w" src="/img/comming-soon.png" alt="Comming soon..."/>
+        <p th:include="templates/layout :: maincontent" th:remove="tag">
+          PAGE-CONTENT
+        </p>
+      </div>
+    </article>
+    <hr />
+    <h1>Marginalspalte</h1>
+    <hr />
+    <div th:fragment="marginalcontent" th:remove="tag">
+      <aside class="m">
+        <h1>Other nasty but marginal stuff</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </aside>
+      <aside class="m">
+        <h1>More nasty stuff</h1>
+        <p>
+          This one is really short!
+        </p>
+      </aside>
+    </div>
+    <hr />
+  </body>
+</html>