admin/aiagent
1
0
Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
rjb_bijiben_dev
aiagent/docs/博客内容站_需求分析与规划文档.md

556 lines
21 KiB
Markdown
Raw Permalink Normal View History

chore: 保存笔记本本地未提交改动(源码+新增文件，排除构建缓存/大文件)
2026-07-11 08:58:10 +08:00
# 📄 博客/内容站 — 完整需求分析与规划文档
> **文档版本**: v1.0
> **创建日期**: 2026-05-10
> **状态**: ✅ 已定稿
---
## 目录
1. [项目概述](#1-项目概述)
2. [目标用户与用户画像](#2-目标用户与用户画像)
3. [核心功能清单与优先级](#3-核心功能清单与优先级)
4. [页面结构与导航设计](#4-页面结构与导航设计)
5. [技术栈选型方案](#5-技术栈选型方案)
6. [设计风格与品牌调性](#6-设计风格与品牌调性)
7. [内容策略与 SEO 规划](#7-内容策略与-seo-规划)
8. [非功能性需求](#8-非功能性需求)
9. [实施路线图](#9-实施路线图)
10. [附录：数据模型设计](#10-附录数据模型设计)
---
## 1. 项目概述
### 1.1 项目定位
一个现代化的 **博客/内容发布平台**，专注于高品质内容的创作、分发和阅读体验。适用于个人博主、技术团队或内容创作者分享知识、教程和见解。
### 1.2 项目目标
| 目标 | 说明 |
|:----|:-----|
| 🎯 **优质阅读体验** | 极简、专注的排版，无干扰阅读 |
| 🚀 **高性能** | 首屏加载 < 1.5s，Lighthouse 评分 > 90 |
| 🔍 **SEO友好** | 搜索引擎收录率高，结构化数据完善 |
| 📱 **全端适配** | 桌面端、平板、手机完美响应 |
| ✍️ **创作友好** | 支持 Markdown 写作，所见即所得 |
### 1.3 核心指标
- 文章加载时间 < 1s
- 移动端适配评分 100/100
- SEO 基础评分 95+/100
- 支持每月 10 万+ PV
---
## 2. 目标用户与用户画像
### 2.1 用户群体分类
| 用户类型 | 占比 | 特征描述 | 核心需求 |
|:--------|:----|:---------|:---------|
| 🧑‍💻 **技术/专业读者** | 45% | 25-45岁，开发/设计/产品经理 | 深度技术文章、实战教程、行业洞察 |
| 📚 **学习型读者** | 35% | 20-35岁，大学生/职场新人 | 系统性教程、入门指南、知识索引 |
| 🌐 **泛浏览者** | 20% | 18-50岁，对主题感兴趣的受众 | 轻松阅读、发现推荐内容、信息获取 |
### 2.2 典型用户画像
**人物 A：技术从业者 — 小明**
> 28岁，前端开发工程师，工作3年。每天通勤和午休时阅读技术博客。习惯通过 Google 搜索找到文章，喜欢带代码示例的实战教程。最看重文章质量而非数量，会 RSS 订阅优质博客。
**人物 B：学习型用户 — 小丽**
> 24岁，计算机专业研究生。正在学习 React 和 Node.js，喜欢有系统化目录的系列教程。会在文章评论区提问互动，期望有「相关文章」推荐帮助持续学习。
**人物 C：内容创作者 — 老王**
> 35岁，资深后端架构师，业余写博客。需要简洁高效的 Markdown 编辑器，希望文章有良好的代码高亮和目录导航。关注阅读量和 SEO 表现数据。
---
## 3. 核心功能清单与优先级
### 3.1 功能总览（MoSCoW 优先级）
| 优先级 | 标识 | 说明 |
|:------|:----|:-----|
| 🔴 **P0 - Must have** | 必须有 | MVP 核心功能，首发必须完成 |
| 🟡 **P1 - Should have** | 应该有 | 用户体验关键功能，建议包含 |
| 🟢 **P2 - Could have** | 可以有 | 锦上添花，后续迭代 |
| ⚪ **P3 - Won't have** | 暂无 | 本期不实现，列入远期规划 |
---
### 🔴 P0 — 核心功能（MVP）
| 模块 | 功能 | 说明 |
|:----|:-----|:------|
| 📝 **文章展示** | 文章列表页 | 分页、按时间倒序排列 |
| | 文章详情页 | Markdown 渲染、代码高亮、TOC 目录 |
| | 文章归档 | 按年月归档 |
| 🏷️ **分类与标签** | 分类管理 | 多级分类（如：前端/后端/运维） |
| | 标签系统 | 自由标签，一篇文章多个标签 |
| 🔍 **搜索** | 全文搜索 | 支持文章标题和内容的搜索 |
| 📱 **响应式布局** | 全端适配 | PC / 平板 / 手机完美显示 |
| ⚡ **性能优化** | 静态生成 | SSG 或 ISR 生成静态页面 |
| | 图片优化 | 懒加载、WebP 格式 |
### 🟡 P1 — 重要功能
| 模块 | 功能 | 说明 |
|:----|:-----|:------|
| 👤 **作者系统** | 作者信息展示 | 头像、简介、社交链接 |
| | 作者文章聚合 | 按作者查看所有文章 |
| 💬 **评论系统** | 第三方集成 | Disqus / Giscus / Twikoo |
| | 评论通知 | 新评论邮件通知 |
| 📊 **数据统计** | 阅读量统计 | 每篇文章阅读计数 |
| | 访问分析 | 集成 Google Analytics / Umami |
| 🔗 **社交分享** | 一键分享 | 分享到微信、微博、Twitter、LinkedIn |
| 🎨 **黑暗模式** | 明暗主题切换 | 跟随系统或手动切换 |
### 🟢 P2 — 增强功能
| 模块 | 功能 | 说明 |
|:----|:-----|:------|
| ✉️ **订阅系统** | 邮件订阅 | 新文章发布邮件通知（可用 Revue / Mailchimp） |
| | RSS/Atom | 标准 Feed 输出 |
| 📎 **系列连载** | 系列文章分组 | 如「React 入门系列」连载导航 |
| 📄 **自定义页面** | 关于/项目/友链 | 独立页面支持 |
| 🔄 **文章推荐** | 相关文章推荐 | 基于标签和分类推荐 |
| 🌍 **多语言** | i18n 支持 | 中/英文切换（可选） |
### ⚪ P3 — 远期规划
| 功能 | 说明 |
|:----|:------|
| 🛒 **付费内容/会员** | 部分文章付费阅读 |
| 🤖 **AI 摘要** | AI 生成文章摘要和关键词 |
| 📬 **Newsletter 推送** | 独立邮件订阅系统 |
| 🎙️ **播客支持** | 文章配套音频版本 |
---
## 4. 页面结构与导航设计
### 4.1 站点地图
```
首页 (/)
├── 文章列表 (/) — 最新文章流
│ ├── 精选推荐
│ ├── 最新发布 (按时间)
│ └── 热门文章 (按阅读量)
│
├── 分类页 (/categories/)
│ ├── 前端 (/categories/frontend/)
│ ├── 后端 (/categories/backend/)
│ ├── 运维 (/categories/devops/)
│ └── 其他...
│
├── 标签页 (/tags/)
│ └── /tags/{tag-name}/
│
├── 文章详情 (/posts/{slug}/)
│ ├── 文章正文 + TOC
│ ├── 作者信息
│ ├── 评论区
│ └── 相关文章推荐
│
├── 归档 (/archives/)
│ └── 按年月归档
│
├── 关于 (/about/)
├── 搜索 (/search?q=keyword)
└── 友情链接 (/links/)
```
### 4.2 导航结构
```
顶部导航栏
├── 🏠 首页
├── 📂 分类 ▾
│ ├── 前端开发
│ ├── 后端开发
│ ├── 云原生/运维
│ ├── 人工智能
│ └── 杂谈/随笔
├── 🏷️ 热门标签
├── 📅 归档
├── 🔍 搜索 (图标按钮)
└── 🌓 明暗切换
底部导航
├── © 版权信息
├── 📖 关于本站
├── 🤝 友情链接
├── 📡 RSS 订阅
└── 🐦 社交媒体
```
### 4.3 关键页面线框图
**首页布局：**
```
┌─────────────────────────────────────┐
│ [Logo] 导航栏 [🔍][🌓] │
├─────────────────────────────────────┤
│ │
│ ┌───────────┐ ┌───────────────┐ │
│ │ 📌 精选文章 │ │ 热门文章 │ │
│ │ (大封面图) │ │ • 文章1 │ │
│ │ │ │ • 文章2 │ │
│ └───────────┘ └───────────────┘ │
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 文章1 │ │ 文章2 │ │ 文章3 │ ... │
│ │ 卡片 │ │ 卡片 │ │ 卡片 │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
│ [加载更多] │
│ │
└─────────────────────────────────────┘
[页脚: 关于 | 友链 | RSS]
```
**文章详情页布局：**
```
┌─────────────────────────────────────┐
│ [Logo] 导航栏 [🔍][🌓] │
├─────────────────────────────────────┤
│ │
│ 📖 文章标题 │
│ 👤 作者 · 📅 日期 · 📖 阅读xxx次 │
│ │
│ ┌─────────┐ ┌──────────────────┐ │
│ │ 📑 TOC │ │ │ │
│ │ • 前言 │ │ 文章正文 │ │
│ │ • 第一章│ │ (Markdown渲染) │ │
│ │ • 第二章│ │ │ │
│ │ • 总结 │ │ 代码高亮 │ │
│ └─────────┘ │ │ │
│ └──────────────────┘ │
│ │
│ 🏷️ 标签: React · JavaScript · 教程 │
│ │
│ 💬 评论区 │
│ ┌─────────────────────────────┐ │
│ │ Disqus / Giscus 评论组件 │ │
│ └─────────────────────────────┘ │
│ │
│ 📎 相关文章推荐 │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │推荐1 │ │推荐2 │ │推荐3 │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
└─────────────────────────────────────┘
```
---
## 5. 技术栈选型方案
### 5.1 方案对比
考虑到静态博客/内容站的核心需求（性能、SEO、易维护），提供两套优选方案：
#### 🅰️ 方案 A：Next.js (SSG/ISR) — **推荐**
| 层级 | 技术选型 | 说明 |
|:----|:---------|:-----|
| 🖥 **前端框架** | Next.js 14+ (App Router) | React 全栈框架，SSG + ISR |
| 📝 **内容管理** | MDX / Contentlayer | Markdown + JSX 组件，本地内容管理 |
| 🎨 **UI 框架** | Tailwind CSS + Shadcn/ui | 原子化 CSS，组件库 |
| 🗄️ **数据存储** | 本地 Markdown 文件 / 可选 CMS | 文件系统驱动，轻量 |
| 🔍 **搜索** | Fuse.js / Meilisearch | 前端模糊搜索 / 自托管搜索引擎 |
| 💬 **评论** | Giscus | 基于 GitHub Discussions，无后端 |
| 📊 **分析** | Umami / Plausible | 自托管隐私友好分析 |
| 🚀 **部署** | Vercel / Cloudflare Pages | 全球 CDN 自动部署 |
| 🛠 **CMS（可选）** | Notion + Notion API / Strapi | 非技术编辑友好 |
**适用场景：** 需要高性能、SEO 优先、React 生态、可扩展性强
#### 🅱️ 方案 B：Hugo / Astro — **极简方案**
| 层级 | 技术选型 | 说明 |
|:----|:---------|:-----|
| 🏗 **框架** | Hugo / Astro | 极速静态站点生成器 |
| 📝 **内容** | Markdown + Front Matter | 最简内容管理 |
| 🎨 **主题** | 社区主题 / 自定义 | PaperMod / LoveIt / 自研 |
| 🚀 **部署** | Netlify / Cloudflare Pages / GitHub Pages | 免费部署 |
| 💬 **评论** | Giscus / Utterances | 基于 GitHub Issues |
| 🔍 **搜索** | Pagefind / Lunr.js | 静态搜索索引 |
**适用场景：** 单人或小团队，追求极致简洁和维护成本最低
### 5.2 推荐方案详情（方案 A）
```
📁 项目结构
blog-site/
├── app/ # Next.js App Router
│ ├── layout.tsx # 全局布局
│ ├── page.tsx # 首页
│ ├── posts/ # 文章页面
│ │ └── [slug]/
│ │ └── page.tsx
│ ├── categories/
│ ├── tags/
│ ├── about/
│ └── search/
├── content/ # Markdown 内容
│ ├── posts/
│ │ ├── my-first-post.md
│ │ └── ...
│ ├── authors/
│ └── pages/ # 关于等静态页面
├── components/ # React 组件
│ ├── ui/ # 基础 UI 组件
│ ├── layout/ # 布局组件
│ └── post/ # 文章相关组件
├── lib/ # 工具函数
│ ├── posts.ts # 文章数据处理
│ └── utils.ts
├── public/ # 静态资源
│ └── images/
├── styles/ # 全局样式
│ └── globals.css
├── tailwind.config.ts
└── next.config.ts
```
### 5.3 关键依赖
```json
{
"dependencies": {
"next": "^14.2",
"react": "^18.3",
"react-dom": "^18.3",
"contentlayer": "^0.3",
"next-mdx-remote": "^4.4",
"rehype-highlight": "^7.0",
"rehype-slug": "^6.0",
"remark-gfm": "^4.0"
},
"devDependencies": {
"typescript": "^5.4",
"tailwindcss": "^3.4",
"shadcn-ui": "latest",
"eslint": "^8.57"
}
}
```
---
## 6. 设计风格与品牌调性
### 6.1 设计理念
| 维度 | 方向 | 说明 |
|:----|:-----|:------|
| 🎯 **核心原则** | **极简·专注·内容优先** | 设计服务于阅读，减少视觉噪音 |
| 📖 **阅读体验** | 类 Medium 风格 | 大字号、宽松行距、舒适的阅读宽度 |
| 🎨 **配色方案** | 中性色调 + 强调色 | 深灰文字、白色/浅灰背景、品牌色点缀 |
### 6.2 色彩系统
```
🌞 浅色模式 🌙 深色模式
━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━
背景: #FFFFFF 背景: #0F172A
卡片: #F8FAFC 卡片: #1E293B
主文字: #1E293B 主文字: #F1F5F9
次要文字: #64748B 次要文字: #94A3B8
品牌色: #3B82F6 (蓝) 品牌色: #60A5FA (浅蓝)
强调色: #8B5CF6 (紫) 强调色: #A78BFA (浅紫)
成功: #10B981 成功: #34D399
分割线: #E2E8F0 分割线: #334155
```
### 6.3 排版系统
| 元素 | 字号 | 行高 | 字重 |
|:----|:----|:-----|:-----|
| 文章标题 (h1) | 2.5rem (40px) | 1.3 | 800 (ExtraBold) |
| 章节标题 (h2) | 1.75rem (28px) | 1.4 | 700 (Bold) |
| 小节标题 (h3) | 1.25rem (20px) | 1.5 | 600 (Semibold) |
| 正文 | 1.125rem (18px) | 1.8 | 400 (Regular) |
| 引文 | 1.25rem (20px) | 1.6 | 400 (Italic) |
| 代码 | 0.875rem (14px) | 1.6 | 400 |
### 6.4 文章阅读体验规范
- 📏 **最佳阅读宽度**: 680-720px
- 📐 **行距**: 1.7-1.8 倍
- 🔤 **最小字体**: 16px（移动端）
- 📦 **文章卡片**：圆角 12px，阴影 subtle
- 🖼️ **封面图比例**: 16:9 / 2:1
- 🎬 **交互动效**: 微过渡 150-300ms, ease-in-out
---
## 7. 内容策略与 SEO 规划
### 7.1 SEO 基础优化
| 优化项 | 实施方案 |
|:------|:---------|
| 🏗 **语义化 HTML** | 使用 `<article>`, `<section>`, `<nav>` 等语义标签 |
| 🏷 **标题层级** | 每页唯一 H1，层次分明 H1→H2→H3 |
| 🔗 **URL 结构** | `/posts/{slug}/` 友好 URL，含关键词 |
| 📝 **Meta 信息** | 自动生成 title, description, og:image |
| 📊 **结构化数据** | JSON-LD (Article, BreadcrumbList, BlogPosting) |
| 🗺 **Sitemap** | 自动生成 sitemap.xml |
| 📡 **RSS Feed** | 提供 /feed.xml 或 /rss.xml |
### 7.2 内容发布规范
| 规范项 | 要求 |
|:------|:-----|
| 📅 **更新频率** | 每周至少 1-2 篇 |
| 🎯 **文章字数** | 教程类 2000-5000 字，轻内容 800-1500 字 |
| 🖼️ **封面图** | 每篇文章必配，1200×630px（OG 标准） |
| 🔖 **标签** | 每篇文章 3-5 个相关标签 |
| 📂 **分类** | 每篇文章 1 个主分类 |
| ✍️ **摘要** | 120-160 字文章摘要，用于 Meta description |
### 7.3 性能优化目标
| 指标 | 目标值 |
|:----|:-------|
| ⏱ LCP (最大内容绘制) | < 1.5s |
| ⏱ FID (首次输入延迟) | < 100ms |
| ⏱ CLS (累积布局偏移) | < 0.1 |
| 📊 Lighthouse 性能分 | > 90 |
| 📱 Lighthouse 移动端 | > 85 |
### 7.4 性能优化措施
- ⚡ **静态生成 (SSG)**: 文章页面构建时预生成 HTML
- 🔄 **ISR**: 首页等动态页面增量静态再生成
- 🖼️ **图片优化**: next/image 自动 WebP + 懒加载
- 📦 **代码分割**: 动态导入非首屏组件
- 🔤 **字体优化**: 使用 system-ui 或 next/font 优化加载
- 🗜️ **压缩**: Gzip/Brotli 压缩文本资源
---
## 8. 非功能性需求
### 8.1 安全需求
| 需求 | 说明 |
|:----|:------|
| 🔒 HTTPS | 全站强制 HTTPS |
| 🛡 CSP | 内容安全策略头 |
| 🧹 XSS 防护 | 用户输入消毒 |
| 🔐 API 安全 | 速率限制（如有 API） |
### 8.2 可用性需求
| 需求 | 指标 |
|:----|:-----|
| ⬆ **可用性** | 99.9% SLA |
| ⏱ **页面加载** | 首屏 < 1.5s |
| 📉 **错误率** | < 0.1% |
| 🔄 **备份** | 每日内容备份到 Git |
### 8.3 可维护性
- 📁 内容与代码分离（Markdown 文件驱动）
- 🔧 基于 Git 的版本控制
- 🏗 组件化架构，便于扩展
- 📖 完善的 README 和开发文档
---
## 9. 实施路线图
```
Phase 1 - MVP (2-3周)
┌──────────────────────────────────────┐
│ 🏗 项目脚手架搭建 │
│ 📝 基础文章展示 (列表+详情) │
│ 🏷️ 分类/标签系统 │
│ 📱 响应式布局 │
│ 🚀 部署上线 (Vercel/Cloudflare) │
│ 🔍 基础的 SEO 优化 │
└──────────────────────────────────────┘
Phase 2 - 体验增强 (1-2周)
┌──────────────────────────────────────┐
│ 💬 评论系统接入 (Giscus) │
│ 🔍 全文搜索 (Fuse.js) │
│ 🌓 黑暗模式 │
│ 📊 阅读统计 │
│ 📡 RSS Feed │
│ 🎨 优化排版和 UI 细节 │
└──────────────────────────────────────┘
Phase 3 - 功能完善 (2-3周)
┌──────────────────────────────────────┐
│ ✉️ 邮件订阅系统 │
│ 🔗 社交分享功能 │
│ 📄 自定义页面 (关于/友链) │
│ 🔄 相关文章推荐 │
│ 📈 接入分析工具 (Umami) │
│ 🤖 可选: AI 摘要生成 │
└──────────────────────────────────────┘
Phase 4 - 持续优化
┌──────────────────────────────────────┐
│ 📝 内容持续输出 │
│ ⚡ 性能监控与优化 │
│ 🎯 SEO 持续优化 │
│ 🔄 功能迭代 (基于用户反馈) │
└──────────────────────────────────────┘
```
---
## 10. 附录：数据模型设计
### 10.1 文章 Front Matter (Markdown)
```yaml
---
title: "如何使用 Next.js 构建高性能博客"
slug: build-blog-with-nextjs
description: "本文详细介绍如何使用 Next.js 14 的 App Router 和 SSG 功能..."
date: 2026-05-10T10:00:00+08:00
lastmod: 2026-05-10T14:30:00+08:00
draft: false
categories:
- 前端开发
tags:
- Next.js
- React
- 博客
- SSG
featured_image: /images/posts/nextjs-blog-cover.webp
featured: true
series: "Next.js 全栈教程"
series_order: 1
authors:
- name: 作者名
avatar: /images/avatars/author.jpg
readingTime: 15
wordCount: 3200
---
```
---
## 文档修订记录
| 版本 | 日期 | 修订内容 | 作者 |
|:----|:----|:---------|:-----|
| v1.0 | 2026-05-10 | 初版完整需求文档 | OmniBot |
---
> 📌 **文档声明**：本文档为博客/内容站的完整需求分析与规划方案，可作为项目启动的开发指南。如您有任何调整需求（如特定技术栈偏好、设计风格调整、功能增减等），请随时告诉我，我可以为您定制修改！🚀
Reference in New Issue Copy Permalink