1. 简单应用

  • Gin 支持 HTML 模板，然后将参数渲染到模板页面并返回，本质上是对页面内容进行字符串替换

  • 可以使用 LoadHTMLGlob(pattern string) 方法加载模板文件

    g := gin.Default()
g.LoadHTMLGlob("template/**/*")

1.1 单目录结构

  • 目录结构如下
|- template
   |- index.html
|- main.go
  • main.go 代码：
func main() {
    g := gin.Default()
    // 加载 template 目录下的模板文件
    g.LoadHTMLGlob("template/*")
    g.GET("/index", func(ctx *gin.Context) {
        ctx.HTML(http.StatusOK, "index.html", gin.H{
            "title": "HTML 模板渲染样例",
            "body": "这里是内容",
        })
    })
    g.Run()
}
  • template/index.html 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ .title }}</title>
    <!-- 会被替换成以下注释中的内容 -->
    <!-- <title>HTML 模板渲染样例</title> -->
</head>
    <body>
        {{ .body }}
    	<!-- 会被替换成以下注释中的内容 -->
        <!-- 这里是内容 -->
    </body>
</html>

1.2 多级目录结构

  • 目录结构如下
|- template
   |- user
      |- index.html
|- main.go
  • main.go 代码：
func main() {
    g := gin.Default()
    // 加载 template 目录下的模板文件
    g.LoadHTMLGlob("template/**/*")
    g.GET("/index", func(ctx *gin.Context) {
        ctx.HTML(http.StatusOK, "user/index.html", gin.H{
            "title": "HTML 模板渲染样例",
            "body": "这里是内容",
        })
    })
    g.Run()
}
  • template/user/index.html 代码：
{{ define "user/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ .title }}</title>
    <!-- 会被替换成以下注释中的内容 -->
    <!-- <title>HTML 模板渲染样例</title> -->
</head>
<body>
	{{ .body }}
	<!-- 会被替换成以下注释中的内容 -->
	<!-- 这里是内容 -->
</body>
</html>
{{ end }}

2. 模板复用

  • 目录结构如下：
|- static
|- template
   |- public
      |- footer.html
      |- header.html
   |- user
      |- index.html
|- main.go
  • main.go 代码：
func main() {
    g := gin.Default()
    // 加载 template 目录下的模板文件
    g.LoadHTMLGlob("template/**/*")
    g.GET("/index", func(ctx *gin.Context) {
        ctx.HTML(http.StatusOK, "user/index.html", gin.H{
            "title": "HTML 模板渲染样例",
            "body": "这里是内容",
        })
    })
    g.Run()
}
  • user/index.html 代码：
{{ define "user/index.html" }}
<!DOCTYPE html>
<html lang="en">
{{ template "public/header" . }}
{{ template "public/footer" . }}
</html>
{{ end }}
  • public/header.html 代码：
{{ define "public/header" }}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ .title }}</title>
    <!-- 会被替换成以下注释中的内容 -->
    <!-- <title>HTML 模板渲染样例</title> -->
</head>
{{ end }}
  • public/footer.html 代码：
{{ define "public/footer" }}
<body>
	{{ .body }}
	<!-- 会被替换成以下注释中的内容 -->
	<!-- 这里是内容 -->
</body>
{{ end }}

3. 静态资源文件映射

  • 可以使用 Static(uriPath, rootPath string) 方法配置静态资源文件目录
g.Static("/static", "./static")