模板渲染 · 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> ~~~ ##