我的博客全新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. 未完待續

不知道下次你會是什麼模樣？