博客园样式美化

本文介绍本博客的美化

美化模块

博客园模板
侧边栏
文章索引目录

模板美化

本博客的样式仿照Leanote模板修改而来
博客园模板的原有CSS代码注释中建议我们只修改CSS来更改博客的样式
美化默认模板前请先在后台禁用默认模板CSS

这是我的蚂蚁笔记博客
http://blog.leanote.com/sakuraph
美化后的博客园样式都是从这这来的,具体修改了哪些样式就不做过多的描述
复制下面链接页面中的CSS粘贴到博客管理-设置-页面定制CSS代码
https://github.com/sakuraph/blog/blob/master/other/template.css

侧边栏添加头像

登录博客园后台https://home.cnblogs.com/
查看自己的个人头像并复制图片地址

修改下面代码中的图片地址为你个人头像的图片地址

<div class="head_img"><img width="120" height="120" alt="我的头像" src="//pic.cnblogs.com/avatar/1014286/20160824172911.png" class="img_avatar"><div>

添加到博客管理-设置-博客侧边栏公告位置处即可

给文章添加索引目录

这个功能的实现是基于jQuery的，查看cnblogs的页面源码
发现博客园的默认模板已经引入了jQuery
这个功能需要申请开通js权限

这个美化过程比较复杂，美化的灵感来源于下面的几个网站：

CSDN博客：CSDN的博文会自动创建索引目录，我采用了它的索引目录样式
百度知道：浏览百度知道会在滚动到一屏以上时出现索引目录

我还在这个索引目录中加入了回到顶部和滚动到某个标题下的内容时高亮对应的目录索引

添加索引目录的显示区域

<div class="fixedIndexs" style="position: fixed;bottom: 40px;display: none"></div>

使用position: fixed将这个索引目录锁定在底部

实现功能

<script language="javascript" type="text/javascript">
	var fixedIndexs=$('.fixedIndexs');
	//获取页面上所有的h2标签，这里你可以改成你想要的h标签，我写文章一般都是以markdown h2作为一级
	var hs = $('#cnblogs_post_body h2');
	//动态伸展索引目录
	function openorclose(a) {
		$("#indexs").slideToggle("fast");
		var text=$(a).text();
		if(text=='[-]'){
			$(a).text("[+]");
			return;
		}
		$(a).text("[-]");
	}
	//创建索引目录
	function createIndexs(){
		//创建索引目录容器
		var indexs_container=$('<div style="border:solid 1px #ccc; background:#eee;180px;padding:4px 10px;"></div>');
		//创建返回顶部和目录伸缩控制按钮
		var indexs_controller=$('<p style="text-align:right;margin:0;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>');
		//创建索引目录有序列表
		var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');
		//按依赖关系进行追加
		indexs_container.append(indexs_controller).append(indexs);
		//遍历获取到的所有h2标签
		$.each(hs,function(i,h){
			//在每个h2标签之前生成一个锚点用于点击目录索引跳转到该h2标签位置
			$(h).before('<a name="index_'+i+'"></a>');
			//为每个h2标签生成对应的目录索引 并链接到上面生成的锚点
			//这样就实现了点击跳转的目录功能
			indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>');
		});
		//如果没有h2标签则不生成索引目录，避免只显示返回顶部和目录伸缩那两个按钮
		if(hs.length!=0){
			fixedIndexs.append(indexs_container);
			//使用偏移量设置目录显示区域的位置
			fixedIndexs.css('right',$("#home").offset().left+32+'px');
		}
	}
	createIndexs();//调用方法生成目录
	//滚动超过一屏才显示目录以及高亮索引功能实现代码
	$(window).scroll(function(event){
		//清空所有高亮
		$("#indexs li a").removeClass("active");
		//设置高亮
		$.each(hs,function (i, h) {
			var next_active_top;
			i<(hs.length-1)?next_active_top=hs.eq(i+1).offset().top:hs.last().offset().top;
			if($(h).offset().top<$(window).scrollTop()+30&&$(window).scrollTop()+30<next_active_top){
				$("#active_"+i).addClass("active");
			}
			if(i+1==hs.length&&$(window).scrollTop()+30>hs.last().offset().top){
				$("#active_"+i).addClass("active");
			}
		});
		//滚动超过一屏才显示目录
		if($(window).scrollTop()>$(window).height()){
			fixedIndexs.show();
			return;
		}
		fixedIndexs.hide();
	});
	//窗口大小改变重新绘制 避免显示位置异常
	$(window).resize(function (event) {
		fixedIndexs.hide();
		fixedIndexs.css('right',$("#home").offset().left+32+'px');
		//窗口大小改变需要重新获取滚动高度进行判断 否则显示异常
		if($(window).scrollTop()>$(window).height()){
			fixedIndexs.show();
		}
	})
</script>

完整的代码

将下面的代码复制添加到博客管理-设置-页脚Html代码处

<div class="fixedIndexs" style="position: fixed;bottom: 40px;display: none"></div>
<script language="javascript" type="text/javascript">
	var fixedIndexs=$('.fixedIndexs');
	var hs = $('#cnblogs_post_body h2');
	function openorclose(a) {
		$("#indexs").slideToggle("fast");
		var text=$(a).text();
		if(text=='[-]'){
			$(a).text("[+]");
			return;
		}
		$(a).text("[-]");
	}
	function createIndexs(){
		var indexs_container=$('<div style="border:solid 1px #ccc; background:#eee;180px;padding:4px 10px;"></div>');
		var indexs_controller=$('<p style="text-align:right;margin:0;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>');
		var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');
		indexs_container.append(indexs_controller).append(indexs);
		$.each(hs,function(i,h){
			$(h).before('<a name="index_'+i+'"></a>');
			indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>');
		});
		if(hs.length!=0){
			fixedIndexs.append(indexs_container);
			//get home div right offset
			fixedIndexs.css('right',$("#home").offset().left+32+'px');
		}
	}
	createIndexs();
	$(window).scroll(function(event){
		//clear all active
		$("#indexs li a").removeClass("active");
		//set active
		$.each(hs,function (i, h) {
			var next_active_top;
			i<(hs.length-1)?next_active_top=hs.eq(i+1).offset().top:hs.last().offset().top;
			if($(h).offset().top<$(window).scrollTop()+30&&$(window).scrollTop()+30<next_active_top){
				$("#active_"+i).addClass("active");
			}
			if(i+1==hs.length&&$(window).scrollTop()+30>hs.last().offset().top){
				$("#active_"+i).addClass("active");
			}
		});
		//auto display
		if($(window).scrollTop()>$(window).height()){
			fixedIndexs.show();
			return;
		}
		fixedIndexs.hide();
	});
	$(window).resize(function (event) {
		fixedIndexs.hide();
		fixedIndexs.css('right',$("#home").offset().left+32+'px');
		if($(window).scrollTop()>$(window).height()){
			fixedIndexs.show();
		}
	})
</script>

待优化的地方

美化后的markdown的样式可能会与cnblogs markdown有冲突，已经发现已解决
索引目录滚动高亮精确度不高
索引目录只取了h2一级,h3,h4...这些由于偷懒没有写对应的代码（PS:有需求自己加进去就行了）