记录博客园的一些样式代码

选择的皮肤是当前最流行的`CodingLife`,结合这篇文章

CSS 全局样式

/* 顶部公告自定义静态文字样式调整 */
#topbar-word{
color: rgb(53,137,164);
font-size: medium;
font-weight: 500;
border: 3px solid #8B4513;
background-color:  rgb(226,226,226);
padding: 15px;
}
/* 去除底部广告推荐 */
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
    display:none !important; 
}

/* 悬停图片放大 */
.post img {
    cursor: pointer;
    transition: all 0.5s;
}
.post img:hover {
    transform: scale(1.3);
}

/*隐藏反对按钮 */
/*
.buryit {
	display: none;
}
.comment_bury {
	display: none;
} */

/*代码黑色主题高亮*/
/*
 代码高亮开始，使用了一个叫Monokai Sublime的黑色主题皮肤，直接拿过来还不行，有一些样式冲突，还要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre {
/*控制代码不换行*/
    white-space: pre;
    word-wrap: normal;
}
.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}
/*黑色主题皮肤结束*/


			/* 博客精灵🧚‍♀️*/
			/* .spig {
			    display:block;
			    width:175px;
			    height:246px;
			    position:absolute;
			    bottom: 300px;
			    left:180px;
			    z-index:9999;
			}
			
			#message{
			    color :#191919;
			    border: 1px solid #c4c4c4;
			    background:#ddd;
			    -moz-border-radius:5px;
			    -webkit-border-radius:5px;
			    border-radius:5px;
			    min-height:1em;
			    padding:5px;
			    top:-45px;
			    position:absolute;
			    text-align:center;
			    width:auto !important;
			    z-index:10000;
			    -moz-box-shadow:0 0 15px #eeeeee;
			    -webkit-box-shadow:0 0 15px #eeeeee;
			    border-color:#eeeeee;
			    box-shadow:0 0 15px #eeeeee;
			    outline:none;
			}
			.mumu{
			    width:175px;
			    height:246px;
			    cursor:move;
			    background:url(https://files.cnblogs.com/files/wgb1234/spig.gif) no-repeat;
			} */

侧边栏代码

<!-- 公告栏静态文字 -->
<div id="topbar-word">
<p> 5年iOS开发 </p>
<p> 前端小白进阶中 </p>
<p> Flutter学习中 </p>
<p> 平时爱瞎折腾 </p>
<p> 目前在深圳搬砖</p>
</div>
<!-- 公告栏人体时钟控件 -->
<embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

<!-- 小老鼠游戏控件 -->
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

<!--网易云播放器样式-->
<!-- <embed frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="90" src="//music.163.com/style/swf/widget.swf?sid=411214279&amp;type=2&amp;auto=1&amp;width=220&amp;height=66" allownetworking="all"> -->
<!--网易云播放器样式end-->

<!-- 加入访问量统计 -->
<div>
<a href="https://info.flagcounter.com/gBr8"><img src="https://s11.flagcounter.com/count2/gBr8/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
<div>
<!-- 加入滚动文字公告 -->
<marquee><a href="#"><font color="orange" size="4">  有朋自远方来,不亦乐乎?</marquee>

<!-- 加入微博插件 -->
<!-- <object data="//widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=2733752900&verifier=f2f0e397&dpc=1" width="100%" height="550" type="text/html">
    Embedded data failed to be displayed.
</object> -->

<!--博客精灵 start*-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/wgb1234/spig.js"></script>
<div id="spig" class="spig">
    <div id="message">……</div>
    <div id="mumu" class="mumu"></div>
</div>
<script type="text/javascript">
var isindex=true;
var title="";
var visitor="这位怪蜀黍~";
</script> -->
<!--精灵end* -->

页首代码

<!-- fork github 控件 -->
<a href="https://github.com/WangGuibin" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

<!-- 复制加版权说明 是本人则不会加类似文字-->
		<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>

页脚代码

<!-- 自定制样式文件 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />
<!-- 自定制脚本 -->
 <script src="https://files.cnblogs.com/files/wgb1234/cnblog.js"></script> 

<!-- 背景动画 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>
<!-- 标签云代码-->
<script src="http://files.cnblogs.com/justinw/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="http://files.cnblogs.com/justinw/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="http://files.cnblogs.com/justinw/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>

<!-- 鼠标点击烟花🎆炸裂效果 -->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

<!-- 随机文字动画 -->
<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>

<!-- tctip 支付赞赏/打赏 -->
<script type="text/javascript" src="//files.cnblogs.com/files/wgb1234/pay.min.js"></script> 
<!-- js文件引入 -->
<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>

看板娘设置

<!--看板娘CSS -->
#live2dcanvas {
    border: 0 !important;
}

<!--看板娘 右下角live2d效果 -->
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({
    "model": {
           jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1
        },
    "display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
             "position": "right",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>

五彩飞花的点击效果

<!-- 点击特效--五彩飞花 -->
<script>
function clickEffect() {
    let balls = [];
    let longPressed = false;
    let longPress;
    let multiplier = 0;
    let width, height;
    let origin;
    let normal;
    let ctx;
    const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
    const pointer = document.createElement("span");
    pointer.classList.add("pointer");
    document.body.appendChild(pointer);

    if (canvas.getContext && window.addEventListener) {
        ctx = canvas.getContext("2d");
        updateSize();
        window.addEventListener('resize', updateSize, false);
        loop();
        window.addEventListener("mousedown", function(e) {
            pushBalls(randBetween(10, 20), e.clientX, e.clientY);
            document.body.classList.add("is-pressed");
            longPress = setTimeout(function() {
                document.body.classList.add("is-longpress");
                longPressed = true;
            }, 500);
        }, false);
        window.addEventListener("mouseup", function(e) {
            clearInterval(longPress);
            if (longPressed == true) {
                document.body.classList.remove("is-longpress");
                pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                longPressed = false;
            }
            document.body.classList.remove("is-pressed");
        }, false);
        window.addEventListener("mousemove", function(e) {
            let x = e.clientX;
            let y = e.clientY;
            pointer.style.top = y + "px";
            pointer.style.left = x + "px";
        }, false);
    } else {
        console.log("canvas or addEventListener is unsupported!");
    }


    function updateSize() {
        canvas.width = window.innerWidth * 2;
        canvas.height = window.innerHeight * 2;
        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';
        ctx.scale(2, 2);
        width = (canvas.width = window.innerWidth);
        height = (canvas.height = window.innerHeight);
        origin = {
            x: width / 2,
            y: height / 2
        };
        normal = {
            x: width / 2,
            y: height / 2
        };
    }
    class Ball {
        constructor(x = origin.x, y = origin.y) {
            this.x = x;
            this.y = y;
            this.angle = Math.PI * 2 * Math.random();
            if (longPressed == true) {
                this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
            } else {
                this.multiplier = randBetween(6, 12);
            }
            this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
            this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
            this.r = randBetween(8, 12) + 3 * Math.random();
            this.color = colours[Math.floor(Math.random() * colours.length)];
        }
        update() {
            this.x += this.vx - normal.x;
            this.y += this.vy - normal.y;
            normal.x = -2 / window.innerWidth * Math.sin(this.angle);
            normal.y = -2 / window.innerHeight * Math.cos(this.angle);
            this.r -= 0.3;
            this.vx *= 0.9;
            this.vy *= 0.9;
        }
    }

    function pushBalls(count = 1, x = origin.x, y = origin.y) {
        for (let i = 0; i < count; i++) {
            balls.push(new Ball(x, y));
        }
    }

    function randBetween(min, max) {
        return Math.floor(Math.random() * max) + min;
    }

    function loop() {
        ctx.fillStyle = "rgba(255, 255, 255, 0)";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < balls.length; i++) {
            let b = balls[i];
            if (b.r < 0) continue;
            ctx.fillStyle = b.color;
            ctx.beginPath();
            ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
            ctx.fill();
            b.update();
        }
        if (longPressed == true) {
            multiplier += 0.2;
        } else if (!longPressed && multiplier >= 0) {
            multiplier -= 0.4;
        }
        removeBall();
        requestAnimationFrame(loop);
    }

    function removeBall() {
        for (let i = 0; i < balls.length; i++) {
            let b = balls[i];
            if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
                balls.splice(i, 1);
            }
        }
    }
}
clickEffect();//调用
</script>

<span class="pointer"></span>
<style>
.pointer {
    --size:30px;pointer-events: none;
    width: var(--size);
    height: var(--size);
    background: rgba(247,56,89,0.2);
    position: fixed;
    border-radius: 50%;
    transform: translate3d(-50%,-50%,0) scale(0);
    transition: transform 0.3s;
    border: 2px solid rgba(247,56,89,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.pointer:before {
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    display: block;
    background: none;
    border-radius: 50%;
    transition: background 0.5s,box-shadow 0.5s;
}

.is-pressed .pointer {
    transform: translate3d(-50%,-50%,0) scale(1);
}

.is-longpress .pointer {
    animation: wobble 0.2s infinite alternate;
}

.is-longpress .pointer:before {
    background: #faf15d;
    box-shadow: 0 0 5px rgba(250,241,93,0.5);
    animation: wobble2 0.2s infinite alternate;
}

@keyframes wobble {
    to {
        transform: translate3d(-50%,-50%,0) scale(0.5);
    }
}

@keyframes wobble2 {
    to {
        transform: scale(0.5);
    }
}
</style>

修改主题的一些样式

图片展示加边框阴影

.myImg {
	margin-top: 30px !important;
	margin-bottom: 30px !important;
	border-radius: 10px !important;
	border: 1px solid rgba(0, 0, 0, 0.5) !important;
	-webkit-box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.5) !important;
	-moz-box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.5) !important;
	box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.5) !important;
}

代码框高亮支持不友好改成白底加边框阴影

/* 修改copy按妞背景色*/
#blog_article .post-body .post-body-content .post-body-content-fiex-wrap pre .copyBtn, #blog_article .post-body .post-body-content .post-body-content-wrap pre .copyBtn, #app pre .copyBtn {
    background-color: #fff !important;
}

/* 设置代码背景 边框 阴影*/
#app pre {
    background-color: rgb(251,251,251) !important;
    margin-top: 30px !important;
	margin-bottom: 30px !important;
	border-radius: 10px !important;
	border: 1px solid rgba(250, 250, 250, 0.5) !important;
	-webkit-box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.5) !important;
	-moz-box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.5) !important;
	box-shadow: 1px 1px 20px 5px rgba(0, 0, 0, 0.5) !important;
}

记录atum主题的代码

(该主题目前在开发中是C君。开源的作品
(PS. 鉴于夏天来了该主题略占用CPU资源,长时间打开或者听歌的话(只挂了QQ,微信和浏览器博客一个页面),CPU温度会升到60度以上(MBP 256G 8G Mojave 10.14.4) 暂时先弃了适合冬天使用(逃

<--! 页首 -->
<script>
$("link").remove();$("script").remove();$(function(){$("link").remove();$("script").remove()});window.blogCommentManager=function(){this.renderComments=function(){}};window.loadViewCount=function(){};window.loadNewsAndKb=function(){};window.loadBlogSignature=function(){};window.LoadPostCategoriesTags=function(){};window.LoadPostInfoBlock=function(){};window.GetPrevNextPost=function(){};window.loadBlogCalendar=function(){};window.loadBlogSideColumn=function(){};window.loadBlogTopLists=function(){};window.GetHistoryToday=function(){};window.deliverAdT2=function(){};window.getFollowStatus=function(){};window.deliverAdC1=function(){};
</script>

<style type="text/css">body{margin:0;padding:0;overflow:hidden;margin-top:100%}#shade_animal_wrap{opacity:1;margin:0;padding:0;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;align-items:center;justify-content:center;height:100vh;width:100%;background-color:#f2f2f2;z-index:99999;transition:all 1s ease 0s;}.lds-hourglass{display:inline-block;position:relative;width:64px;height:64px;transform:translateX(-30px) translateY(-60px);}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:6px;box-sizing:border-box;border:60px solid #fff;border-color:#ff8d00 transparent #ff3004 transparent;animation:lds-hourglass 1.2s infinite;}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);}100%{transform:rotate(1800deg);}}</style><div id="shade_animal_wrap"><div class="lds-hourglass"></div></div>
<script type="text/javascript">
(()=>{
//该处用于配置atum主题参数，具体配置参数可参考下方3个表格
let p={
	blogSign:'Stay hungry, stay foolish. Talk is cheap, show me the code.',
	ingTitle:'Stay hungry, stay foolish. Talk is cheap, show me the code.',
	aboutmeHtml : '<p> iOS开发从业人员 >_< </p><p> 前端小白进阶者 QAQ </p><p> Flutter学习中 O(∩_∩)O~ </p><p> 平时爱瞎折腾o(*￣︶￣*)o </p><p> 目前在深圳搬砖^_^ </p>',
	blogFriendList:[{name:"CoderWGB's blog",url:"http://wangguibin.github.io"}],
	blogUsedLinks : [
	{name:'我的关注',url:'https://home.cnblogs.com/u/wgb1234/relation/following'},
	{name:'我的粉丝',url:'https://home.cnblogs.com/u/wgb1234/relation/followers'},
	{name:'我的相册',url:'https://i-beta.cnblogs.com/albums'},
	{name:'我的文件',url:'https://i-beta.cnblogs.com/files'},
	{name:'我的评论',url:'https://i-beta.cnblogs.com/comments?page=1&mine=true'},
	{name:'我的收藏',url:'https://wz.cnblogs.com'},
	{name:'收件箱',url:'https://msg.cnblogs.com/inbox'},
	{name:'发闪存',url:'https://ing.cnblogs.com'},
	{name:'问答社区',url:'https://q.cnblogs.com'},
	],
	musicIds:"4912103983",
	qq : '1024732985',
	email : '864562082@qq.com',
	github : 'https://github.com/WangGuibin',
	mainExtNav:[
	{title: "园子", url: "https://www.cnblogs.com", icon: "refresh"},
	{title: "写文章", url: "https://i-beta.cnblogs.com/posts/edit", icon: "pen"},
	{title: "留言板", url: "https://www.cnblogs.com/wgb1234/p/12455521.html#/cnblog/works/article/12455521", icon: "paper"},
	{title: "QQ", url: "http://wpa.qq.com/msgrd?v=3&uin=1024732985&site=qq&menu=yes", icon: "qq2"},
	{title: "微博", url: "https://weibo.com/WGBChangeworld", icon: "weibo"},
	{title: "掘金", url: "https://juejin.im/user/5a5ca675f265da3e5b32c968", icon: "fire"},
	{title: "github", url: "https://github.com/WangGuibin", icon: "git"},
	{title: "博主简历", url: "https://wangguibin.github.io/PersonalProfile", icon: "renyuanguanli"},
	{title: "投喂", url: "https://www.cnblogs.com/wgb1234/p/12456963.html#/cnblog/works/article/12456963", icon: "gift"},
	],
openMathJax:true,
	extCss : ["https://files.cnblogs.com/files/wgb1234/myCSS.css"],
	extJs : [],
};
p.avatarSign= "↗↗点击头像关注我。";
window.__BLOG_CONFIG__=p;
})();
</script>
<script type=text/javascript src=https://cdn.jsdelivr.net/gh/cjunn/atum@v1.15/cnblogLoader.js></script>

记录`BiliBili`主题`pure`的代码

选择Custom模板,禁用模板CSS
开通js权限
css代码

@import url(https://blog-static.cnblogs.com/files/gshang/gshang.pure.css) screen and (min-width:0px);

#sidebar_toptags li {
    display: flex;
    word-break: keep-all !important;
}

侧边栏代码

<script>
	jQuery(function() {
		pure({
			favicon: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
			avatar: "https://pic.cnblogs.com/face/797853/20200306115001.png",
			setContact: {
				enable: true,
				data: {
					wechat: 'https://images.cnblogs.com/cnblogs_com/wgb1234/1662566/o_200331074422wechat.png',
					qq: '1024732985',
					email: '864562082@qq.com'
				}
			},
			news: {
				enable: true,
				data: [
                                        '<a href="https://github.com/WangGuibin" target="_blank"> Stay hungry,Stay foolish. Talk is cheap, show me the code. </a>',
				]
			},
			banner: {
				enable: true,
				data: [{
						url: "https://news.ifeng.com/c/special/7tPlDSzDgVk",
						img: "https://x0.ifengimg.com/ucms/2020_07/7C3B11DC8FF81E8DE68FD4A610F6CB12A0D04ED6_w1125_h483.png",
						title: "疫情实时动态"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/biliTheme.html",
						img: "https://img2018.cnblogs.com/blog/1489774/202001/1489774-20200104194952221-337450693.png",
						title: "博客主题——Bili2.0"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/tools.html",
						img: "https://www.kanjiantu.com/images/2019/07/05/post169393a677253c679.png",
						title: "实用工具分享"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/movie.html",
						img: "https://www.kanjiantu.com/images/2019/07/05/post4242f1ce89576c2f3.png",
						title: "动画电影分享"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/11185613.html",
						img: "https://img2018.cnblogs.com/blog/1489774/201909/1489774-20190923190114426-2061049622.png",
						title: "VIP视频解析"
					},
					{
						url: "https://www.cnblogs.com/gshang/p/11135154.html",
						img: "https://www.kanjiantu.com/images/2019/07/05/post2b40b83305f79d463.png",
						title: "常用网站集合"
					}
				]
			},
			sidebarContent: true
		})
	})
</script>

页首代码

<style>
	@-webkit-keyframes ball-scale-multiple {
		0% {
			-webkit-transform: scale(0);
			transform: scale(0);
			opacity: 0;
		}

		5% {
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	@keyframes ball-scale-multiple {
		0% {
			-webkit-transform: scale(0);
			transform: scale(0);
			opacity: 0;
		}

		5% {
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 0;
		}
	}

	.ball-scale-multiple {
		transform: scale(6);
		position: relative;
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}


	.ball-scale-multiple>div:nth-child(2) {
		-webkit-animation-delay: -0.4s;
		animation-delay: -0.4s;
	}

	.ball-scale-multiple>div:nth-child(3) {
		-webkit-animation-delay: -0.2s;
		animation-delay: -0.2s;
	}

	.ball-scale-multiple>div {
		background-color: var(--ThemeColor);
		width: 15px;
		height: 15px;
		border-radius: 100%;
		margin: 2px;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		position: absolute;
		left: -90px;
		top: -70px;
		opacity: 0;
		margin: 0;
		width: 180px;
		height: 180px;
		-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
		animation: ball-scale-multiple 1s 0s linear infinite;
	}



	#loading {
		opacity: 1;
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 999999999999999;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--BlockColor);
	}
</style>

<div id="loading">
	<div class="ball-scale-multiple">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

页脚代码


<script type="text/javascript" src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/highlightMATLABCode.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/gshang.owo.2020.01.05.1.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/sidebarContent.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/ctgu/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/gshang/gshang.pure.js"></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>

<!-- 点击特效--五彩飞花 -->
<script>
function clickEffect() {
    let balls = [];
    let longPressed = false;
    let longPress;
    let multiplier = 0;
    let width, height;
    let origin;
    let normal;
    let ctx;
    const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
    const pointer = document.createElement("span");
    pointer.classList.add("pointer");
    document.body.appendChild(pointer);

    if (canvas.getContext && window.addEventListener) {
        ctx = canvas.getContext("2d");
        updateSize();
        window.addEventListener('resize', updateSize, false);
        loop();
        window.addEventListener("mousedown", function(e) {
            pushBalls(randBetween(10, 20), e.clientX, e.clientY);
            document.body.classList.add("is-pressed");
            longPress = setTimeout(function() {
                document.body.classList.add("is-longpress");
                longPressed = true;
            }, 500);
        }, false);
        window.addEventListener("mouseup", function(e) {
            clearInterval(longPress);
            if (longPressed == true) {
                document.body.classList.remove("is-longpress");
                pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                longPressed = false;
            }
            document.body.classList.remove("is-pressed");
        }, false);
        window.addEventListener("mousemove", function(e) {
            let x = e.clientX;
            let y = e.clientY;
            pointer.style.top = y + "px";
            pointer.style.left = x + "px";
        }, false);
    } else {
        console.log("canvas or addEventListener is unsupported!");
    }


    function updateSize() {
        canvas.width = window.innerWidth * 2;
        canvas.height = window.innerHeight * 2;
        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';
        ctx.scale(2, 2);
        width = (canvas.width = window.innerWidth);
        height = (canvas.height = window.innerHeight);
        origin = {
            x: width / 2,
            y: height / 2
        };
        normal = {
            x: width / 2,
            y: height / 2
        };
    }
    class Ball {
        constructor(x = origin.x, y = origin.y) {
            this.x = x;
            this.y = y;
            this.angle = Math.PI * 2 * Math.random();
            if (longPressed == true) {
                this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
            } else {
                this.multiplier = randBetween(6, 12);
            }
            this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
            this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
            this.r = randBetween(8, 12) + 3 * Math.random();
            this.color = colours[Math.floor(Math.random() * colours.length)];
        }
        update() {
            this.x += this.vx - normal.x;
            this.y += this.vy - normal.y;
            normal.x = -2 / window.innerWidth * Math.sin(this.angle);
            normal.y = -2 / window.innerHeight * Math.cos(this.angle);
            this.r -= 0.3;
            this.vx *= 0.9;
            this.vy *= 0.9;
        }
    }

    function pushBalls(count = 1, x = origin.x, y = origin.y) {
        for (let i = 0; i < count; i++) {
            balls.push(new Ball(x, y));
        }
    }

    function randBetween(min, max) {
        return Math.floor(Math.random() * max) + min;
    }

    function loop() {
        ctx.fillStyle = "rgba(255, 255, 255, 0)";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < balls.length; i++) {
            let b = balls[i];
            if (b.r < 0) continue;
            ctx.fillStyle = b.color;
            ctx.beginPath();
            ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
            ctx.fill();
            b.update();
        }
        if (longPressed == true) {
            multiplier += 0.2;
        } else if (!longPressed && multiplier >= 0) {
            multiplier -= 0.4;
        }
        removeBall();
        requestAnimationFrame(loop);
    }

    function removeBall() {
        for (let i = 0; i < balls.length; i++) {
            let b = balls[i];
            if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
                balls.splice(i, 1);
            }
        }
    }
}
clickEffect();//调用
</script>

<span class="pointer"></span>
<style>
.pointer {
    --size:30px;pointer-events: none;
    width: var(--size);
    height: var(--size);
    background: rgba(247,56,89,0.2);
    position: fixed;
    border-radius: 50%;
    transform: translate3d(-50%,-50%,0) scale(0);
    transition: transform 0.3s;
    border: 2px solid rgba(247,56,89,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.pointer:before {
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    display: block;
    background: none;
    border-radius: 50%;
    transition: background 0.5s,box-shadow 0.5s;
}

.is-pressed .pointer {
    transform: translate3d(-50%,-50%,0) scale(1);
}

.is-longpress .pointer {
    animation: wobble 0.2s infinite alternate;
}

.is-longpress .pointer:before {
    background: #faf15d;
    box-shadow: 0 0 5px rgba(250,241,93,0.5);
    animation: wobble2 0.2s infinite alternate;
}

@keyframes wobble {
    to {
        transform: translate3d(-50%,-50%,0) scale(0.5);
    }
}

@keyframes wobble2 {
    to {
        transform: scale(0.5);
    }
}
</style>
<!-- 鼠标点击烟花🎆炸裂效果 -->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

<!-- 百度统计代码 -->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?445a039aa5db7418a3f841cacc58580e";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

posted @ 2020-03-08 23:05 CoderWGB 阅读(846) 评论(13) 编辑收藏举报

刷新页面返回顶部

CoderWGB

Stay hungry, stay foolish. Talk is cheap, show me the code.