gin-HTML模板渲染

2025-11-24 16:17:22 +08:00
parent 3b5d4b193b
commit 908cf3b6ed
5 changed files with 83 additions and 64 deletions
--- a/main.go
+++ b/main.go
@@ -4,36 +4,44 @@ import (
 	"github.com/gin-gonic/gin"
 )

+type Article struct {
+	Title   string
+	Content string
+}
+
 func main() {
 	r := gin.Default()
-
-	// 静态资源映射
-	r.Static("/static", "./static")
-
 	// 加载模板（支持多层目录）
 	r.LoadHTMLGlob("templates/**/*")
+	r.Static("/static", "./static")

 	// 路由
 	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) {
-		c.HTML(200, "about", gin.H{})
-	})
-
-	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"},
+			"news": Article{
+				Title:   "标题",
+				Content: "测试2",
 			},
 		})
 	})

-	r.GET("/contact", func(c *gin.Context) {
-		c.HTML(200, "contact", gin.H{})
-	})
-
-	r.Run(":8080")
+	err := r.Run(":8080")
+	if err != nil {
+		return
+	}
 }
--- a/templates/pages/about.html
+++ b/templates/pages/about.html
@@ -1,9 +0,0 @@
-{{ define "about" }}
-    {{ template "base" . }}
-
-    {{ block "title" . }}关于我们{{ end }}
-    {{ block "content" . }}
-        <h2>关于我们</h2>
-        <p>这里可以写团队介绍、网站背景或使命。</p>
-    {{ end }}
-{{ end }}
--- a/templates/pages/articles.html
+++ b/templates/pages/articles.html
@@ -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 }}
--- a/templates/pages/contact.html
+++ b/templates/pages/contact.html
@@ -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 }}
--- a/templates/pages/index.html
+++ b/templates/pages/index.html
@@ -1,9 +1,56 @@
-{{ define "index" }}
-    {{ template "base" . }}
+{{define "pages/index.html"}}
+    <!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" . }}
-        <h1>欢迎来到我的 Gin 网站</h1>
-        <p>这里是首页内容，可以展示最新文章或公告。</p>
-    {{ end }}
-{{ end }}
+    {{/*定义变量*/}}
+    {{$t :=.title}}
+    <h4>{{$t}}</h4>
+
+
+    {{/*条件判断*/}}
+    {{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}}