记一次博客园美化记录

[TOC] > 这次疫情窝在家学了点前端的CSS和JQuery,正好来捣鼓一下博客园~ ## 已添加的功能: * 人体时钟动画 * 小老鼠时钟动画 * B站风格UI * 标签云 * 评论加头像 * 右下角悬浮按钮(置顶,关注等) * 右上角github横幅 * 背景动画 * 点击背景弹出价值观文字随机颜色动画 * 打赏 * copy添加版权声明文字 ## 有待考虑的功能: > 性能以及访问速度等体验方面的考虑,主要看个人喜好 * 博客精灵 * 网易云音乐 * 标签云 * 背景动画 ## 改了一些可供参考的代码 ### 复制加版权©文字声明,特殊处理了一下,如果是本人则可以开绿灯(拷贝无需添加版权声明) ```javascript // 复制加版权说明 是本人则不会加类似文字 ``` ### 生成目录那段代码有bug 被我注释掉了,改用markdown的TOC功能更为精准 源文件 [cnblog.js](https://files.cnblogs.com/files/wgb1234/cnblog.js) ```javascript function GenerateContentList() { var nodes = $('#cnblogs_post_body :header') var content = '' // content += '' var len = $('#cnblogs_post_body').length if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content) } $($('#cnblogs_post_body')[len - 1]) .append('') } ``` ### 添加点击背景弹出社会主义核心价值观文字动画 ```javascript // 随机文字动画 ``` ### 打赏这个是开源项目,只换了图片和js路径没啥改动 ```javascript // tctip 支付赞赏/打赏 ``` > DIY的效果还是挺不错的,毕竟很多前辈们都把坑填好了,基本上开箱即用~ ## 参考博客 [详谈如何定制自己的博客园皮肤](https://www.cnblogs.com/jingmoxukong/p/7826982.html) [美化博客园 添加网易云音乐及生成文章目录](https://www.cnblogs.com/cang12138/p/7381601.html) [前端小白也能快速学会的博客园博客美化全攻略](https://juejin.im/post/5c74d695f265da2d943f6fd4) [博客园加上博客精灵](https://www.cnblogs.com/flipped/p/4995863.html)