Astro重构博客

481 阅读5分钟

又重构了博客,不是第一次,也绝不会是最后一次。一次次折腾究竟为了什么,可能是面子里子都想要吧。

为什么重构

每次的原因可能差不多,不外乎看不顺眼了,人一旦有个念头,就慢慢在心里生根发芽。某个瞬间觉得博客过时了,不好看了,就想东改改西凑凑,不折腾就浑身不得劲。

2018年毕业后,我开始断断续续写点东西,博客网站经过4次大概的改版,换过多种框架、主题。

2018:Hexo

Hexo社区成熟,主题插件丰富,基于matery主题搭建了第一版

image.png

2020:Hexo-next

原有主题配图过多,不够简洁,于是切换到Next主题,修改了配色与布局

image.png

2021:Hugo

由于平时使用Go较多,对基于Go的Hugo很有好感,文档生成快,也没有额外依赖,使用LoveIt主题又做了一版

image.png

2023: Astro

迁移到基于Astro与Tailwind CSS的AstroWind主题,样式现代,调整也很方便,效果见qingwave.github.io/

image.png

为什么选择Astro

作为了一个后端工程师,本来对前端了解也不多,碰巧看新出的Astro的,开箱即用,相比Nextjs更轻量,可以很方便的集成Tailwind CSS,社区中的主题也比较符合个人审美。所以决定迁移到Astro,内容与主题All in One,不用像之前hugo改个样式需要两头修改。

Astro也支持MDX格式,比如这篇文章就是使用MDX写的,可以导入JS/Astro文件,当然我还是倾向于纯Markdown,可读性也更好点,迁移更方便。

做了哪些修改

新版的博客地址见writings, 默认的AstroWind比较简单,添加了一些功能:

  • 项目页面,用来展示一些开源项目
  • 主页从博客列表变成个人主页,展示了基础信息、最近博客、项目
  • 支持了Giscus评论
  • 添加了分类/标签页面
  • 支持了搜索,由Pagefind提供
  • 增加了基于模板快速博客的Node脚本

好的博客应该是什么样

在创建新博客的时候,会想一个问题,好的博客看起来应该是什么样?每个人的审美取向都不一样,没有高低,却有雅俗,说一下自己的浅显理解。

简约而不简陋

我是崇尚简约的,当然“简约”在每个人看了也很不同,有的主题说是简约,一点开,二次元乱飞,满屏特效,这是对简约有多大误会。

拒绝花里胡哨,内容清晰分明,当然简约也绝不是简陋,所有的样式都应该为内容服务,比如一些高亮、配色、不同元素的大小、动效,让文章看起来更舒服,标题内容清晰明了,该加重的要加重,让人有读的欲望。

不要空两格

中文书籍的分段都需要空两格,分段的同时可以起到节省纸张的作用,但到了电子屏幕上,没有了纸张的限制,有空行来分段更清晰,空两格反而使文章显得参差不齐,尤其在小屏幕上。

目录

之前的博客,都添加了目录功能,把目录当成标配。在这次重构中开始考虑目录是不是必要?大多数的博客内容都在2000字以内,通过屏幕滑动也能很快找到对应内容,而且对于不熟悉的文章很少会有直接点击目录的情况,除非是一些文档类的,需要查阅指定内容。

添加目录也可能会破坏文章的整体效果,这次博客的标题与内容宽度一致,如果目录放置侧边,内容不对称,显得奇怪;放置文章开始,目录过长又会影响阅读内容。

所以这次直接去掉了目录,保持简洁。

评论

博客的评论本来就不多,有价值的更是凤毛麟角,延续之前的习惯继续使用Giscus做为评论插件,我的大多数文章都是技术相关的,使用Github登录也足够了。偶尔会收到邮件交流的,也挺惊喜的。

如果是一个全新的博客,可能也不会添加评论功能,留一个邮箱足矣。

分类与标签

分类的话题太大,已经是一门学科了,就博客而言,一般用分类与标签来对文章进行分组。

标签与文章是N:N的关系,一个文章可对应多个标签,标签可随意添加,但当标签一多,很多标签只有一篇文章,起不到分类的作用,我自己的做法是定期再调整一下,将孤立的标签合并。

分类与标签不同,需要提前规划好。有的博客会选择一个文章对应一个分类,具有排他性,有的可对应多个分类,我倾向于多个的,某些文章其实很难归于特定的类,比如Golang+Vue轻松构建Web应用即属于前端又包含后端,多个分类更合适。

配图

技术文章适当的配图可以便于理解,看起来也更美观,我这方面做的不好,很多文章没有配图,自己常用的画图工具有excalidrawdraw.io,一些封面通常是用稿定设计画的。

配图如果有一致的配色、元素,可以形成自己的风格。

写在最后

内容为王,且不可喧宾夺主,好的内容配合舒服的界面才更能引人阅读。但话说回来,多数博客大都是自娱自乐的,记录点自己的成长、反思,假使又能提供别人些参考,那就很好了。

Explore more in qingwave.github.io