GoFrame框架html模板布局使用block块继承

创建于 3年前 / 阅读数 1 / 评论数 0 / 2年前

GoFrame框架html模板布局使用block块继承

1、项目目录如下

demo
  |—template
  |	   |—layout
  |    |   |—main.html
  |    |—index
  |		   |——index.html
  |—main.go

2、定义mian.html，使用define关键字定义模板文件，block定义代码块

{{define "layout/main.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ .Title }}</title>
	{{/*  css代码块   */}}
    {{block "styles" .}}{{end}}
</head>
<body>
    <h1 style="color: aqua">{{ .ContentStart }}</h1>
	{{/*  内容代码块  */}}
    {{block "content" .}}{{end}}
    <h3 style="color: cadetblue">{{ .ContentEnd }}</h3>
</body>
{{/*  js代码块  */}}
{{block "scripts" .}}{{end}}
</html>
{{end}}

3、定义index.html子页面

{{/*  继承layout布局main.html  */}}
{{template "layout/main.html" .}}

{{/*  继承main.html中的styles部分  */}}
{{define "styles"}}
    <style>
        .h1 {
            color: darkgreen;
        }
    </style>
{{end}}

{{/*  继承main.html中的content部分  */}}
{{define "content"}}
    <h1 class="h1">Hello World~~~</h1>
{{end}}

{{/*  继承main.html中的scripts部分  */}}
{{define "scripts"}}
    <script type="text/javascript">
        function f() {
            console.log("继承script部分")
        }
        f();
    </script>
{{end}}

4、编写main.go处理器逻辑

package main

import (
	"github.com/gogf/gf/frame/g"
	"github.com/gogf/gf/net/ghttp"
)

func main() {

	s := g.Server()

	s.BindHandler("/", func(r *ghttp.Request) {
		r.Response.WriteTpl("index/index.html", g.Map{   // index.html文件在template目录中的路径
			"Title": "Hello GF",       // 标题
			"ContentStart": "content start",  // 输出变量到模板中使用
			"ContentEnd": "content end",
		})
	})

	s.SetAddr(":88")
	s.Run()
}

4、启动访问，输出的html页面源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello GF</title>
    
    <style>
        .h1 {
            color: darkgreen;
        }
    </style>

</head>
<body>
    <h1 style="color: aqua">content start</h1>
    
    <h1 class="h1">Hello World~~~</h1>

    <h3 style="color: cadetblue">content end</h3>
</body>

    <script type="text/javascript">
        function f() {
            console.log("继承script部分")
        }
        f();
    </script>


</html>

讨论数量: 0