個人博客全新UI：我心中你最美
不知道你是否也有想過完全用自己的代碼實現自己的個人博客？定制專屬 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 的組件：
除此之外，每篇文章都可以導出（右下角按鈕），並且有二維碼分享的按鈕（後來發現沒什麽用）：
4. 再見, 不再留戀
網站運行到 2018 年暑假，一站式問題解決的問題逐漸開始凸顯，源碼變成代碼怪獸，開始變得難以維護。
此外，初期東借鑒、西借鑒後雜糅而成的網站的 UI，顯得那麽不搭。亂七八糟的風格讓人看著心煩。
網站 UI 重新設計和代碼重構，迫在眉睫。
5. 今生
吸取了之前的教訓，意識到了網站應該突出主體功能。因此，管理系統、聽歌臺被抽離成了單獨的應用，後臺利用 Nginx 做反向代理，用二級域名記性訪問。
除了架構，雜糅的 UI 也是詬病之一。這次果斷的選擇了極簡主義的“扁平化”設計風格，很大程度參考了 Hacker 的 UI 設計，再次基礎上，借助卡片和一些好看的小動態重新設計了友鏈、歸檔等界面。
我覺得，現在的樣子，才是一個技術博客該有的模樣。
6. 您好, godbmw.com!
6.1 首頁：大巧無鋒
借助扁平化設計，將導航欄移動到了每頁的最上方，並且附上了網站介紹。作為所以子路由都會引用的公共組件，大大提高了代碼維護性。
如你所見，去掉了空洞的主頁，主頁進行了小範圍的留白，但大部分以文章簡介來填充。
6.2 友鏈: 你在就好
結識朋友，認識更多誌同道合的朋友，是人生一大樂趣。因此，友鏈頁面的設計也是重中之重。
為了更多展示友鏈信息：頭像、鏈接、介紹、昵稱等，我設計了卡片動態。
當然，做了移動端兼容，歡迎手機訪問。而在鼠標移入的時候，會有一個漸變的小動態，提高用戶體驗。
6.3 關於：真實地我
這個頁面很簡單，只要把後臺數據寫成 markdown 格式，樣式渲染就和文章瀏覽頁面是一樣的，稍作修改即可：
6.4 歸檔：小而別致
我理解的歸檔是：分類+標簽。而且對於我自己的網站來說，分類和標簽放在一起，頁面顯得更充實，如下圖所示：
除此之外，當你鼠標劃入相關內容名稱時候，會有很好看的下劃線劃過的動態，小而別致，別具風趣。
點擊相關分類或者標簽，就進入了先關文章的匯總頁面：
6.5 文章：美觀大方
正如你所見，文章采用了 highlight.js 解析 markdown，並且自己寫了下 markdown 的樣式。
而就在最近幾天，我添加了目錄功能，就在上圖的右側。此功能，只有在屏幕寬度大於 768px 時候，才會啟用。
也就是說，至少是 ipad 那麽大的屏幕才能看到目錄。畢竟手機屏幕就那麽大，去除冗余功能是最優選擇！
6.6 聽歌、滾動按鈕、評論：匠心獨具
這次還是想聽歌，笑哭。而在扁平化設計的 UI 中，最好的選擇肯定是將其放入頁面底部，以保證不影響主體功能和瀏覽體驗。同樣地，在移動端依舊不會加載此組件，這主要是獲取歌曲資源會占用較大的移動端無線流量，從而造成頁面阻塞。
此組件的名稱是 aplayer，是 B 站的音頻組件，我有幸貢獻了源碼。
當頁面內容過多，必須有一個滾動按鈕，來保證用戶迅速回到導航欄（頁面頭部）。參考 NexT 的 UI 設計，基本一模一樣實現了他的滾動組件：
為了提高交流體驗，必須引入評論系統。其實在實現這一部的時候，很累（做完上面的東西）。翻了翻開源的評論系統，發現了 Valine。
因此，在文章瀏覽頁面、關於頁面和友鏈頁面，都引用了 Valine 組件：
當你緩慢拖到頁面底部，你會發現頁面的簡介和備案號（我國獨有哈哈哈），當然，不能讓他們影響頁面美觀是吧？
7. 未完待續
不知道下次你會是什麽模樣？
個人博客全新UI：我心中你最美