模板渲染 · beego私房菜

## Layout 設計 * * #### 你的整個系統有些是固定的，比如頂部和底部，只會變中間的部分 * #### 使用： ~~~ controller中： this.Layout = "base.html" this.TplName = "test_layout.html" ? base.html中： ? {{.LayoutContent}} ? 必須設置這個變量，變量名不能變 ~~~ * #### 也可以這樣使用 ~~~ layout.html中： {{template "header.html" .}} Logic code {{template "footer.html" .}} ~~~ ## LayoutSection ~~~ controller中： this.Layout = "layout_blog.html" this.TplName = "blogs/index.html" this.LayoutSections = make(map[string]string) ? ? ? // map類型，key--value this.LayoutSections["HtmlHead"] = "blogs/html_head.html" this.LayoutSections["Scripts"] = "blogs/scripts.html" ? ? layout_blog.html中： <!DOCTYPE html> <html> <head> ? ? <title>Lin Li</title> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ? ? <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> ? ? <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> ? ? {{.HtmlHead}} </head> <body> ? ? ? <div class="container"> ? ? ? ? {{.LayoutContent}} ? ? </div> ? ? <div> ? ? ? ? {{.SideBar}} ? ? </div> ? ? <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> ? ? <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> ? ? {{.Scripts}} </body> </html> ? ? html_head.html中： <style> ? ? h1 { ? ? ? color: red; ? ? } </style> ? scripts.html中： <script type="text/javascript"> ? $(document).ready(function() { ? ? ? // bla bla bla ? }); </script> ~~~ ##