hello！
你好啊，朋友，自这个网站上线以来，这是第一篇博客，你也是我第一个读者哦（当然也许还有许多个在“并行”和“异步”）。哈哈，毫不谦虚地说，我简直是世界第二风趣之人.
嗯~第一风趣之人是谁呢？也许你黑一下屏，答案就出来了。
嘻嘻，废话多说了。总而言之，言而总之，请为我们伟大的个人博客的诞生狂欢吧哈！为庆祝本站诞辰0周年，本世界第二风趣之人确定赠予读到当下的读者一人一个大大的赞扬！各位吴彦祖、吴亦菲无一不是人见人爱，花见花开，铁轨见了都裂开~啊哈哈
鄙人愚钝，所谓狗嘴吐不出象牙。诸君见谅嘻嘻。
自我介绍一下吧，俺来自农村，妥妥无产阶级一个，估计上辈子拉屎递过纸，有幸到江苏读书，无奈是时运不济，命途多舛（下一句是什么来着~），嗯报国无门，无路请缨，怀才不遇（多戏了~）去当了四个月的牛马，现在苦苦看书，考研啊。
记得大三，手搓了个个人博客（当然烂得没法看），靠着这个粗制滥造的项目（堪称编程界的牛来 ~ 妈妈！咦？什么脏东西），居然找到了工作（外包，哭 ~ ）。不过最终结局是坏的，还是受不了高压的环境，溜溜球了~
于是，我总有一个心结。所谓须知少日拏云志，曾许人间第一流，我要做世界第一博客！（咦，好中二~）。于是我学啊学，学啊学，霍啊，马上要进阶大斗师了，突然天降天阶斗技，一学，我靠，有挂！
当然，AI是也。
呜呜呜，这下更焦虑了~
不过话说两头，拥有天阶斗技的我（呸呸呸，天阶斗技都烂大街了，谁还不是人手一本啊）开发博客岂不是如鱼得水，如日中天，品如（啊西八）
不得不说，开挂就是爽，一时开挂一时爽，一直开挂一直爽！前几天刚好发布deepseek harness ，于是我就去拜访宗门长老梁圣（话说deepseek涨价了我是叫梁子呢还是嘻嘻）
从昨天下午立项到今天下午，历时86,400秒（人话一天，真能装），俺神功大成。话说随着练功到后期，确实容易走火入魔哈。那deepseek是脱缰的野马，离家的世贤（不是）。
总而言之，言而总之，历经九九八十一难（真能吹~），本项目终于上线了。质量从牛来一跃飞升到749局（不是飞升在哪？）。哈不过这只是开始，俺会不断进步的，终有一天我要抱着我的博客上奥斯卡！（幻想中~）
谢谢你朋友，听我说了这么多废话。特此，邀请你见证我和我的博客的爱情。感谢你特别邀请来见证你的爱情（你看你又唱！）
我朋友曾说我特别抽象，我不以为然，也许是身在抽中不知抽（你是M吗？）当然，如果我的抽像博我的朋友们一笑，俺不胜荣幸！
扯了一大堆，作为一个程序员（牛马），怎么能没点技术输出呢？我就象征性的列一下本项目用到技术栈吧（嘿嘿嘿骗你的，技术栈是ai的，帖主是采购~）
一想到说了这么多肯定没人来看，一怒之下路了一下（？审核你看他）。当然是悲从中来，悲极生乐。最后跟大家求个一键三连（串台了~）
1. 核心框架与渲染
| 技术 | 用途 |
|---|---|
Astro 7（output: 'server'） | 全站 SSR + 按需静态生成；.astro 组件 + 页面级数据加载 |
| React 19 + @astrojs/react | 交互密集区用「岛屿」（islands）架构：编辑器、主题切换、个人中心、设置表单 |
View Transitions（<ClientRouter/>） | 跨页面 SPA 式平滑转场 + transition:persist 保留常驻元素（header/背景/进度条） |
2. 样式与主题
| 技术 | 用途 |
|---|---|
Tailwind CSS v 4（@tailwindcss/vite 插件） | CSS-first 配置、原子类、@theme inline 令牌 |
| 自定义设计令牌 | 亮/暗双主题 + 终端/黑客等主题 JSON（public/themes/）；像素字体 Fusion Pixel、Lora、Silkscreen |
| tw-animate-css + 手写 keyframes | 卡片入场 reveal、按钮波纹、流星/烟花粒子、数字滚动等动效 |
| Giscus | 文章评论（GitHub Discussions 驱动） |
3. 编辑器（所见即所得）
| 技术 | 用途 |
|---|---|
| CodeMirror 6（@codemirror/* 全家桶） | Markdown 编辑核心：语法高亮、行号、搜索、快捷键、Live Preview（Obsidian 式隐藏标记） |
| MarkdownEditor.tsx（复用组件） | 文章 + 日记共用；图片上传/粘贴/拖拽、光标插入、目录跳转 |
| 客户端图片压缩工具 | canvas 缩放 + 降质循环，规避 Vercel 4.5 MB 请求体限制 |
4. 内容与 Markdown/MDX 管线
| 技术 | 用途 |
|---|---|
| unified + remark + rehype | 完整转换管线：GFM、directive、slug 锚点、prism 代码高亮、标题自动链接 |
| @mdx-js/mdx evaluate | 文章动态编译为 MDX（支持 JSX 组件） |
| github-slugger / transliteration | 标题 slug 与中文转拼音 URL |
5. 数据层
| 技术 | 用途 |
|---|---|
| Drizzle ORM 0.45 | 类型安全查询；双方言 schema（SQLite/PG 各一份，代码同路径切换） |
| better-sqlite 3（开发） | 本地文件库 data/blog.db，WAL 模式 |
| postgres.js（生产） | PostgreSQL 连接；DATABASE_URL 前缀自动选择方言 |
| drizzle-kit | 迁移生成/推送（db/migrations/pg/*.sql） |
6. 存储与媒体
| 技术 | 用途 |
|---|---|
| Vercel Blob | 影集照片原图/缩略图（公开 CDN URL），token 环境变量控制 |
| DB base 64（images 表） | 博客插图/头像/背景——零配置、兼容无磁盘的 Serverless |
| 外部 URL | 动态视频仅支持外链（bilibili iframe/YouTube/mp 4） |
7. 认证与安全
| 技术 | 用途 |
|---|---|
Session Cookie + HMAC 签名（AUTH_SECRET） | 管理员单用户登录 |
| Astro middleware | 路由/API 分级保护（admin/edit/日记/写操作需登录；读公开） |
| Cache-Control 策略 | HTML 防缓存（防旧页面引用失效 JS）+ 预取响应 60 s 短缓存 |
8. 部署与运维
| 技术 | 用途 |
|---|---|
| @astrojs/vercel 11 | Serverless 函数输出（.vercel/output） |
| Vercel | 托管 + Postgres + Blob + 环境变量 + 自动部署 |
| Prefetch 优化 | hover/视口预取 + link rel=prefetch 缓存命中（点击 1 ms） |
| 加载指示系统 | 顶部进度条 + 居中转圈（点击立即出现、最短 400 ms、交换后淡出） |
9. 功能子系统
| 子系统 | 关键技术 |
|---|---|
| 文章 | MDX evaluate、分页/搜索/标签、封面图提取、草稿自动保存（防竞态） |
| 影集 | 瀑布流布局、时间线聚合、按日期分组、无缝排列、Blob 上传 |
| 日历 | lunar-javascript（农历/节气/干支/节日）、待办/日记/纪念日（每年重复+农历）、聚合 API 局部更新 |
| 动态（moments） | 文字/图片/GIF/视频流式发布、加载更多 |
| 个人中心 | 头像/简介/社交链接对话框（Radix Dialog） |
| 站点设置 | Hero 诗词轮播、全站背景（开关/图片/透明度/模糊）、JSON KV 存储 |
10. UI 组件库
| 技术 | 用途 |
|---|---|
| Radix UI（dialog/dropdown/tabs/select…） | 无头可访问组件 |
| class-variance-authority + tailwind-merge + clsx | 组件变体与类名合并（shadcn 风格） |
| lucide-react | 图标 |
11. 测试与开发工具
| 技术 | 用途 |
|---|---|
| Vitest | 56 个单元测试（日历农历/热力图/动态/图片/主题/MDX） |
| @astrojs/check + TypeScript 6 | 全站类型检查 |
| playwright-core | 无头浏览器验证（转场/布局/加载指示） |
| tsx | seed/迁移脚本执行 |
嘿嘿，你不会看到最后了吧，这么枯燥的ai写的技术都能看完，你一定能干大事！（技术栈都是二级标题，这样大家一看目录就知道这是一篇干货满满的博客（实则不然），于是空气里充满了“NB”的氛围）
