博客园支持CSS定制。以前都是在别人做好的皮肤的基础上,小小地修改,想要达到自己想要的效果多少有些不方便。五一假期,把CSS的基本用法又学习了一下,开始尝试写个规模稍大的CSS代码用来自定义皮肤。
博客园自定义皮肤的基本方法,是进入管理后台,打开“设置”(一般地址是 http://www.cnblogs.com/<username>/admin/Configure.aspx ,<username>替换为自己的用户名),在“通过CSS定制页面”下面的文本框输入CSS代码,然后“保存”,打开首页或者刷新一下首页,就有效果了。这样的做法对小规模的修改还可以,如果完全定制皮肤,这样不太方便。还好博客园博皮小组提供了一套离线html模板文件,还有一份文档。模板文件是较久以前的了,html节点已经发生变化了,有增加也有减少的。
文末是我的定制的CSS代码,使用时把“禁用模版默认CSS”给勾上。整体风格模仿的是点点上一个博客模板(纯粹 by Alex.o0 ),力求简介:配色使用各级灰度色;把侧边栏“最新随笔”、“阅读排行榜”等widget给hidden了,这样感觉更清爽(还有个原因是不想在调整那些widget的样式上费脑筋);留出了很多空间给“自定义公告”,现在内容还很少。只在Windows + Chrome上测试过,没做过兼容性测试,先给放出来,以后慢慢改进。
使用过多家博客,在博客皮肤(主题、模板、风格等,意思差不多)定制方面基本上有四大类。第一类,不可定制,如现在的CSDN博客,提供了少得可怜且ugly的几套皮肤,用户只能选择其中某一套,皮肤设置的功能就到头了;第二类,Web定制,典型的是网易博客和QQ空间,在第一类的基础上,可以用浏览器来增加、移除、移动和修改界面上的各种Widget;第三类,CSS定制,典型的就是博客园了,通过加载用户自定义的CSS代码来修改皮肤;第四类,Template定制,现在我知道的有两家,点点 (diandian.com) 和Farbox (farbox.com),博客网站提供模板的接口和使用细节(如渲染引擎、模板语法、页面变量等),用户自己写Web模版文件来定制皮肤。这四类中,第四类定制自由度最高,难度也越大,需要一些Web开发技能。第三类可定制程度稍弱于第四类,但比第二类更容易掌控细节,和第四类相比,也要求有Web开发技能但要求可能低很多,对网站的技术要求要低很多。第二类,对普通用户最合适,而第一类就不说了。希望博客园能够早入提供第四类的定制功能。
文章最后就是代码了:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
#profile_block { display:none; } h3.catListTitle { display:none; } #leftcontentcontainer { display:none; } #navigator .blogStats { display:none; } .dayTitle { display:none; } ul, a, li, h1, h2 { list-style-type:none; text-decoration:none; color:#000; padding: 0; margin:0; } a:hover { text-decoration:underline; } body{ background: #eeeeee; font-family: "Microsoft Yahei"; word-wrap:break-word; } ::selection{ background: #e0e0e0; } #home { margin: 0 auto; width: 840px; height: 100%; } #header { margin: 10px 0; padding: 10px 0; position:relative; } #blogTitle h1{ display: inline; margin: 0 10px; font-size:80px; font-weight:bold; letter-spacing:-10px; } #blogTitle a { color: #555555; } #blogTitle a:hover { text-decoration: none; } #blogTitle h2{ display: inline; margin: 0 10px; font-size: 40px; color: #dedede; } #navigator { width:100%; margin: 5px 0; padding:10px 0; } #navigator li{ margin: 0 5px; float:left; } #main { position:relative; width:840px; background-color: #e0e0e0; } #mainContent{ background-color: #ffffff; margin-right:240px; padding:20px; } .day .postDesc { border-bottom:dotted 2px #ddd; margin: 5px 0 15px 0; font-size: 80%; color: #666666; } .day .postTitle, .post .postTitle{ font-size: 130%; font-weight: bold; text-shadow: 2px 3px 2px #cdcdcd; margin:5px 0; } .day .c_b_p_desc{ padding: 5px 0; } .day .c_b_p_desc_readmore, .topicListFooter a{ border-left: 2px #666 solid; font-size: 80%; padding: 0 5px; margin: 0 5px; color: #666; } .day .c_b_p_desc_readmore:hover, .topicListFooter a:hover{ background: #efefef; } .catListTitle{ color:#aaaaaa; } #sideBar { width:200px; position:absolute; padding:20px; right:0px; top:0px; } h3 { color: #aaaaaa; margin: 5px 0; } #footer{ text-align:center; padding:10px 0; }