FAZE CLAN UP! @razzh.cn

Blog 重构进行时

Feb 17 · 2 min · updated on 2024 Mar 15

#为什么要重构呢?

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

#四代博客的由来

#第一代博客

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

image

#第二代博客

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

#第三代博客

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

image

#第四代博客

第四代博客就是现在的博客了,写于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,显得很乱(可能是我个人的原因哈哈
  • 引入 contentlayerremark 等来代替之前的 markdown-it
  • 使用 twist-icons 替换 react-icons,毕竟这是我自己写的 icon 集合库嘛,得用一下hhh
  • Blog 列表下的分类从 "All Vue JS Node Net Work" 改成了 "Blog Life"
  • 更新首页介绍,毕竟这是23年的初的介绍了,得换个新的
  • 首页介绍新增中英切换
  • 新增返回顶部按钮
  • 新增图片预览组件
  • components 目录下的组件重写
  • 更新 eslint 规则,移除 prettier
    • 为什么不用 prettier?当 eslintprettier 同时使用的时候,会有些规则的冲突,导致格式化出现问题,而我用不得不去解决这些问题,但是解决了这个问题,可能在写代码的时候另一个格式化冲突问题又会浮现,让我使用的时候感受到了沉重的心智负担,再加上看了 antfu 大佬的文章:我为什么不使用 Prettier,让我下定决心移除 prettier, 这样我只需要专注于 eslint 的规则就好了,不用再担心格式化冲突的问题。

#2024碎碎念

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

#后续更新方向

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

image
浙ICP备2024129591号-1
screen-logo
听你说 - 梁博
--:-- / --:--
  1. 1听你说梁博
  2. 2避世离俗梁博
  3. 3苦与乐梁博
  4. 4心田梁博
  5. 5安然无恙梁博

听你说 - 梁博

词:梁博

曲:梁博

你的壳 像钻石一样硬

你的心 软弱到无形

你的事 像风雪里的冰 清醒我至今

只是你 有一点点疼

听你说 听你说你有一点点疼

你觉得 我会不会心疼

每个夜 你提着一盏灯

问我几点钟到黎明

我只能与你同行

先要去感受泥泞

才能够步履轻盈

你看你 小小一个人 为何不害羞

敢去唱这世间风情

听你说 听你说这有一点点疼

你觉得 我会不会心疼

每个夜 你提着一盏灯

问我几点钟到黎明

我只能与你同行

有个人

在阳光下播种

万里粮田为美梦

种下爱驱散乌云和痛

千分之一也敢做

梦里登上过山车

雨里游过了小河

已置换时空