Thymeleaf 的 3 片段插入不起作用答案

【问题标题】：Thymeleaf's 3 fragment insert not workingThymeleaf 的 3 片段插入不起作用
【发布时间】：2017-09-28 23:54:12
【问题描述】：

我想在我的 Java Web 应用程序中使用 Thymeleaf 作为模板引擎。我还想使用 Bootstrap 4 构建前端。我正在使用 Intellij IDEA 2017.2.5 Ultimate、Spring Boot 1.5.7、Tomcat 8.5.13、Java 8、Thymeleaf 3.0.7 和 Gradle。我创建了一个简单的控制器：

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

@Controller
public class HomeController {
    @RequestMapping("/")
    public String homeScreen()
    {
        return "index";
    }
}

还有两个 HTML 文件：分别为 base 和 index：

<!DOCTYPE html>
<html lang="pl_PL" xmlns:th="http://www.thymeleaf.org">
    <head th:fragment="head">
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <title>Title</title>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
              integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"/>
    </head>
    <body>

        <header th:fragment="header">
            <div class="btn-group btn-group-lg" role="group">
                <button type="button" class="btn btn-secondary">Home</button>
                <button type="button" class="btn btn-secondary">Invoices</button>
                <button type="button" class="btn btn-secondary">Customers</button>
                <button type="button" class="btn btn-secondary">Products</button>
                <button type="button" class="btn btn-secondary">Warehouse</button>
            </div>
        </header>

        <div th:fragment="bootstrap-js-jquery-links">
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
                    integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
                    integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:insert="base :: head"></head>
    <body>
        <header th:insert="base :: header"></header>
        <div th:insert="base :: bootstrap-js-jquery-links"></div>
    </body>
</html>

当我运行这个应用程序时，一切都正确构建和部署，但我在我的索引页面上看不到任何东西，比如 th:insert 没有工作。当我在控制器中将return "index" 更改为return "base" 时，这就是我得到的（以及我想用index 作为返回字符串得到的）：

根据Thymeleaf's documentation我觉得我写的东西是正确的，那么我哪里出错了？我的build.gradle：

buildscript {
    ext {
        springBootVersion = '1.5.7.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse-wtp'
apply plugin: 'org.springframework.boot'
apply plugin: 'war'

group = 'com.invoices-web'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
    mavenCentral()
}

configurations {
    providedRuntime
}

dependencies {
    compile('org.springframework.boot:spring-boot-starter-data-jpa'){
        exclude group: 'org.hibernate', name:'hibernate-core'
    }
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
    compile('org.springframework.boot:spring-boot-starter-web')
    runtime('org.postgresql:postgresql')
    providedRuntime('org.springframework.boot:spring-boot-starter-tomcat')
    testCompile('org.springframework.boot:spring-boot-starter-test')
    compile group: 'org.hibernate', name: 'hibernate-core', version: '5.2.11.Final'
    compile group: 'org.hibernate.javax.persistence', name: 'hibernate-jpa-2.1-api', version: '1.0.0.Final'
    compile group: 'org.thymeleaf', name: 'thymeleaf-spring4', version: '3.0.7.RELEASE'
    compile group: 'com.ibm.icu', name: 'icu4j', version: '59.1'
    compile group: 'org.apache.pdfbox', name: 'pdfbox', version: '2.0.7'
    compile group: 'com.google.guava', name: 'guava', version: '23.0'

}

我的项目结构：

【问题讨论】：

标签： java twitter-bootstrap intellij-idea thymeleaf bootstrap-4

【解决方案1】：

你可以试试这个：

index.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="base :: head"></head>
    <body>
        <header th:replace="base :: header"></header>
        <div th:replace="base :: bootstrap-js-jquery-links"></div>
    </body>
</html>

【讨论】：

replace 和insert 有什么区别？我不会替换任何东西，是吗？
th:insert ：它将简单地插入指定的片段作为其宿主标签的主体。 th:replace ：实际上将主机标签替换为片段的标签。如果你用替换来改变插入，它会正常工作。