评论表情 - 发布 / 回复 / 编辑三处输入框挂上表情面板(EmojiPicker + emoji.js): 「表情 / 颜文字」两个 tab,光标处插入(insertAtCursor,未聚焦追加到 末尾),面板自己管点外 / Esc 收起 - 操作钮 ✎ ✕ ↩ 圆图标改文字钮(回复 / 编辑 / 删除),删除悬停给红, 补 focus-visible;编辑态去掉「正在改定此评:」交给 placeholder 双 UI 手机导航(参考 innei.in 的底部胶囊 + 上拉菜单) - 余白:顶栏手机端整条退场,底部悬浮 dock(品牌 + NavBurger 汉堡), 点开上拉毛玻璃菜单:mono 序号 01-05 + 中文大字 + 英文小字,当前项 强调色 + 左缘短杠,逐项错峰 45ms 入场;dock 在菜单之下原位变 ✕ - classic:顶栏 brand 居中(三列网格)+ NavBurger + 下拉纸片;下滑隐藏 上滑唤回——上滑要累计 40px 才算数(页面高度稳定时浏览器会回弹几十 像素,那种「假上滑」不拉回顶栏);首页 .sticky-head 用 var(--topbar-h) 跟随顶栏一起滑 - NavBurger 两套 UI 共用;经典手机 FAB 避开右下角主题浮钮 sticky 失效修复 - body overflow-x:hidden 把 body 变成滚动容器,页内所有 position:sticky 全部失明(首页筛选条吸顶从来没生效过)→ 改 overflow-x:clip, 只裁剪不建滚动容器 - 余白手机端 .article-layout 裸 1fr 的自动最小尺寸是 min-content, 长 token 把整列顶到 592px 横向溢出 → minmax(0,1fr) + overflow-wrap 短文快发盒(QuickShort,Twitter 式) - 时间线顶部内联发布盒:头像 + 输入框 + 发布(Ctrl/⌘+Enter),手机收进 右下角 FAB + 上拉 sheet;只有管理员会话在场才渲染(/api/admin/me 探测),发布走真实 createPost(kind:short)——标题 / slug / 阅读时长 后端自动生成。读者社交登录是阶段二产物,后端就绪前访客无法登录, 所以天然只有站主可见;要放开给读者发,换探测和发布接口即可 - 经典 FAB 避开右下角主题浮钮(bottom 72),余白贴安全区(bottom 20) 社交链接 + 统计脚本接入 - Settings 的 social_links 前台两处渲染:经典左栏「常读标签」区域改为 「社交账号」图标行(url 域名推导图标:GitHub / Telegram / X / 邮箱 信封,认不出显示名称文字),右栏卡片下方 Twitter 式页脚小字区三排 (导航行 / 社交图标行 / 项目源码 + 版权行)——项目源码是固定入口 (本站 git remote),与版权同为固定元素,后台配置挤不掉 - Settings 加 custom_js:后台贴完整 <script> 片段(GA / Plausible / Umami),DOMParser 解析后逐个重建 script 节点插进 head(innerHTML 塞的 script 不会执行);公开页每页注入一次,/admin 不注入; 站主自己的代码不做清洗(洗 JS 只会把统计脚本洗坏) - 订阅卡删掉:RSS 入口在页脚小字里,一张卡只为一个链接不值得 杂项 - vite dev 加 --host:手机连局域网直接评审 - 评论 mock 的状态浮层窄屏上移,给底部 dock 让位 - 经典页脚在 12px 页边距下的排版对齐 验证 - 后端 go test 全绿;前端构建通过 - 浏览器逐状态过目:双 UI × 亮暗 × 桌面/手机;表情插入 / 短文发布真实 入库(测试内容已删)/ dock 与 sheet 开合 / FAB 与主题浮钮不重叠 / 顶栏隐藏与筛选条跟随同步
44 lines
1.8 KiB
JavaScript
44 lines
1.8 KiB
JavaScript
import { site } from './site'
|
|
|
|
// 站主自定义 JS 的注入管线(Google Analytics / Plausible / Umami 这类统计脚本)。
|
|
//
|
|
// 后台贴的是完整的 <script> 片段(外链 + 内联都可能,GA4 就是两个一起)。
|
|
// 用 DOMParser 解析后逐个「重建」成新的 script 节点再插进 head —— 直接
|
|
// innerHTML 塞进去的 script 标签不会执行,必须重建才会跑。
|
|
//
|
|
// 只在公开页面注入一次,/admin 不注入(后台流量不该进统计)。
|
|
// 已经执行过的脚本是收不回来的:从公开页跳进后台时它们继续跑,这是
|
|
// 注入式统计的天然限制,不做额外处理。
|
|
//
|
|
// 安全:站主 = 管理员 = 能改源码的人,custom_js 就是他们自己的代码,
|
|
// 和 custom_css 同一信任级别,不做任何清洗(洗 JS 只会把统计脚本洗坏)。
|
|
|
|
let injected = false
|
|
|
|
function injectOnce() {
|
|
if (injected) return
|
|
const code = (site.custom_js || '').trim()
|
|
if (!code) return
|
|
const doc = new DOMParser().parseFromString(code, 'text/html')
|
|
const scripts = doc.querySelectorAll('script')
|
|
for (const old of scripts) {
|
|
const el = document.createElement('script')
|
|
for (const attr of old.attributes) el.setAttribute(attr.name, attr.value)
|
|
el.textContent = old.textContent
|
|
document.head.appendChild(el)
|
|
}
|
|
if (scripts.length) injected = true
|
|
}
|
|
|
|
export function refreshCustomJs(route) {
|
|
const isAdmin = !!(route && route.path && route.path.startsWith('/admin'))
|
|
if (!isAdmin) injectOnce()
|
|
}
|
|
|
|
// 只挂 afterEach:首次导航完成也会触发它,所以公开页的首次加载就能注入。
|
|
// 不在安装时直接注入 —— 那一刻路由还没解析完(currentRoute 是 "/"),
|
|
// 直接打开 /admin 会被误判成公开页。
|
|
export function installCustomJs(router) {
|
|
router.afterEach((to) => refreshCustomJs(to))
|
|
}
|