本文介紹本博客的美化
美化模塊
- 博客園模板
- 側邊欄
- 文章索引目錄
模板美化
本博客的樣式仿照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;width: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;width: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:有需求自己加進去就行了）