前言#
上個月就開始重寫個人網站了。然後上週差不多寫完了，現在你看到的就是全新設計的網站了。這件事計劃了挺久了，終於在逃離 996 之後的日子裡實現了，經過了一段程式碼馬拉松，幾乎是每天沒有閒下來的時間，特別瘋狂地做一件事。其實在上個月 Next.js App Router 出 stable 的時候也考慮過重構 kami，也確實嘗試了，在一個星期之後，我終於放棄了。
https://innei.in/posts/programming/next-app-router-migration-what-is-new-php
所以幹脆就直接推到重來，重新開始寫，隨便把用了很久的二次元風格也換一換。
::: gallery
:::
左邊是從重寫後的，右邊是之前的。風格上有了很大的不同。之前的配色非常的混亂，沒有色彩使用的 Guideline，主色和副色混用，而現在只有一種強調色，風格上更加柔和，不那麼突兀了。
色彩的選擇#
這次在顏色上，除了某些需要用到色彩的地方，其他基本都使用了淺淺的中立色。強調色的使用，我翻了幾個挑選顏色的網站，調了幾個還算不錯的顏色。強調色並不是唯一的，但是一次會話中是固定的。在每次瀏覽時，在服務端會插入一個顏色設定這次瀏覽的強調色是什麼，所以每次刷新之後，強調色會變化。並且每種強調色都有在黑暗模式下的配對，也就是一組顏色。
在這次會話中，黑暗模式的下的強調色是#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 鼓勵一下？
此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://innei.in/posts/design/new-website-design-about-shiro