摘要：那個(gè)月就是對(duì)著和的文檔寫出來了網(wǎng)站的前后端，也是第一次買服務(wù)器備案網(wǎng)站做反向代理讀文檔學(xué)做，懷念那些時(shí)光，讓現(xiàn)在的網(wǎng)站有了基礎(chǔ)。因此，管理系統(tǒng)聽歌臺(tái)被抽離成了多帶帶的應(yīng)用，后臺(tái)利用做反向代理，用二級(jí)域名記性訪問。

不知道你是否也有想過完全用自己的代碼實(shí)現(xiàn)自己的個(gè)人博客？定制專屬 UI、定制專屬邏輯、在信息爆炸的時(shí)代真正地沉淀下屬于自己的東西。我也曾經(jīng)歷了同樣的糾結(jié)，最終下定決心做了自己的個(gè)人博客。雖然過程曲折，但一路風(fēng)景很好、小路很多?？粗蛔约喝赂陌娴木W(wǎng)站，心里只有滿足感，也篤定了知識(shí)分享和結(jié)識(shí)更多好友的初衷。就以此篇記錄下網(wǎng)站 UI 改版的過程和感受吧，緬懷過去，勿忘初心。

多圖預(yù)警!!! 詳細(xì) UI 介紹共 18 張圖(托管在 GitHub)，國內(nèi)用戶請(qǐng)移步 原文. 這是我的小站哦

從 2018 年 1 月份開始，因?yàn)橄矚g記錄、分享，還想認(rèn)識(shí)更多有趣的人，我開始著手搭建自己的個(gè)人網(wǎng)站。

最初版本的小站的 UI 設(shè)計(jì)和代碼搭建花費(fèi)了大概 2 個(gè)月的時(shí)間。當(dāng)時(shí)對(duì) UI 設(shè)計(jì)沒有太多好的 idea，唯一能做的就是多去別人博客看看 UI 設(shè)計(jì)，來汲取靈感。

所以第一版的網(wǎng)頁 UI 參考了 NexT 框架 、EvanYou 首頁的 UI 設(shè)計(jì)，為了方便，使用了 Element-UI 來實(shí)現(xiàn)了后臺(tái)管理系統(tǒng)（用來進(jìn)行文章管理）。

可以這么說，這個(gè)階段主要是保證網(wǎng)站運(yùn)行起來，有個(gè)衣服穿。至于衣服好不好看、協(xié)不協(xié)調(diào)，并不是很重要。

網(wǎng)站第一次搭建起來，還是很開心的(*^▽^*)。完完全全是依靠自己的雙手，一行行寫出來的代碼。

是的，當(dāng)時(shí)就是想設(shè)計(jì)專屬自己的風(fēng)格，所以沒有使用任何的開源博客框架的代碼。那 2 個(gè)月就是對(duì)著 Vue 和 Koa 的文檔寫出來了網(wǎng)站的前后端，也是第一次買服務(wù)器、備案網(wǎng)站、做反向代理、讀 CDN 文檔、學(xué) Webpack、做 SEO，懷念那些時(shí)光，讓現(xiàn)在的網(wǎng)站有了基礎(chǔ)。

經(jīng)過奮戰(zhàn)，網(wǎng)站成功搭建起來。首頁的 UI就是下面這樣：

是的，看過尤大大博客的都知道，這是他的首頁樣式，我就直接拿過來了。

而除了首頁，其他所有的頁面，都是采用的類似于阿里云平臺(tái)控制臺(tái)的 UI：屏幕左邊放置導(dǎo)航欄。

這是文章瀏覽頁面的 UI：

而一個(gè)博客，為了提高 seo 和反鏈數(shù)，友鏈最重要。友鏈界面是 UI:

和友鏈界面類似，介紹頁面的 UI 設(shè)計(jì)也是這種時(shí)間線的方式：

管理界面的 UI 設(shè)計(jì)沒有太出彩，直接借用了 Element-UI 的表格樣式。因?yàn)楣芾斫缑孀钪匾潜ＷC數(shù)據(jù)交互的邏輯正確性，在此基礎(chǔ)上，一個(gè)簡潔優(yōu)美的 UI 就足夠了。

為什么要自己從 0 開始搭建博客？很重要的一部分原因是要方便 DIY，做自己喜歡的東西。我喜歡聽歌，因此一拍腦門，就做了個(gè)聽歌臺(tái)。

當(dāng)然，他是移動(dòng)端兼容的。這里就不放置界面了。

除了大的頁面架構(gòu)，根據(jù)我當(dāng)時(shí)的設(shè)想，我為博客瀏覽頁面做了分頁系統(tǒng)+節(jié)流緩存，當(dāng)然，使用的是 Element-UI 的組件：

除此之外，每篇文章都可以導(dǎo)出（右下角按鈕），并且有二維碼分享的按鈕（后來發(fā)現(xiàn)沒什么用）：

網(wǎng)站運(yùn)行到 2018 年暑假，一站式問題解決的問題逐漸開始凸顯，源碼變成代碼怪獸，開始變得難以維護(hù)。

此外，初期東借鑒、西借鑒后雜糅而成的網(wǎng)站的 UI，顯得那么不搭。亂七八糟的風(fēng)格讓人看著心煩。

網(wǎng)站 UI 重新設(shè)計(jì)和代碼重構(gòu)，迫在眉睫。

吸取了之前的教訓(xùn)，意識(shí)到了網(wǎng)站應(yīng)該突出主體功能。因此，管理系統(tǒng)、聽歌臺(tái)被抽離成了多帶帶的應(yīng)用，后臺(tái)利用 Nginx 做反向代理，用二級(jí)域名記性訪問。

除了架構(gòu)，雜糅的 UI 也是詬病之一。這次果斷的選擇了極簡主義的“扁平化”設(shè)計(jì)風(fēng)格，很大程度參考了 Hacker 的 UI 設(shè)計(jì)，再次基礎(chǔ)上，借助卡片和一些好看的小動(dòng)態(tài)重新設(shè)計(jì)了友鏈、歸檔等界面。

我覺得，現(xiàn)在的樣子，才是一個(gè)技術(shù)博客該有的模樣。

借助扁平化設(shè)計(jì)，將導(dǎo)航欄移動(dòng)到了每頁的最上方，并且附上了網(wǎng)站介紹。作為所以子路由都會(huì)引用的公共組件，大大提高了代碼維護(hù)性。

如你所見，去掉了空洞的主頁，主頁進(jìn)行了小范圍的留白，但大部分以文章簡介來填充。

結(jié)識(shí)朋友，認(rèn)識(shí)更多志同道合的朋友，是人生一大樂趣。因此，友鏈頁面的設(shè)計(jì)也是重中之重。

為了更多展示友鏈信息：頭像、鏈接、介紹、昵稱等，我設(shè)計(jì)了卡片動(dòng)態(tài)。

當(dāng)然，做了移動(dòng)端兼容，歡迎手機(jī)訪問。而在鼠標(biāo)移入的時(shí)候，會(huì)有一個(gè)漸變的小動(dòng)態(tài)，提高用戶體驗(yàn)。

這個(gè)頁面很簡單，只要把后臺(tái)數(shù)據(jù)寫成 markdown 格式，樣式渲染就和文章瀏覽頁面是一樣的，稍作修改即可：

我理解的歸檔是：分類+標(biāo)簽。而且對(duì)于我自己的網(wǎng)站來說，分類和標(biāo)簽放在一起，頁面顯得更充實(shí)，如下圖所示：

除此之外，當(dāng)你鼠標(biāo)劃入相關(guān)內(nèi)容名稱時(shí)候，會(huì)有很好看的下劃線劃過的動(dòng)態(tài)，小而別致，別具風(fēng)趣。

點(diǎn)擊相關(guān)分類或者標(biāo)簽，就進(jìn)入了先關(guān)文章的匯總頁面：

正如你所見，文章采用了 highlight.js 解析 markdown，并且自己寫了下 markdown 的樣式。

而就在最近幾天，我添加了目錄功能，就在上圖的右側(cè)。此功能，只有在屏幕寬度大于 768px 時(shí)候，才會(huì)啟用。

也就是說，至少是 ipad 那么大的屏幕才能看到目錄。畢竟手機(jī)屏幕就那么大，去除冗余功能是最優(yōu)選擇！

這次還是想聽歌，笑哭。而在扁平化設(shè)計(jì)的 UI 中，最好的選擇肯定是將其放入頁面底部，以保證不影響主體功能和瀏覽體驗(yàn)。同樣地，在移動(dòng)端依舊不會(huì)加載此組件，這主要是獲取歌曲資源會(huì)占用較大的移動(dòng)端無線流量，從而造成頁面阻塞。

此組件的名稱是 aplayer，是 B 站的音頻組件，我有幸貢獻(xiàn)了源碼。

當(dāng)頁面內(nèi)容過多，必須有一個(gè)滾動(dòng)按鈕，來保證用戶迅速回到導(dǎo)航欄（頁面頭部）。參考 NexT 的 UI 設(shè)計(jì)，基本一模一樣實(shí)現(xiàn)了他的滾動(dòng)組件：

為了提高交流體驗(yàn)，必須引入評(píng)論系統(tǒng)。其實(shí)在實(shí)現(xiàn)這一部的時(shí)候，很累（做完上面的東西）。翻了翻開源的評(píng)論系統(tǒng)，發(fā)現(xiàn)了 Valine。

因此，在文章瀏覽頁面、關(guān)于頁面和友鏈頁面，都引用了 Valine 組件：

當(dāng)你緩慢拖到頁面底部，你會(huì)發(fā)現(xiàn)頁面的簡介和備案號(hào)（我國獨(dú)有哈哈哈），當(dāng)然，不能讓他們影響頁面美觀是吧？

不知道下次你會(huì)是什么模樣？