博客园样式美化

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

待优化的地方

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