Question

我正在努力使Spring Boot中的Thymeleaf负载准备好的模板片段进入目标网页。

index.html文件不会通过装饰加载模板，即使我可以直接通过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 -->

我想念什么？

Answer 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>

百里香模板引擎（layout：decorate）不会在Spring Boot中加载模板文件

1 个答案: