不知不觉来Cnblogs也这么久了,然而Blogs提供的主题还是依旧那么复古,总觉得阅读起来难免枯燥,虽然我认为做技术不可以太过浮躁,但是一个美观的主题终究是吸引人眼的第一要素。
毕竟这么久了,在博客园还没有发现一个比较漂亮的主题,也包括别的博主的自定义主题,要么是浮躁的大红大紫,要么是浮夸的界面系统,真正好的UI应该一眼就能让人回归阅读本质,不需要太多嘈杂的讯息。
4年前在Cnblog和Csdn中我选择了前者,现在看来是正确的,因为博客园提供了程序员喜欢的自定义Html和Css,这样我们就可以根据自己的审美不受限制的改造自己的网上家园了。
那么说好了就开始改造吧,基础的模板我选择了 简单的ThinkInside 作为基础模板
是个非常朴素的样式,长这样:
选这个主题是因为我觉得头部尚可,其他的部分改造简单,总结了下心目中喜欢的样式,我去除了所有多余的内容,比如侧边栏、年月日
回归精简
#sideBar,#blog_post_info_block{display: none; }
再将阅读文本内容对齐,将主体内容呈现在用户第一眼中。
#under_post_news{display: none; }/*评论框大小*/#tbCommentBody.comment_textarea{width:890px; }/*尾部间距*/#footer{text-align:center;border-top:2px solid green;margin-left:25px;margin-right:25px;padding-top:10px;padding-bottom:10px; }/*居中间距*/#mainContent .forFlow {margin-left:20px;margin-right:20px;margin-top:10px;float: none;width: auto;}
调整文字大小和间距
/*评论框边框*/#comment_form_container,#blog-comments-placeholder { background-color:#f5f5f5; border-radius:6px 6px 6px 6px; padding:20px; }#comment_nav,#homepage1_HomePageDays_DaysList_ctl05_ImageLink {display: none; }.postBody {border-bottom: 2px solid green; }.day {padding-bottom: 5px;padding-left: 20px;padding-right: 20px;padding-top: 10px;margin-bottom:5px; }.postSeparator { display: none; }.postTitle {border-left: 3px solid #21759b;font-size: 110%px; }.postTitle a:link, .postTitle a:visited, .postTitle a:active {padding-left: 10px; }#cb_post_title_url.postTitle2 {font-size: 120%; }.dayTitle a:link {display:none; }
关于背景图是否使用Fixed固定的问题我考虑了很久,因为目前Chrome的Webkit内核有诸多问题,内存电源占用姑且不说,当使用Fixed的时候页面渲染性能会急剧下降到30pfs以下,
给阅读造成很大的阻塞感,所以只能牺牲美观程度换取流畅度了。关于这个问题大家可以访问 这里 来尝试减缓这个问题,不过实际上效果并不明显。
这个时候我想提下windows10的edge浏览器,关于这个新内核,微软做的还是非常好的,完全没有这方面的问题,依旧如丝如滑。
更换背景我用了微博图床。。坚持了好多年 看来很稳
body { background-image: url("http://ww4.sinaimg.cn/large/637d0877gw1exlma5gj0wj21hc0u04p6.jpg"); }
关于在文字阅读方面的细化我考虑了许多,包括文字大小,虽然说文字较小会比较美观,如下:
但是我一向是实用为主,美观为辅的性格,虽然用小号宋体字体很锐利,显示效果也不错,但是长久看起来容易导致视觉疲劳,因此改成现在用的微软大字号了
#main { font-size:15px; font-family:微软雅黑;padding-left: 0px;padding-right: 0px; }
在关于边框是否加上Box描边阴影的问题上我也考虑了很久
我一开始是觉得加阴影可能会有压迫感,不加比较扁平化舒服,但是怎么说呢,WIN10和OSX都有加,那我大概降低下阴影效果也加上算了。。
背景色的话,纯白固然是最好看的,当然也是最伤眼的,眼睛这么重要的东西肯定要好好对待,因此我选择了透明土灰= =、
#home { opacity: 0.95; width:970px; background-color:#f5f5f5; border-radius:6px 6px 6px 6px; box-shadow:0 0 20px black; }
最后把背景色不同的引号干掉
重新PS几个图标,大家喜欢哪个就用哪个吧,以前用的是都是微博图床,但是不支持透明png,所以现在传到这里直接用博客园的。
.feedbackCon {
background: url('http://images2015.cnblogs.com/blog/370709/201612/370709-20161230031921867-127780074.png') no-repeat 5px 0px;
}
改造完后,再加上一些标题的效果突出主次就差不多了,然后就是现在大家看到的这个样子了,其实还有很多想改的细节,但是实在没时间了。
我认为作为一名想要征战全领域的技术员,首先要锻炼的是自己的审美能力,其次是技术能力和自主改造力,因为审美能力是最容易在平时的生活中慢慢锻炼出来的,只有心中想的效果是美好的,
再经由自己改造才会漂亮,只有自己的体验力(UE/UX)提高了,才能设计出好的产品。
同时也要说一句理解万岁,要达成什么效果,就必须牺牲掉什么,一个技术博客,我不需要侧边的阅读点击排行,我也不想要技术归档,我只想一个安静的阅读环境,能够在最后有一个评论框和你的评论就足够了。