thymeleaf中fragment 的layout布局

最新推荐文章于 2023-04-11 20:23:10 发布

shanshan_blog

最新推荐文章于 2023-04-11 20:23:10 发布

阅读量1.9w

点赞数 2

分类专栏： Java spring-boot-thymeleaf 文章标签： fragment Thymeleaf 布局 layout spring

本文链接：https://blog.csdn.net/shanshan_blog/article/details/65630607

版权

Java spring-boot-thymeleaf 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 配置

如果要引入fragment的layout，需要添加依赖：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:1.2.1')

2 layout的引用

定义一个layout文件，目录为/WEB-INF/views/task/layout.html，内容如下：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <!DOCTYPE html> 
          
         <html> 
           <head> 
             <!--/*  Each token will be replaced by their respective titles in the resulting page. */--> 
             <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title> 
             ... 
           </head> 
           <body> 
             <!--/* Standard layout can be mixed with Layout Dialect */--> 
             <div th:replace="fragments/header :: header"> 
               ... 
             </div> 
             <div class="container"> 
               <div layout:fragment="content"> 
                 <!-- ============================================================================ --> 
                 <!-- This content is only used for static prototyping purposes (natural templates)--> 
                 <!-- and is therefore entirely optional, as this markup fragment will be included --> 
                 <!-- from "fragments/header.html" at runtime.                                     --> 
                 <!-- ============================================================================ --> 
                 <h1>Static content for prototyping purposes only</h1> 
                 <p> 
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                   Praesent scelerisque neque neque, ac elementum quam dignissim interdum. 
                   Phasellus et placerat elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                   Praesent scelerisque neque neque, ac elementum quam dignissim interdum. 
                   Phasellus et placerat elit. 
                 </p> 
               </div> 
               <div th:replace="fragments/footer :: footer">&copy; 2014 The Static Templates</div> 
             </div> 
           </body> 
          
          </html>

上面文件的layout核心配置代码为layout:fragment="content"。在目录WEB-INF/views/task/list.html

下创建内容页面，代码如下：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <!DOCTYPE html> 
          
         <html layout:decorator="task/layout"> 
           <head> 
             <title>Task List</title> 
             ... 
           </head> 
           <body> 
             <!-- /* Content of this page will be decorated by the elements of layout.html (task/layout) */ --> 
             <div layout:fragment="content"> 
               <table class="table table-bordered table-striped"> 
                 <thead> 
                   <tr> 
          
                      <td>ID</td> 
          
                     <td>Title</td> 
                     <td>Text</td> 
                     <td>Due to</td> 
                   </tr> 
                 </thead> 
                 <tbody> 
          
                    <tr th:if="${tasks.empty}"> 
          
                     <td colspan="4">No tasks</td> 
                   </tr> 
                   <tr th:each="task : ${tasks}"> 
                     <td th:text="${task.id}">1</td> 
                     <td><a href="view.html" th:href="@{'/' + ${task.id}}" th:text="${task.title}">Title ...</a></td> 
                     <td th:text="${task.text}">Text ...</td> 
                     <td th:text="${#calendars.format(task.dueTo)}">July 11, 2012 2:17:16 PM CDT</td> 
          
                    </tr> 
          
                 </tbody> 
               </table> 
             </div> 
           </body> 
          
          </html>

页面task/list的内容由task/layout的标签配置布局。注意在<html>标签中的属性layout:decorator="task/layout"。该属性会被标记到Layout Dialect，而Layout Dialect就是layout用来给指定视图配置布局用的。

3 在Layout Dialect中用include方式配置布局

下面为复用alert片段的例子，其目录为layout:fragment (task/alert.html)，代码如下：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <!DOCTYPE html> 
          
         <html> 
           <body> 
          
              <th:block layout:fragment="alert"> 
          
               <div class="alert alert-dismissable" th:classappend="'alert-' + ${type}"> 
                 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
                 <h4 th:text="${header}">Alert header</h4> 
                 <!--/* 'layout:fragment' attribute defines a replaceable content section */--> 
                 <th:block layout:fragment="alert-content"> 
                   <p>Default alert content</p> 
                 </th:block> 
               </div> 
             </th:block> 
           </body> 
          
          </html>

若要引用上面的片段，可用下面方式：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div layout:include="task/alert :: alert" th:with="type='info', header='Info'" th:remove="tag"> 
          
           <!--/* Implements alert content fragment with simple content */--> 
           <th:block layout:fragment="alert-content"> 
             <p><em>This is a simple list of tasks!</em></p> 
           </th:block> 
          
          </div>

也可以这样引用：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div layout:include="task/alert :: alert" th:with="type='danger', header='Oh snap!'" th:remove="tag"> 
          
           <!--/* Implements alert content fragment with full-blown HTML content */--> 
           <th:block layout:fragment="alert-content"> 
             <p>Some text</p> 
          
              <p> 
          
               <button type="button" class="btn btn-danger">Take this action</button> 
               <button type="button" class="btn btn-default">Or do this</button> 
          
              </p> 
          
           </th:block> 
          
          </div>

shanshan_blog

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
thymeleaf中fragment 的layout布局

1 配置如果要引入fragment的layout，需要添加依赖： compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:1.2.1')2 layout的引用定义一个layout文件，目录为/WEB-INF/views/task/layout.html，内容如下： html> head> title l
复制链接

扫一扫