目录
已添加的功能:
有待考虑的功能:
改了一些可供参考的代码
生成目录那段代码有 bug 被我注释掉了, 改用 Markdown 的 TOC 功能更为精准
添加点击背景弹出社会主义核心价值观文字动画
打赏这个是开源项目, 只换了图片和 JS 路径没啥改动
参考博客
这次疫情窝在家学了点前端的 CSS 和 jQuery, 正好来捣鼓一下博客园~
已添加的功能:
人体时钟动画
小老鼠时钟动画
B 站风格 UI
标签云
评论加头像
右下角悬浮按钮 (置顶, 关注等)
右上角 GitHub 横幅
背景动画
点击背景弹出价值观文字随机颜色动画
打赏
有待考虑的功能:
性能以及访问速度等体验方面的考虑, 主要看个人喜好
博客精灵
网易云音乐
标签云
背景动画
改了一些可供参考的代码
- // 复制加版权说明 是本人则不会加类似文字
- <script language="javascript" type="text/javascript">
- jQuery(document).on('copy', function(e) {
- var selected = Windows.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]);
- Windows.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 的效果还是挺不错的, 毕竟很多前辈们都把坑填好了, 基本上开箱即用~
参考博客
详谈如何定制自己的博客园皮肤
美化博客园 添加网易云音乐及生成文章目录
前端小白也能快速学会的博客园博客美化全攻略 https://juejin.im/post/5c74d695f265da2d943f6fd4
博客园加上博客精灵
来源: https://www.cnblogs.com/wgb1234/p/12434535.html