Project Laser：我的 Astro 多站点博客主题

起源

Project Laser 从 Astro Cactus 主题起步，但经过大量重构后，已经演变成一个完全独立的博客系统。

为什么叫Project Laser？源于游戏 Brawl Stars 里面的 8-bit 相关的一期游戏更新小游戏，地址：https://game.updn.pub

核心特性

多站点架构

一套代码驱动多个独立域名，每个站点有自己的定位：

站点 定位
主站 首页落地页
博客 长文章、技术分享
动态 短内容、日常记录
关于 个人介绍

它们共享同一套 UI 组件和样式系统，但各自独立构建部署。换主题、改样式，所有站点同步更新。

Bear 风格排版

受 Bear 笔记应用启发，采用简洁的 Markdown 渲染风格：

  • 红色强调色 #DD4C4F
  • 干净的标题层级
  • 舒适的行高和间距
  • 灰色圆角标签

没有花哨的装饰，专注内容本身。

动效组件

集成了一些有趣的动画效果，用于点缀页面：

  • FuzzyText：模糊闪烁文字，用在 404 页面
  • GlitchText：故障风格文字
  • DecryptedText：打字机解密效果
  • StaggeredMenu：交错动画导航菜单

克制使用，不喧宾夺主。

Markdown 增强

除了标准 Markdown 语法，还支持：

高亮语法

这是 ==高亮文本== 效果

数学公式

行内：$E = mc^2$
块级：$$\sum_{i=1}^n x_i$$

提示块

:::tip[提示]
这是提示内容
:::

GitHub 仓库卡片

::github{repo="用户名/仓库名"}

技术栈

  • 框架：Astro 5
  • 交互：React 19
  • 样式：Tailwind CSS 4 + 自定义 CSS
  • 构建：pnpm
  • 搜索：Pagefind
  • 部署：静态文件 + Nginx

选择 Astro 是因为它的"岛屿架构"——页面默认零 JS，只在需要交互的地方注入 React 组件。博客不需要 SPA，静态优先才是正道。

设计理念

1. 内容优先

去掉一切干扰阅读的元素。没有侧边栏广告，没有弹窗，没有花哨的动画背景。

2. 暗色优先

默认深色主题，背景色 #0a0a0a，比纯黑柔和，比浅灰更深邃。当然也支持亮色模式。

3. 性能优先

纯静态输出，页面加载飞快。图片懒加载，代码按需分割。

4. 可维护性

共享 UI 组件抽离到独立目录，样式使用 CSS 变量统一管理。改一处，全站生效。

与 Cactus 的区别

方面 Cactus Project Laser
架构 单站点 多站点独立域名
样式 Tailwind Typography 自定义 Bear 风格
组件 纯 Astro Astro + React 动效
主题 跟随系统 深色优先
定制 通用模板 高度个性化

代码层面的变化：新增 2500+ 行，删除 2000+ 行，修改几乎每个核心文件。可以说只是用 Cactus 当了脚手架。

未来计划

  • 评论系统集成
  • 更多主题配色
  • 文章系列/专栏功能
  • 阅读数据统计

最后

Project Laser 目前没有开源计划，它是为我自己的需求量身定制的。

但如果你也想搭建类似的博客系统，推荐从 Astro Cactus 开始，它是一个很好的起点。

Game Not Over.

Astro 博客主题 多站点博客
· 2 min read