英文:
How to use Thymeleaf layout:fragment with Spring Boot properly?
问题
我是你的中文翻译，以下为翻译好的内容：
我是否误解了问题，三天内没有得到任何答案？
在我的项目中，Thymeleaf基本上是有效的，但是layout:fragment在我尝试的方式下无法正常工作。可能是我做错了什么，我阅读了类似的主题，但我需要一些帮助。我希望login.html具有与main.html中定义的相同的导航栏和页脚。
main.html位于/templates/layouts，而login.html位于/templates/auth。
更新
装饰器是main.html，我在body中放置了<div layout:fragment="content">，其中内容应该被放置。
我尝试过在login.html的标签中放置layout:decorator="layouts/main">，并在body标签下放置layout:fragment="content"。
login.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" layout:decorator="layouts/main">
<head>
<!-- 必需的元标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/logincss.css">
</head>
<body class="signin-body">
<div layout:fragment="content">
<div class="container signin-container">
<!-- 其他部分已略 -->
</div>
</div>
<!-- 其他部分已略 -->
</body>
</html>
main.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- 必需的元标签和链接 -->
</head>
<body>
<div class="main-container">
<!-- 菜单栏部分已略 -->
<div layout:fragment="content">
</div>
</div>
<!-- 页脚部分已略 -->
</body>
</html>
WebConf.java
@Configuration
public class WebConf implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/login").setViewName("auth/login");
registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
}
}
英文:
Did I take the question wrong that I haven'T gotten any answer for 3 days?
Thymeleaf is working basically in my project but layout:fragment doesn't want to work the way as I tried. Probably I'm doing something wrong and I read similar topics but I'd need some help with that. I'd like the login.html has the same nav bar and footer that's defined in main.html
main.html is in the /templates/layouts and login.html is in /templates/auth
UPDATE
The decorator is the main.html where I put <div layout:fragment="content"> in the body where the content suppose to get.
What I tried is that I put layout:decorator="layouts/main"> in the login's html tag and layout:fragment="content" under the body tag.
login.html
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en" layout:decorator="layouts/main">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<!--We are choosing these two to let the browser to load faster-->
<link rel="stylesheet" type="text/css" href="css/logincss.css">
<!--this is the last one so that we can override previous boostrap styles if we want-->
<head>
<body class="signin-body">
<div layout:fragment="content">
<div class="container signin-container">
<div class="row">
<div class="col"></div>
<div class="col-sm-12 col-md-8">
<div class="card signin-card">
<div class="card-block">
<form name="login" th:action="@{/login}" method="post" class="signin-form">
<div class="form-group">
<h2 class="form-signin-heading">Please sign in</h2>
<div th:if="${param.error}" class="alert alert-danger">Wrong username and password</div>
<div th:if="${param.logout}" class="alert alert-success">You successfully logged out</div>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" name="username" class="form-control" placeholder="Username" required="true">
<label for="password" class="sr-only">Password</label>
<div class="form-group">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required="true">
</div>
</div>
<button class="btn btn-lg btn-primary btn-block signin-btn" type="submit">Login</button>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<!-- <label class="custom-control-label" for="customCheck1">Remember me <a href="#"> Need help?</a></label> -->
<a class="new-account" href="/registration">Create New Account</a>
</div>
</form>
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="css/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
main.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/2dafcd6f62.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS // Let's connect the CSS to the grid system -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<!--CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" th:href="@{css/style.css}">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css" th:href="@{css/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css}">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.3.1-dist/css/bootstrap.min.css" th:href="@{css/bootstrap-4.3.1-dist/css/bootstrap.min.css}">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="main-container">
<!-- ########## MENU BAR ########## -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#">MENU</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active"></li>
<li class="nav-item">
<a class="nav-link" href="#" th:text="${references}" target="_blank">some text...</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${qualifications}">
qualification or something
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#" th:text="${it}">Some text...</a>
<a class="dropdown-item" href="#" th:text="${vaadin}">Some text...</a>
<a class="dropdown-item" href="#" th:text="${java}">Some text...</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${myproject}">
some text...
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="pdf/modulzaro.pdf" th:text="${exam}">some text...</a>
</div>
</li>
</ul>
</div>
<form th:action="@{/logout}" method="post">
<input class="button-logout" type="submit" value="Log Out" />
</form>
</nav>
<div layout:fragment="content">
</div>
</div>
<!--FOOTER-->
<footer class="footer bg-dark">
<!--we can put here our own container-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-3 socialWrapper">
<p class="contact">Email:
<br>Phone: </p>
</div>
<div class="col-sm-12 col-lg-9 footer-font-icons">
<a href="#" target="_blank">
<!--target="_blank" will open our github page on a new page-->
<i class="fa fa-github-square fa-3x" aria-hidden="true"></i></a>
<a href="#" target="_blank">
<i class="fa fa-stack-overflow fa-3x" aria-hidden="true"></i></a>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="css/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
WebConf.java
@Configuration
public class WebConf implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/login").setViewName("auth/login");
registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
}
}
答案1
得分: 1
好的，我找到了问题的根源：
我忘记添加以下依赖项：
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
现在它可以正常工作了。
英文:
Ok, I found the source of the issue:
I forgot to add the following dependency:
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
Now it works.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论