美化是不可能美化的了,大佬们教程又详细,功能又全面,哦呦我超喜欢这里的。
本文主要借鉴于静默虚空、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&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="240" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><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>
本文暂时没有评论,来添加一个吧(●'◡'●)