博客园美化

博客园美化

对博客园美化,基于博皮“SimpleMemor”进行的修改,首先要申请js权限。

博客侧边栏公告#

Copy
<script type="text/javascript"> console.log=function(){}; window.cnblogsConfig = { GhVersions : 'v1.1.5.1', // 版本 blogUser : "武培轩", // 用户名 blogAvatar : "https://pic.cnblogs.com/avatar/1356806/20180320195124.png", blogStartDate : "2018-3-20", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间, webpageIcon: "https://files-cdn.cnblogs.com/files/wupeixuan/blog_logo.gif", fontIconExtend: "//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css", //主页banner图片 homeTopImg: [ "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4ylgl0.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-ne7lr8.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-xl67ov.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-neqwon.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-lm2762.jpg", ], //侧边栏 menuUserInfoBgImg: 'https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_menu_bg.gif', //文章页配置 essayTopImg: [ "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-d5yzvg.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4d38m0.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4gj334.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-j82g35.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-r2yjg1.jpg", "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-wymo2p.jpg", ], // ---- 页面动效配置 ---- homeTopAnimationRendered: true, // true || false ,是否渲染主页头图动效 homeTopAnimation: { // 主页头图动效设置 radius: 15, density: 0.2, color: 'rgba(255,255,255, .2)', // 颜色设置,“random” 为随机颜色 clearOffset: 0.3 }, essayTopAnimationRendered: true, // true || false ,是否渲染随笔页头图动效 essayTopAnimation: { // 随笔页头图动效设置 triW : 14, triH : 20, neighbours : ["side", "top", "bottom"], speedTrailAppear : .1, speedTrailDisappear : .1, speedTriOpen : 1, trailMaxLength : 30, trailIntervalCreation : 100, delayBeforeDisappear : 2, colors: [ '#96EDA6', '#5BC6A9', '#38668C', '#374D84', '#BED5CB', '#62ADC6', '#8EE5DE', '#304E7B' ] }, bgAnimationRendered: true, // true || false ,是否渲染背景动效 backgroundAnimation : { // 背景动效设置 colorSaturation: "60%", colorBrightness: "50%", colorAlpha: 0.5, colorCycleSpeed: 5, verticalPosition: "random", horizontalSpeed: 200, ribbonCount: 3, strokeSize: 0, parallaxAmount: -0.2, animateSections: true }, homeBannerTextType: "one", //代码高亮配置 essayCodeHighlightingType: 'highlightjs', // 代码主题插件类型:cnblogs || highlightjs || prettify essayCodeHighlighting: 'idea', // 代码高亮主题,具体主题参考文档 //页脚标语 bottomText: { left : "既然选择了远方", right: "便只顾风雨兼程" }, //文章后缀配置 essaySuffix: { codeImgUrl : 'https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wechat.png', // >= v1.1.5 左侧图片设置,不配置使用 window.cnblogsConfig.blogAvatar aboutHtml : '敲代码,健身,读书。', // 关于博主,不配置使用默认 copyrightHtml: '本文为博主原创文章,转载请注明出处。', // 版权声明,不配置使用默认 supportHtml : '' // 声援博主,不配置使用默认 } } </script> <script src="https://blog-static.cnblogs.com/files/wupeixuan/simpleMemory.min.js"></script> <script src="https://blog-static.cnblogs.com/files/wupeixuan/mouse-click.js"></script> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

页面定制CSS代码#

页面定制CSS代码

页脚Html代码#

Copy
<!--live2d--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D</title> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wupeixuan/waifu.css"/> <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wupeixuan/flat-ui.min1.css"/> </head> <body> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1; font-size: 14px"></div> <canvas id="live2d" width="300" height="300" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://blog-static.cnblogs.com/files/wupeixuan/live2d.js"></script> <script src="https://blog-static.cnblogs.com/files/wupeixuan/waifu-tips1.js"></script> <script type="text/javascript">initModel()</script> </body> </html> <!--live2dend-->
posted @   武培轩  阅读(880)  评论(5编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示
CONTENTS