From 68ce6089e8a52da8f051d2f0e03af368fbe2779a Mon Sep 17 00:00:00 2001 From: Kaxi <1042864399@qq.com> Date: Tue, 2 Jun 2026 00:30:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B5=9E=E5=8A=A9=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=B4=E5=83=8F=E5=B1=95=E7=A4=BA=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- README.md | 107 ++++++++++--------- config/site.ts.example | 2 +- content/posts/dws-dingtalk-cli/img/cover.svg | 1 + pages/sponsor.vue | 12 ++- 4 files changed, 70 insertions(+), 52 deletions(-) create mode 100644 content/posts/dws-dingtalk-cli/img/cover.svg diff --git a/README.md b/README.md index 7dc8555..95071fd 100644 --- a/README.md +++ b/README.md @@ -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 -``` - -会在 `content/posts//` 下创建 `index.md` 和 `img/` 目录。 +自动生成目录结构和 frontmatter 模板，填上 `description` 和 `tags` 就能写了。 ## 项目结构 ``` -├── config/site.ts # 站点配置（改这一个文件定制全站） -├── content/posts/ # Markdown 文章 -│ └── / -│ ├── 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/) 看看效果。 diff --git a/config/site.ts.example b/config/site.ts.example index 70e5954..85e996a 100644 --- a/config/site.ts.example +++ b/config/site.ts.example @@ -39,7 +39,7 @@ export const siteConfig = { qrcode: { wechat: '/sponsors/qrcode/wechat.png', }, - list: [] as { name: string; date: string; amount: string }[], + list: [] as { name: string; date: string; amount: string; avatar?: string }[], }, // Giscus 评论配置 diff --git a/content/posts/dws-dingtalk-cli/img/cover.svg b/content/posts/dws-dingtalk-cli/img/cover.svg new file mode 100644 index 0000000..c460bba --- /dev/null +++ b/content/posts/dws-dingtalk-cli/img/cover.svg @@ -0,0 +1 @@ +
DWS钉钉cli
 \ No newline at end of file diff --git a/pages/sponsor.vue b/pages/sponsor.vue index d0d1e71..8a3f61c 100644 --- a/pages/sponsor.vue +++ b/pages/sponsor.vue @@ -47,14 +47,20 @@ useSeoMeta({ style="border-color: var(--color-border); background-color: var(--color-bg-card);" >
-
+ +
{{ sponsor.name.charAt(0) }}
-
+
{{ sponsor.name }}
{{ sponsor.date }}
+
{{ sponsor.amount }}
-
{{ sponsor.amount }}