碎碎念#
終於回國過年回來了，路上折騰了很久。回來之後一直在忙單位的專案。由於人手不夠，不得不啟用外包模式。然而外包的效果並不是很好。臨近上線了，發現 PO 竟然沒有做測試。這種事情真是讓人無法容忍。因此這篇文章遲了很久。
偶然的機會認識了 xLog，發現它是一個很有意思的專案。只不過界面都是英文的，一開始看起來還是比較別扭。畢竟工作環境本來就是外語環境，回家還要看到個非母語的東西，心裡多少還是有些不舒服。總之，以上純屬碎碎念，可以無視。
說實話這個專案還是比較吸引人的。正好自己也在做一個 Next.js 的小專案，也提交了幾個 PR。這個專案看起來可玩性還是很強的，只是缺少了一些說明。動手看看代碼還是很有意思的，比如處理多用戶的方式。自己也做過這樣的 SaaS 平台，比如自動簽發 SSL，當時自己還想了很多方案，說不定也會寫篇文章。
正文#
這篇文章主要講述了如何通過簡單修改 CSS 實現自定義主題。作為一個全棧工程師，我們能夠輕鬆地編輯 CSS 樣式。然而 xLog 默認主題並不符合我的個人風格，因此我決定創建一個自己喜歡的、簡潔明了的主題。在選擇顏色時，我偏愛藍色。我嘗試著查找 xLog 的 CSS 命名規則，發現基本上都以 “xlog-xxx” 開頭。於是我創建了一個自己的藍色風格主題。
昨天我終於有空看了一眼 xLog 的新聞，發現它現在支持 i18n，於是我在這裡向它致以祝賀和掌聲。然而，一個問題出現了：我之前修改的 CSS 樣式還存在嗎？顯然，由於新版本進行了一些更改，我的樣式現在看起來有點醜。DIYgod 還很貼心地引用了圖片。因此，我來分享一下如何將那個不太美觀的站點改造成一個更符合個人喜好的站點。由於前端代碼稍有更改，導致圖片變大了。例如，之前的 logo 大小為 “100px * 100px”，現在變成了 “120px * 120px”。
開始修改#
如果想要在本地運行代碼並開啟自定義 CSS 功能，可以將代碼拉回本地。首先需要連接到自己的 Dashboard（也就是我們平常說的後台）。如果不知道該如何連接，可以直接登錄 xlog.app 並點擊頭像附近的按鈕。接著點擊 “站點設置”，就可以看到自定義 CSS 的選項了。
在定義 CSS 環境變量之前，需要注意這些變量定義的顏色將會作用於所有主題，並且後台的顏色也會隨之更改。
:root {
--theme-color: #0ea5e9;
--theme-color-dark: #0284c7;
--header-height: 100%;;
--banner-bg-color: #fff;
}
例子，使用 var 的語法，這樣就可以用上面定義的顏色了.
.xlog-site-name {
color: var(--theme-color); // 引用前面定義的顏色
font-size: 1.5rem;
line-height: 2rem;
}
那問題來了，你從哪裡找到的xlog-site-name呢？這裡就要使用 開發者工具了.
這裡建議使用 Chrome 來處理。看下面的操作，F12 打開 Chrome 的控制台，用元素選擇器來選擇需要修改的元素
根據截圖找到xlog開頭的類，記住這個類，後面在自定義中可以修改。在 element.style 這裡，可以自己添加自己的元素然後進行測試，測試完畢之後就可以保存了.
這裡就是一個簡單的例子，所有的類都可以重寫，如果自定義的被覆蓋掉了 可以使用 !important 來強制一下
手機版本我還是很喜歡的，畢竟手機用戶還是比桌面用戶多的.
後記#
寫了這麼多字兒，發現這些時間 xLog 還是做了很多的改變，尤其是寫作體驗好了很多，比如現在上傳圖片對於現在寫作的時候不用找圖床了. xLog 這個團隊還是滿活躍的，基本每週都有一個報告，看看更新，看到產品更新還是很有意思的.
有感而發#
在產品上線的時候，需要考慮老用戶數據的情況。今天我們上線了一個新的 "online apply"，但出現了一個問題：在 preprod 和 prod 數據庫中，數據結構不一致，添加新的字段時，必須允許空值。如果不允許空值，在老用戶保存數據時，如果有檢查，就會出現問題。其實，在開發過程中，我們已經盡力避免這種情況了，但是這個專案已經拖了半年，臨時決定上線，真是令人頭疼。好在我有記錄所有細節的習慣......
好了 碎碎念也完了～