记录博客园的一些样式代码
选择的皮肤是当前最流行的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&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="240" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><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&type=2&auto=1&width=220&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>
未经作者授权，禁止转载
本文来自博客园，作者：CoderWGB，转载请注明原文链接：https://www.cnblogs.com/wgb1234/p/12445765.html
THE END
