logo
0
0
WeChat Login
feat: 完成个人博客系统开发

suijimanbu - 随机漫步

随机漫步的个人随笔集

项目简介

suijimanbu(随机漫步)是一个专为深度思考者和终身学习者打造的个人博客环境。它创建了一个促进思考、记录灵感和分享智慧的行动空间,让作者能够系统化管理个人知识,同时为读者提供高质量的思想启发内容。

核心理念

随机漫步 - 生活就像随机漫步,充满了不确定性和惊喜。我的思考也是如此,时而深入,时而发散,没有固定轨迹。但正是这种随机性,让每一次探索都充满了新鲜感。

技术栈

前端技术

  • 框架: Next.js 15.0.0 + React 19.0.0
  • 语言: TypeScript
  • 样式: Tailwind CSS
  • 状态管理: Zustand
  • 图标: Lucide React
  • 包管理器: bun

设计系统

  • OKLCH 色彩系统
  • shadcn/ui 组件库
  • 响应式设计

设计理念

极简风格

受到杨志平老师博客的启发,本项目采用极简设计风格:

  • 简洁至上: 去除一切不必要的装饰元素
  • 内容为王: 让文字成为页面的主角
  • 留白艺术: 充分的留白带来舒适的阅读体验
  • 黑白灰配色: 经典配色,专注阅读本身

核心功能

  • ✍️ 快速创作: 一键创建新文章,悬浮的"+"按钮
  • 📂 简洁分类: 四大分类体系(思考类、读书类、实践类、创作类)
  • 🏷️ 标签系统: 简洁的标签展示
  • 💾 自动保存: 草稿自动保存,永不丢失
  • 💬 评论互动: 读者评论和反馈系统
  • 🎨 实时预览: 集成 TweakCN,支持实时设计调整

四大内容分类

  1. 思考类(Thinking)

    • 哲学思辨:对存在、价值、自由的追问
    • 认知科学:思维、记忆、学习规律的探索
    • 心理观察:人性、情感、行为的洞察
    • 人生感悟:生活给予我的智慧
  2. 读书类(Reading)

    • 书评与摘要:经典书籍的独特解读
    • 阅读方法:如何高效吸收书籍精华
    • 知识卡片:将书中的知识转化为自己的
    • 经典摘录:那些触动心灵的文字
  3. 实践类(Practice)

    • 项目复盘:从实践中汲取经验教训
    • 工作心得:职场中的思考与成长
    • 学习方法:自我提升的实践路径
    • 生活记录:平凡日子里的不平凡感悟
  4. 创作类(Creation)

    • 随笔散文:生活感悟与情感表达
    • 诗歌创作:凝练情感的艺术尝试
    • 小说片段:想象力的自由飞翔
    • 创意想法:天马行空的新奇思考

项目结构

suijimanbu/ ├── app/ # Next.js App Router │ ├── post/[id]/page.tsx # 文章详情页 │ ├── write/page.tsx # 写作页 │ ├── page.tsx # 首页 │ ├── layout.tsx # 根布局 │ └── globals.css # 全局样式 ├── components/ │ ├── ui/ # 基础 UI 组件 │ └── business/ # 业务组件 │ ├── post-card.tsx # 文章卡片 │ ├── quick-write-button.tsx # 快速写作按钮 │ └── comment-section.tsx # 评论区域 ├── lib/ │ ├── stores/ # Zustand 状态管理 │ ├── types.ts # TypeScript 类型 │ ├── utils.ts # 工具函数 │ └── mock-data.ts # 预置示例文章 └── README.md # 项目说明

快速开始

安装依赖

# 使用 bun 安装依赖 bun install

开发环境

# 启动开发服务器 bun run dev # 构建生产版本 bun run build # 启动生产服务器 bun run start

代码质量

# 运行类型检查 bun run type-check # 运行 ESLint bun run lint

预置内容

项目默认包含 2 篇示例文章,涵盖思考和学习两个分类。您可以:

  1. 保留示例: 作为模板参考,继续创作
  2. 替换内容: 删除 lib/mock-data.ts 中的示例,添加自己的文章
  3. 导入 Markdown: 通过写作页面手动添加您的文章

上传自己的文章

目前支持两种方式添加您的 Markdown 文章:

  1. 在线编辑: 使用内置的写作页面(点击悬浮的"+"按钮)
  2. 直接编辑: 修改 lib/mock-data.ts 文件,然后重新启动服务器

未来计划支持:

  • 📁 批量导入 Markdown 文件
  • 🔄 同步 GitHub 仓库文章
  • 📝 Markdown 文件拖拽上传

开发规范

创作流程

  1. 快速捕捉: 使用悬浮的"+"按钮快速创建内容
  2. 智能分类: 选择合适的分类和标签
  3. 自动保存: 草稿自动保存,无需担心数据丢失
  4. 发布分享: 完成后可选择发布或保持草稿

代码规范

  • 使用 TypeScript 严格模式
  • 组件使用 PascalCase 命名
  • 函数和变量使用 camelCase 命名
  • 所有文本使用中文

Git 工作流

  • main 分支: 主分支,保护分支
  • feature/* 分支: 新功能开发
  • fix/* 分支: Bug 修复

版本管理

采用语义化版本号 (Semantic Versioning):

  • 主版本号 (Major): 不兼容的 API 更改
  • 次版本号 (Minor): 向后兼容的功能性新增
  • 修订号 (Patch): 向后兼容的问题修正

当前版本: v0.0.7

联系方式

致谢

感谢每一位走进这个博客的朋友。你的每一次阅读、每一条评论、每一个点赞,都是对我最大的鼓励。


愿我们都能在思考中找到答案,在文字中找到力量,在交流中找到共鸣。