关于我的博客园美化这件事
关于我的博客园美化这件事
前言
一路过来换了很多主题，最终还是安定下来了，这件事最后再讲。下面还是先了解怎么美化
准备
先申请 js 权限
把皮肤改为 simpleMemory
正文
跟着这个文档一步一步配置，配置项放在侧边栏代码。
为了节约大家的时间我就把我的配置项放出来好了
侧边栏：
<script type="text/javascript">
window.cnblogsConfig = {
info: {
name: 'username', // 用户名
startDate: '2021-11-18', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
avatar: '', // 用户头像url
blogIcon: '', //图标url（可不设置）
},
code: {
type: 'hljs',
options: {
maxHeight: '70vh',
macStyle: true,
line: true,
hljs: {
theme: 'a11y-light',
languages: ['Python','javascript','html']
},
},
},
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
sidebar: {
titleMsg: '欢迎光临Schen的博客小站~~ ♥ ♥',
infoBackground: 'https://s4.ax1x.com/2021/12/13/oXFSpT.jpg',
navList: [
['友链', '地址', 'icon-addressbook_fill'],
//['xxx', '地址', '图标'],
],
},
banner: {
home: {
background: [
"背景url",
"背景url",
],
titleSource: 'one',
],
},
article: {
background: [
"背景url",
"背景url",
],
},
},
progressBar: {
color : '#77b6ff',
},
title: {
onblur: '(oﾟvﾟ)ノ Hi',
onblurTime: 500,
focus: '(*´∇｀*) 欢迎回来！',
focusTime: 1000,
},
footer: {
style: 1,
text: {
left: '左标语',
right: '右标语',
},
},
links: {
page: [ //友链
{
name: '', // 昵称
introduction: '', // 简介
avatar: '',
url: '' // 友链地址
},
],
},
rtMenu: {
qrCode: 'qq二维码',
downScrollDom: '#blog_post_info_block',
reward: {
alipay: '',
wechatpay: ''
},
},
animate: {
homeBanner: {
enable: true,
options: {
radius: 15,
density: 0.2,
color: 'random', // 颜色设置，“random” 为随机颜色
clearOffset: 0.3
}
},
articleTitle: {
enable: true,
},
articleBanner: {
enable: true,
},
background: {
enable: true,
options: {
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
}
},
bannerImages: {
enable: true,
options: {
itemNum: 5, // 图片拆分成几列
current: -1, // 初始图片的下标，如果为负数则为随机
sort: 1, // 1 代表每次向下加载一个图片，-1 代表每次向上加载一个图片
time: 5000 // 每次切换间隔时间，单位：毫秒
}
},
backgroundMouse: {
enable: true,
},
mouse: {
enable: true,
options: {
size: 8, // 中心圆点的大小，单位 px
sizeF: 36 // 外部边框的大小，单位 px
}
},
articleDirectory: {
position: 'right',
minBodyWeight: 1400,
autoWidthScroll: true,
},
articleSuffix: {
aboutHtml: "I am a good person",
},
}
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>
页首HTML：
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.οnresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
页尾HTML：
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法制❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script src="https://blog-static.cnblogs.com/files/Return-blog/xue.js"></script>
想说的话
不知不觉在博客美化这件事上浪费了这么多时间，回头才看清，博客美化是没有止境的。放出这些配置也是希望看到的人能在美化这件事上节省一些时间，见好就收吧。
