學兩個月前端後做了個這樣的網站

Jianne發表於2023-12-01

省流地址:sinan.fun

之前更新過一篇:使用 Laravel 10 & Vue 3 開發了一個社群站,一起來玩下~,收到很多同學的反饋,經過兩週,站點完成了伺服器遷移,訪問速度相比之前會有很大提升。同時,站點內容形式支援了帖子、自定義RSS資訊源訂閱、GitHub 技術文件同步、自定義導航鏈,主體流程已實現,歡迎大家體驗反饋。

萌芽

事情是這樣的,Laravel 框架對前端構建的支援越來越友好,很早就關注到官方文件中提及到了 Webpack、Vue、React、Vite 等相關技術結合框架的應用。而我一直都是在跟隨著框架的升級,來更新自身的技術棧。所以,便有了學習下前端的想法。

不得不感嘆現在前端技術的迭代速度,從 Webpack 到 Vite,Vue2 Options 到 Vue3 Composition,tailwind 到 unocss… 對於使只涉及jquery、layui等相關前端知識的後端震大驚,都已經卷到這種程度了嗎?

在b站過了一遍 Vue 影片後,感覺對於各種招式胸有成竹。那不如,實踐一下,從零實現一個技術社群?

開始

既然是自己當產品來設計,那就沒什麼講究了,介面不醜,得用最新的技術棧,然後能跑起來就行。

分析自身平時關注內容的一些習慣:「找自身技術棧更新資訊」、「技術社群尋找問題思路」、「總結踩過的一些坑」、「收藏整理一些資源」…社群MVP版的想法,便是能夠快速地聚合各渠道技術資訊,有更新時能夠進行訊息通知;能夠整理相關的技術文件,類似於Dash;對於常用的網址能夠進行簡單地收納整理。

開始最為頭疼的是完全不懂設計,比如內容釋出頁希望能夠釋出帖子、rss源、收納開源庫文件、釋出導航鏈,但我的設計圖可能長這樣

Laravel

參考 Reddit,調整一下

Laravel

介面設計是很頭疼的部分,常在顏色、邊距來回撥,可能實現後改來改去又回到了初版,又或者是升級 UI 框架樣式產生了差異… 會出現各種預期以外的問題,如果有懂設計的朋友可以多提些建議,thks!

Laravel

效果圖

  • 全域性快捷工具欄,使用 commmad + kctrl+k或者 / 快捷鍵喚起

Laravel

  • 首頁

Laravel

  • 首頁-暗黑模式

Laravel

  • 詳情頁

Laravel

  • 詳情頁-暗黑模式

Laravel

  • RSS 資訊展示

Laravel

  • RSS 資訊展示-暗黑模式

Laravel

  • 使用者資料頁

Laravel

  • 使用者資料頁-暗黑模式

Laravel

感興趣的可以前往 beta 區進行測試:sinan.fun/beta

本作品採用《CC 協議》,轉載必須註明作者和本文連結