程序员的资源宝库

网站首页 > gitee 正文

博客园美化

sanyeah 2024-04-13 16:14:13 gitee 3 ℃ 0 评论

美化是不可能美化的了,大佬们教程又详细,功能又全面,哦呦我超喜欢这里的。

 

本文主要借鉴于静默虚空、sakuraph博主,感谢。下面就自己使用的美化功能做些记录。

前期准备

选择默认主题ThinkInside,禁用模板默认css,申请JS权限。

 

页面布局配色美化

此代码放置在页首Html代码中

<!-- 自定制样式文件以及脚本 -->
<script src="https://files.cnblogs.com/files/naughoy/cnblog.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/naughoy/cnblog.min.css" />

 

以上文件经修改存于博客文件当中,为防止修改可下载放置与自己博客对应位置再修改链接地址即可(对于js文本内容需要修改以下框选的链接地址和博客名)

 

 

到此即可实现自动生成文章目录模块,评论区头像显示,快捷操作按钮。

 

细节配置

 

  • 小老鼠控件

<!-- 小老鼠游戏控件 -->
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

 

  •  时钟控件

<!-- 公告栏时钟控件 -->
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

 

  • 百度分享

点击进入百度分享官网自定义生成相应代码

<!-- 百度分享栏控件 -->
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"105.5"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document){0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion="+~(-new Date()/3600000)]};
</script>

 

  • fork github控件

 进入 GitHub Corners ,选择自己钟意的 Github 角样式,拷贝对应的代码。

 

  • 侧边目录
<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>

 

 

  • 背景动画  

只要几分钟你就会爱上这个模块(滑稽),github地址

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表