gin: 使用模板：包含header和footer

一，go代码：

目录结构:

image

routes

package routes

import (
	"github.com/gin-gonic/gin"
	"mediabank/controller"
)

func Routes() *gin.Engine {
	router := gin.Default()

	// 1. 加载模板文件
	router.LoadHTMLGlob("templates/**/*.html")

	//media
	media := controller.NewMediaController()
	mediaGroup := router.Group("/media")
	{
		mediaGroup.GET("/detail", media.Detail)
		mediaGroup.GET("/list", media.List)
	}

	return router
}

controller

package controller

import (
	"github.com/gin-gonic/gin"
)

type MediaController struct{}

func NewMediaController() MediaController {
	return MediaController{}
}

//得到详情
func (ic *MediaController) Detail(c *gin.Context) {
	c.HTML(200, "detail.html", gin.H{
		"Title": "Gin 模板示例",
		"Message": "欢迎来到 Gin 的世界！",
	})
}

//得到列表
func (ic *MediaController) List(c *gin.Context) {
	var data = gin.H{
		"Title": "Gin 列表示例",
		"Message": "欢迎来到Gin 列表！",
	}
	c.HTML(200, "list.html", data)
}

二，html代码

detail

<!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>

list

{{template "public/header" .}}
<main style="background:#ffff00;width:100%;text-align: center;">
    <h1>{{.Title}}</h1>
    <h2>{{ .Message }}</h2>
</main>
{{template "public/footer" .}}

header

{{define "public/header"}}
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title>素材管理系统</title>
</head>
<body>
<header style="width: 100%;text-align: center;background: #ff00ff;"><h2>这里是header</h2></header>
{{end}}

footer

{{define "public/footer"}}
<footer style="width: 100%;text-align: center;background: #ff0000;"><h2>这里是footer</h2></footer>
</body>
</html>
{{end}}

三，测试效果:

detail

image

list

image

 

posted @ 2025-09-20 09:46  刘宏缔的架构森林  阅读(14)  评论(0)    收藏  举报