作为一名热衷于底层原理的开发者，在决定重构个人博客时，我做了一个极其“反直觉”的决定：**完全抛弃 React、Vue、Next.js 等现代前端框架，也不使用 Hexo 或 Hugo 这类静态生成器。**

我要用最纯粹的 HTML5 + CSS3 + 原生 Canvas JS，从零手写一个带有极客科幻感、且拥有 3D 粒子物理引擎的交互式博客。

一、抛弃框架的理由：追求极致的首屏与洁癖

现代前端框架固然提高了开发效率，但也带来了沉重的 node_modules 和厚重的 JS bundle 包。对于一个以阅读为主的博客而言，用户需要的仅仅是秒开的速度和沉浸的体验。

通过使用纯静态原生代码，整个页面的体积（包含 3D 引擎）被压缩到了不足 15KB。没有任何外部网络请求，没有任何框架初始化开销，首屏渲染时间（FCP）在普通 4G 网络下低于 120 毫秒。

二、3D 粒子物理引擎的数学实现

本站背景中最引人注目的，是那个随鼠标拖拽旋转、点击爆炸的 3D 星空矩阵。它没有借用 Three.js，而是直接在 2D Canvas 上通过数学投影计算出来的。

核心原理是 弹簧振子物理模型（Spring Physics） 结合 3D 透视投影变换（Perspective Projection）。每一颗粒子都拥有自己的 3D 坐标 (x, y, z) 以及对应的速度向量 (vx, vy, vz)。当鼠标点击时，计算欧几里得距离，赋予爆炸斥力：

// 粒子更新核心物理逻辑
update() {
    const spring = 0.05;    // 弹簧恢复系数
    const friction = 0.88;  // 空气摩擦衰减
    
    // 胡克定律：加速度与偏移量成正比，方向相反
    this.vx += -this.ox * spring;
    this.vy += -this.oy * spring;
    this.vz += -this.oz * spring;
    
    // 摩擦力衰减速度
    this.vx *= friction;
    this.vy *= friction;
    this.vz *= friction;
    
    // 欧拉积分更新位置
    this.ox += this.vx;
    this.oy += this.vy;
    this.oz += this.vz;
}

随后，通过焦距 fov = 1000，将 3D 坐标映射回屏幕上的 2D 坐标：scale = fov / (fov + finalZ)，这就实现了近大远小的景深效果。

三、Glassmorphism (拟态玻璃) UI 的调优

为了配合黑客帝国的深邃背景，页面的内容面板采用了 CSS 的 backdrop-filter: blur(12px)。但仅仅模糊是不够的，核心在于光影的克制。

我通过给面板顶部添加 border-top: 1px solid rgba(0, 255, 204, 0.3) 的青色高光强调，以及底部的极弱边框，模拟出了类似赛博朋克全息投影的质感。同时利用多重 box-shadow 制造纵深，让面板像是一块悬浮在粒子海上的玻璃。

四、最艰难的一关：国内网安备案

2026年，国内的工信部与公安网安备案审核达到了史无前例的严格程度。任何带有“建设中”、“测试”、“占位符”字样的页面都会被直接驳回。

为了顺利过审，我做了以下几项处理：

  • 彻底消除违规词： 移除了所有建设中提示，取而代之的是实质性的交互提示。
  • 全内容填充： 将每一个子分类都写上了详实的 AI 深度技术文章，让审查员判定这是一个“已完工且具有专业价值”的站点。
  • 标准化的全站底部： 采用了 SVG 矢量绘制的国徽与公安盾牌，避免了外链图片加载失败的问题，并在全站所有子页面保持底部 footer-bar 的绝对统一。

最终，这套纯手写、无框架的硬核博客，一次性顺利通过了各项严苛的合规审查，正式上线运行。