记一次博客园美化记录

这次疫情窝在家学了点前端的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 + '">&emsp;&emsp;' + $(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的效果还是挺不错的,毕竟很多前辈们都把坑填好了,基本上开箱即用~

参考博客

详谈如何定制自己的博客园皮肤
美化博客园 添加网易云音乐及生成文章目录
前端小白也能快速学会的博客园博客美化全攻略
博客园加上博客精灵