gin可通过模板变量动态加载css实现主题切换：在layout.tmpl中用{{.theme}}插值href路径，后端渲染时传入gin.h{"theme": "dark"}，并注册静态路由r.static("/static", "./static")；theme值建议从query、cookie或session安全获取，配合白名单校验。
Gin 本身不提供“换肤”功能，但可以通过模板布局（define/template）+ 动态 CSS 路径 + 请求上下文传参，低成本实现页面主题切换。核心不是改 Gin，而是控制 HTML 中 <link rel="stylesheet"> 的 href 值。
怎么让 layout.html 加载不同 CSS 文件
在主布局模板（如 templates/layout.tmpl）里，不要写死 CSS 路径，而是用变量接收主题名：
{{- define "layout" }}
<link rel="stylesheet" href="/static/css/%7B%7B.Theme%7D%7D.css">
{{template "content" .}}
{{- end}}
后端渲染时传入 Theme 字段，比如 gin.H{"Theme": "dark"}，就能加载 /static/css/dark.css。
- 确保静态目录已注册：
r.Static("/static", "./static") - CSS 文件需提前放在
./static/css/light.css、./static/css/dark.css等路径 - 主题名必须是合法文件名（避免注入，建议白名单校验）
如何在路由中动态决定 Theme 值
Theme 不该硬编码在每个 c.HTML() 调用里，推荐从 cookie、query 或 session 提取：
例如从 query 参数读取（?theme=dark）：
r.GET("/home", func(c *gin.Context) {
theme := c.DefaultQuery("theme", "light") // 默认 light
// 白名单过滤，防止路径遍历或 XSS
if theme != "light" && theme != "dark" && theme != "blue" {
theme = "light"
}
c.HTML(http.StatusOK, "home.tmpl", gin.H{
"Theme": theme,
"Title": "首页",
})
})
- 若用 cookie，改用
c.Cookie("theme")，并注意设置HttpOnly和SameSite - 若用 session，需先配置 session 中间件（如
github.com/gin-contrib/sessions），再取值session.Get("theme") - 别忘了在模板里对
.Theme做 HTML 转义——它只用于 CSS 路径，不会被渲染为 HTML 内容，所以安全
为什么不能直接用 template.FuncMap 注入 CSS 切换逻辑
有人想在模板里写 {{ cssForTheme .User.PreferredTheme }}，然后注册函数返回路径。这看似灵活，但会带来两个实际问题：
- 函数无法访问 Gin 的上下文（如 request、cookie），只能依赖传入的结构体字段，扩展性差
- 所有主题路径必须在函数内硬编码，新增主题就得改 Go 代码、重启服务，违背“换肤应可热插拔”原则
- 更关键的是：CSS 文件路径属于**资源定位**，不是视图逻辑，应由路由层决策后透传，而非模板层计算
真正需要模板函数的场景，是格式化日期、截断文本这类纯数据转换；路径拼接交给后端更可控。
换肤时容易忽略的细节
用户切了主题，但刷新页面又回 default，说明状态没持久化。常见疏漏点：
- 没把主题选择写入 cookie/session —— 单靠 query 参数无法跨跳转保留
- CSS 文件 404 但浏览器静默失败，要检查 Network 面板确认
/static/css/dark.css是否返回 200 - 多个模板（如
home.tmpl、user.tmpl）都{{template "layout" .}}，但只有 layout 用了.Theme，其他模板无需改动 - 如果用了
LoadHTMLGlob("templates/**/*")，确保子目录下模板也能正确继承.Theme—— 因为gin.H{}是完整传给整个模板树的
换肤本质是 CSS 资源切换 + 状态管理，Gin 模板布局只是帮你把变量干净地透传下去。真正复杂的部分不在 Go 代码里，而在 CSS 的设计隔离度和前端交互反馈上。
