如何使用Thymeleaf集成共享布局，并在项目中的所有html页面中使用该布局？
到目前为止，我所做的就是这样，但显然它不起作用。我想在所有页面中使用此页眉和页脚，如何制作共享布局并在其他页面中使用它？？我已经给出了图片和代码。请帮助我使用一个html页面的示例代码，该页面正在使用主布局。html。
因为我对Thymeleaf非常陌生，所以代码中可能会有愚蠢的错误。
比你提前。
标题。HTML
<header class="site-header" th:fragment="header">
<div class="container">
<a href="index.html" id="branding">
<img src="/dummy/logo.png" alt="Site Title">
<small class="site-description">Slogan goes
here</small>
</a> <!-- #branding -->
<nav class="main-navigation">
<button type="button" class="toggle-menu"><i class="fa
fa-bars"></i></button>
<ul class="menu">
<li class="menu-item"><a href="../views/index.html">Home</a></li>
<li class="menu-item"><a href="../views/about.html">About</a></li>
<li class="menu-item"><a href="../views/gallery.html">Gallery</a></li>
<li class="menu-item"><a href="../views/download.html">Download</a></li>
<li class="menu-item"><a href="../views/blog.html">Blog</a></li>
<li class="menu-item"><a href="../views/contact.html">Contact</a></li>
</ul> <!-- .menu -->
</nav> <!-- .main-navigation -->
<div class="mobile-menu"></div>
</div>
</header> <!-- .site-header -->
页脚。HTML
<footer class="site-footer" th:fragment="footer">
<div class="container">
<img src="dummy/logo-footer.png" alt="Site Name">
<address>
<p>495 Brainard St. Detroit, MI 48201 <br><a href="tel:354543543">(563) 429 234 890</a> <br> <a
href="mailto:info@bandname.com">info@bandname.com</a></p>
</address>
<form action="#" class="newsletter-form">
<input type="email" placeholder="Enter your email to
join newsletter...">
<input type="submit" class="button cut-corner" value="Subscribe">
</form> <!-- .newsletter-form -->
<div class="social-links">
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div> <!-- .social-links -->
<p class="copy">Copyright 2014 Company Name. Designed by
Themezy. All right reserved</p>
</div>
</footer> <!-- .site-footer -->
MAIN_LAYOUT. HTML
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Loading third party fonts -->
<link href="http://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,600,700,900" rel="stylesheet" type="text/css">
<link href="fonts/font-awesome.min.css" th:href="@{fonts/font-
awesome.min.css}" rel="stylesheet" type="text/css">
<!-- Loading main css file -->
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="js/ie-support/html5.js"></script>
<script src="js/ie-support/respond.js"></script>../../static/
<![endif]-->
</head>
<body class="header-collapse">
<div id="site-content">
<div th:replace="fragments/header::header"></div>
<div th:replace="fragments/footer::footer"></div>
</div> <!-- #site-content -->
<script th:src="@{js/jquery-1.11.1.min.js}"></script>
<script th:src="@{js/plugins.js}"></script>
<script th:src="@{js/app.js}"></script>
</body>
</html>
HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head>
</head>
<body>
<div class="hero">
<div class="slider">
<ul class="slides">
<li class="lazy-bg" data-background="dummy/slide-1.jpg">
<div class="container">
<h2 class="slide-title">Header goes here</h2>
<h3 class="slide-subtitle">Less important text goes here</h3>
<p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Fugiat
aliquid minus nemo sed est.</p>
<a href="#" class="button cut-corner">Read More</a>
</div>
</li>
<li class="lazy-bg" data-background="dummy/slide-2.jpg">
<div class="container">
<h2 class="slide-title">Header goes here</h2>
<h3 class="slide-subtitle">Less important text goes here</h3>
<p class="slide-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Fugiat
aliquid minus nemo sed est.</p>
<a href="#" class="button cut-corner">Read More</a>
</div>
</li>
<li class="lazy-bg" data-background="dummy/slide-3.jpg">
<div class="container">.........
共有1个答案
您没有在MAIN\u布局内指定页面内容的位置。HTML：
<div id="site-content">
<div th:replace="fragments/header::header"></div>
<!-- ** div for content fragment - this was missed ** -->
<div layout:fragment="content"> Page content </div>
<div th:replace="fragments/footer::footer"></div>
</div> <!-- #site-content -->
此外，上面声明的布局应该包含在INDEX. HTML中，以便thymeleaf可以解析并将您的内容放在这个div中。
html prettyprint-override"><body>
<!-- ** layout container - this was missed **-->
<div layout:fragment="content">
<!-- your page content -->
</div
</body>
-
问题内容： 我试图找到一些可以使用qt布局并从中删除所有内容的东西。只是想像一下窗口是什么样子-我有： 所以我需要可以递归调用的东西，以清除并删除父母的所有东西。我尝试了这里提到的事情（在pyqt中清除布局中的所有小部件），但是它们都不起作用（无论如何都没有标记正确答案）。我的代码如下所示： 但这给出了一个错误： =>编辑这种方法很有效（但是，除了： 问题答案： 清除布局的最安全方法是使用其tak
-
随着CSS网格布局模块即将在Firefox和Chrome中发布，我想我应该尝试一下如何使用它。 我尝试创建一个简单的网格，其中一个项目横跨所有行的左侧，其他项目(、、、等）横跨各个行的右侧。横过行右侧的项的数量是可变的，因此可能存在、、、等的任何组合，因此我使用了属性。因此，我无法为定义要跨转的固定行数，但我希望跨转所有可用行。 null null 要使跨越所有行而不知道最终会有多少行，我应该做什
-
我有一个包含多行< code>UILabel的< code>UIView子类。此视图使用自动布局。 我想将此视图设置为 （而不是节标题）。此标头的高度将取决于标签的文本，而标签文本又取决于设备的宽度。自动布局的场景应该很棒。 我已经找到并尝试了许多解决方案来使其工作，但无济于事。我尝试了一些事情： < li >在< code>layoutSubviews期间在每个标签上设置< code > pre
-
为了确保界面元素在应用程序程序在运行时或被预览时的各种状态下都能够正常显示，我们需要把它们放进布局当中去。 11.2.1 应用和破除布局 应用布局的最简单做法是选中界面元素，使用工具栏上的按钮、鼠标右键的上下文菜单，以及【Form】菜单都可以实现。 一旦界面元素被放进一个布局之中，它就不能单独自由行动了 -你不可以单独改变它的 大小，因为布局接管了这一工作，它控制了位于其中的界面元素的几何以及间隔
-
页面由组件构成，页面的高度和宽度由组件的高度和宽度确定，当页面的高度大于屏幕的高度，或者页面的宽度大于屏幕的宽度，页面就会出现滚动条。 页面指的是w文件 屏幕指的是门户中用于显示功能界面的区域 目录 1、流式布局 2、充满布局 2.1、左右充满 2.2、上下充满 2.3、多标签页充满 3、响应式布局 4、手机界面布局 4.1、显示多页 4.2、显示多行信息（一行显示一条记录） 4.3、显示多行信息
-
页面由组件构成，页面的高度和宽度由组件的高度和宽度确定，当页面的高度大于屏幕的高度，或者页面的宽度大于屏幕的宽度，页面就会出现滚动条。 页面指的是w文件 屏幕指的是门户中用于显示功能界面的区域 目录 1、流式布局 2、充满布局 2.1、左右充满 2.2、上下充满 2.3、多标签页充满 3、响应式布局 4、手机界面布局 4.1、显示多页 4.2、显示多行信息（一行显示一条记录） 4.3、显示多行信息