dsh/go_blog:fix/header-avatar-update
main
在 /profile 更换头像成功后,header 导航栏的头像样式错乱(圆形裁剪/边框丢失、用户名消失),刷新页面后才恢复正常。
/profile
profile 页 JS 更新导航头像时把整个 #avatarBtn 按钮的 innerHTML 替换成了单个 <img>:
#avatarBtn
<img>
w-8 h-8 rounded-full overflow-hidden border-2 …
<span>
w-full h-full
templates/layouts/base.html
id="headerAvatarWrap"
templates/pages/profile.html
<svg>
?t=
模板解析(handlers 测试)与 profile 页内嵌 JS node --check 通过。
node --check
旧逻辑在头像上传成功后把整个 avatarBtn 按钮的 innerHTML 换成单个 <img>:头像圆形容器(w-8 h-8 rounded-full)、用户名 span 全部丢失, 头像失去圆形裁剪与边框、布局错乱,直到刷新后服务端重新渲染才恢复。 - base.html:头像是像圆形容器加 id="headerAvatarWrap"(服务器渲染结构 不变,仅加标记) - profile.html:上传成功后仅更新容器内容(img/svg → 新头像), 保留按钮结构与用户名文本
No dependencies set.
The note is not visible to the blocked user.
问题
在
/profile更换头像成功后,header 导航栏的头像样式错乱(圆形裁剪/边框丢失、用户名消失),刷新页面后才恢复正常。根因
profile 页 JS 更新导航头像时把整个
#avatarBtn按钮的 innerHTML 替换成了单个<img>:w-8 h-8 rounded-full overflow-hidden border-2 …——负责圆形裁剪与边框)被删掉;<span>也被删掉(一并造成布局错乱);<img>直接成为按钮子元素,w-full h-full无容器可依,样式异常;修复
templates/layouts/base.html:头像圆形容器加id="headerAvatarWrap"(服务端渲染结构不变,仅加标记);templates/pages/profile.html:上传成功后只更新容器内容(<img>/占位<svg>→ 新头像),保留按钮结构与用户名文本;新 URL 带?t=时间戳防浏览器缓存旧图。验证
模板解析(handlers 测试)与 profile 页内嵌 JS
node --check通过。View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.