1. define + template方式
    2. include模板嵌入方式

    这两种方式均支持对模板变量的传入。

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

    注意,为嵌套的子模板传递模板变量时,应当使用:{{template "xxx" .}} 的语法。

    使用示例:

    1. layout.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}}
      1. package main
      2. import (
      3. "github.com/gogf/gf/v2/frame/g"
      4. "github.com/gogf/gf/v2/net/ghttp"
      5. )
      6. func main() {
      7. s.BindHandler("/", func(r *ghttp.Request) {
      8. r.Response.WriteTpl("layout.html", g.Map{
      9. "header": "This is header",
      10. "container": "This is container",
      11. "footer": "This is footer",
      12. })
      13. })
      14. s.SetPort(8199)
      15. s.Run()
      16. }

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

    模板引擎-模板布局 - 图2

    include模板嵌入

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

    注意,为嵌套的子模板传递模板变量时,应当使用:{{include "xxx" .}} 的语法。

    使用示例:

    1. layout.html

      1. {{include "header.html" .}}
      2. {{include .mainTpl .}}
      3. {{include "footer.html" .}}
      1. <h1>FOOTER</h1>
    2. main1.html

      1. <h1>MAIN1</h1>
    3. main2.html

    4. main.go

      1. package main
      2. import (
      3. "github.com/gogf/gf/v2/frame/g"
      4. "github.com/gogf/gf/v2/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