CodeSky 代码之空

还是流水账比较好写，先把流水账写了吧。

今年过年期间也没有什么年度规划，不过自 1 月开始进行了博客整体重写的计划，起因是因为之前从腾讯云迁移到阿里云时可能是因为 PHP 版本控制的不对或者是别的问题，导致博客没办法正常的上传文件到又拍云。

现在都是靠着脚本上传文件然后 copy 发布的，Obsidian + Typecho 的脚本也不是很好用，也遇到了 5xx 的问题，但是我已经不会写 PHP 了，更不要说 debug 了。

而本身一直有朋友说博客对移动端支持不友好（其实我每次移动端搜索也是手动构造 404 才搞到的搜索输入框）。

加上 Typecho 项目本身的活跃度确实挺一般，所以自从迁移之后就一直有这个计划。只是习惯性拖更懒得写，一般这种事情写完了后端就懒得写前端了……更何况我没有设计美感，根本不知道怎么怎么动起来。

说完了历史背景，接下来就来说说这次是怎么一波带走的，从设计到开发基本都是由 Cursor 完成的（连项目初始化都没有，开局一个空文件夹），我负责说产品需求、测试验收、修 Bug 和联调接接口。

简单的来说博客分为 3 个部分：

1. 前端界面：这部分尽可能的保留原来的两栏布局，毕竟看了这么多年都习惯了，并兼容路由，因为有很大部分流量是从搜索引擎来的。同时需要有后台对这些数据进行管理和文章的在线编辑器。
2. 后端服务：几大模块的增删改查和文件上传，以及优化了一些原来用 Typecho 时我觉得不太方便的地方，不过我删掉了本身没卵用的 Tag 体系，还需要支持 RSS 订阅，同样是因为有一些是 RSS 订阅读者。
3. 迁移脚本：从 Typecho 表迁移到新数据要进行数据映射，尤其是文章、页面、评论这三个内容重点。

对于前端页面来说，我的核心痛点是设计和样式。

接下来需要实现一个个人博客系统，由前台和后台组成，接下来我会分别把需求告诉你，你需要帮我实现。首先，整体需要支持 SEO 和 SSR，前台使用 tailwindcss 来做样式。

然后他会帮我把必要的一些依赖和项目初始化完。

先从前台的布局开始:

前台的基本布局信息(layout)为:

顶部，站点标题和站点描述，最右侧有搜索框

中间有 Navbar，导航条由首页和若干页面组成，目前可以看成有关于和赞助两个页面，但实际是接口可配置的，可以在后台配置具体要显示在导航栏的页面，也可以是外部页面

然后是两栏显示的信息，其中右侧有几个模块组成:

0. 作者信息:个人介绍，介绍的部分也是接口获取的
1. 分类列表:显示博客分类，分类由后台配置的分类组成，也是从接口获取的
2. 归档信息:按月进行归档，并在括号内显示每个归档月对应有多少文章，也从接口获得信息
3. 最新文章:显示最新的五篇文章

右侧是正文内容，对于首页来说也就是文章列表。

文章列表中，有标题、发布时间、分类、评论数 然后有文章摘要信息和ReadMore

支持分页显示，需要显示一共多少篇文章多少页，由于页数可能会很多，请考虑这个情况，支持快速翻页。

底部 Footer 中需要展示版权信息和备案信息

配色方案是蓝色、黑色和白色，注意:前台不要直接使用 ElementUl

保证页面能够抽象出通用组件并且足够模块化，并支持移动端和 PC 端的响应式布局。

然后他就会一顿操作猛如虎的写完一个首页了，如果有不对的地方再让他修改，Layout 是基本的布局和配色方案的表现。

另外建议每写完一个模块 git commit 一次留个档方便还原。

之后照葫芦画瓢的把所有页面需求都跟它讲一遍，包括登录和后台，前端基于 Nuxt，但是在实际实现过程中基本上没有怎么看 Nuxt 的文档（毕竟是他写的嘛），不过有的 Bug 死活修不好的时候还是选择了自己看文档查 issue 写原味代码。因此一些基本功还是需要有的。

Markdown 编辑器、代码高亮和 Render 还是废了一些功夫的。

而我本身就已经非常不熟的布局样式问题则交给他自己加油吧。

服务端的部分比起前端就简单更多了，开局先告诉他：

我将要用 Go + GORM + Gin + MySQL 实现一个博客系统，已经安装好这几种依赖了，接下来请帮我开始实现，先实现一个框架，包括项目结构，带/ping 路由的启动

然后依次告诉他你要的数据表，比如：

接下来我们先定义数据库，我希望使用 GORM +AutoMigrate 来实现自动将变更挂进 DB，而不需要我手动执行 SQL

先测试性的新建一个站点信息表，站点信息包括:

1. 站点标题
2. .站点描述
3. 网站图标
4. 站点域名

然后再告诉他你需要的接口和功能，这部分暂时我就不贴了，反正类似。润起来没多大问题就当做 OK 了。

联调上还是我自己介入去一个个接的，因为两个独立项目之间如果要互通的话我得把字段啥的都讲一遍好麻烦，相当于出了接口文档，不过我贴了一些 model 设计让他帮我转成 TypeScript 的 interface。顺便在联调期间测试（像极了倒霉的后端没自测的前端开发）。

前后端都接入完成后就是导入 DB 了，从服务器中导出现有数据毫无疑问是手工的，然后导入数据到本地，这样开发脚本期间可以测试。

这是一个 Python3 项目，实现从 mysql 中一个 db 的数据映射到另一个 db 的功能，MySQL连接串，原始 DB 和目标 DB 都需要配置化首先请你先初始化项目。

然后再把一张张表和映射关系告诉他，分析映射关系也是我自己做的，只是用文字告诉他。然后挨个表测试，确定转换无异常。然后本地就有了一个完整的新博客，再去进行一些真实数据下的验证测试。

因为这是一个需要线上投产并稳定运行的项目，因此在测试和细节修复上反而花了比较长的时间。（当然也包括了一些常见的安全性测试）。如果只是和大家在别的安利（营销）文章里看到的那种普通 Demo 的话，我可以说整站花三四个小时就能搞定了。

另外还有一点是之前的简历站点不可用了，因为之前是托管在开源服务内的，但是这个服务已经没人维护了，域名也没续，所以这次也重新做了一版。我本来觉得他的布局和配色都不错，也就相当于我有一个设计稿了，接下来让他帮我还原。

这一点刚开始我尝试把原始的 HTML 直接丢给他，让他给我还原出一个易用的 yaml 版本，后来发现效果并不好，因此换成了一段段截图发给他来还原（相当于帮他拆出了一个个的组件），效果相比原来好了很多。当然我对样式没有什么严格要求，八分像就行了，如果你有严格要求的话可以直接把设计稿里的样式贴给它。

最终的成品就如同你们所看到的：

• https://www.codesky.me/
• https://resume.codesky.me/

不过我没有仔细的进行 Code Review，如果期间发现了 Bug 也欢迎大家留言。

后续也在考虑要不要把生活博客也重新启用一下！好多年没写日记了！