feat: 赞助卡片支持头像展示，优化布局

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-02 00:30:16 +08:00
parent 18951fa1c8
commit 68ce6089e8
4 changed files with 70 additions and 52 deletions
@@ -1,73 +1,84 @@
-# Sublog - Nuxt 3 博客
+# SuBlog

-基于 Nuxt 3 的静态博客站点，使用 @nuxt/content 管理 Markdown 文章。
+尼克的小窝 — 个人技术博客
+
+🔗 官方网站：[https://nixus.top/](https://nixus.top/)
+
+## 为什么做这个
+
+之前一直在用各种博客平台，但总觉得不够自由，想折腾点什么也不方便。后来决定自己搭一个，顺便把平时学的技术实践一下。
+
+选 Nuxt 3 是因为 Vue 生态比较熟，SSG 静态生成部署也方便。UI 参考了 [二叉树树](https://2x.nz) 的设计，感谢大佬的开源精神。
+
+## 主要功能
+
+写文章、搜文章这些基本功能就不说了，主要说说我觉得比较实用的：
+
+- **标签系统** — 文章打标签，首页展示高频标签，点击就能快速筛选
+- **封面制作** — 在线生成封面图，支持自定义文字、图标、背景，导出 PNG/SVG
+- **网易云热评** — 首页随机展示一条音乐评论，每次刷新都不一样
+- **暗色模式** — 跟随系统自动切换，也可以手动控制
+- **Giscus 评论** — 基于 GitHub Discussions，不用自己搞后端

 ## 技术栈

- **Nuxt 3** - Vue 3 全栈框架
- **@nuxt/content** - Markdown 内容管理
- **Tailwind CSS** - 样式框架
- **TypeScript** - 类型安全
- **Giscus** - GitHub Discussions 评论系统
+| 技术 | 用途 |
+|------|------|
+| Nuxt 3 | Vue 3 全栈框架，SSG 静态生成 |
+| TypeScript | 类型安全 |
+| Tailwind CSS v4 | 原子化样式 |
+| @nuxt/content | Markdown 文章管理 |
+| Shiki | 代码语法高亮（支持 60+ 语言） |
+| Giscus | 评论系统 |

-## 开发
-
-### 启动开发服务器
+## 快速开始

 ```bash
-npm run dev
+# 安装依赖
+pnpm install
+
+# 开发
+pnpm dev
+
+# 构建静态站点
+pnpm generate
 ```

-### 构建静态站点
+## 写文章

 ```bash
-npm run generate
+pnpm new-post <文章名称>
 ```

-构建产物输出到 `.output/public`，文章图片会自动复制。
-
-### 预览构建结果
-
-```bash
-npm run preview
-```
-
-## 新建文章
-
-```bash
-npm run new-post <slug>
-```
-
-会在 `content/posts/<slug>/` 下创建 `index.md` 和 `img/` 目录。
+自动生成目录结构和 frontmatter 模板，填上 `description` 和 `tags` 就能写了。

 ## 项目结构

 ```
-├── config/site.ts          # 站点配置（改这一个文件定制全站）
-├── content/posts/           # Markdown 文章
-│   └── <slug>/
-│       ├── index.md         # 文章内容
-│       └── img/             # 文章图片
+├── assets/css/          # 全局样式和主题变量
 ├── components/
-│   ├── layout/              # 布局组件（NavBar, Footer）
-│   └── blog/                # 博客组件（PostCard, PostToc, Giscus）
-├── composables/             # 组合式函数
-├── pages/                   # 页面路由
-├── layouts/                 # 布局模板
-├── server/routes/           # API 路由
-└── utils/                   # 工具函数
+│   ├── layout/          # 导航栏、页脚、主题切换
+│   └── blog/            # 文章卡片、目录、评论
+├── config/site.ts       # 全站配置（改这一个文件就行）
+├── content/posts/       # Markdown 文章
+├── pages/               # 页面路由
+├── public/              # 静态资源
+├── server/              # API 代理（网易云热评等）
+└── utils/               # 工具函数
 ```

 ## 配置

-站点信息集中在 `config/site.ts`：
-
- 站点名称、描述、关键词
- 头像、favicon
- 社交链接
- 导航菜单
- Giscus 评论配置
+所有站点配置集中在 `config/site.ts`，站点名称、头像、社交链接、导航菜单、友链、赞助、Giscus 都在这里改，改完自动生效。

 ## 部署

-构建后将 `.output/public` 目录部署到任意静态托管服务（Vercel、Netlify、Cloudflare Pages 等）。
+```bash
+pnpm generate
+```
+
+产物在 `.output/public` 目录，直接丢到 Nginx、Vercel、Netlify 或者 1Panel 都行。
+
+## 开源计划
+
+目前代码还不够整洁，等整理好了会考虑开源。如果你对这个项目感兴趣，欢迎先访问 [官方网站](https://nixus.top/) 看看效果。