初了解博客园自定义样式及美化

博客园是国内的技术分享社区，博客页面支持自定义模板和自定义样式。

今天看到有位园友前端小蜜蜂仿B站空间做了个样式，突然很感兴趣，研究了下给自己的博客页面做了一个。

开发思路

1. 在后台->设置->账户设置->博客皮肤中，选择BuildtoWin。选择这个皮肤的原因是，样式修改比较容易。
2. 打开自己的博客页面，同时打开B站空间页面，打开F12对照修改Css样式。
3. 修改样式后，将样式粘贴到后台->设置->账户设置->页面定制CSS代码中，再刷新博客页面就能看到效果。
4. 最终效果：www.cnblogs.com/juetan

字体图标

图标是直接用B站的iconfont文件，在CSS中直接引用，可根据需要直接引用或上传到别的地方引用。

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_438759_6uqfqtzb01ux47vi.eot?t=1512701772063'); /* IE9*/
  src: url('//at.alicdn.com/t/font_438759_6uqfqtzb01ux47vi.eot?t=1512701772063#iefix') format('embedded-opentype'), /* IE6-IE8 */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ic_play:before { content: "e61b"; }

.icon-ic_comment:before { content: "e61c"; }

.icon-ic_up:before { content: "e61d"; }

.icon-ic_danmu:before { content: "e61e"; }

.icon-ic_collection:before { content: "e61f"; }

.icon-ic_moveup:before { content: "e620"; }

.icon-ic_movedown:before { content: "e621"; }

.icon-ic_delete:before { content: "e622"; }

.icon-ic_time:before { content: "e623"; }

.icon-ic_collect:before { content: "e624"; }

.icon-ic_channel:before { content: "e625"; }

.icon-ic_home:before { content: "e626"; }

.icon-ic_setting:before { content: "e627"; }

.icon-ic_playlist:before { content: "e628"; }

.icon-ic_interest:before { content: "e629"; }

.icon-ic_sub:before { content: "e62a"; }

.icon-ic_article:before { content: "e62b"; }

.icon-ic_video:before { content: "e62c"; }

.icon-ic_following:before { content: "e62d"; }

.icon-ic_upload:before { content: "e62e"; }

.icon-ic_more:before { content: "e62f"; }

.icon-ic_close:before { content: "e630"; }

.icon-checkbox_selected:before { content: "e631"; }

.icon-checkbox:before { content: "e632"; }

.icon-radio:before { content: "e633"; }

.icon-radio_selected:before { content: "e634"; }

结语

目前只针对博客首页做了样式修改，其他内容的修改思路是一样的，有空的时候再完善一下。除了样式修改，还可以自定义修改模板，这个尚未了解，不过找到一位园友DIVMonster的博客美化文章，有兴趣的可以了解下。