文章/答案/技术大牛

发布

问Thymeleaf页面布局问题
EN

Stack Overflow用户

提问于 2017-10-10 15:16:58

回答 1查看 1.1K关注 0票数 1

我想在每个其他html文件中使用一个layout.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>

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

<!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;
}

java

spring

spring-boot

thymeleaf

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-11 10:57:56

在您的项目中，您似乎使用了一个旧版本的Thymeleaf。Spring-Boot1.x随Thymeleaf 2.x一起发布。然而，您正在使用一种新的Thymeleaf语法-布局(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>

然后你的模板就会呈现。

还请参阅这 github-在哪里发生语法更改。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46670319

复制

相似问题

问Thymeleaf页面布局问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Thymeleaf页面布局问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Thymeleaf页面布局问题
EN