#为什么要重构呢？

起因我觉得我的博客基本都在说前端，但我现在认为生活并不只有前端，我也应该记录自己的生活，比如我喜欢在B站静静的听up们弹弹钢琴、吉他，我想分享我觉得好听的视频。 但是目前博客是将 markdown 文件通过 markdown-it 来转义成 html，并不支持嵌入 iframe 的方式来展示视频，我也想要对博客有更加细节的控制，之前在做Twist-icons文档中用到了mdx，我也对这个方案挺感兴趣，也想研究一下，所以我就有了这个想法。 后面在升级的过程中，我发现自己之前的代码写得有点“幽默”，越改越多，干脆直接重构吧：)，其实这个博客已经是我的第四代博客了，想想也是够折腾的hhhhhh。

#四代博客的由来

#第一代博客

第一代博客我是用的博客园，但是原始样式太简陋了，所以我就套用了别人的主题，首页的图片是一把吉他，因为我当时经常听beyond和梁博的歌，当时对吉他 Solo 很着迷，所以就选用了吉他作为首页封面，我觉得还挺好看的😆，添加了自己当时很喜欢的一些歌曲，当时我希望访客能够听听我的这些歌，现在这个博客现在已经弃用了，但是偶尔我也会回去看看，那里记载了我初学前端不久的一些记忆。

#第二代博客

偶然的一天，我在B站上刷到了一个视频，可以 fork 一个博客下来然后修改一些配置就可以发布自己的博客了，类似于 hexo 这种，所以我就Fork了下来，然后修改了一些配置，用 Github Pages 发布了我的第二代博客，这个博客之前是在我的Github仓库中的，叫Blog， 但是我在开发第三代博客的时候，因为想把第三代博客的仓库名字也叫做 Blog，所以第二代博客就这样被我删除了，也没留下一张图片😂

#第三代博客

第三代博客应该是在 Vue3 发布 rc 版本的时候写的，当时我看到了Vue3 的新官网首页，觉得比较炫酷，有黑夜模式，我当时对黑夜模式的切换很感兴趣，所以也想写一个跟 Vue3 新文档一样的博客，应该会很酷，因为 Vue 的文档是开源的，所以我找到了文档，它源码是用了 vitepress，我就拿它搭建了我的第三代博客。其实也是非常方便的，自己在首页自定义了一下想要的内容，整得跟Vue3的官网差不多，用了比较中二的词😆：

#第四代博客

第四代博客就是现在的博客了，写于2023年初，灵感启发于之前在B站看到 antfu 大佬的直播，在Github中找到了他的账号，被他的全绿提交震惊到的同时也被他的博客梅花绽放的特效所吸引，原来博客还能这样玩。 antfu的博客用的是 Vue，关于梅花特效，大佬也在B站直播写过，我已经写了两年的 Vue，正好当时也在学 React，我认为这是最好的实践机会，我也想着自己写一个 Blog, 因为上一代博客使用的 vitepress 在自定义样式方面也有一些限制，所以我用了 Nextjs + Ts 的方式来写了第四代的博客，博客的风格几乎和antfu大佬的风格一致，因为我太喜欢这种黑白风格了哈哈哈

#重构计划

在 2.14 初五财神日的时候，我抽空捧起了电脑，看着幽默的代码一点点重构，当然这个工作量并不是一天完成的，有时间就去改一点吧，大概的方向列了一下：

• Next13 升级到 Next14
• Next Page 模式改成 App 模式
• 样式重写，引入tailwindcss，只在部分文件中使用 Module CSS
  • 因为之前在写 Twist-icons-doc 的时候被 tailwindcss 惯坏了，这种原子化的方式写样式的效率特别高，加上我一直不太喜欢 module.css 的样式方案，因为这个方案的代码中有很多 styles，显得很乱（可能是我个人的原因哈哈
• 引入 contentlayer、remark 等来代替之前的 markdown-it
• 使用 twist-icons 替换 react-icons，毕竟这是我自己写的 icon 集合库嘛，得用一下hhh
• Blog 列表下的分类从 "All Vue JS Node Net Work" 改成了 "Blog Life"
• 更新首页介绍，毕竟这是23年的初的介绍了，得换个新的
• 首页介绍新增中英切换
• 新增返回顶部按钮
• 新增图片预览组件
• components 目录下的组件重写
• 更新 eslint 规则，移除 prettier
  • 为什么不用 prettier？当 eslint 和 prettier 同时使用的时候，会有些规则的冲突，导致格式化出现问题，而我用不得不去解决这些问题，但是解决了这个问题，可能在写代码的时候另一个格式化冲突问题又会浮现，让我使用的时候感受到了沉重的心智负担，再加上看了 antfu 大佬的文章：我为什么不使用 Prettier，让我下定决心移除 prettier， 这样我只需要专注于 eslint 的规则就好了，不用再担心格式化冲突的问题。

#2024碎碎念

我想在未来能够在博客分享一些音乐视频，并记录自己的状态和心情，我觉得这样的方式挺"解压"的，或许我应该考虑引入MP3播放器：）。我还想着可以用英语翻译翻译我写的一些文章，也算锻炼锻炼我撇脚的英文了哈哈， 还有一个愿望买一把电钢琴，但我觉得这个计划会搁置到2025或是更长的未来🤣

#后续更新方向

2024.3.15：在前文我表达了想要引入音乐播放器的想法，我计划在未来也会在博客中引入 MP3 播放器，参考模版是 aplayer：