前言
一直以来，我都在思考如何减少不必要的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;
}