【基于GO的Web开发8】gin框架模板渲染

一、基础概念gin.Htype H map[string]interface{}是 Gin 封装的快捷 map 类型用来给 HTML 模板传递数据。HTML 渲染三步骤模板解析 → 路由接收请求 → c.HTML () 渲染返回页面解析模板LoadHTMLGlob()/LoadHTMLFiles()渲染页面c.HTML(状态码, 模板名, 数据)二、两种模板加载方式方式 1LoadHTMLFiles () 加载单个 / 指定模板适合少量模板需要把每一个模板文件路径都写出来package main import ( net/http github.com/gin-gonic/gin ) func main() { r : gin.Default() //解析单个模板文件 r.LoadHTMLFiles(templates/index.tmpl) r.GET(/index, func(c *gin.Context) { //渲染页面 c.HTML(http.StatusOK, index.tmpl, gin.H{ title: liwenzhuo.com, }) }) r.Run(:9090) }⚠️易错坑文件夹名拼写templates不要写成temlates方式 2LoadHTMLGlob () 通配符批量加载【推荐】//加载templates文件夹下第一层所有模板 r.LoadHTMLGlob(templates/*) //递归加载templates下所有子文件夹内的模板多级目录 r.LoadHTMLGlob(templates/**/*)三、HTML 模板文件示例 index.tmpl!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentieedge titleposts/index/title /head body {{.title}} /body /html{{.title}}接收后端gin.H{title:xxx}传递过来的数据四、多级目录、多个模板渲染目录结构templates ├─posts │ └─index.tmpl └─users └─index.tmpl重点给模板命名 define子目录下同名文件必须用{{define 模板名}}标记模板名称否则冲突 posts/index.tmpl{{define posts/index.tmpl}} !DOCTYPE html html body {{.title}} /body /html {{end}}users/index.tmpl{{define users/index.tmpl}} !DOCTYPE html html body {{.title}} /body /html {{end}}Go 后端代码package main import ( net/http github.com/gin-gonic/gin ) func main() { r : gin.Default() //递归加载所有模板 r.LoadHTMLGlob(templates/**/*) r.GET(/posts/index, func(c *gin.Context) { c.HTML(http.StatusOK, posts/index.tmpl, gin.H{ title: liwenzhuo.com, }) }) r.GET(/users/index, func(c *gin.Context) { c.HTML(http.StatusOK, users/index.tmpl, gin.H{ title: liwenzhuo.com, }) }) r.Run(:9090) }五、自定义模板函数场景原生 Go 模板默认会转义 HTML 内容想要关闭转义自定义safe函数完整示例package main import ( html/template net/http github.com/gin-gonic/gin ) func main() { r : gin.Default() //❗必须在加载模板之前注册自定义函数 r.SetFuncMap(template.FuncMap{ safe: func(str string) template.HTML { return template.HTML(str) }, }) r.LoadHTMLGlob(templates/*) r.GET(/index, func(c *gin.Context) { c.HTML(http.StatusOK, index.tmpl, gin.H{ title: h1我是html标题/h1, }) }) r.Run(:9090) }模板中调用函数管道符|body {{.title | safe}} /body六、静态文件处理css、js、图片r.Static(路由前缀, 文件存放目录)//访问 /static/xxx.css 就会去找 ./statics文件夹下的资源 r.Static(/static, ./statics)目录示例statics ├─css │ └─style.css └─js └─main.jshtml 引入link relstylesheet href/static/css/style.css七、拓展知识点Gin原生不支持 block 模板继承如果需要模板继承布局使用第三方库multitemplate加载顺序先 SetFuncMap → 再 LoadHTMLGlob顺序颠倒自定义函数失效