86 lines
2.8 KiB
Markdown
86 lines
2.8 KiB
Markdown
# SuBlog
|
|
|
|
尼克的小窝 — 个人技术博客
|
|
|
|
🔗 官方网站：[https://nixus.top/](https://nixus.top/)
|
|
|
|
## 为什么做这个
|
|
|
|
之前一直在用各种博客平台，但总觉得不够自由，想折腾点什么也不方便。后来决定自己搭一个，顺便把平时学的技术实践一下。
|
|
|
|
选 Nuxt 3 是因为 Vue 生态比较熟，SSG 静态生成部署也方便。UI 参考了 [二叉树树](https://2x.nz) 的设计，感谢大佬的开源精神。
|
|
|
|
## 主要功能
|
|
|
|
写文章、搜文章这些基本功能就不说了，主要说说我觉得比较实用的：
|
|
|
|
- **标签系统** — 文章打标签，首页展示高频标签，点击就能快速筛选
|
|
- **封面制作** — 在线生成封面图，支持自定义文字、图标、背景，导出 PNG/SVG
|
|
- **首页个人名片** — 头像周围有 3D 技术栈图标环绕，社交入口和常用页面优先展示
|
|
- **网易云热评** — 首页随机展示一条音乐评论，每次刷新都不一样
|
|
- **暗色模式** — 跟随系统自动切换，也可以手动控制
|
|
- **Giscus 评论** — 基于 GitHub Discussions，不用自己搞后端
|
|
|
|
## 技术栈
|
|
|
|
| 技术 | 用途 |
|
|
|------|------|
|
|
| Nuxt 3 | Vue 3 全栈框架，SSG 静态生成 |
|
|
| TypeScript | 类型安全 |
|
|
| Tailwind CSS v4 | 原子化样式 |
|
|
| @nuxt/content | Markdown 文章管理 |
|
|
| Shiki | 代码语法高亮（支持 60+ 语言） |
|
|
| Giscus | 评论系统 |
|
|
|
|
## 快速开始
|
|
|
|
```bash
|
|
# 安装依赖
|
|
pnpm install
|
|
|
|
# 开发
|
|
pnpm dev
|
|
|
|
# 构建静态站点
|
|
pnpm generate
|
|
```
|
|
|
|
## 写文章
|
|
|
|
```bash
|
|
pnpm new-post <文章名称>
|
|
```
|
|
|
|
自动生成目录结构和 frontmatter 模板，填上 `description` 和 `tags` 就能写了。
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
├── assets/css/ # 全局样式和主题变量
|
|
├── components/
|
|
│ ├── layout/ # 导航栏、页脚、主题切换、3D 技术栈头像
|
|
│ └── blog/ # 文章卡片、目录、评论
|
|
├── config/site.ts # 全站配置（改这一个文件就行）
|
|
├── content/posts/ # Markdown 文章
|
|
├── pages/ # 页面路由
|
|
├── public/ # 静态资源
|
|
├── server/ # API 代理（网易云热评等）
|
|
└── utils/ # 工具函数
|
|
```
|
|
|
|
## 配置
|
|
|
|
所有站点配置集中在 `config/site.ts`，站点名称、头像、社交链接、导航菜单、友链、赞助、Giscus 都在这里改，改完自动生效。首页头像使用 `components/layout/AvatarOrbit.client.vue` 渲染，技术栈图标、颜色、动画节奏在该组件内维护。
|
|
|
|
## 部署
|
|
|
|
```bash
|
|
pnpm generate
|
|
```
|
|
|
|
产物在 `.output/public` 目录，直接丢到 Nginx、Vercel、Netlify 或者 1Panel 都行。
|
|
|
|
## 开源计划
|
|
|
|
目前代码还不够整洁，等整理好了会考虑开源。如果你对这个项目感兴趣，欢迎先访问 [官方网站](https://nixus.top/) 看看效果。
|