不知道你是否也有想过完全用自己的代码实现自己的个人博客?定制专属 UI、定制专属逻辑、在信息爆炸的时代真正地沉淀下属于自己的东西。我也曾经历了同样的纠结,最终下定决心做了自己的个人博客。虽然过程曲折,但一路风景很好、小路很多。看着被自己全新改版的网站,心里只有满足感,也笃定了知识分享和结识更多好友的初衷。就以此篇记录下网站 UI 改版的过程和感受吧,缅怀过去,勿忘初心。
多图预警!!! 详细 UI 介绍共 18 张图(托管在 GitHub),国内用户请移步 原文. 这是我的小站哦
1. 前世从 2018 年 1 月份开始,因为喜欢记录、分享,还想认识更多有趣的人,我开始着手搭建自己的个人网站。
最初版本的小站的 UI 设计和代码搭建花费了大概 2 个月的时间。当时对 UI 设计没有太多好的 idea,唯一能做的就是多去别人博客看看 UI 设计,来汲取灵感。
所以第一版的网页 UI 参考了 NexT 框架 、EvanYou 首页的 UI 设计,为了方便,使用了 Element-UI 来实现了后台管理系统(用来进行文章管理)。
可以这么说,这个阶段主要是保证网站运行起来,有个衣服穿。至于衣服好不好看、协不协调,并不是很重要。
2. 情缘网站第一次搭建起来,还是很开心的(*^▽^*)。完完全全是依靠自己的双手,一行行写出来的代码。
是的,当时就是想设计专属自己的风格,所以没有使用任何的开源博客框架的代码。那 2 个月就是对着 Vue 和 Koa 的文档写出来了网站的前后端,也是第一次买服务器、备案网站、做反向代理、读 CDN 文档、学 Webpack、做 SEO,怀念那些时光,让现在的网站有了基础。
3. 初识 3.1 博客系统界面经过奋战,网站成功搭建起来。首页的 UI就是下面这样:
是的,看过尤大大博客的都知道,这是他的首页样式,我就直接拿过来了。
而除了首页,其他所有的页面,都是采用的类似于阿里云平台控制台的 UI:屏幕左边放置导航栏。
这是文章浏览页面的 UI:
而一个博客,为了提高 seo 和反链数,友链最重要。友链界面是 UI:
和友链界面类似,介绍页面的 UI 设计也是这种时间线的方式:
3.2 管理系统界面管理界面的 UI 设计没有太出彩,直接借用了 Element-UI 的表格样式。因为管理界面最重要是保证数据交互的逻辑正确性,在此基础上,一个简洁优美的 UI 就足够了。
3.3 听歌台界面为什么要自己从 0 开始搭建博客?很重要的一部分原因是要方便 DIY,做自己喜欢的东西。我喜欢听歌,因此一拍脑门,就做了个听歌台。
当然,他是移动端兼容的。这里就不放置界面了。
3.4 小小心思除了大的页面架构,根据我当时的设想,我为博客浏览页面做了分页系统+节流缓存,当然,使用的是 Element-UI 的组件:
除此之外,每篇文章都可以导出(右下角按钮),并且有二维码分享的按钮(后来发现没什么用):