codestory

Verwenden Sie Layout in Thymeleaf

  1. Das Zweck der Unterricht
  2. Zum Beispiel: Ví dụ Thymeleaf Layout

1. Das Zweck der Unterricht

Page Layout erwähnt die Gliederung der Text, Bild und anderen Objekte in einer Seite. Und es ist die am meisten interessierte Problem für die Website Designer. In dieser Unterricht werde ich die im Thymeleaf verwendete Technik vorstellen um ein Layout zu erstellen.
Thymeleaf benutzt die fragment um zur Erstellung einer Seite zu verbinden, So sollen Sie vor der Kontinuität mit der Unterricht fragment lernen.
Eine website kann viele Seite haben, aber die Seiten hat die ähnlichen Struktur. Z.B : unten ist das eine einfache Struktur:
Nach der obengemeinten Struktur können Sie die unterschiedlichen Seiten erstellen:

2. Zum Beispiel: Ví dụ Thymeleaf Layout

Unten ist das das Foto einer Applikation, die in Spring Boot geschrieben wird. Bitte haben Sie keine Sorge wenn Sie ein anderes Framework. Die Struktur des Projekt kann sich ein bisschen unterscheiden aber es ist Ihnen nicht schwierig, die Schritten zu verstehen, die ich gerade implementieren.
Erstellen Sie 2 Files main.css & main-layout.html:
Die File main-layout.html enthaltet ein fragment mit 6 Parameters. Diese Parameter hilft bei der Formen der vollen Interface einer Seite.
layouts/main-layout.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
    th:fragment="main-fragment (title, otherStaticResources, header, nav, mainContent, footer)">
<head>
<meta charset="UTF-8" />
<title th:replace="${title}">Page 1 Title</title>
<link rel="stylesheet" type="text/css" th:href="@{/main.css}" href="../../static/main.css"/>
<!-- Other javascript, css source files -->
<th:block th:replace="${otherStaticResources} ?: ~{}"></th:block>
</head>
<body>
    <header th:insert="${header} ?: ~{}">
        <h2>Page 1</h2>
    </header>
    <section>
        <nav th:insert="${nav} ?: ~{}">
            <ul>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
            </ul>
        </nav>
        <article th:insert="${mainContent} ?: ~{}">
            <h1>Page 1</h1>
            <p>Main content of Page 1</p>
        </article>
    </section>
    <footer th:insert="${footer} ?: ~{}">
        <p>Footer</p>
    </footer>
</body>
</html>
main.css
* {
    box-sizing: border-box;
}
header {
    background-color: #666;
    padding: 5px;
    text-align: center;
    font-size: 35px;
    color: white;
}
nav {
    float: left;
    width: 30%;
    height: 300px;
    background: #ccc;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
article {
    float: left;
    padding: 20px;
    width: 70%;
    background-color: #f1f1f1;
    height: 300px;
}
section:after {
    content: "";
    display: table;
    clear: both;
}
footer {
    background-color: #777;
    padding: 10px;
    text-align: center;
    color: white;
}
@media ( max-width : 600px) {
    nav, article {
        width: 100%;
        height: auto;
    }
}

Öffnen Sie die File main-layout.html direkt auf das Browser und Sie können ihre Interface sehen.

Die File app-fragments.html enthahtet die fragment, die in viele verschiedenen Template der Applikation wieder benutzt werden.
fragments/app-fragments.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>App Fragments</title>
</head>
<body>
    <!-- Default Navigator -->
    <ul th:fragment = "nav-default">
        <li><a th:href="@{/}">Home</a></li>
        <li><a th:href="@{/products}">Products</a></li>
        <li><a th:href="@{/about}">About</a></li>
    </ul>
    <!-- Admin Navigator -->
    <ul th:fragment = "nav-admin">
        <li><a th:href="@{/admin/products}">Product Management</a></li>
        <li><a th:href="@{/admin/orders}">Order Management</a></li>
    </ul>
    <div th:fragment="copyright">
      &copy; o7planning.org
    </div>
</body>
</html>
Erstellen Sie die anderen Seite für Ihre Applikation:
  • home.html, products.html, about.html.

Die File home.html benutzt Layout, das durch die File main-layout.html definiert wird, und überträgt die Werte für die Parameter.

home.html
<!DOCTYPE html>
<!--  main-fragment (title, otherStaticResources, header, nav, mainContent, footer)  -->
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: main-fragment(  
                                                ~{::title},
                                                ~{:: #home-static-resources},
                                                ~{:: #home-header},
                                                ~{:: #home-nav},
                                                ~{:: #home-main-content},  
                                                ~{:: #home-footer}
                                               )}">
                                              
<head>
    <title>Title of Home Page</title>
    <th:block id="home-static-resources">
        <script type="text/javascript" src="../static/home.js" th:src="@{/home.js}"></script>
        <link rel="stylesheet" type="text/css" href="../static/home.css" th:href="@{/home.css}"/>
    </th:block>
</head>
<body>
    <div id="home-header">
        Header of Home Page
    </div>
    <div id="home-nav" th:replace="~{/fragments/app-fragments :: nav-default}">
        Home Nav
    </div>
    <div id="home-main-content">
        <h2>Home content</h2>
        <div>Content of Home Page</div>
    </div>
    <div id="home-footer" th:replace="~{/fragments/app-fragments :: copyright}">
        Footer
    </div>
</body>
</html>
products.html
<!DOCTYPE html>
<!--  main-fragment (title, otherStaticResources, header, nav, mainContent, footer)  -->
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: main-fragment(  
                                                ~{::title},
                                                ~{:: #products-static-resources},
                                                ~{:: #products-header},
                                                ~{:: #products-nav},
                                                ~{:: #products-main-content},  
                                                ~{:: #products-footer}
                                               )}">
                                              
<head>
    <title>Title of Products Page</title>
    <th:block id="products-static-resources">  
       <script type="text/javascript" src="../static/products.js" th:src="@{/products.js}"></script>
    </th:block>
</head>
<body>
    <div id="products-header">
        Header of Products Page
    </div>
    <div id="products-nav" th:replace="~{/fragments/app-fragments :: nav-default}">
         Nav
    </div>
    <div id="products-main-content">
        <h2>Product</h2>
        <p>Samsung</p>
        <p>iPhone</p>
        <p>Nokia</p>
    </div>
    <div id="products-footer" th:replace="~{/fragments/app-fragments :: copyright}">
        Footer
    </div>
</body>
</html>
about.html
<!DOCTYPE html>
<!--  main-fragment (title, otherStaticResources, header, nav, mainContent, footer)  -->
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: main-fragment(  
                                                ~{::title},
                                                ~{:: #about-static-resources},
                                                ~{:: #about-header},
                                                ~{:: #about-nav},
                                                ~{:: #about-main-content},  
                                                ~{:: #about-footer}
                                               )}">
                                              
<head>
    <title>Title of About Page</title>
    <th:block id="about-static-resources">
        <script type="text/javascript" src="../static/about.js" th:src="@{/about.js}"></script>
    </th:block>
</head>
<body>
    <div id="about-header">
        Header of About Page
    </div>
    <div id="about-nav" th:replace="~{/fragments/app-fragments :: nav-default}">
         Nav
    </div>
    <div id="about-main-content">
        <h2>About</h2>
        <div>Content of About Page</div>
    </div>
    <div id="about-footer" th:replace="~{/fragments/app-fragments :: copyright}">
        Footer
    </div>
</body>
</html>
MainController.java
package org.o7planning.thymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {
    @RequestMapping("/")
    public String home() {
        return "home";
    }
    @RequestMapping("/products")
    public String products() {
        return "products";
    }
    @RequestMapping("/about")
    public String about() {
        return "about";
    }
}

Neueste Artikel

Show More