Thymeleaf页面来源格式不正确

时间:2016-05-02 05:55:49

标签: html thymeleaf

我正在使用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>

1 个答案:

答案 0 :(得分:0)

您的代码中存在问题。它应该是布局:替换而不是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>

content.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>

每项工作都很好