3

我的博客审美

 1 year ago
source link: https://qingwave.github.io/my-blog-appreciation/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Apr 28, 2023 · 杂记 · 前端

我的博客审美



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

为什么重构

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

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

Qingwave的博客编年史

2018:Hexo

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

blog-hexo_ZmFtiR.png

2020:Hexo-next

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

next_1XMAbu.png

2021:Hugo

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

blog-hugo_1algGC.png

2023: Astro+Tailwind

迁移到基于Astro与Tailwind CSS的AstroWind主题,样式现代,调整也很方便

astro-blog_dpTWh.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 https://qingwave.github.io


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK