返回项目
进行中产品设计/全栈实现

Blog-云间札记

面向文章、项目和轻量后台管理的个人发布系统,用来长期记录个人文章/思考沉淀/项目复盘。

Blog-云间札记 封面

1.项目背景

当前环境,我认为传统简历已经不在是个人展示的核心载体,每次换工作在静态的纸质内容中做加减法,每次调整后都会得到一个版本。复杂不说,而且大部分情况都是给HR发送完后就基本失去价值了。

这种成了一次性的交付文件,并不能够成为长期有效的展示自己的窗口。所以我觉得维护一个个人站,是极具性价比的事情。所以开始着手重构了这个Blog项目。打造一个长期的个人公开档案。

它既能放文章,也能放项目;既能展示结果,也能保留过程里的判断、限制和复盘;既能给别人快速了解我在做什么,也能让我自己在几个月后重新看懂当时为什么这么做。

所以这个项目的目标很明确:搭一套小而完整的个人内容发布系统。

image

2.项目目标

我希望这个站点能满足三个目标。

1️⃣ 承载长期写作。很多技术问题、产品判断和工作流思考,如果只留在临时笔记里,很快就会散掉。个人文章的价值不只是发布,而是能够把一个问题通过叙事的方式沉淀成为可复用的的经验。

2️⃣ 整理项目档案。项目如果只放截图和技术栈,很容易变成一个静态橱窗。真正有价值的是讲清楚背景、我负责什么、为什么这么设计、目前完成到什么程度,以及后续还可以怎么迭代。

3️⃣ 可持续维护。个人站一旦是通过代码方式或者直接写库,后续很容易停摆。所以重构就把前台展示和后台管理一起考虑,让文章、项目、分类、标签、发布状态这些内容可以从管理端进行维护。

2.1 重构首版结构

这个站点目前围绕四个公开入口展开:首页、文章、项目和关于。

1️⃣ 首页 负责建立第一印象,不承担过多解释。它只需要让访问者知道这里记录什么,并提供两个最重要的入口:“浏览文章”和“查看项目”。

2️⃣ 文章页 负责承载长文内容。它更像一个公开笔记区,适合记录个人文章、项目复盘和思考沉淀。

3️⃣ 项目页 负责展示我做过或正在做的项目。每个项目都保留项目状态、角色、技术栈和详情内容,方便把项目从“做过”变成“可以被理解”。

4️⃣ 关于页 则用来说明这个站点的长期方向。它不是简历页,而是起到一个补充上下文的作用。

image image image

image

2.2 确定内容模型

目前站点里最核心的内容有两类:文章和项目。
它们都需要标题、摘要、正文、封面、标签、发布状态和精选状态。
文章更关注分类、系列和发布时间;
项目则额外关注项目阶段、我的角色、技术栈、源码地址和演示地址。

这样设计的好处是,公开页可以快速筛选和展示内容,详情页也能保留足够的上下文。
保证了项目展示不会只停留在“标题 + 截图 + 技术栈”的层面。

2.3 技术实现

技术栈上,
前端使用: Nuxt + Vue3 + ts
后端使用: Spring Boot + Mybatis-plus + MySql + sa-token

1️⃣ 前端承担两类界面
公开访问的内容页,以及需要登录的管理页。公开页重点是阅读体验、列表筛选和项目展示;后台页重点是提供清晰的更新维护功能。

2️⃣ 后端负责
通过DDD,划分文章模块、项目模块,提供api接口。
公开接口只暴露已发布内容,后台接口支持创建、编辑、发布状态更新、排序和删除等能力。

3️⃣ Markdown
是内容详情的主要格式。它比富文本编辑器更轻,也更适合我这种以工程笔记和项目复盘为主的写作方式。前端在详情页把 Markdown 渲染成正文,同时保留代码块高亮和目录能力。

image

2.4 前台原则

我希望这个站点的前台页面是安静的。因为AI生成的UI通常会有很多噪音,让人抓不住重点。

前台不需要很重的营销感,不需要堆模块。一个个人站最重要的是让访问者快速的get到关键点:是谁、在记录什么、有哪些内容值得继续看。

所以首页只突出个人简介、文章入口和项目入口和联系方式。 文章和项目检索都只是保留一些关键词,比如分类标签、状态、按技术筛选。

项目卡片里我优先展示状态、摘要、角色和技术栈。因为这些信息能快速帮助阅读者监理初印象,比单纯的封面图更能帮助读者判断一个项目的性质。

项目详情页则把内容分成两层:
顶部回答“这是什么项目”,侧边信息回答“状态、职责和技术栈”
正文回答“为什么做、怎么做、做到了什么”。

2.5 后台管理

后台管理主要是为了支持我能够长期维护更新,减少维护的技术成本。

所以后台管理从重构首版就被纳入项目范围。它不需要做成一个复杂 CMS系统。
但至少要支持几个基本动作:登录、查看内容列表、编辑文章、编辑项目、维护分类标签、调整发布状态和排序。

后台界面的设计目标是低噪音高效的。
内容管理是固定的工作流,界面要简洁一眼抓住重点,不应该过度装饰。
列表要容易扫描,状态要容易判断,保存和错误反馈要明确。

image

image

2.6 关键取舍

1️⃣ 原版Blog其实是没有权限系统的,但是我认为要做好一个完成后台功能还是必须要加,就选了一个轻量级的sa-token,而且不需要细粒度的角色权限控制,仅仅确认登陆态开始后台操作。

2️⃣ 也没做评论功能,
一方面是调研备案过程中,带评论的不属于个人范畴偏向社区产品,流程复杂。
另一方面是我觉得这种个人站更多是个人观点输出,或者公开档案和写作。
为了提供沟通渠道,所以增加了联系方式。

3️⃣ 后台功能优先覆盖最短发布链路,而不是一次性做个完整 CMS系统。
先保证内容可以创建、编辑、发布和展示,后续再逐步补齐图片管理、草稿预览、配置等流程。

4️⃣ 图片功能的考量,暂时舍弃文章缓解的图片展示,后续部署完成后再次优化。

取舍的目标就是轻量且快速完成重构,避免设计过度,先跑起来,后续迭代。

2.7 当前阶段结果

目前这个项目已经完成了第一版内容系统的主要骨架。

公开侧已经有首页、文章列表、文章详情、项目列表、项目详情和关于页面。文章和项目详情支持 Markdown 内容渲染,项目可以展示状态、职责、技术栈、源码地址和演示地址。

管理侧已经有登录和内容管理的基础结构,可以围绕文章、项目和站点资料继续扩展。

后端已经提供公开内容接口和后台管理接口,数据模型覆盖文章、项目、分类、标签、系列和站点资料。

图片服务已经接入OSS,自行管理图片,但是文章内部的图片展示需要优化,暂时预留截图位置。

3.下一步计划

完善三个方向:

1️⃣ 是内容输出体验。更顺手的 Markdown 编辑、图片上传和封面管理。

2️⃣ 是展示质量。项目详情页可以加入更多真实截图、阶段结果、关键交互说明和部署链接,让项目展示更直观。

3️⃣ 是工程化部署。包括生产环境配置、构建流程、备份策略和一些基础的监控能力,让这个站点真的可以长期在线运行。

Result

阶段结果

当前状态为 进行中。