网站架构：三端一体的技术全景

爱智慧，也爱数学——理性主义至上的个人网站。本文是 Philomathesophy 的技术全景：三个站点各用什么技术、为什么这么选、关键效果怎么实现。

整体架构

用户浏览器
    │
    ▼
nginx（139.199.70.119，单服务器）
    ├── /       主页    —— 黑洞 WebGL（原生 shader）
    ├── /blog   博客    —— VitePress 静态站（STARSTREAM）
    └── /wiki   知识库  —— 自建构建器 + Three.js 星系（ASTROLABE）

三个站点都是纯静态：零后端、零数据库，nginx 直接吐文件。内容更新靠 git push 自动部署（post-receive 钩子在服务器构建）。

统一视觉语言：深空黑 + 淡紫 + 玻璃磨砂 + 极细字重 + 大字距，全站自定义光标（细环拖尾 + 交互变紫）。

主页：GRAVITY WELL（黑洞）

技术：原生 HTML/CSS/JS + WebGL（无框架、无库）

核心是片段着色器模拟的引力透镜黑洞：

• 引力透镜：以黑洞中心为原点的光线弯曲——采样坐标按 pull = mass / dist² 旋转，近处扭曲强烈、远处恢复正常
• 事件视界：半径内颜色压暗为纯黑（之前调试时调过多次比例——直径约占屏幕 65%）
• 爱因斯坦环：视界边缘的光环——一束来自背后的强光被引力弯成环
• 吸积盘：环绕的发光带 + 沿环扫过的光影（时间驱动的旋转光斑）
• 背景星空：Canvas 2D 程序化星星，缓慢从右往左漂移（伪 3D 穿越感），黑洞不跟随鼠标、不自转（曾试过自转，视觉杂乱，已关闭）

其他：三按钮（玻璃磨砂 + hover 光带扫过 + 上浮 + 紫色辉光）、自定义光标。

博客：STARSTREAM（星流）

技术：VitePress 1.6.4（Vite 驱动的静态站点生成器）

• Markdown 原生：blog/posts/*.md，frontmatter 定义标题/日期/分类/摘要
• 首页：PHILOMATHESOPHY → STARSTREAM → 文章列表（玻璃卡片 + 光带 hover）
• 深空背景：星星从右往左缓慢飞驰（canvas 粒子，呼应"星流"意象）
• 分类页：书架式布局——每个分类一排"书"，文章是竖立的玻璃卡片，hover 时抽出 45°
• 数学公式：KaTeX（markdown-it-texmath），$...$ 行内 / $$...$$ 块级
• 搜索：标题/分类/描述关键词过滤（分类页与归档页内嵌搜索框）
• 阅读时长：按字数估算，文章页显示
• 其他：归档时间线、关于页（头像 + 社交图标）、友链页、404 定制页、阅读进度条、SEO/sitemap
• 深坑：部署在 /blog/ 子路径 → 所有内部链接必须 withBase()、路由判断要剥离 base 前缀（cleanPath）

知识库：ASTROLABE（星盘）

技术：自建静态构建器（Node + markdown-it，约 300 行脚本）+ Three.js 星系主页

• 构建管线：collect.mjs 扫描 study-wiki/ 的 markdown → 解析 frontmatter 与 [[双链]] → build.mjs 渲染文章 + 生成星系数据 JSON
• 星系主页：Three.js 4096 颗粒子（GPU shader 螺旋 + 差分旋转，内圈快外圈慢）——
  • 27→7 颗蓝色文章星沿旋臂分布（study/work 区分，现在公开版只 study）
  • hover 星 → 星系定格 + 白色高亮 + 关联文章淡青高亮（双链关系）+ 玻璃浮层
  • 点击星 → 进入文章
• 侧边栏目录：玻璃磨砂，hover 条目 → 星系对应星高亮 + 定格（与点星体验一致）
• 文章页：右侧目录栏（h2/h3 自动锚点）、银河背景（斜 15° 光带 + 蓝色星际尘埃 + 闪烁亮星）、相关/被引用自动生成
• 双链系统：[[文件名]] 出链 + 反向引用自动计算——写文章只需链接，索引全自动
• 工作笔记私有化：--public 构建只输出 study；work-wiki 在 .gitignore 中，永不推送到公开仓库（未来可用 nginx Basic Auth 保护 /wiki/private/）

部署：git push 自动上线

服务器（腾讯云 Ubuntu，ops 用户，sudo 免密）部署了 node v18：

本地仓库 ──git push──▶ 服务器 bare 仓库
                            │ post-receive 钩子
                            ▼
                    npm ci → 构建 → sudo cp dist → /var/www/xxx

• 博客：vitepress build → /var/www/blog
• 知识库：WIKI_PUBLIC=1 node scripts/build.mjs → /var/www/wiki
• 踩过的坑：内嵌 git 仓库不会进外层仓库（submodule 陷阱）、构建脚本硬编码目录清单导致 ENOENT、git hook 环境下命令行参数不可靠（改用环境变量）

统一的细节

细节	实现
自定义光标	细环延迟跟随 + 中心亮点 + hover 变紫放大；全局 cursor: none 防系统光标漏出
玻璃磨砂	backdrop-filter: blur + 半透明深空黑
hover 反馈	光带扫过（background-position 动画）+ 上浮 + 紫色辉光
滚动条	全部隐藏（scrollbar-width: none），保留滚轮滚动——避免系统光标在拖动时漏出
标题体系	GRAVITY WELL / STARSTREAM / ASTROLABE——引力井、星流、星盘

为什么不用动态站

评估过"后端管理文章"方案：纯静态的代价是加文章要重新构建，但 git push 自动部署已消掉这个痛点；换来的是零常驻内存、零攻击面、部署即静态文件。对个人站来说收益大于成本。