Thymeleaf提取公共页面（从实例入手，以inspinia模板为例）

场景

使用Thymelaf 时，可以提取公共页面，比如侧边栏、需要公共引入的css、js文件、页脚等都可以提取出来。只编写业务页面的内容部分即可。

三种不同引入方式的区别

th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，

th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，

th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中

用一个官方例子来区分三者的不同：

© 2011 The Good Thymes Virtual Grocery

    

    © 2011 The Good Thymes Virtual Grocery
    

 

© 2011 The Good Thymes Virtual Grocery

© 2011 The Good Thymes Virtual Grocery

实现

将公共的页面放在template目录下的layout目录下

采用从后往前的顺序来引用

最终业务开发页面代码

    

        

            


                
条件搜索
                

                    
                        
                    
                
            
            

                
                    
                    
                        
                    
                    
                    
                    
                        
                    
                    
                

                            

                                

                                    

                                        收货单号
                                        
                                    
                                
                                

                                    

                                        供应商名称
                                        
                                    
                                
                                

                                    

                                        状态
                                        
                                            全部
                                            
                                        
                                    
                                
                            
                        

                             重置
                             搜索
                        
            
        
        

            

                

                    　　

                    
                     查看
                     删除
                     提交
                     导入
                     打印
                     模板下载
                     生成入库单数据
                     刷新
                
                


                
                
                    
                    
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                    
                    
                    
                
序号
收货单号
收货日期
收货人
供应商编号
供应商名称
总托数
总件数
送货单号
创建人
创建日期
状态

            
        
    
    

        

            

                ×Close
                
                    

                        
                    
                
                上传
                导入
            
        
    
    
    

        

            

                ×Close


            
        
    

注：

1.此页面通过th:replace来添加需要引用的css和js文件，即用layput目录下的layout.html来代替，并传递三个参数，一个是页面标题，一个是CSS路径，一个是js路径。

2.th:fragment部分就是声明一个代码块，是主要的业务代码部分。

来到引用的layout.html

layout是控制整个页面布局的模板文件。

    

    

        

        

            

        
        

            

                霸道 技术支持
            
            

                流氓 气质管理系统
            
        

    

注：

1.head部分通过th:replace来使用layout目录下的header.html下的head代码块（即使用th:fragment="head(title,cssPaths)标识的部分）来代替，并将从上个页面接收到的参数再传递给head代码块。

2.再往下使用layout目录下的slide.html中的silder代码块来代替，使用公共侧边栏，下面同理引入导航栏。

3.再往下使用 th:include来引进当前页面的content代码块，即上个页面使用

声明的部分。

4.再往下就是公共的页脚部分，没有抽取公共页面，直接写死即可。

5.再往下就是使用th:replace引用的页脚部分，接受上个页面传递的js路径参数，并传递给layout目录下的footer.html中的foot代码块。

引入的head页面代码

注：

1.通过th:fragment="head(title,cssPaths)接收上个页面传递过来的参数，标题和CSS路径。

2.通过th:text="${title}"动态显示标题。

3.然后引用一些基础样式，引用href属性通过@符号来引用。

4.然后分隔接受的cssPath参数，通过循环依次引入，使用内置变量通过#strings.setSplit，使用#来使用。使用${cssPaths}接受上个页面传递的参数。使用@符号使用href属性。

引入的silder页面代码

引入的navbar页面代码

    

        

            

            
            

                

                    
                         退出
                    
                
            
        
    

注：

1.只是抽取了退出按钮，其中退出的href属性通过th:href="@{/logout}"来引用，跳转到退出登录对应的url。

引入的foot页面代码

注：

1.大体思路同上面的cssPath路径的解析引用。

2.这里在每个引用的js后面追加了一个9位的随机数，掩人耳目。