在參觀了 xLog 里的其他博客後，發現了許多自定義的 CSS 效果。今天來給大家分享一下我博客的樣式優化。
遇到的問題#
博客頁面無法加速，需要加載的資源太多了1，而且無法使用 CloudFlare 等 CDN 緩存服務2。
既然這樣，全站只能優化用戶的視覺效果了，在測試網站打開速度之後，發現首頁會有 3~5 秒的白屏時間，那麼這一段時間能否利用起來呢？在測試站點上測試了一小會後發現 ——並不能，因為不支持自定義 JavaScript。
解決方案#
下面我來說一下我的優化方案，僅供參考。
使用遠程資源#
每次更新自定義 CSS，都會在鏈上留下一條標記，因此我採用了@import url(...)的方式，較完美的解決了自定義 CSS 需要刷新兩下3才能更新的問題，並且更方便調試了。
使用層疊樣式表的偽元素#
WARN: 不建議學習
編寫 CSS 時你會發現，你的工作好像是圍繞著一個一個盒子展開的 —— 設置尺寸、顏色、位置，等等。頁面裡大部分 HTML 元素都可以被看作若干層疊的盒子。
CSS 布局主要是基於盒子模型。
—— 源站點
-
::after
偽元素 ::after 能夠在指定元素的後面插入一些內容，在::after中需要使用content屬性來定義要追加的內容，而且在::after中必須定義 content 屬性才會生效4。 -
::before
偽元素::before能夠在指定元素的前面插入一些內容。與::after相似，::before中也需要使用content屬性來定義要追加的內容，而且在::before中必須定義content屬性才會生效4。 -
::first-letter -
::first-line -
::selection -
::placeholder
之所以只講前兩個，是因為我們只用到它們，下面是一個示例代碼，將 “贊助” 按鈕後面添加一個字 “我”：
/* 由於 xLog 可能會更新樣式，您需要自行複製選擇器 */
body > div.xlog-page.xlog-page-index.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.flex.py-12.w-full > div > div > div.flex.space-x-0.sm\:space-x-5.space-y-2.sm\:space-y-0.flex-col.sm\:flex-row.text-sm.sm\:text-base > span.xlog-site-patron > button > span > span::after {
content: "我";
color: grey;
}
body > div.xlog-page.xlog-page-post.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.flex.py-12.w-full > div > div > div.flex.space-x-0.sm\:space-x-5.space-y-2.sm\:space-y-0.flex-col.sm\:flex-row.text-sm.sm\:text-base > span.xlog-site-patron > button > span > span::after {
content: "我";
color: grey;
}
/**
* 複製元素選擇器的方法
* 1. 打開 Chrome 控制台
* 2. 導航到“元素”Tab 頁面
* 3. 右鍵單擊某個元素 -> 複製 -> 複製選擇器
* 下方是圖片演示
*/
| 演示 (Mac English) | 演示 (Windows Chinese) |
|---|---|
實例：去除首頁的小鈴鐺#
使用 CSS 的 display:none 即可，後來發現小鈴鐺的位置會變，因此採用列舉法5把所有可能的元素全部 display:none 了。
代碼如下：
/* https://github.com/xiaozhu2007/cdn/blob/60b809e092fc2dac569bf5c6527d900168f3a36d/xLog/main.css#L92-L97 */
body > div.xlog-page.xlog-page-index.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.text-gray-500.flex.items-center.justify-between.w-full.mt-auto > div.xlog-site-connect.pl-1 > div > div > svg {
display: none;
}
body > div.xlog-page.xlog-page-post.xlog-user.xlog-deprecated-class > header > div.px-5.max-w-screen-lg.mx-auto.h-full.relative.flex.items-center.flex-col > div.text-gray-500.flex.items-center.justify-between.w-full.mt-auto > div.xlog-site-connect.pl-1 > div > div > svg {
display: none;
}
總結#
這篇文章詳細介紹了如何優化博客的樣式。作者首先提到了博客頁面無法加速，需要加載的資源太多了，而且無法使用 CloudFlare 等 CDN 緩存服務。然後，作者提出了使用遠程資源和使用層疊樣式表的偽元素來優化博客的樣式。最後，作者總結了這些優化方法的效果。
這篇文章對博客作者來說很有幫助。博客作者可以通過這些優化方法來提高博客的加載速度，改善用戶的體驗。
我希望這篇博客文章對你有所幫助。