ShibaInu's Blog

一个极简风格的博客系统，使用 Next.js 14 + Tailwind CSS 构建。

功能特性

• 📝 Markdown 文章管理
• 🌙 暗色模式切换（使用 localStorage 持久化）
• 📱 响应式设计，移动端友好
• 📡 RSS 订阅（主 feed 和分类 feed）
• 🏷️ 分类和标签系统
• ⚡️ 静态生成，极速加载
• 🎨 极简设计，卡片式布局

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000 查看博客。

构建生产版本

npm run build
npm start

如何添加新文章

1. 在 content/posts/ 目录下创建一个新的 .md 文件
2. 使用以下 frontmatter 格式：

---
title: 文章标题
date: 2024-01-15
excerpt: 文章摘要
category: 分类名称
tags: [标签1, 标签2]
cover: /covers/cover-image.jpg
---

# 文章内容

这里是文章的正文内容...

Frontmatter 字段说明

• title (必填): 文章标题
• date (必填): 发布日期，格式：YYYY-MM-DD
• excerpt (必填): 文章摘要，用于列表页展示
• category (必填): 文章分类
• tags (可选): 文章标签数组
• cover (可选): 封面图片路径

项目结构

shibainu-blog/
├── components/        # React 组件
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── ThemeToggle.tsx
│   └── PostCard.tsx
├── lib/              # 工具函数
│   ├── posts.ts      # 文章相关函数
│   ├── rss.ts        # RSS 生成
│   └── utils.ts      # 通用工具
├── content/posts/    # Markdown 文章
├── app/              # Next.js 页面
└── public/           # 静态资源

部署到 Vercel

1. 将代码推送到 GitHub
2. 在 Vercel 上导入项目
3. Vercel 会自动检测 Next.js 项目并部署

RSS Feed

• 主 feed: https://your-domain.com/feed.xml
• 分类 feed: https://your-domain.com/feed/[category].xml

技术栈

• 框架: Next.js 14 (App Router)
• 样式: Tailwind CSS
• Markdown: gray-matter + remark/rehype
• 部署: Vercel

License

MIT