From a469da2904b5e34683be170b93069fdecbc9abac Mon Sep 17 00:00:00 2001 From: nannanwu Date: Sun, 23 Nov 2025 21:48:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F=E6=B5=8B?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.go | 78 +++++++++++------------------------- static/style.css | 65 ++++++++++++++++++++++++++++++ templates/goods.html | 12 ------ templates/index.html | 12 ------ templates/layout/base.html | 17 ++++++++ templates/layout/navbar.html | 11 +++++ templates/news.html | 12 ------ templates/pages/index.html | 9 +++++ 8 files changed, 126 insertions(+), 90 deletions(-) create mode 100644 static/style.css delete mode 100644 templates/goods.html delete mode 100644 templates/index.html create mode 100644 templates/layout/base.html create mode 100644 templates/layout/navbar.html delete mode 100644 templates/news.html create mode 100644 templates/pages/index.html diff --git a/main.go b/main.go index a4026d7..06b7351 100644 --- a/main.go +++ b/main.go @@ -4,73 +4,43 @@ import ( "github.com/gin-gonic/gin" ) -type Article struct { - Title string - Desc string - Content string -} - func main() { r := gin.Default() - //html模板文件 - r.LoadHTMLGlob("templates/*") + + // 静态资源映射 + r.Static("/static", "./static") + + // 加载模板（支持多层目录） + r.LoadHTMLGlob("templates/**/*") + + // 路由 r.GET("/", func(c *gin.Context) { - c.String(200, "首页") - }) - r.GET("/json", func(c *gin.Context) { - c.JSON(200, map[string]interface{}{ - "success": "true", - "msg": "你好gin", + c.HTML(200, "pages/index.html", gin.H{ + "Title": "首页", }) }) - r.GET("/json2", func(c *gin.Context) { - c.JSON(200, gin.H{ - "success": "true", - "msg": "你好gin", + r.GET("/about", func(c *gin.Context) { + c.HTML(200, "pages/about.html", gin.H{ + "Title": "关于我们", }) }) - r.GET("/json3", func(c *gin.Context) { - a := Article{ - Title: "我是一个标题", - Desc: "描述", - Content: "测试内容", - } - c.JSON(200, a) - }) - - //响应jsonp请求 http://0.0.0.0:8080/jsonp?callback=xxx - r.GET("/jsonp", func(c *gin.Context) { - a := Article{ - Title: "我是一个标题", - Desc: "描述", - Content: "测试内容", - } - c.JSONP(200, a) - }) - - r.GET("xml", func(c *gin.Context) { - c.XML(200, gin.H{ - "success": "true", - "msg": "你好gin，我是一个xml", + r.GET("/articles", func(c *gin.Context) { + c.HTML(200, "pages/articles.html", gin.H{ + "Title": "文章列表", + "Articles": []map[string]string{ + {"Title": "Gin框架入门", "Date": "2025-11-23"}, + {"Title": "Go语言最佳实践", "Date": "2025-11-20"}, + }, }) }) - r.GET("news", func(c *gin.Context) { - c.HTML(200, "news.html", gin.H{ - "title": "我是一个后台数据", + r.GET("/contact", func(c *gin.Context) { + c.HTML(200, "pages/contact.html", gin.H{ + "Title": "联系我们", }) }) - r.GET("goods", func(c *gin.Context) { - c.HTML(200, "news.html", gin.H{ - "title": "我是一个商品页面", - }) - }) - - err := r.Run() - if err != nil { - return - } // listen and serve on 0.0.0.0:8080 + r.Run(":8080") } diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..54f3472 --- /dev/null +++ b/static/style.css @@ -0,0 +1,65 @@ +body { + margin: 0; + font-family: "Segoe UI", Arial, sans-serif; + background: #f4f6f9; + color: #333; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(90deg, #1e3c72, #2a5298); + padding: 0.8rem 2rem; + box-shadow: 0 4px 10px rgba(0,0,0,0.3); +} + +.navbar .logo { + font-size: 1.5rem; + font-weight: bold; + color: #fff; + letter-spacing: 2px; + transition: transform 0.3s ease; +} +.navbar .logo:hover { + transform: scale(1.1) rotate(-3deg); +} + +.nav-links { + list-style: none; + display: flex; + gap: 1.5rem; +} +.nav-links li a { + text-decoration: none; + color: #fff; + font-weight: 500; + position: relative; + transition: color 0.3s ease; +} +.nav-links li a::after { + content: ""; + position: absolute; + width: 0%; + height: 2px; + bottom: -4px; + left: 0; + background-color: #ffcc00; + transition: width 0.3s ease; +} +.nav-links li a:hover { + color: #ffcc00; +} +.nav-links li a:hover::after { + width: 100%; +} + +main { + padding: 2rem; +} +main h1, main h2 { + color: #2a5298; +} +main p { + line-height: 1.6; +} diff --git a/templates/goods.html b/templates/goods.html deleted file mode 100644 index 4fabbd4..0000000 --- a/templates/goods.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Document - - -

{{.title}}

- - - \ No newline at end of file diff --git a/templates/index.html b/templates/index.html deleted file mode 100644 index ea6d515..0000000 --- a/templates/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Document - - -

我是一个新闻界面

- - - \ No newline at end of file diff --git a/templates/layout/base.html b/templates/layout/base.html new file mode 100644 index 0000000..509c25f --- /dev/null +++ b/templates/layout/base.html @@ -0,0 +1,17 @@ +{{ define "layout/base.html" }} + + + + + {{ block "title" . }}默认标题{{ end }} + + + + {{ template "layout/navbar.html" . }} + +
+ {{ block "content" . }}{{ end }} +
+ + +{{ end }} diff --git a/templates/layout/navbar.html b/templates/layout/navbar.html new file mode 100644 index 0000000..620bffd --- /dev/null +++ b/templates/layout/navbar.html @@ -0,0 +1,11 @@ +{{ define "layout/navbar.html" }} + +{{ end }} diff --git a/templates/news.html b/templates/news.html deleted file mode 100644 index 4fabbd4..0000000 --- a/templates/news.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Document - - -

{{.title}}

- - - \ No newline at end of file diff --git a/templates/pages/index.html b/templates/pages/index.html new file mode 100644 index 0000000..8f2324b --- /dev/null +++ b/templates/pages/index.html @@ -0,0 +1,9 @@ +{{ define "pages/index.html" }} + {{ template "layout/base.html" . }} + + {{ block "title" . }}首页{{ end }} + {{ block "content" . }} +

欢迎来到我的 Gin 网站

+

这里是首页内容，可以展示最新文章或公告。

+ {{ end }} +{{ end }}