Thymeleaf 页面源格式不正确答案

【问题标题】：Thymeleaf page source not properly formattedThymeleaf 页面源格式不正确
【发布时间】：2016-05-02 05:55:48
【问题描述】：

我正在使用 layout:fragment 嵌入一些 HTML。当我右键单击并查看页面源代码时，我注意到 HTML 的格式格式不正确。例如，一个 div 标签将不合适（这将导致其中的内容未对齐）。同样，网页的某些部分似乎有空白。我使用了 HTML 格式化程序，因此我网页中的百里香叶格式正确。

我相信这个项目被称为布局方言。 GitHub 网址在这里：https://github.com/ultraq/thymeleaf-layout-dialect

有人知道防止这种情况发生的方法吗？

应用程序的主页有以下内容：

 <div class="container">
     <div layout:fragment="content">
     </div>
 </div>

它链接的页面是这样的：

<div layout:fragment="content">
  <a class="btn btn-primary" href="/posts/new">Add new post</a>
  <a class="btn btn-primary" href="/posts/report">View post report</
</div>

【问题讨论】：

你能显示你的代码和输出吗？
我使用百里香叶，但我从未尝试过这个问题。如果您（简要地）展示您的代码，我可以对其进行测试。
@Troncador 我尝试添加必要的代码。请让我知道这是否足以让您测试
@Albert 您在哪里右键单击并查看？ IDE 还是网络浏览器？是代码格式问题还是html渲染问题？能不能加个截图让我们看清楚？
我的回答解决了你的问题？

标签： html thymeleaf

【解决方案1】：

您的代码有问题。它应该是 layout:replace 而不是 layout:fragment

<div class="container">
  <div layout:fragment="content">

我的代码版本：

Main.java

public static void main(String arg[]){
  FileTemplateResolver templateResolver = new FileTemplateResolver();
  // path to the files *.html
  templateResolver.setPrefix("/home/user/desktop/"); 
  templateResolver.setSuffix(".html");
  templateResolver.setTemplateMode("HTML5");
  TemplateEngine templateEngine = new TemplateEngine();
  templateEngine.setTemplateResolver(templateResolver);

  Context ctx = new Context();
  String text = templateEngine.process("index", ctx);

  // print html processed
  System.out.println(text);
}

maven中的依赖：

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring3</artifactId>
    <version>2.1.4.RELEASE</version>
</dependency>

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<body>
    <h1>Index</h1>
    <div th:replace="content :: fooName"> </div>
</body>
</html>

内容.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:fragment="fooName">
     <a class="btn btn-primary" href="/posts/new">Add new post</a>
     <a class="btn btn-primary" href="/posts/report">View post report</a>
    </div>
 </body>
</html>

输出是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <h1>Index</h1>
    <div>
      <a class="btn btn-primary" href="/posts/new">Add new post</a>
      <a class="btn btn-primary" href="/posts/report">View post report</a>
    </div>
</body>
</html>

一切正常

【讨论】：