gin-HTML模板渲染

This commit is contained in:
2025-11-24 16:17:22 +08:00
parent 3b5d4b193b
commit 908cf3b6ed
5 changed files with 83 additions and 64 deletions

48
main.go
View File

@@ -4,36 +4,44 @@ import (
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
) )
type Article struct {
Title string
Content string
}
func main() { func main() {
r := gin.Default() r := gin.Default()
// 静态资源映射
r.Static("/static", "./static")
// 加载模板(支持多层目录) // 加载模板(支持多层目录)
r.LoadHTMLGlob("templates/**/*") r.LoadHTMLGlob("templates/**/*")
r.Static("/static", "./static")
// 路由 // 路由
r.GET("/", func(c *gin.Context) { r.GET("/", func(c *gin.Context) {
c.HTML(200, "index", gin.H{}) c.HTML(200, "pages/index.html", gin.H{
}) "title": "Main website",
"score": 60,
"hobby": []string{"吃饭", "睡觉", "打豆豆"},
"newsList": []interface{}{
Article{
Title: "新闻标题",
Content: "新闻内容1",
},
Article{
Title: "新闻标题2",
Content: "新闻内容2",
},
},
"newsList2": []string{},
r.GET("/about", func(c *gin.Context) { "news": Article{
c.HTML(200, "about", gin.H{}) Title: "标题",
}) Content: "测试2",
r.GET("/articles", func(c *gin.Context) {
c.HTML(200, "articles", gin.H{
"Articles": []map[string]string{
{"Title": "Gin框架入门", "Date": "2025-11-23"},
{"Title": "Go语言最佳实践", "Date": "2025-11-20"},
}, },
}) })
}) })
r.GET("/contact", func(c *gin.Context) { err := r.Run(":8080")
c.HTML(200, "contact", gin.H{}) if err != nil {
}) return
}
r.Run(":8080")
} }

View File

@@ -1,9 +0,0 @@
{{ define "about" }}
{{ template "base" . }}
{{ block "title" . }}关于我们{{ end }}
{{ block "content" . }}
<h2>关于我们</h2>
<p>这里可以写团队介绍、网站背景或使命。</p>
{{ end }}
{{ end }}

View File

@@ -1,13 +0,0 @@
{{ define "articles" }}
{{ template "base" . }}
{{ block "title" . }}文章列表{{ end }}
{{ block "content" . }}
<h2>文章列表</h2>
<ul>
{{ range .Articles }}
<li>{{ .Title }} - {{ .Date }}</li>
{{ end }}
</ul>
{{ end }}
{{ end }}

View File

@@ -1,14 +0,0 @@
{{ define "contact" }}
{{ template "base" . }}
{{ block "title" . }}联系我们{{ end }}
{{ block "content" . }}
<h2>联系我们</h2>
<form>
<label>姓名:</label><input type="text" name="name"><br>
<label>邮箱:</label><input type="email" name="email"><br>
<label>留言:</label><textarea name="message"></textarea><br>
<button type="submit">提交</button>
</form>
{{ end }}
{{ end }}

View File

@@ -1,9 +1,56 @@
{{ define "index" }} {{define "pages/index.html"}}
{{ template "base" . }} <!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.title}}</title>
</head>
<body>
{{/*输出*/}}
<h2>{{.title}}</h2>
{{ block "title" . }}首页{{ end }} {{/*定义变量*/}}
{{ block "content" . }} {{$t :=.title}}
<h1>欢迎来到我的 Gin 网站</h1> <h4>{{$t}}</h4>
<p>这里是首页内容,可以展示最新文章或公告。</p>
{{ end }}
{{ end }} {{/*条件判断*/}}
{{if ge .score 60}}
<p>及格</p>
{{else}}
<P></P>
{{end}}
{{/*循环遍历数据*/}}
{{range $key,$value:=.hobby}}
<ul>
<li>{{$key}}--{{$value}}</li>
</ul>
{{end}}
{{range $key,$value:=.newsList}}
<ul>
<li>{{$key}}--{{$value.Title}}--{{$value.Content}}</li>
</ul>
{{end}}
{{range $key,$value:=.newsList2}}
<ul>
<li>{{$key}}--{{$value.Title}}--{{$value.Content}}</li>
</ul>
{{else}}
<li>没有数据</li>
{{end}}
{{/*结构结构*/}}
{{with .news}}
{{.Title}}
{{.Content}}
{{end}}
</body>
</html>
{{end}}