【Golang】——Gin 框架中的模板渲染详解

Gin 框架支持动态网页开发，能够通过模板渲染结合数据生成动态页面。在这篇文章中，我们将一步步学习如何在 Gin 框架中配置模板、渲染动态数据，并结合静态资源文件创建一个功能完整的动态网站。

文章目录

- 1. 什么是模板渲染？
- - 1.1 概念介绍
  - 1.2 Gin 中的模板渲染
- 2. Gin 模板渲染基础
- - 2.1 配置模板引擎
  - - 示例代码
    - 说明
  - 2.2 创建模板文件
  - - 模板语法说明
  - 2.3 使用 `LoadHTMLFiles` 方法
- 3. 模板渲染进阶
- - 3.1 条件判断
  - - 示例模板
    - 示例数据
  - 3.2 循环处理
  - - 示例模板
    - 示例数据
  - 3.3 嵌套模板
  - - 基础模板 `layout.html`
    - 子模板 `home.html`
    - 渲染嵌套模板
- 4. 静态文件的处理
- - 4.1 配置静态文件服务
  - 4.2 在模板中引用静态文件
  - - 示例静态文件
- 5. 实战：简易博客项目
- - 5.1 项目结构
  - 5.2 完整代码
- 6. 总结

在这里插入图片描述

1. 什么是模板渲染？

1.1 概念介绍

模板渲染是一种动态生成 HTML 页面的技术。通过模板文件和动态数据的结合，Web 应用可以为每个用户生成不同的内容。模板渲染的主要作用包括：

数据与视图分离：HTML 文件专注于页面结构和样式，动态数据由代码逻辑控制。
代码复用：通过模板复用页面组件（如导航栏、页脚等）。
维护便利：HTML 和业务逻辑分开，降低了代码维护的复杂性。

1.2 Gin 中的模板渲染

Gin 使用 Go 标准库 html/template 提供模板功能。html/template 是一套基于 HTML 的安全模板引擎，避免了常见的跨站脚本攻击 (XSS)。

2. Gin 模板渲染基础

2.1 配置模板引擎

在 Gin 框架中，模板引擎的配置通过以下步骤完成：

加载模板文件。
在路由中使用 c.HTML() 渲染模板。

示例代码

package mainimport "github.com/gin-gonic/gin"func main() {r := gin.Default()// 1. 加载模板文件r.LoadHTMLGlob("templates/*")// 2. 定义路由r.GET("/", func(c *gin.Context) {c.HTML(200, "index.html", gin.H{"Title": "Gin 模板示例","Message": "欢迎来到 Gin 的世界！",})})// 3. 启动服务器r.Run(":8080")
}

说明

LoadHTMLGlob("templates/*")：加载 templates 文件夹下的所有 .html 文件。
c.HTML(200, "index.html", gin.H{"key": "value"})：渲染模板，传递键值对形式的数据。

2.2 创建模板文件

在项目根目录下创建 templates/index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ .Title }}</title>
</head>
<body><h1>{{ .Message }}</h1>
</body>
</html>

模板语法说明

{{ .变量名 }}：用于输出变量值。
模板中的 .变量名 对应 gin.H 中的键。

运行程序后，访问 http://localhost:8080，浏览器将显示模板渲染的内容。

2.3 使用 `LoadHTMLFiles` 方法

LoadHTMLFiles 用于加载指定的模板文件，而不是整个目录：

r.LoadHTMLFiles("templates/index.html", "templates/about.html")

适用于模板文件较少且明确的情况。

3. 模板渲染进阶

Gin 模板渲染支持条件判断、循环、嵌套等功能。下面逐一讲解这些功能的实现方式。

3.1 条件判断

条件判断通过 {{ if }} 实现，可以搭配 {{ else }} 或 {{ else if }}。

示例模板

<h1>{{ .Title }}</h1>
{{ if .IsAdmin }}
<p>欢迎，管理员！</p>
{{ else }}
<p>欢迎，普通用户！</p>
{{ end }}

示例数据

c.HTML(200, "index.html", gin.H{"Title": "条件判断示例","IsAdmin": true,
})

当 IsAdmin 为 true 时，显示“欢迎，管理员！”。

3.2 循环处理

通过 {{ range }} 遍历数组或切片：

示例模板

<ul>{{ range .Items }}<li>{{ . }}</li>{{ end }}
</ul>

示例数据

c.HTML(200, "index.html", gin.H{"Items": []string{"苹果", "香蕉", "橙子"},
})

渲染结果为：

<ul><li>苹果</li><li>香蕉</li><li>橙子</li>
</ul>

3.3 嵌套模板

嵌套模板允许你将页面分为多个组件，例如公共的头部和尾部。

基础模板 `layout.html`

<!DOCTYPE html>
<html lang="en">
<head><title>{{ .Title }}</title>
</head>
<body><header>公共头部</header>{{ template "content" . }}<footer>公共尾部</footer>
</body>
</html>

子模板 `home.html`

{{ define "content" }}
<h1>{{ .Message }}</h1>
{{ end }}

渲染嵌套模板

r.GET("/", func(c *gin.Context) {c.HTML(200, "layout.html", gin.H{"Title": "嵌套模板示例","Message": "欢迎使用嵌套模板！",})
})

模板 layout.html 会自动嵌入子模板内容。

4. 静态文件的处理

4.1 配置静态文件服务

静态文件（如 CSS、JS、图片）通过 Static() 方法加载：

r.Static("/static", "./static")

此代码将项目中的 static 文件夹映射到 URL 路径 /static。

4.2 在模板中引用静态文件

<link rel="stylesheet" href="/static/style.css">
<script src="/static/app.js"></script>

示例静态文件

static/style.css：

body {font-family: Arial, sans-serif;background-color: #f5f5f5;
}

在这里插入图片描述

5. 实战：简易博客项目

5.1 项目结构

├── main.go
├── static
│   └── style.css
├── templates
│   ├── layout.html
│   ├── home.html
│   ├── post.html

5.2 完整代码

package mainimport ("github.com/gin-gonic/gin"
)type Post struct {ID      intTitle   stringContent string
}var posts = []Post{{1, "第一篇博客", "这是第一篇博客内容。"},{2, "第二篇博客", "这是第二篇博客内容。"},
}func main() {r := gin.Default()// 配置模板和静态文件r.LoadHTMLGlob("templates/*")r.Static("/static", "./static")// 首页路由r.GET("/", func(c *gin.Context) {c.HTML(200, "layout.html", gin.H{"Title": "首页","Posts": posts,})})// 文章详情路由r.GET("/post/:id", func(c *gin.Context) {id := c.Param("id")for _, post := range posts {if string(post.ID) == id {c.HTML(200, "layout.html", gin.H{"Title":   post.Title,"Content": post.Content,})return}}c.String(404, "文章未找到")})r.Run(":8080")
}