Colophon
致谢与设计
这一页讲的是主站本身——用了什么技术、怎么设计、参考了哪些站点。
Stack
技术栈
当前主站依赖的 3 大块:框架与部署、样式与设计、工具与流程。
框架 / 部署
- Astro 6 主站静态站点生成
6.4.x,组件式开发 + 零 JS 默认,只在需要的页面用 <script is:inline> 注入微交互
- Cloudflare Pages 托管 + CDN
azek431.pages.dev 部署,GitHub 推送即触发 build
- GitHub + Gitee 代码 / 镜像
主仓库 GitHub,国内访问通过 Gitee 镜像同步
样式 / 设计
- 原生 CSS + variables design tokens
~74KB global.css,所有颜色 / 阴影 / 缓动走 CSS 变量,后续可平滑换主题
- 玻璃质感 + 极光 视觉风格
backdrop-filter: blur + body::before / ::after 渐变跟随
- 微交互 动效
卡片 3D 倾斜 / 鼠标光晕 / 滚动入场 / 状态呼吸 / 极光漂移 / 滚动进度条
工具 / 流程
- pnpm 包管理
节省磁盘 / 安装快 / monorepo 友好
- Prettier 格式化
prettier + prettier-plugin-astro,统一代码风格
- VS Code 主力编辑器
Astro / Tailwind IntelliSense 插件
Type
字体
全部使用系统字体栈,不引入外部 webfont,首屏快且隐私友好。
系统字体栈
ui-monospace
Principles
设计原则
做这个主站时一直记在心里的 4 条原则。
01
简洁优先
少组件,少依赖,长生命周期优先于花哨功能
02
可读性 > 装饰
文字、间距、对比度是主旋律,动效只做点缀
03
长期维护
每次提交都考虑一年后回来看是否还能维护
04
公开过程
把构建过程 / 设计选择 / 内容方向都写在主站上
Inspiration
受影响的站点
以下站点在结构 / 内容 / 风格上给我不少启发。