百里香模板引擎（布局：装饰）不会在 Spring Boot 中加载模板文件答案

【问题标题】：Thyme template engine (layout:decorate) doesn't load the template file in Spring Boot百里香模板引擎（布局：装饰）不会在 Spring Boot 中加载模板文件
【发布时间】：2019-04-16 09:40:11
【问题描述】：

我正在努力让 Thymeleaf 将 Spring Boot 中准备好的模板片段加载到目标网页中。

index.html 文件不会通过 decorate 加载模板，即使我可以通过 th:replace 直接包含它们。我正在关注教程，但无法找到解决方案。我相信默认模板位置应该是我正在使用的资源/模板。 html代码如下：

index.html

<th:block layout:decorate="layout/layout" layout:fragment="content">

    <!-- PAGE CONTENT -->
    <div class="container" id="homePage">
    <div>
    <h1>Headline</h1>
    bla <br />
    <!--<span th:text="${article.title}" /><br />
    <span th:text="${article.title}" /><br />-->
    </div>
    <div class="row">
    <div class="col-lg-12">
    <h2>This is Home Page</h2>
    <div class="well">
    I am inside a bootstrap well.
    </div>
    </div>
    </div>
    </div>
    <!-- /.container -->
</th:block>

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
<th:block th:replace="layout/fragments/head"></th:block>
</head>
<body>

<th:block th:replace="layout/fragments/nav"></th:block>
<!-- Page Content -->
<div layout:fragment="content" />
<!-- /.container -->
<th:block th:replace="layout/fragments/footer"></th:block>
</body>
</html>

head.html

 <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Spring Thymeleaf Dialect Configuration</title>
<!-- Bootstrap Core CSS -->
<link th:href="@{/resources/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom CSS -->
<link th:href="@{/resources/css/logo-nav.css}" rel="stylesheet">
<script th:inline="javascript"> var contextRoot = /*[[@{/}]]*/ ''; </script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

文件夹结构：

Maven project structure

这里是 Maven 依赖项：

http://maven.apache.org/xsd/maven-4.0.0.xsd"> 4.0.0

<groupId>com.faire</groupId>
<artifactId>thyme2</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>thyme2</name>
<description>Demo project for Spring Boot Thyme</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.0.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
</properties>

<dependencies>
    <!--
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-security</artifactId>
            </dependency>
    -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>

    <!-- Bootstrap -->
    <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.1.3</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.webjars.bower/jquery -->
    <dependency>
        <groupId>org.webjars.bower</groupId>
        <artifactId>jquery</artifactId>
        <version>3.3.1</version>
    </dependency>


    <!--<dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>-->
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

index.html 的 HTML 输出：

<!-- PAGE CONTENT -->
<div class="container" id="homePage">
<div>
<h1>Headline</h1>
bla <br />
<!--<span th:text="${article.title}" /><br />
<span th:text="${article.title}" /><br />-->
</div>
<div class="row">
<div class="col-lg-12">
<h2>This is Home Page</h2>
<div class="well">
I am inside a bootstrap well.
</div>
</div>
</div>
</div>
<!-- /.container -->

我错过了什么？

【问题讨论】：

标签： spring-boot templates thymeleaf

【解决方案1】：

添加布局方言解决了这个问题：

    <dependency>
        <groupId> nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
    </dependency>

我相信它是 spring-boot-starter-thymeleaf 的一部分，但似乎恰恰相反。

包含依赖后的html输出：



    <!DOCTYPE html>
    <html lang="en">
    <head>

       <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Spring Thymeleaf Dialect Configuration</title>
    <!-- Bootstrap Core CSS -->
    <link href="/resources/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/resources/css/logo-nav.css" rel="stylesheet">
    <script> var contextRoot = "\/"; </script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>

    <!-- navigation --> <!-- inverse = white on black color schema, fixed top = always on the top (sticky would unhide when
    scrolling down -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <!-- data-toggle - collapses target -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" date-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
    Spring ThymeLeaf
    </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li>
    <a href="/demoPage1">Demo Page 1</a>
    </li>
    <li>
    <a href="/demoPage2">Demo Page 2</a>
    </li>
    </ul>
    </div>
    <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
    </nav>
    <!-- Page Content -->


        <!-- PAGE CONTENT -->
        <div class="container" id="homePage">
        <div>
        <h1>This is headline!</h1>
        bla <br />
        <!--<span th:text="${article.title}" /><br />
        <span th:text="${article.title}" /><br />-->
        </div>
        <div class="row">
        <div class="col-lg-12">
        <h2>This is Home Page</h2>
        <div class="well">
        I am inside a bootstrap well.
        </div>
        </div>
        </div>
        </div>
        <!-- /.container -->

    <!-- /.container -->
    <div>
    &copy; 2018 Faire
    <!-- jQuery -->
    <script src="/resources/js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="/resources/js/bootstrap.min.js"></script>
      <!-- Bootstrap Core JavaScript -->
    <script src="/resources/js/custom.js"></script>
    </div>
    </body>
    </html>
    <div>
    &copy; 2018 Faire
    <!-- jQuery -->
    <script src="/resources/js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="/resources/js/bootstrap.min.js"></script>
      <!-- Bootstrap Core JavaScript -->
    <script src="/resources/js/custom.js"></script>
    </div>

【讨论】：