博客园小功能、美化笔记
以下部分教程来源于互联网，仅作为本人学习所用。
一、每日一言
在侧边栏加入以下 css 代码即可。可以对代码中的中文内容进行自定义修改，每刷新一次界面，就会选择其中一条进行显示：
<meta charset="utf-8"/>
<h2><B>一言（ヒトコト）</B></h2>
<div class="daily a pome">
<div class="daily pome" id="qwq"></div>
<script>
var st=["<center>你不是一个人<br><center> ——lmh<br>", "<center>这不是bzoj原题吗<br><center> ——hjw<br>", "<center>我去骗钥匙啦~<br><center> ——yxy<br>", "<center>你无聊吗，快去刷题。<br><center> ——lmh<br>", "<center>loj.ac<br><center> ——lmh<br>", "<center>想和zn谈恋爱<br><center> ——lmh<br>", "<center>zc大人我错了！<br><center> ——wjd<br>", "<center>zn：有没有说出题人谁啊<br><center>yxy：好像是lxq？？<br><center>zn：暴打出题人<center>yxy：老师！！！<br>", "<center>学习线性解决a+b问题<br><center> ——zn<br>", "<center>代码已经给出，<br><center> 读者自证不难。<br><center> ——lrj", "<center>啊<br><center>我要女装！<br><center> ——zzx<br>", "<center>辛苦了~<br><center> ——lmh<br>", "<center>棒！<br><center> ——lmh<br>", "<center>学OI后悔三年<br><center>不学OI后悔一辈子/呲牙<br><center> ——zn<br>", "<center>又把1e3+7写成1e4+7了……<br><center>干脆叫万柒吧。。<br><center> ——yxy<br>", "<center>即得易见平凡，由上自证显然，留作习题答案略，读者自证不难。<br><center>反之亦然同理，推论自然成立，略去过程Q.E.D，由上可知证毕。<br><center> ——lca", "<center>我要让zn提头来见我<br><center> ——lmh<br>", "<center>这年头 expert 很难么？<br><center> ——zn<br>", "<center>成为很厉害很厉害的人，最重要的，就是要热血，永远也不要让你的血凉下去。<br><center> ——hzwer", "<center>高中的 OI 刚刚开始，希望不要那么快就凋零。兔纸的时间已经不多，请把自己选择的路，好好走下去。<br><center> ——Bunnycxk", "<center>Who laughs last laughs best!<br><center> ——Emma", "<center>别哭，眼泪会冻住的。<br><center> ——那年那兔那些事儿" ];
var num;
num=Math.floor((Math.random()*22));
document.write(st[num]);
var cli;
</script>
<div style="font-size: 1em; text-align: center; line-height: 1.5em; display: none; " id="qwq"></div>
<div style="text-align: right; margin-top: 15px; font-size: 0.9em; color: #666; display: none; " id="qwq"></div>
</div>
二、鼠标点击特效
在页脚 html 代码处加入以下 css 代码。点击鼠标时，就会在页面中显示特效。可以修改第六行代码中双引号内的内容：
<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>
三、改变博客图标
在页首 html 代码处加入以下代码即可，记得将 linkObject.href 内的链接修改为你自己的：
<div style = "display:none;" >把博客园图标替换成自己的图标 </div>
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "https://your-photos.jpg";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
<div style = "display:none;" >把博客园图标替换成自己的图标end </div>
四、动态显示博客标题
在离开当前博客的标签页以及点进去的时候会出现该效果，2s 之后会消失。需要在页脚 html 中加入以下代码，可以自定义修改 document.title 后的文字：
<div style = "display:none;" > 浏览器标题切换 </div>
<script>
var OriginTitile = document.title; // 保存之前页面标题
var titleTime;
document.addEventListener('visibilitychange', function(){
if (document.hidden){
document.title ='你不要我了么？qwq'; // 切出文字
clearTimeout(titleTime);
}else{
document.title = '欢迎回来～'; // 切入文字
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 1000); // 2秒后恢复原标题
}
});
</script>
<div style = "display:none;" > 浏览器标题切换end </div>
五、背景中的动态线条
将如下代码放入侧边栏：
<div style = "display:none;">动态线条</div>
<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.onresize=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>
<div style = "display:none;"> 动态线条end</div>
六、旋转立方体
在博客侧边栏的旋转立方体，记得将 img src 后的图片链接地址更改为你自己的：
<div style = "display:none;">旋转立方体</div>
<style>
/*最外层容器样式*/
.wrap {
width: 100px;
height: 100px;
margin: 150px;
position: relative;
}
/*包裹所有容器样式*/
.cube {
width: 50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
width: 100px;
height: 100px;
}
.cube .in_front {
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
</style>
<!-- 外层最大容器 -->
<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="https://your-photos.jpg" class="pic">
</div>
<!--后面图片 -->
<div class="out_back">
<img src="https://your-photos.jpg" class="pic">
</div>
<!--左面图片 -->
<div class="out_left">
<img src="https://your-photos.jpg" class="pic">
</div>
<!--右面图片 -->
<div class="out_right">
<img src="https://your-photos.jpg" class="pic">
</div>
<!--上面图片 -->
<div class="out_top">
<img src="https://your-photos.jpg" class="pic">
</div>
<!--下面图片 -->
<div class="out_bottom">
<img src="https://your-photos.jpg" class="pic">
</div>
<!--小正方体 -->
<span class="in_front">
<img src="https://your-photos.jpg" class="in_pic">
</span>
<span class="in_back">
<img src="https://your-photos.jpg" class="in_pic">
</span>
<span class="in_left">
<img src="https://your-photos.jpg" class="in_pic">
</span>
<span class="in_right">
<img src="https://your-photos.jpg" class="in_pic">
</span>
<span class="in_top">
<img src="https://your-photos.jpg" class="in_pic">
</span>
<span class="in_bottom">
<img src="https://your-photos.jpg" class="in_pic">
</span>
</div>
</div>
<div style = "display:none;">旋转立方体end</div>
七、添加背景图片
选择 simplememory 主题，然后添加如下代码，记得将 background: url 后的图片链接地址更改为你自己的：
/*simplememory*/
#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
font-size: 14px!important;
}
#home {
opacity: 0.80;
margin: 0 auto;
width: 85%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{
display: none !important;
}
body {
color: #000;
background: url(https://your-photos.jpg) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
width: 100%;
padding-left: 5px;
}
div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
width: 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}
#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}
将代码中的图片地址改成自己的就行。
八、雪花效果
（该功能需要开通 js 权限）在电脑本地新建一个文本文档，然后粘贴如下代码：
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;
})();
(function() {
var flakes = [],
canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
ctx = canvas.getContext("2d"),
flakeCount = 200, //雪花数量，数值越大雪花数量越多
mX = -100,
mY = -100;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function snow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < flakeCount; i++) {
var flake = flakes[i],
x = mX,
y = mY,
minDist = 150, //雪花距离鼠标指针的最小值，小于这个距离的雪花将受到鼠标的排斥
x2 = flake.x,
y2 = flake.y;
var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
dx = x2 - x,
dy = y2 - y;
if (dist < minDist) {
var force = minDist / (dist * dist),
xcomp = (x - x2) / dist,
ycomp = (y - y2) / dist,
deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
} else {
flake.velX *= .98;
if (flake.velY <= flake.speed) {
flake.velY = flake.speed
}
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; //雪花颜色
flake.y += flake.velY;
flake.x += flake.velX;
if (flake.y >= canvas.height || flake.y <= 0) {
reset(flake);
}
if (flake.x >= canvas.width || flake.x <= 0) {
reset(flake);
}
ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(snow);
};
function reset(flake) {
flake.x = Math.floor(Math.random() * canvas.width);
flake.y = 0;
flake.size = (Math.random() * 3) + 2; //加号后面的值，雪花大小，为基准值，数值越大雪花越大
flake.speed = (Math.random() * 1) + 0.5; //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.3; //加号后面的值，为基准值，范围0~1
}
function init() {
for (var i = 0; i < flakeCount; i++) {
var x = Math.floor(Math.random() * canvas.width),
y = Math.floor(Math.random() * canvas.height),
size = (Math.random() * 3) + 2, //加号后面的值，雪花大小，为基准值，数值越大雪花越大
speed = (Math.random() * 1) + 0.5, //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
opacity = (Math.random() * 0.5) + 0.3; //加号后面的值，为基准值，范围0~1
flakes.push({
speed: speed,
velY: speed,
velX: 0,
x: x,
y: y,
size: size,
stepSize: (Math.random()) / 30 * 1, //乘号后面的值，雪花横移幅度，为基准值，数值越大雪花横移幅度越大，0为竖直下落
step: 0,
angle: 180,
opacity: opacity
});
}
snow();
};
document.addEventListener("mousemove", function(e) {
mX = e.clientX,
mY = e.clientY
});
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
init();
})();
保存后，重命名为 xue.js，记得文件后缀是 .js，不能错了！
然后打开你自己的博客后台，找到文件选项，将你刚才新建的 xue.js 文件上传上去。
上传完成后，打开你上传的这个文件，复制该文件的链接。
将如下代码放在页尾，记得将 script src 后的链接改为你刚才复制的链接：
<div class="Snow">
<canvas id="Snow"></canvas>
</div>
<script src="https://your-files.js"></script>
将如下代码放入自定义 css，用于添加样式，背景颜色可以自己改变：
#Snow{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(125,137,95,0.1);
pointer-events: none;
}
九、去除页面广告
在页面定制 css 添加代码：
#google_ad_c1,#div-gpt-ad-1320933818841-0,#google_ad_c2,#div-gpt-ad-1320933818841-1,#ad_under_google{
display:none;
visibility：hidden;
}
#under_post_kb,
#under_post_news{
display:none;
}
#site_nav_under {
display: none;
}
.c_ad_block, .ad_text_commentbox {
display: none;
margin: 0;
padding: 0;
}
#ad_under_google {
height: 0;
overflow: hidden;
}
#ad_under_google a {
display: none;
}
#ad_t2{ display:none }
#div_digg{ display:none }
#author_profile_info{ display:none }
.postDesc{ display:none }
十、公告栏时钟
博客侧边栏公告代码（用的某位大佬的 js 文件）：
<!-- 添加公告栏时钟 -->
<div id="clockdiv">
<canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
页面定制 CSS 代码：
/* 定制公告栏时钟位置 */
#clockdiv {
/* left, center, right */
text-align: center;
}
十一、点击爱心效果
为页面添加鼠标点击心形特效，代码放在 “博客侧边栏公告（支持 HTML 代码）（支持 JS 代码）”框中，代码如下：
<!-- 为页面添加爱心特效 -->
<script type="text/javascript">
(function(window,document,undefined){
var hearts = [];
s
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}
catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>
