余白 UI:按设计稿模块化还原 + 站主自定义 CSS + 详情 neighbors + 静态缓存头

前端(新增 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/)
This commit is contained in:
Sakurasan
2026-09-23 15:37:42 +08:00
parent 3238175ef0
commit fbda293072
46 changed files with 4266 additions and 35 deletions
+34
View File
@@ -0,0 +1,34 @@
<script setup>
import { RouterLink } from 'vue-router'
import { site } from '../../site'
// 余白页脚。对应设计稿的 <footer class="foot">。
//
// 设计稿底部正中还有一枚 <div class="switch">「余白 / 当前主题」的药丸,
// 按站主要求去掉了(它只标识当前主题名,本站没有多套主题,属于纯装饰,
// 而且固定在底部会挡住内容)。对应的 .switch 样式也一并从
// chrome.css / pages.css 里删除,避免留下死规则。
const links = [
{ to: '/', label: '时间线' },
{ to: '/archive', label: '归档' },
{ to: '/tags', label: '标签' },
{ to: '/projects', label: '作品' },
{ to: '/about', label: '关于' }
]
</script>
<template>
<footer class="foot">
<div class="quote">What&rsquo;s left unsaid holds the most weight.</div>
<div>{{ site.footer_note }}<template v-if="site.icp"> · {{ site.icp }}</template></div>
<div class="foot-nav">
<template v-for="(l, i) in links" :key="l.to">
<span v-if="i" class="sep">·</span>
<RouterLink :to="l.to">{{ l.label }}</RouterLink>
</template>
<span class="sep">·</span>
<a href="/rss.xml">RSS</a>
</div>
</footer>
</template>