不知道你是否也有想過完全用自己的代碼實現(xiàn)自己的個人博客矾端？定制專屬 UI日熬、定制專屬邏輯洞就、在信息爆炸的時代真正地沉淀下屬于自己的東西盆繁。我也曾經(jīng)歷了同樣的糾結，最終下定決心做了自己的個人博客旬蟋。雖然過程曲折油昂，但一路風景很好、小路很多倾贰∶岬看著被自己全新改版的網(wǎng)站，心里只有滿足感躁染，也篤定了知識分享和結識更多好友的初衷鸣哀。就以此篇記錄下網(wǎng)站 UI 改版的過程和感受吧，緬懷過去吞彤，勿忘初心我衬。
多圖預警!!! 詳細 UI 介紹共 18 張圖(托管在 GitHub)，國內(nèi)用戶請移步 原文. 這是我的小站哦
1. 前世
從 2018 年 1 月份開始饰恕，因為喜歡記錄挠羔、分享，還想認識更多有趣的人埋嵌，我開始著手搭建自己的個人網(wǎng)站破加。
最初版本的小站的 UI 設計和代碼搭建花費了大概 2 個月的時間。當時對 UI 設計沒有太多好的 idea雹嗦，唯一能做的就是多去別人博客看看 UI 設計范舀，來汲取靈感。
所以第一版的網(wǎng)頁 UI 參考了 NexT 框架 了罪、EvanYou 首頁的 UI 設計锭环，為了方便，使用了 Element-UI 來實現(xiàn)了后臺管理系統(tǒng)（用來進行文章管理）泊藕。
可以這么說辅辩，這個階段主要是保證網(wǎng)站運行起來，有個衣服穿娃圆。至于衣服好不好看玫锋、協(xié)不協(xié)調(diào)，并不是很重要讼呢。
2. 情緣
網(wǎng)站第一次搭建起來撩鹿，還是很開心的(*▽*)。完完全全是依靠自己的雙手吝岭，一行行寫出來的代碼三痰。
是的吧寺，當時就是想設計專屬自己的風格窜管，所以沒有使用任何的開源博客框架的代碼散劫。那 2 個月就是對著 Vue 和 Koa 的文檔寫出來了網(wǎng)站的前后端，也是第一次買服務器幕帆、備案網(wǎng)站获搏、做反向代理、讀 CDN 文檔失乾、學 Webpack常熙、做 SEO，懷念那些時光碱茁，讓現(xiàn)在的網(wǎng)站有了基礎裸卫。
3. 初識
3.1 博客系統(tǒng)界面
經(jīng)過奮戰(zhàn)，網(wǎng)站成功搭建起來纽竣。首頁的 UI就是下面這樣：
是的墓贿，看過尤大大博客的都知道，這是他的首頁樣式蜓氨，我就直接拿過來了聋袋。
而除了首頁，其他所有的頁面穴吹，都是采用的類似于阿里云平臺控制臺的 UI：屏幕左邊放置導航欄幽勒。
這是文章瀏覽頁面的 UI：
3.2 管理系統(tǒng)界面
管理界面的 UI 設計沒有太出彩顷霹，直接借用了 Element-UI 的表格樣式咪惠。因為管理界面最重要是保證數(shù)據(jù)交互的邏輯正確性，在此基礎上泼返，一個簡潔優(yōu)美的 UI 就足夠了硝逢。
3.3 聽歌臺界面
為什么要自己從 0 開始搭建博客？很重要的一部分原因是要方便 DIY绅喉，做自己喜歡的東西渠鸽。我喜歡聽歌，因此一拍腦門柴罐，就做了個聽歌臺徽缚。
當然，他是移動端兼容的革屠。這里就不放置界面了凿试。
3.4 小小心思
除了大的頁面架構虽界，根據(jù)我當時的設想，我為博客瀏覽頁面做了分頁系統(tǒng)+節(jié)流緩存嵌赠，當然叫榕，使用的是 Element-UI 的組件：
除此之外，每篇文章都可以導出（右下角按鈕）详炬，并且有二維碼分享的按鈕（后來發(fā)現(xiàn)沒什么用）：
4. 再見, 不再留戀
網(wǎng)站運行到 2018 年暑假盐类，一站式問題解決的問題逐漸開始凸顯，源碼變成代碼怪獸呛谜，開始變得難以維護在跳。
此外，初期東借鑒隐岛、西借鑒后雜糅而成的網(wǎng)站的 UI猫妙，顯得那么不搭。亂七八糟的風格讓人看著心煩聚凹。
網(wǎng)站 UI 重新設計和代碼重構割坠，迫在眉睫。
5. 今生
吸取了之前的教訓元践，意識到了網(wǎng)站應該突出主體功能韭脊。因此，管理系統(tǒng)单旁、聽歌臺被抽離成了單獨的應用沪羔，后臺利用 Nginx 做反向代理，用二級域名記性訪問象浑。
除了架構蔫饰，雜糅的 UI 也是詬病之一。這次果斷的選擇了極簡主義的“扁平化”設計風格愉豺，很大程度參考了 Hacker 的 UI 設計篓吁，再次基礎上，借助卡片和一些好看的小動態(tài)重新設計了友鏈蚪拦、歸檔等界面杖剪。
我覺得，現(xiàn)在的樣子驰贷，才是一個技術博客該有的模樣盛嘿。
6. 您好, godbmw.com!
6.1 首頁：大巧無鋒
借助扁平化設計，將導航欄移動到了每頁的最上方括袒，并且附上了網(wǎng)站介紹次兆。作為所以子路由都會引用的公共組件，大大提高了代碼維護性锹锰。
如你所見芥炭，去掉了空洞的主頁漓库，主頁進行了小范圍的留白，但大部分以文章簡介來填充园蝠。
6.2 友鏈: 你在就好
結識朋友渺蒿，認識更多志同道合的朋友，是人生一大樂趣砰琢。因此蘸嘶，友鏈頁面的設計也是重中之重良瞧。
為了更多展示友鏈信息：頭像陪汽、鏈接、介紹褥蚯、昵稱等挚冤，我設計了卡片動態(tài)。
當然赞庶，做了移動端兼容训挡，歡迎手機訪問。而在鼠標移入的時候歧强，會有一個漸變的小動態(tài)澜薄，提高用戶體驗。
6.3 關于：真實地我
這個頁面很簡單摊册，只要把后臺數(shù)據(jù)寫成 markdown 格式肤京，樣式渲染就和文章瀏覽頁面是一樣的，稍作修改即可：
6.4 歸檔：小而別致
我理解的歸檔是：分類+標簽茅特。而且對于我自己的網(wǎng)站來說忘分，分類和標簽放在一起，頁面顯得更充實白修，如下圖所示：
除此之外妒峦，當你鼠標劃入相關內(nèi)容名稱時候，會有很好看的下劃線劃過的動態(tài)兵睛，小而別致肯骇，別具風趣。
點擊相關分類或者標簽祖很，就進入了先關文章的匯總頁面：
6.5 文章：美觀大方
正如你所見笛丙，文章采用了 highlight.js 解析 markdown，并且自己寫了下 markdown 的樣式突琳。
而就在最近幾天若债，我添加了目錄功能，就在上圖的右側拆融。此功能蠢琳，只有在屏幕寬度大于 768px 時候啊终，才會啟用。
也就是說傲须，至少是 ipad 那么大的屏幕才能看到目錄蓝牲。畢竟手機屏幕就那么大，去除冗余功能是最優(yōu)選擇泰讽！
6.6 聽歌例衍、滾動按鈕、評論：匠心獨具
這次還是想聽歌已卸，笑哭佛玄。而在扁平化設計的 UI 中，最好的選擇肯定是將其放入頁面底部累澡，以保證不影響主體功能和瀏覽體驗梦抢。同樣地，在移動端依舊不會加載此組件愧哟，這主要是獲取歌曲資源會占用較大的移動端無線流量奥吩，從而造成頁面阻塞。
此組件的名稱是 aplayer蕊梧，是 B 站的音頻組件霞赫，我有幸貢獻了源碼。
當頁面內(nèi)容過多肥矢，必須有一個滾動按鈕端衰，來保證用戶迅速回到導航欄（頁面頭部）。參考 NexT 的 UI 設計橄抹，基本一模一樣實現(xiàn)了他的滾動組件：
為了提高交流體驗靴迫，必須引入評論系統(tǒng)。其實在實現(xiàn)這一部的時候楼誓，很累（做完上面的東西）玉锌。翻了翻開源的評論系統(tǒng)，發(fā)現(xiàn)了 Valine疟羹。
因此主守，在文章瀏覽頁面、關于頁面和友鏈頁面榄融，都引用了 Valine 組件：
當你緩慢拖到頁面底部参淫，你會發(fā)現(xiàn)頁面的簡介和備案號（我國獨有哈哈哈），當然愧杯，不能讓他們影響頁面美觀是吧涎才？
7. 未完待續(xù)
不知道下次你會是什么模樣？
專注前端與算法的系列干貨分享，歡迎關注(???)
image
