网站运行到 2018 年暑假，一站式问题解决的问题逐渐开始凸显，源码变成代码怪兽，开始变得难以维护。
此外，初期东借鉴、西借鉴后杂糅而成的网站的 UI，显得那么不搭。乱七八糟的风格让人看着心烦。
网站 UI 重新设计和代码重构，迫在眉睫。
5. 今生吸取了之前的教训，意识到了网站应该突出主体功能。因此，管理系统、听歌台被抽离成了单独的应用，后台利用 Nginx 做反向代理，用二级域名记性访问。
除了架构，杂糅的 UI 也是诟病之一。这次果断的选择了极简主义的“扁平化”设计风格，很大程度参考了 Hacker 的 UI 设计，再次基础上，借助卡片和一些好看的小动态重新设计了友链、归档等界面。
我觉得，现在的样子，才是一个技术博客该有的模样。
6. 您好, godbmw.com! 6.1 首页：大巧无锋借助扁平化设计，将导航栏移动到了每页的最上方，并且附上了网站介绍。作为所以子路由都会引用的公共组件，大大提高了代码维护性。
如你所见，去掉了空洞的主页，主页进行了小范围的留白，但大部分以文章简介来填充。
6.2 友链: 你在就好结识朋友，认识更多志同道合的朋友，是人生一大乐趣。因此，友链页面的设计也是重中之重。
为了更多展示友链信息：头像、链接、介绍、昵称等，我设计了卡片动态。
当然，做了移动端兼容，欢迎手机访问。而在鼠标移入的时候，会有一个渐变的小动态，提高用户体验。
6.3 关于：真实地我这个页面很简单，只要把后台数据写成 markdown 格式，样式渲染就和文章浏览页面是一样的，稍作修改即可：
我理解的归档是：分类+标签。而且对于我自己的网站来说，分类和标签放在一起，页面显得更充实，如下图所示：
除此之外，当你鼠标划入相关内容名称时候，会有很好看的下划线划过的动态，小而别致，别具风趣。
点击相关分类或者标签，就进入了先关文章的汇总页面：
正如你所见，文章采用了 highlight.js 解析 markdown，并且自己写了下 markdown 的样式。
而就在最近几天，我添加了目录功能，就在上图的右侧。此功能，只有在屏幕宽度大于 768px 时候，才会启用。
也就是说，至少是 ipad 那么大的屏幕才能看到目录。毕竟手机屏幕就那么大，去除冗余功能是最优选择！
6.6 听歌、滚动按钮、评论：匠心独具这次还是想听歌，笑哭。而在扁平化设计的 UI 中，最好的选择肯定是将其放入页面底部，以保证不影响主体功能和浏览体验。同样地，在移动端依旧不会加载此组件，这主要是获取歌曲资源会占用较大的移动端无线流量，从而造成页面阻塞。