前言
之前就想通过博客园提供的自定义样式功能美化一下博客，但是一直想等学会 vue 再来改（其实是懒......）。上个礼拜看到一位大神的博客感到非常惊艳，遂下定决心用一个周末来改。之前有想过自己设计样式，但是感觉越看越丑，所以还是决定照着这位大神的博客一点点改。
准备工作
1、先看看有没有轮子
Google 一下，没有喜欢的样式。
上 Github 也没有搜到想要的。
可能关键词没用对吧。
2、自己动手，丰衣足食
首先要申请js权限，要不然很多东西都实现不了。然后右键查看源代码，把html下载下来（方便在本地调试）。最后照着别人的博客一点点的修改，一步一步的实现效果。
ps:我原本用的博客样式是bluesky，其实还是蛮喜欢的
3、最后成果
修改前：
修改后：
美化样式
实现过程
1、顶部加载条
我采用的是NProgress,这个我感觉非常好用。这是他们的官网，可以直接点四个方法查看效果。
点Download会跳到Github上去，上面有详情文档和CDN地址
我采取了最简单的方法
$(document).ready(function(){
NProgress.start();
NProgress.done();
}
效果是：
2、顶部导航条
顶部导航条要实现下滑隐藏，上滑加载。这个刚开始以为很难，没想到还是比较简单的。
百度找到监听滚动条事件的js方法
var oldScrollNum = 0;
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
//下滑
if (t>oldScrollNum) {
//上拉
}else{
}
oldScrollNum = t;
}
然后通过这个方法改变顶部导航条的margin-top的值达到展现隐藏的效果
最后给滚动条加上过渡属性 transition: 0.5s ease-in-out; ，这样就达到了想要的效果。
ps：其实用CSS动画实现更流畅一点。
3、导航条上的关于和友情链接
这个其实就是写两篇随笔 ，因为随笔的地址是固定的所以可以写死。
4、背景图片模糊
这个css3提供了原生支持：filter: blur(3px);
原图：
duang！加了特效后：
5、为每篇文章单独的背景
这个得每篇文章里面加个隐藏域，value存背景图片的地址。
//设置背景图片地址
if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") {
$("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")");
}else{
$("#myheader_bg").css("background-image","url(https://ww1.sinaimg.cn/large/0062YmUwgy1fthnpo4n7yj31hc0hrq8e.jpg)");
}
这里设成没有取到值就用默认的
6、修改markdown样式
这个就得呕心沥血的一点点调整了...
/** MarkDown样式调整 */
.cnblogs-markdown .hljs{
font-size: 16px!important;
line-height: 2!important;
padding: 15px!important;
}
.cnblogs-markdown code{
background:rgb(238,240,244) none !important;
border:0px !important;
color: rgb(73,59,92) !important;
font-size: 16px!important;
}
.cnblogs-markdown h2{
font-weight: 500;
margin: 20px 0;
}
.cnblogs-markdown h2:before{
content: "#";
color: #eb5055;
position: relative;
top: 0;
left: -12px;
}
#cnblogs_post_body h2{
font-weight: 500;
margin: 20px 0;
}
#cnblogs_post_body h3{
font-size: 16px;
font-weight: bold;
line-height: 1.5;
margin: 10px 0;
}
.cnblogs-markdown h3:before{
content: "##";
color: #2175bc;
position: relative;
top: 0;
left: -8px;
}
.postBody blockquote, .postCon blockquote{
background-image: none;
border-left: 5px solid #DDDFE4;
background-color: #EEF0F4;
100%;
padding: 6px 0 6px 25px;
}
修改前：
修改后：
ps:感觉还是不太满意┑(￣Д ￣)┍
7、生成目录
这个采用了Github上的轮子：https://github.com/gzdaijie/cnblogs_markdown_optimize
然后我魔改了下。。
function() {
// 根据h2、h3标签自动生成目录
var captions_ori = $("#cnblogs_post_body h2"),
captions_ori2 = $("#cnblogs_post_body h3"),
captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
content = $("<ul id='right_meun'></ul>");
$("#cnblogs_post_body").prepend(content.append(captions));
var index = -1,index2 = -1;
captions.replaceWith(function(){
var self = this;
if(self.tagName == "H2" || self.tagName == "h2"){
// 设置点击目录跳转
index += 1;
$('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]);
return '<li id="'+index+'li"><a href="http://www.youmatou.com/36875.html' + index + '">' + self.innerHTML + '</a><ul></ul></li>';
} else {
// add by summertime-wu 增加h3链接跳转
index2 += 1;
$('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]);
$("#"+index+"li ul").append("<li><a href='http://www.youmatou.com/36875.html" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>");
return ;
}
});
}
eummm......看起来比较糟糕，但是能跑！！
效果：
8、底部导航条
这个实现和顶部的差不多，多的就是去顶尾部和上一篇下一篇的四个按钮，去顶部和去尾部用锚点很好实现，上一篇和下一篇则需要用js从页面上取值
然后赋给自定义的按钮。不过这里需要注意一点，由于这个上一篇和下一篇的链接博客园是采取ajax异步加载的方式，所以直接取链接可能导致取空值，需要设置一个定时器来取，我的是设置了1秒后再从页面上取。
/**
设置ajax请求加载完数据时执行的js
*/
setTimeout(afterAjax,1000);
function afterAjax(){
//取值
}
9、去除尾部广告
额，这个呢。实现so easy，找到对应广告元素的id，设置 display:none 就好了，但是有点心虚。毕竟博客园免费给我们提供的了地方写博客，然而我却......
10、适配手机
这个其实没有仔细处理，只是粗略的调整了下主体的大小，当浏览器宽度小于1000px时，将#main设为100%宽。
#main{
40%;
background-color: white;
/*max- 700px;*/
}
@media screen and (max- 1000px) {
#main { 100%;}
}
效果：
11、针对首页优化
通过js获取当前url，然后匹配一下（其实这里可以优化一下，判断是否包含 summertime-wu 且后面没有下一级）
if (window.location.href == "https://www.cnblogs.com/summertime-wu"||
window.location.href == "https://www.cnblogs.com/summertime-wu/"||
window.location.href == "http://www.cnblogs.com/summertime-wu"||
window.location.href == "http://www.cnblogs.com/summertime-wu/") {
//针对性优化
}
是的，我现在才发现博客园既可以走http，也可以走https。。其实还可以这样：http://summertime-wu.cnblogs.com
12、访问统计
我这里采用的是http://www.flagcounter.com/,感觉挺不错的，不需要注册什么的，生成了html代码直接复制到侧边栏代码框里就可以用了。
不过由于我把侧边栏隐藏了，所以网页上看不到。正好我也不想让这个统计影响了整体的页面风格。
当然即使隐藏了还是能够正常统计的。假如自己需要查看则需要手动在控制台改下样式，让 #maincontent 缩小，#sidebar展现。
总结
在这里郑重感谢Chakhsu Lau，是这位大神的博客给我提供了模仿的对象。ps:这位大神的博客是用他自己写的一个Typecho主题：pinghsu,使用了pjax技术，体验如丝滑般流畅。
由于自己是后端，不太会写前端，很多地方都不够优雅，甚至有点小蠢。但是，能跑！！
＋△＋现在发现写前端原来这么爽，打开控制台你就是上帝了，很多东西都有现成的轮子，还非常简单好用。不过也发现前端不爽的地方，要适配各种分辨率和兼容各种浏览器。
自己同时是提需求的和实现需求的好矛盾啊啊啊。不过我最后坚定了一个想法，无论多难都要实现，打磨好每一个细节
ˋ︿ˊ源码稍后会放在 Github上，如有做得不好的地方，请不吝赐教，假如觉得不错的话给个star吧
˙▽˙
Tips: 博客园样式美化 II
本文作者：夏日浅笑、
原文地址：https://www.cnblogs.com/summertime-wu/p/9356736.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。