前言#
上個月就開始重寫個人網站了。然後上週差不多寫完了,現在你看到的就是全新設計的網站了。這件事計劃了挺久了,終於在逃離 996 之後的日子裡實現了,經過了一段程式碼馬拉松,幾乎是每天沒有閒下來的時間,特別瘋狂地做一件事。其實在上個月 Next.js App Router 出 stable 的時候也考慮過重構 kami,也確實嘗試了,在一個星期之後,我終於放棄了。
https://innei.in/posts/programming/next-app-router-migration-what-is-new-php
所以幹脆就直接推到重來,重新開始寫,隨便把用了很久的二次元風格也換一換。
::: gallery
:::
左邊是從重寫後的,右邊是之前的。風格上有了很大的不同。之前的配色非常的混亂,沒有色彩使用的 Guideline,主色和副色混用,而現在只有一種強調色,風格上更加柔和,不那麼突兀了。
📜 A minimalist personal website embodying the purity of paper and freshness of snow.
色彩的選擇#
這次在顏色上,除了某些需要用到色彩的地方,其他基本都使用了淺淺的中立色。強調色的使用,我翻了幾個挑選顏色的網站,調了幾個還算不錯的顏色。強調色並不是唯一的,但是一次會話中是固定的。在每次瀏覽時,在服務端會插入一個顏色設定這次瀏覽的強調色是什麼,所以每次刷新之後,強調色會變化。並且每種強調色都有在黑暗模式下的配對,也就是一組顏色。
在這次會話中,黑暗模式的下的強調色是#A0A7D4
而在白天模式下是 #69a6cc
。這樣是一組顏色。
目前指定了有以下的顏色。某些組合我還不滿意,評論區可以幫助我嗎。
同時,借鑒(抄)了下 vitepress 切換黑暗 / 白天模式的動畫。
導航欄 / 頭部#
這次的導航欄,也就是最頂部的條,也是非常複雜的部分,光是程式碼量就來到了 1000 行。因為它的交互邏輯還是比較複雜的。
首先他在桌面端有四種模式。
- 常規懸浮條
- 顯示文章標題條
- 在文章標題條顯示時,向上滾動時的輔助導航條
- 在容器寬度過大,且不是文章時顯示的帶模糊的導航條
上面的 4 個場景的判斷邏輯就讓我頭皮發麻了。同時又從 <cali.so> 抄了聚光燈的特效等等。現在唯一不足的是 framer motion 帶來的佈局漂移問題,目前沒有解決方案。
紙張#
關於日記專區,目前在 Shiro 還是使用了「紙」作為載體,文案上統一成 「手記」來源於 WWDC 2023 中即將在 iOS 17 中加入的手記 App。
我還是認為這些生日記錄的載體應該是 紙張。Shiro 在日語中的意思是「白色」。而紙的顏色就是白色。
佈局#
文章的預覽的佈局上,「手記」 「水文」和「頁面」還是有所不同的。
手記是最大的不同點,它是三欄,中間是以紙張作為載體呈現。左側是時間線,右側是文章目錄。
水文和頁面都是兩欄佈局,不同的是水文的正文內容更多,會呈現出和文章目錄對應並不是居中的樣貌。
::: gallery
:::
你注意到右邊有個百分比,其實那是閱讀進度。
在文章目錄顯示不下時,它會轉移到側邊顯示。
實時活動#
頭部左側站點頭像兩旁存在的實時活動圖示,也是從 <cali.so> 吸取的點子,使用 Swift 簡單寫了一個 app 實現了實時的系統進程和媒體信息上報。鏈接貼在下面了,程式碼寫的很爛。目前只有 macOS 端,以後也不考慮做 Windows 的版本。
使用了上面的 app 再配合雲函數功能 + WebSocket 就能實現實時活動的顯示。
我給部分 app 增加了一些有意思的後綴。
比如我在使用 VS Code,那麼他會顯示 Innei 正在使用 Code Restart TSServer
。再比如 Kitty 會顯示Innei 正在使用 Kitty 撸貓
等等。
當然你也會收到其他的通知,比如有發布的文章等等。
先寫到這裡吧,下次有機會再聊。
都看到這裡了,不如點個 Star 鼓勵一下?
📜 A minimalist personal website embodying the purity of paper and freshness of snow.
此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://innei.in/posts/design/new-website-design-about-shiro