Sublog - Nuxt 3 博客

基于 Nuxt 3 的静态博客站点，使用 @nuxt/content 管理 Markdown 文章。

技术栈

• Nuxt 3 - Vue 3 全栈框架
• @nuxt/content - Markdown 内容管理
• Tailwind CSS - 样式框架
• TypeScript - 类型安全
• Giscus - GitHub Discussions 评论系统

开发

启动开发服务器

npm run dev

构建静态站点

npm run generate

构建产物输出到 .output/public，文章图片会自动复制。

预览构建结果

npm run preview

新建文章

npm run new-post <slug>

会在 content/posts/<slug>/ 下创建 index.md 和 img/ 目录。

项目结构

├── config/site.ts          # 站点配置（改这一个文件定制全站）
├── content/posts/           # Markdown 文章
│   └── <slug>/
│       ├── index.md         # 文章内容
│       └── img/             # 文章图片
├── components/
│   ├── layout/              # 布局组件（NavBar, Footer）
│   └── blog/                # 博客组件（PostCard, PostToc, Giscus）
├── composables/             # 组合式函数
├── pages/                   # 页面路由
├── layouts/                 # 布局模板
├── server/routes/           # API 路由
└── utils/                   # 工具函数

配置

站点信息集中在 config/site.ts：

• 站点名称、描述、关键词
• 头像、favicon
• 社交链接
• 导航菜单
• Giscus 评论配置

部署

构建后将 .output/public 目录部署到任意静态托管服务（Vercel、Netlify、Cloudflare Pages 等）。