博客園樣式美化

時間 2019-11-14

標籤博客樣式美化简体版

原文原文鏈接

本文介紹本博客的美化javascript

美化模塊

博客園模板
側邊欄
文章索引目錄

模板美化

本博客的樣式仿照Leanote模板修改而來
博客園模板的原有CSS代碼註釋中建議咱們只修改CSS來更改博客的樣式
美化默認模板前請先在後臺禁用默認模板CSScss

這是個人螞蟻筆記博客
http://blog.leanote.com/sakuraph
美化後的博客園樣式都是從這這來的,具體修改了哪些樣式就不作過多的描述
複製下面連接頁面中的CSS粘貼到博客管理-設置-頁面定製CSS代碼
https://github.com/sakuraph/blog/blob/master/other/template.csshtml

側邊欄添加頭像

登陸博客園後臺https://home.cnblogs.com/
查看本身的我的頭像並複製圖片地址
java

修改下面代碼中的圖片地址爲你我的頭像的圖片地址git

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

添加到博客管理-設置-博客側邊欄公告位置處便可github

給文章添加索引目錄

這個功能的實現是基於jQuery的，查看cnblogs的頁面源碼
發現博客園的默認模板已經引入了jQuery
這個功能須要申請開通js權限markdown

這個美化過程比較複雜，美化的靈感來源於下面的幾個網站：app

CSDN博客：CSDN的博文會自動建立索引目錄，我採用了它的索引目錄樣式
百度知道：瀏覽百度知道會在滾動到一屏以上時出現索引目錄

我還在這個索引目錄中加入了回到頂部和滾動到某個標題下的內容時高亮對應的目錄索引ide

添加索引目錄的顯示區域

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

使用position: fixed將這個索引目錄鎖定在底部post

實現功能

<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>