thymeleaf模板页面两种布局方案

方案一：

采用th:include + th:replace方式进行布局

首先创建布局文件layout1.html

页面中内容如下：

    
    
    
    



    

        

            采用th:replace方式进行布局
        
    
    
页面正文内容
    

        

            
© Hylun 2017
            

                Powered by Alun
            
        
    

其中关键点为：

正文内容

此处为页面中变化的正文内容部分

第二步：编写页面正文内容text.html

    

        页面中正文内容：采用th:include + th:replace方式进行页面布局
    

此处需要注意为：

th:replace="demo/layout1 内容，该内容指引了第一步中layout1.html文件所在目录位置

第三步：编写后端链接地址：

编写demo.java类

@Controller
public class DemoController {

    /**
     * 验证采用th:replace方式布局的方式
     * @return
     */
    @RequestMapping("layout1")
    public String testLayout1(){
        return "text";
    }

    


}

然后启动程序访问得到内容为：

 

方案二：

采用layout方式设置

第一步：要在pom.xml文件中依赖

      nz.net.ultraq.thymeleaf
      thymeleaf-layout-dialect
      2.3.0
    

 

第二步： 编写布局页面layout2.html

    
    
    
    



    

        

            采用layout方式进行布局
        
    
    

    

        

            
© Hylun 2017
            

                Powered by Alun
            
        
    

关键点：

xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"  ： 引入layout标签

页面正文内容
  设置页面正文内容所在位置

 

第三步：编写内容页面：text2.html

    

        正文内容222222222222
    

关键点：

layout:decorator="demo/layout2"  ：此位置指向layout2.html页面位置

layout:fragment="content"  ：指定页面正文内容 content要与layout2.html页面中定义的名字一致

第四步： 定义链接地址 demo.java

@Controller

public class DemoController {

   

    /**
     * 验证采用layout方式布局的方式
     * @return
     */
    @RequestMapping("layout2")
    public String testLayout2(){
        return "demo/text2";
    }


}

 

访问后显示内容：

 

扩展内容：模板间传参

当采用方案一时，模板间可以进行参数传递

layout1.html文件内容

    
    
    
    



    

        

            采用th:replace方式进行布局
        
    
    

    

        

            
© Hylun 2017
            

                Powered by Alun
            
        
    

 

内容页面text1.html

    

        页面中正文内容：采用th:include + th:replace方式进行页面布局
        模板传输参数为：
    

详情参见：https://blog.csdn.net/mygzs/article/details/52527758