springboot入门（6）freemarker实现共享的母版（layout）

1、在resouces/templates 下，创建一个base文件夹

image.png

2、在base文件夹下

（1）创建header.ftl

（2）创建footer.ftl

（3）创建sidebar.ftl

    


        

            Toggle navigation

            

            

            

        

        SB Admin v2.0

    

    

    


        

        


            

                 

            

            


                
 User Profile

                

                
 Settings

                

                


                
 Logout

                

            

            

        

        

    

    

    


        


            


                


                    


                        

                        

                                

                                    

                                

                            

                    

                    

                

                


                     看板

                

                


                     用户列表

                

                


                     用户新增

                

            

        

        

    

    

3、创建layout.ftl

    <#include "header.ftl">

    <#macro css>

        <#nested>

    







        <#include "sidebar.ftl">

    <#macro layout>

        <#nested>

    



    <#include "footer.ftl">



    <#macro js>

        <#nested>

    

4、创建一个user-list.ftl，复用layout的布局

<#include "base/layout.ftl">

<@css>

    

    



<@layout>



    


        


            


        

    

    


        


            


                


                    用户列表

                

                

                


                    新增

                    


                    


                    

                        <#list user_list as user>

                        


                        


                        


                            
ID

                            
姓名

                            
年龄

                            
性别

                            
手机

                            
操作

                        

                        

                        


                            
${user.id}

                            
${user.name}

                            
${user.age}

                            


                                <#if user.sex == "1">

                                男

                                <#else >

                                女

                                

                            

                            
${user.mobile}

                            
修改 删除

                        

                        

                        

                    

                

                

            

            

        

        

    





<@js>