前言
一直以來，我都在思考如何減少不必要的JS代碼，僅通過CSS來實現博客園主題美化。CSS有很多魔法代碼，例如:before，iconfont，order，等等，利用好這些技巧，也能實現很好美化效果。這一次帶來的是仿制BiliBli制作的純CSS博客園主題，希望能給你帶來不一樣的體驗。
頭部導航欄
BiliBili個人主頁效果
這種頭部感覺比較好看，並且根據博客園的代碼布局，正好能夠實現。
其實博客園在設計之初就考慮到了logo的問題，但是只給了1px的大小，所以基本上就沒有被人發現。通過background-image:url()可以引入頭像。
博客主題效果
首頁文章
這一次又回到了左邊文字，右邊配圖的布局。但是這一次，我們固定了摘要文字行數為5行，超出變成省略號；並且圖片也做了固定尺寸：190px * 120px ，圖像會自動居中，多余部分將會被裁剪。
對於沒有圖片的文章，自適應，但最大不超過5行字。
側邊欄
側邊欄圖標進行了優化。
博客正文
博客正文對一些細節進行了調整，如文章發布信息，文章分類標簽、點贊關注等。
評論
評論進行了布局優化，去掉了沒用的信息。
移動端適配
適配方法
主題默認模板為Custom，使用時禁用默認模板，然后加入下面這行代碼：
@import url(https://blog-static.cnblogs.com/files/gshang/gshang.2019.11.19.1.css) screen and (min-width:0px);
最新版
最新版本可以通過F12查看我的CSS代碼，不不定期更新。
這里為了實現自定義，你可以繼續加一些圖片的設置：
/*設置頂部頭像背景*/
#blogTitle {
background-image: url(https://img2018.cnblogs.com/blog/1489774/201911/1489774-20191115181738072-2067895519.jpg);
}
/*設置頭像*/
#blogLogo {
background-image: url(https://img2018.cnblogs.com/blog/1489774/201911/1489774-20191115182121018-1227398891.jpg);
}
/*** 設置全局主題顏色 ***/
html {
--ThemeColor: #00a1d6;
}