记一次博客园美化记录
- 2020 年 3 月 7 日
- 笔记
目录
这次疫情窝在家学了点前端的CSS和JQuery,正好来捣鼓一下博客园~
已添加的功能:
- 人体时钟动画
- 小老鼠时钟动画
- B站风格UI
- 标签云
- 评论加头像
- 右下角悬浮按钮(置顶,关注等)
- 右上角github横幅
- 背景动画
- 点击背景弹出价值观文字随机颜色动画
- 打赏
- copy添加版权声明文字
有待考虑的功能:
性能以及访问速度等体验方面的考虑,主要看个人喜好
- 博客精灵
- 网易云音乐
- 标签云
- 背景动画
改了一些可供参考的代码
复制加版权©文字声明,特殊处理了一下,如果是本人则可以开绿灯(拷贝无需添加版权声明)
// 复制加版权说明 是本人则不会加类似文字 <script language="javascript" type="text/javascript"> jQuery(document).on('copy', function(e) { var selected = window.getSelection(); var copyFooter = '<br>==============<br>著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：CoderWGB<br> 源地址：' + document.location.href + '<br>来源：博客园cnblogs<br>© 版权声明：本文为博主原创文章，转载请附上博文链接！'; //判断是否有md的访问按钮来判断是否本人 因为别人的md 你是看不见的 (目前没想到别的办法) var md = $(".postDesc > a:nth-last-child(3)").text() == "MD"; if(md){ copyFooter = ""; } var copyHolder = $('<div>', { html: selected + copyFooter, style: { position: 'absolute', left: '-99999px' } }); $('body').append(copyHolder); selected.selectAllChildren(copyHolder[0]); window.setTimeout(function() { copyHolder.remove(); }, 0); }); </script>生成目录那段代码有bug 被我注释掉了,改用markdown的TOC功能更为精准
源文件 cnblog.js
function GenerateContentList() { var nodes = $('#cnblogs_post_body :header') var content = '<a name="_labelTop"></a>' // content += '<div id="navCategory">' // content += '<blockquote><p style="font-size: 18pt; color:#a2b4ba"><b>目录</b></p>' // content += '<div>' // for (var i = 0; i < nodes.length; i++) { // var item = '' // var originTitle = $(nodes[i]).text() // var resolvedTitle = resolveTitle(originTitle) // if (nodes[i].tagName === 'H1') { // item = '<a style="font-size:18px" href="#' + resolvedTitle + '">' + $(nodes[i]).text() + '</a><br>' // } else if (nodes[i].tagName === 'H2') { // item = '<a style="font-size:16px" href="#' + resolvedTitle + '">  ' + $(nodes[i]).text() + '</a><br>' // } // content += item // } // content += '</blockquote></div>' var len = $('#cnblogs_post_body').length if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content) } $($('#cnblogs_post_body')[len - 1]) .append('<div id='signature'><p>作者：<a href='https://www.cnblogs.com/wgb1234/'>CoderWGB</a></br>欢迎任何形式的转载，但请务必注明出处。</br>限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。</p></div>') } 添加点击背景弹出社会主义核心价值观文字动画
// 随机文字动画 <script type="text/javascript"> jQuery(document).ready(function() { //注意：这里是用的随笔分类做例子，你自己可以根据你自己情况任意设定。 $(".catListPostCategory>ul").wrap("<div class='wrap' ></div>").parent().css({ 'width': '245px', 'height': '496px' }); var options = { "range": [-200, 300], "gravity": -10, "xPos": 0.5, "yPos": 0.5, "gravityVector": [0, 0, 1], "interval": 100, "hoverGravityFactor": 0 }; jQuery("div.wrap").starfieldTagCloud(options); }); </script> <script language="javascript" type="text/javascript"> //单击显示随机文字 var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { //rgb颜色随机 var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var color = 'rgb'+'('+r+','+g+','+b+')'; var a = new Array("富强","❤","民主","❤", "文明","❤", "和谐","❤", "自由","❤", "平等","❤", "公正","❤", "法治","❤" ,"爱国","❤", "敬业","❤", "诚信","❤", "友善","❤"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx+1)%a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index":5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": color }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function() { $i.remove(); }); }); }); </script>打赏这个是开源项目,只换了图片和js路径没啥改动
// tctip 支付赞赏/打赏 <script type="text/javascript" src="//files.cnblogs.com/files/wgb1234/pay.min.js"></script> <script> new tctip({ top: '20%', button: { id: 1, type: 'zanzhu', }, list: [ { type: 'alipay', qrImg: 'https://files.cnblogs.com/files/wgb1234/zhifubao.bmp' //替换成自己的支付宝付款码 }, { type: 'wechat', qrImg: 'https://files.cnblogs.com/files/wgb1234/wx.bmp' //替换成自己的微信付款码 } ] }).init() </script>DIY的效果还是挺不错的,毕竟很多前辈们都把坑填好了,基本上开箱即用~
参考博客
详谈如何定制自己的博客园皮肤
美化博客园 添加网易云音乐及生成文章目录
前端小白也能快速学会的博客园博客美化全攻略
博客园加上博客精灵
