侧边栏结构该用nav还是aside取决于内容本质：纯跳转链接（如“用户管理”）必须用nav并加aria-label；术语解释、相关推荐等补充内容则用aside；混用时外层aside内嵌nav更合理。
侧边栏结构该用 nav 还是 aside？
看内容本质：如果侧边栏里全是跳转链接（比如「用户管理」「订单列表」），它就是导航行为，必须用 nav 并加 aria-label；如果是文章旁的术语解释、相关推荐或广告，则用 aside。混用时，推荐外层用 aside 统一语义归属，内部再嵌 nav 或 section 拆分功能。
常见错误：
- 把后台菜单全塞进
aside，导致读屏软件无法识别导航意图 - 用
div替代nav，又不加role="navigation"，键盘 Tab 焦点跳过整个区域 -
aside嵌在main内部，结果响应式折叠后语义错乱（它本该服务整页，不是某段正文）
Gin 模板里怎么传多级菜单数据？
Go 结构体要能映射嵌套层级，比如带子菜单的侧边栏，不能只用一维切片。典型结构是树形嵌套：
type NavItem struct {
Name string `json:"name"`
Href string `json:"href"`
Icon string `json:"icon"`
Childs []NavItem `json:"childs,omitempty"` // 允许为空
}
模板中用递归 {{define}} + {{template}} 渲染：
立即学习“前端免费学习笔记（深入）”；
{{define "menu-item"}}
{{range .}}
<li>
<a href="https://www.php.cn/link/b2cc28312a53832ea904e2785cebfd52">{{.Name}}</a>
{{if .Childs}}
<ul>{{template "menu-item" .Childs}}</ul>
{{end}}
</li>
{{end}}
{{end}}
注意点：
- 递归模板必须显式
{{define}}命名，且调用时参数类型一致（.Childs也是[]NavItem） - 避免无限递归：确保
Childs字段有omitempty标签，空切片不序列化 - Gin 传参时别直接传指针，用值传递防止模板渲染中途 panic
HTML 嵌套深度对侧边栏布局有没有影响？
没有。浏览器不靠 div 层数定位侧边栏，只认 CSS 布局规则。嵌套越深，反而越容易出问题：
-
.sidebar .inner .wrap .menu ul li a这类长选择器难维护，一个小改动可能让整块失效 - 父容器设了
overflow: hidden或position: relative，但你没意识到某一层被截断了 - Flex/Grid 布局下，
aside和main应该平级并列，硬加 wrapper 会破坏flex: 1的自动伸缩逻辑
真正关键的是 CSS 层级控制：
- 用
display: flex时，给aside设flex: 0 0 240px，别只写width: 240px - 折叠动画必须改
flex-basis，不是width；否则在 flex 容器里根本不会动 - 固定滚动要用
position: sticky，但前提是父容器不能有overflow: hidden
为什么 Gin 渲染后侧边栏样式全丢了？
90% 是路径或加载顺序问题。Gin 的 LoadHTMLGlob 不会自动加载子模板，必须显式包含：
- 如果用了
{{template "sidebar" .}}，那个"sidebar"必须在 glob 范围内，比如r.LoadHTMLGlob("templates/**/*") - CSS 文件路径写成
/static/css/app.css，但没配静态文件路由：r.Static("/static", "./static") - 模板继承时，base.html 里漏了
{{template "content" .}}，导致子模板内容没插入到正确位置
最容易被忽略的一点：Gin 默认不开启 HTML 自动转义，但如果你在模板里用 {{.RawHTML}} 又忘了加 |safe，JS 初始化代码会被当文本渲染——侧边栏菜单点击无反应，其实是 JS 根本没执行。
