Question

我有一个layout.html文件，我想在其他所有html文件中使用，如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"></link>
</head>
<body>
<div id="wrapper">
    <div data-th-replace="fragments/sidebars :: sidebar"></div>
    <!--  page content -->
    <div data-layout-fragment="content"></div>
</div>
<script th:src="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" type="text/javascript"></script>
<script th:src="@{/webjars/jquery/jquery.min.css}" type="text/javascript"></script>
</body>
</html>

这是我的片段/侧边栏：

<div class="sidebar" data-th-fragment="sidebar">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <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"> </a>
        </div>

        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav ">
            <li><label>Welcome, User</label></li>
        </ul>

        <div class="collapse navbar-collapse navbar-ex1-collapse ">
            <ul class="nav navbar-nav side-nav">
                <li><a href="#item1"> Dashboard</a></li>
                <li><a href="#item2"> Settings</a></li>
            </ul>
        </div>
    </nav>
</div>

这是索引文件，它调用布局并将内容放在内容div上：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      data-layout-decorate="~{fragments/layout}">
<head>
    <title></title>
</head>

<body>
<div id="page-wrapper" data-layout-fragment="content">
    <div class="container-fluid">
        /*some content here*
    </div>
</div>
</body>
</html>

当我运行应用程序时，我获取了最后一个文件中定义的内容，但它没有调用布局模板。数据布局装饰。在我的pom.xml文件中，我有依赖项：

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

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

可能有什么不对？一直想弄清楚，但没有成功。

资源文件夹中的项目结构：

 static
     css
     js
 templates
     fragments
         sidebars.html
         layout.html
     index.html

提前谢谢。

编辑：我的控制器是：

@RequestMapping(value = "/",method = RequestMethod.GET)
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("index");
    return modelAndView;
}

Answer 1

您的项目中似乎使用的是旧版本的Thymeleaf。 Spring-Boot 1.x 附带 Thymeleaf 2.x 。但是，您使用的是新的thymeleaf-layout语法（data-layout-decorate），这也需要更现代的Thymeleaf。

您可以通过在pom.xml中设置其版本属性来升级这两个库，如下所示：

<properties>
    <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>

然后您的模板将呈现。

另请参阅this github-issue，其中语法发生了变化。

Thymeleaf页面布局问题

1 个答案: