项目介绍
全面了解 blog 博客系统的定位和核心功能
📝 Blog 项目介绍
Hey，同学！想拥有自己的技术博客吗？这一篇给你介绍 iFluxArt 的博客系统～ 📰
🤔 Blog 是干嘛的？
Blog 是 iFluxArt 的内容发布系统，专门为内容创作者打造。无论是技术文章、读书笔记还是日常感悟，都可以在这里发布和管理。
💡 想象一下：Blog 就是你的「出版社」——写稿、排版、发布、读者互动，一条龙服务！
🏗️ 项目定位
| 维度 | 说明 |
|---|---|
| 定位 | 内容发布与展示平台 |
| 面向用户 | 博主、内容创作者、程序员 |
| 技术栈 | Next.js 16 + MDX + Shiki |
| 部署位置 | Vercel（独立项目） |
✨ 核心功能
🖊️ 内容创作
- MDX 支持：Markdown + React 组件，想怎么写就怎么写！
- Frontmatter：文章元数据（标题、日期、标签等）
- 代码高亮：Shiki 驱动，支持上百种语言
- Mermaid 图表：用文本就能画流程图、时序图
📚 文章管理
- 分类系统：按主题组织文章
- 标签系统：灵活的标签管理
- 时间线：文章按时间线排列
- 置顶功能：重要文章优先展示
💬 互动功能
- Giscus 评论：基于 GitHub Discussions
- 评论区管理：审核、删除评论
📡 订阅与分发
- RSS 订阅：生成 feed.xml
- SEO 优化：Meta、Open Graph、Sitemap
🔧 技术设计
为什么选择 MDX？
MDX = Markdown + JSX = 可编程的 Markdown
markdown
# 我的文章
这里是一段文字。
<Callout type="info">
这是一个提示框组件！
</Callout>
\`\`\`js
console.log('代码高亮');
\`\`\`
MDX 的优势：
- 保留 Markdown 的简洁
- 引入 React 组件的强大
- 内容创作门槛低
代码高亮原理
使用 Shiki 在构建时进行代码高亮：
- 解析代码块语言
- 选择对应语法主题
- 生成带样式的 HTML
- 无需客户端 JavaScript
数据存储
文章内容存在 Supabase 数据库中：
| 表 | 用途 |
|---|---|
posts | 博客文章 |
categories | 分类 |
tags | 标签 |
comments | 评论 |
🎯 适用场景
| 场景 | 推荐用法 |
|---|---|
| 个人技术博客 | MDX + 代码高亮，完美！ |
| 团队博客 | 多作者、评论协作 |
| 知识库 | 分类 + 标签，整理知识 |
| 文档转博客 | MDX 文档直接发布 |
🔗 与其他项目的关系
text
Web (入口)
│
└──🔗 链接──→ Blog (博客系统)
│
└──💬 Giscus (评论系统)
│
└──📡 RSS (订阅)
│
└──🔍 搜索引擎 (SEO)
- Web 提供入口和导航
- Blog 负责内容管理和展示
- 外部服务提供附加功能
📖 下一步
📝 准备好了吗？是时候开始你的创作之旅了！