SuBlog
基于 Nuxt 3 的个人技术博客模板。
为什么做这个
之前一直在用各种博客平台，但总觉得不够自由，想折腾点什么也不方便。后来决定自己搭一个，顺便把平时学的技术实践一下。
选 Nuxt 3 是因为 Vue 生态比较熟，SSG 静态生成部署也方便。UI 参考了 二叉树树 的设计，感谢大佬的开源精神。
主要功能
写文章、搜文章这些基本功能就不说了，主要说说我觉得比较实用的：
- 标签系统 — 文章打标签，首页展示高频标签，点击就能快速筛选
- 封面制作 — 在线生成封面图，支持自定义文字、图标、背景，导出 PNG/SVG
- 首页个人名片 — 头像周围有 3D 技术栈图标环绕，社交入口和常用页面优先展示
- 网易云热评 — 首页随机展示一条音乐评论，每次刷新都不一样
- 暗色模式 — 跟随系统自动切换，也可以手动控制
- Giscus 评论 — 基于 GitHub Discussions，不用自己搞后端
技术栈
| 技术 | 用途 |
|---|---|
| Nuxt 3 | Vue 3 全栈框架，SSG 静态生成 |
| TypeScript | 类型安全 |
| Tailwind CSS v4 | 原子化样式 |
| @nuxt/content | Markdown 文章管理 |
| Shiki | 代码语法高亮（支持 60+ 语言） |
| Giscus | 评论系统 |
快速开始
# 创建本地站点配置（该文件不会提交到 Git）
cp config/site.ts.example config/site.ts
# 安装依赖
pnpm install
# 开发
pnpm dev
# 构建静态站点
pnpm generate
写文章
pnpm new-post <文章名称>
自动生成目录结构和 frontmatter 模板，填上 description 和 tags 就能写了。
项目结构
├── assets/css/ # 全局样式和主题变量
├── components/
│ ├── layout/ # 导航栏、页脚、主题切换、3D 技术栈头像
│ └── blog/ # 文章卡片、目录、评论
├── config/site.ts.example # 可提交的安全配置模板
├── config/site.ts # 本地私有站点配置（Git 忽略）
├── content/posts/ # Markdown 文章
├── pages/ # 页面路由
├── public/ # 静态资源
├── server/ # API 代理（网易云热评等）
└── utils/ # 工具函数
配置
所有个性化信息集中在本地的 config/site.ts：站点资料、社交链接、项目反馈地址、友链、赞助名单、收款码路径、备案信息和 Giscus 标识。该文件已被 Git 忽略，仓库只提交 config/site.ts.example。
收款二维码请放在 public/sponsors/qrcode/ 后，再在 config/site.ts 填写路径；该目录同样不会提交到 Git。Giscus、收款码和备案信息留空时，对应页面内容会自动隐藏。
更多归档前检查项见 开源配置说明。首页头像使用 components/layout/AvatarOrbit.client.vue 渲染，技术栈图标、颜色、动画节奏在该组件内维护。
部署
pnpm generate
产物在 .output/public 目录，直接丢到 Nginx、Vercel、Netlify 或者 1Panel 都行。
开源归档
提交前请确认 config/site.ts、.env* 和 public/sponsors/qrcode/ 没有被强制加入 Git；仓库内不应包含个人账号、备案信息或收款码。