前端(新增 ui/yohaku/,各视图按 ui_id=vivid 分支渲染;classic 与后台不受影响) - 令牌层:设计稿数值原样落地,28 个 --v-* 为站主接口(自定义 CSS 可覆盖, 放 @layer 让出优先级);另加防线,中和 styles.css 裸选择器 (h1 衬线 / body 行高 / 后台 .stat/.toolbar/.chip 卡片)漏进余白元素 - 顶栏(滚动收缩态)/ 阅读进度(顶部 2px + READ n%)/ 页脚 - 首页:hero(统计条)/ 筛选(类型分段 + 标签 chips + 搜索)/ 长文卡片与短文纸条 / 分页 / 作品展示区(3 件 + 查看所有,参照 diygod.cc); 面板栅格改 1.6fr 1fr 1fr 且高度自适应内容(标签云明显大一圈) - 文章页:三栏「纸」—— 左时间线(前后各两篇)/ 中纸张 / 右目录与阅读进度; 短文详情不显示标题(h1 视觉隐藏保留无障碍) - 全部规则收敛在 html[data-ui='vivid'] 前缀下;无 !important 后端 - GET /api/posts/:slug 增 neighbors(前后各两篇,详情页侧栏时间线用) - SPA 缓存头:index.html no-cache,assets/ 带 hash 长期 immutable (此前无缓存头,浏览器会一直拿旧构建) 其他 - 站主自定义 CSS 管线(customCss.js + ui/sections.js,按分区注入,仅 vivid) - 删除旧 vivid 覆盖层实现(VividNav/Hero/Footer/Timeline/Toc、ui/vivid.css) - 设计稿原型附于仓库根 index.html;作品表清掉外链 diygod.cc 的示例封面, 改用本地占位图(public/covers/)
39 lines
1.6 KiB
HTML
39 lines
1.6 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="theme-color" content="#faf7f1" media="(prefers-color-scheme: light)" />
|
||
<meta name="theme-color" content="#1f1d1a" media="(prefers-color-scheme: dark)" />
|
||
<title>ONE · 一个博客</title>
|
||
<meta name="description" content="长文与短文,同一种节奏。" />
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||
<!--
|
||
UI 版本在 <html> 上以 data-ui 表达,服务端设置要等 /api/site 才知道。
|
||
这里先读本地缓存设上,避免首帧闪一下 classic 再跳到 vivid。
|
||
站点级设置(非访客偏好),缓存是安全的。值与 site.js 的 UI_KEY 保持一致。
|
||
-->
|
||
<script>
|
||
(function () {
|
||
try {
|
||
// 后台一律 classic:vivid.css 也会命中 .btn / .input 这类全局类,
|
||
// 而后台表单正在用,所以这里就要把路径也判断掉,别等 App 挂载再纠正。
|
||
var isAdmin = location.pathname.indexOf('/admin') === 0
|
||
var v = localStorage.getItem('one.ui')
|
||
document.documentElement.setAttribute(
|
||
'data-ui',
|
||
!isAdmin && v === 'vivid' ? 'vivid' : 'classic'
|
||
)
|
||
} catch (e) {
|
||
document.documentElement.setAttribute('data-ui', 'classic')
|
||
}
|
||
})()
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module" src="/src/main.ts"></script>
|
||
</body>
|
||
</html>
|