堆栈

1、加载模板

r := gin.Default()
r.LoadHTMLGlob("../../templates/frontend/*")
//分配模板
r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", gin.H{
        "message": "test",
        "time":    time.Now().Unix(), //分配时间戳到模板
    })
})

如果是一级目录，模板可以不需要声明，例如index.html，也可以不声明，模板包含的文件header.html同理。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   {{template "header.html" .}}
</head>
<body>
<div>frontend</div>
<div>时间 ：{{UnixToTime .time}}</div>
</body>
</html>

声明

{{define "index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{template "header.html" .}}
</head>
<body>
<div>frontend</div>
<div>时间 ：{{UnixToTime .time}}</div>
</body>
</html>
{{end}}

r := gin.Default()
r.LoadHTMLGlob("../../templates/admin/**/*")
//分配模板
r.GET("/admin", func(c *gin.Context) {
        c.HTML(http.StatusOK, "index/index.html", gin.H{
        "message": "test",
    })
})

如果是多级目录，模板需要声明，例如index.html，模板包含的文件header.html，同理也需要声明。

{{define "index/index.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{template "common/header.html" .}}
</head>
<body>
<div>admin</div>
</body>
</html>
{{end}}

2、加载静态资源

具体静态资源存放路径参考下面demo

r := gin.Default()
r.Static("/static", "../../templates/assets/frontend")

3、模板使用

循环遍历

//定义结构体
type Test struct {
	Name string
	Age  int8
}

var AssignTest []Test

//分配变量给模板
assignTest := append(AssignTest, Test{Name: "test", Age: 10}, Test{Name: "test1", Age: 20})
r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", gin.H{
    "assignTest": assignTest,
    })
})

模板遍历

{{range $index,$value := .assignTest}}
    <div>名字 ：{{$value.Name}}，年龄：{{$value.Age}}</div>
{{end}}

条件判断

4、自定义模板函数

定义处理时间函数

func UnixToTime(timestamp int64) string {
	t := time.Unix(timestamp, 0)
	return t.Format("2006-01-02 15:04:05")
}

入口处理

r := gin.Default()
//自定义模板函数  注意要把这个函数放在加载模板前
r.SetFuncMap(template.FuncMap{
    "UnixToTime": tools.UnixToTime,
})
r.GET("/", func(c *gin.Context) {
    c.HTML(http.StatusOK, "index.html", gin.H{
        "message": "test",
        "time":    time.Now().Unix(), //分配时间戳到模板
    })
})

模板index.html里面使用

<div>时间 ：{{UnixToTime .time}}</div>

demo地址

https://github.com/iamzcr/my-stacklifes/tree/main/test_template

demo项目目录树

test_template
├── README.md
├── go.mod
├── go.sum
├── main.go
├── cmd
│  ├── admin
│  │  └── main.go
│  └── frontend
│     └── main.go
├── templates
│  ├── admin
│  │  ├── common
│  │  │  └── header.html
│  │  └── index
│  │     └── index.html
│  ├── assets
│  │  ├── admin
│  │  │  └── css
│  │  │     └── style.css
│  │  └── frontend
│  │     └── css
│  │        └── style.css
│  └── frontend
│     ├── header.html
│     └── index.html
└── tools
   └── tools.go