模板布局

gview模板引擎支持两种layout模板布局方式:define + template方式 和 include模板嵌入方式。

define + template

由于gview底层采用了ParseFiles方式批量解析模板文件,因此可以使用define标签定义模板内容块,通过template标签在其他任意的模板文件中引入指定的模板内容块。template标签支持跨模板引用,也就是说define标签定义的模板内容块可能是在其他模板文件中,template也可以随意引入。

使用示例:

模板布局 - 图1

  1. layout.html
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>GoFrame Layout</title>
    5. {{template "header"}}
    6. </head>
    7. <body>
    8. <div class="container">
    9. {{template "container"}}
    10. </div>
    11. <div class="footer">
    12. {{template "footer"}}
    13. </div>
    14. </body>
    15. </html>
  2. header.html
    1. {{define "header"}}
    2. <h1>HEADER</h1>
    3. {{end}}
  3. container.html
    1. {{define "container"}}
    2. <h1>CONTAINER</h1>
    3. {{end}}
  4. footer.html
    1. {{define "footer"}}
    2. <h1>FOOTER</h1>
    3. {{end}}
  5. main.go

    1. package main
    2. import (
    3. "github.com/gogf/gf/frame/g"
    4. "github.com/gogf/gf/net/ghttp"
    5. )
    6. func main() {
    7. s := g.Server()
    8. s.BindHandler("/", func(r *ghttp.Request) {
    9. r.Response.WriteTpl("layout.html", nil)
    10. })
    11. s.SetPort(8199)
    12. s.Run()
    13. }

执行后,访问 http://127.0.0.1:8199 结果如下:

模板布局 - 图2

include模板嵌入

当然我们也可以使用include标签来实现页面布局。

使用示例:

模板布局 - 图3

  1. layout.html
    1. {{include "header.html" .}}
    2. {{include .mainTpl .}}
    3. {{include "footer.html" .}}
  2. header.html
    1. <h1>HEADER</h1>
  3. footer.html
    1. <h1>FOOTER</h1>
  4. main1.html
    1. <h1>MAIN1</h1>
  5. main2.html
    1. <h1>MAIN2</h1>
  6. main.go

    1. package main
    2. import (
    3. "github.com/gogf/gf/frame/g"
    4. "github.com/gogf/gf/net/ghttp"
    5. )
    6. func main() {
    7. s := g.Server()
    8. s.BindHandler("/main1", func(r *ghttp.Request) {
    9. r.Response.WriteTpl("layout.html", g.Map{
    10. "mainTpl": "main/main1.html",
    11. })
    12. })
    13. s.BindHandler("/main2", func(r *ghttp.Request) {
    14. r.Response.WriteTpl("layout.html", g.Map{
    15. "mainTpl": "main/main2.html",
    16. })
    17. })
    18. s.SetPort(8199)
    19. s.Run()
    20. }

执行后,访问不同的路由地址,将会看到不同的结果:

  1. http://127.0.0.1:8199/main1

    模板布局 - 图4

  2. http://127.0.0.1:8199/main2

    模板布局 - 图5