个人博客全新UI：我心中你最美

专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：
「微信公众号：心谭博客」| xin-tan.com | 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: