DIY博客的页面
去繁就简,去掉了一些不必要的功能。
针对新版本的特性做了更改,修正了一些bug。
自己水平不够,选了个比较顺眼的皮肤,大部分是套用网上现成的模板完成的。
具体定制的内容:
1.字体的修改
2.版面占比的调整
3.UI细节的修改(新增了代码框灰色背景)
4.加入了用户头像 和 一些修饰动图
5.时钟,Github conner,侧边分享栏,回到顶部按钮 等小插件
6.删除了 访客访问来源统计面板
7.添加了 城市天气插件
8.删除了 Live2d看板娘
9.图片放大功能(改善了双击放大的bug
10.图片分享动态浮窗
11.去掉了 flash音乐播放器
12.3D效果标签云
13.背景图更换(优化了随机壁纸分辨率)
14.背景漂浮线段的动态效果
15.鼠标点击浮现字幕的特效
16.删除了 QQ联系、一键加群 和 打赏功能
17.更改了推荐按钮
18.段落标题hover效果
19.去掉了 网址栏logo
20.自定义按钮栏
21.评论区默认字幕更改
22.标题栏下方冒泡动态效果
23.定制鼠标贴图
22.动态改变网页标题
需要先申请JS权限
代码:
标题:
<h1 style="text-align: right">
<span style="color: rgba(255, 255, 255, 1)">
<strong>YukiRinLL</strong>
</span>
<span style="font-style: italic">
<p> SutsuharaYuki</p>
</span>
</h1>
子标题:
<h2 style="text-align: right">
<span style="color: rgba(255, 255, 255, 1)">
<strong>我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀.</strong>
<br>
<strong> 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.</strong>
<br>
</span>
<span style="color: rgba(129, 215, 211, 1)">
<p> ——波德莱尔 《恶之花》· 祝福</p>
</span>
</h2>
皮肤:
![](https://i-blog.csdnimg.cn/blog_migrate/dff18c1a376f71a9b3806dee42d4f580.png)
页面定制CSS代码:
/*================================*/
#home {
zoom:0.85;/*缩放 0.85*/
opacity: 0.80;/*透明度 默认0.80*/
margin: 0 auto;
width: 75%;/*原始65 自定义55*/
min-width: 980px;/*页面顶部的宽度 默认980*/
background-color: rgba(245, 245, 245, 0.5);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
/*================================*/
body {
color: #000;
/*原来用的背景图*/
background: url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg')fixed;/*背景图*/
background-size: cover;
background-repeat: no-repeat;
/*字体修改*/
font-family: "Helvetica Neue",'Lato', "PingFang SC", "Microsoft YaHei", sans-serif,Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;/*set14*/
line-height: 2;
min-height: 101%;
color: #555;
}
/*博客标题*/
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
font-size: 36px/*set 26*/;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em set 1.5*/
margin-top: 10px;/*原始 15px */
margin-bottom: 20px;
text-align: center;
color: #81D7D3;
}
.headermaintitle {
display: inline-block;
vertical-align: top;
line-height: 36px !calc;
font-size: 26px;
font-weight: normal;
color:#fff !important;
font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
}
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/
line-height: 1.8;
color: #111;
font-weight: bold;
text-align: right;
float: right;
}
#navigator{
width: 61.8%;/*customed*/
background-color: rgba(0,0,0,0.35);
}
#navList a:link, #navList a:visited, #navList a:active{
color: #eee;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 90%;/*默认100*/
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*================================*/
/* 修改鼠标样式为图片 */
*{
cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku1.png'), auto;
}
a{
cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku2.png'), auto;
}
/*反馈栏*/
.feedback_area_title {
margin-bottom:0;
border-bottom:1px solid #EDEDED;
}
.feedbackItem {
background-color: #F5F5F5;
margin-top:10px;
}
.feedbackListSubtitle {
padding:10px 10px 0 10px;
}
.feedbackCon {
padding:10px;
margin:0;
}
.feedbackCon img {
border-radius: 50%;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.feedbackCon .body_right {
padding:0 10px 0 0;
}
.feedbackCon .comment_vote {
padding:10px 0 0 0;
}
/*评论区*/
#comment_nav {
margin-top:10px;
}
#commentform_title {
margin-bottom:0;
border-bottom:1px solid #EDEDED;
}
/*button input 美化*/
.input_my_zzk{
border-radius:3px;
border: 1px solid #000000;
width:120px;
height:26px;
}
input.btn_my_zzk {
height: 30px;
padding:5px 10px;
vertical-align: none;
border-radius:3px;
border:1px solid;
}
.comment_btn{
height: 38px;
border-radius:3px;
border:1px solid;
}
/*代码框背景*/
.cnblogs_code {
background: #D6D6D6 !important;
}
/*代码框一些其他定制*/
.code_img_closed,.code_img_opened {
cursor:pointer;
}
.cnblogs_code_collapse {
cursor:pointer;
border:0;
padding:0;
}
.cnblogs_code_toolbar {
display:none;
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: rgba(33, 160, 139, 0.9);
}
#topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
#tbCommentBody{
width: 100%;/*默认100*/
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
background: rgba(255, 255, 255, 0);
}
.entrylist{
background: rgba(255, 255, 255, 0.5);
}
/*推荐置顶设置*/
#div_digg{
position:fixed;
bottom:5px;
width:140px;
right:650px;
border:2px solid #6FA833;
padding:10px;
background-color:#fff;
border-radius:5px 5px 5px 5px !important;
box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}
#div_digg:hover {
box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5);
}
/*段落标题Hover效果设置*/
#cnblogs_post_body
{
color: black;
font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
font-size: 15px;
}
#cnblogs_post_body h1 {
background: #169FE6;
border-radius: 4px 4px 4px 4px;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 23px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 0 0;
padding: 5px 0 5px 5px;
transition: all 0.8s;
}
#cnblogs_post_body h2 {
background: #169FE6;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 20px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 0 0;
padding: 5px 0 5px 5px;
transition: all 0.8s;
}
#cnblogs_post_body h3 {
background: #D191FF;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 0 0;
padding: 5px 0 5px 5px;
transition: all 0.8s;
}
#cnblogs_post_body h4{
background: #A8D08D;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 0 0;
padding: 5px 0 5px 5px;
transition: all 0.8s;
}
#cnblogs_post_body h1:hover {
transform: rotateX(360deg);
background-color: #0066FF;
}
#cnblogs_post_body h2:hover {
transform: rotateX(360deg);
background-color: #0066FF;
}
#cnblogs_post_body h3:hover {
transform: rotateX(360deg);
}
#cnblogs_post_body h4:hover {
transform: rotateX(360deg);
}
/*QQ_contact --未实现*/
![](https://i-blog.csdnimg.cn/blog_migrate/cf9b38efe382d996578ce12017a5df53.png)
博客侧边栏公告(支持HTML代码)(支持JS代码):
页首Html代码:
<!--随机背景图-->
<script type="text/javascript">
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg";
bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_99dc832a4dbb6bb3d62a292e8cf12f8d1652b5fd.jpg";
bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_92206e6dd9468cf5b3d3202f7f66c7dfc64d4e04.jpg";
bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044364624-3.jpg";
bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_1-1Z10H24410-50.jpg";
bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_81877565632b8c89eacd8bd0ae26938199d49f79.jpg";
bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_e6674c08fbe0db19383ee84310c39459c2b44453gai2.jpg";
bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720150814130149.jpg";
bodyBgs[9] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044362493-19.jpg";
bodyBgs[10] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170133.jpg";
bodyBgs[11] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170140.jpg";
bodyBgs[12] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170216.jpg";
bodyBgs[13] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044361E0-2.jpg";
bodyBgs[14] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170227.jpg";
bodyBgs[15] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_o_IMG_107gai.jpg";
bodyBgs[16] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443C944-15.jpg";
bodyBgs[17] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443B236-14.jpg";
//bodyBgs[18] = "";
//bodyBgs[19] = "";
//bodyBgs[22] = "";
//bodyBgs[23] = "";
//bodyBgs[24] = "";
var randomBgIndex = Math.round( Math.random() * 17 );
//输出随机的背景图
document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ')fixed;background-size:cover;no-repeat 50% 0}</style>');
//]]>
</script>
<!--Wider的一些样式-->
<link href="https://blog-static.cnblogs.com/files/SutsuharaYuki/font-awesome.min.css" rel="stylesheet">
<!-- 定时器 -->
<script>
function customTimer(inpId, fn) {
if ($(inpId).length) {
fn();
}
else {
var intervalId = setInterval(function () {
if ($(inpId).length) { //如果存在了
clearInterval(intervalId); // 则关闭定时器
customTimer(inpId, fn); //执行自身
}
}, 100);
}
}
function generateTagClouds() {
$('.catListTag>ul').wrap('<div class=\'wrap\' ></div>').parent().css({ 'width': '240px', 'height': '240px' });
var options = {
'range': [-200, 300],
'gravity': -10,
'xPos': 0.5,
'yPos': 0.5,
'gravityVector': [0, 0, 1],
'interval': 100,
'hoverGravityFactor': 0
};
$('div.wrap').starfieldTagCloud(options);
}
$(function () {
...
customTimer('.catListTag', generateTagClouds);
...
});
</script>
<!-- 自定制样式文件以及脚本 -->
<!-- 分享 --><!-- 外源加载 -->
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" >
var jiathis_config={
siteNum:15,
sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",
summary:"",
boldNum:6,
showClose:true,
shortUrl:false,
hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->
页脚Html代码:
<script src="https://blog-static.cnblogs.com/files/SutsuharaYuki/MathJax.js?config=TeX-AMS_HTML"></script>
<script src="https://files.cnblogs.com/files/SutsuharaYuki/SmoothScroll.min.js"></script>
<script type="text/javascript">
//var canShowAdsense=function(){return !!0};//去广告
$(document).ready(function(){
//美化footer
var footer=$("#footer");
var text=footer.text();
footer.empty();
footer.prepend(
'<div id="customFooter"><h1 class="footer-title">Contact with me</h1><ul><li><a href="#" target="_blank">Email</a></li><li><a href="#" target="944989026@qq.com">Wechat</a></li><li><a href="#" target="_blank">Github</a></li><li><a href="#" target="https://github.com/YukiRinLL">QQ</a></li></ul><p id="copyright">'+text+' Theme By <a href="https://www.cnblogs.com/SutsuharaYuki/" target="http://wpa.qq.com/msgrd?v=3&uin=944989026&site=qq&menu=yes" style="color:#707070">YukiRinLL</a></p></div>'
);
});
// 控制台输出信息
(function(a){
if (!a) return;
var msg = "%c欢迎访问YukiRinLL的博客,\n鄙人蒟蒻,望各位大佬多加指点.\n ";
if (window.chrome) {
a.log("%c ", "padding:50px;background:url('https://pic.cnblogs.com/avatar/1683480/20190509225808.png')no-repeat;background-size: contain;");
a.log(msg, "color:#0080FF");
} else {
a.log(msg.replace(/%c/g,''));
}
})(top.console);
//ajaxComplete
$(document).ajaxComplete(function(event, xhr, option) {
//评论头像
if(option.url.indexOf("GetComments")>-1){setTimeout(function(){
$.each($(".blog_comment_body"),function(index,ele){
var self=$(ele);
var id=self.attr("id").split("_")[2];
var imgSrc=$("#comment_"+id+"_avatar").html()||"http://pic.cnblogs.com/avatar/simple_avatar.gif";
self.before('<img src="'+imgSrc+'" style="float:left;" class="author_avatar">');
});
},200)};
//评论框水印+调整页脚
if(option.url.indexOf("CommentForm")>-1){setTimeout(function(){$("#tbCommentBody").attr("placeholder","来玩嘛大爷╰( ̄▽ ̄)╭")},200)}
if(option.url.indexOf("GetFollowStatus")>-1){
//美化“加关注”按钮
if($("#sideBar #p_b_follow a").text()=="+加关注")
$("#sideBar #p_b_follow :contains('+加关注')").html("<i class=\"fa fa-heart\" aria-hidden=\"true\"></i> 关注");
}
if(option.url.indexOf("sidecolumn")>-1){
//日历的两个换页按钮
$('.CalNextPrev a:contains("<")').empty().prepend('<i class="fa fa-chevron-left" aria-hidden="true"></i>');
$('.CalNextPrev a:contains(">")').empty().prepend('<i class="fa fa-chevron-right" aria-hidden="true"></i>');
//多彩标签颜色
var taglist=document.querySelectorAll('#sidebar_postcategory li a')
for(var i = 0; i < taglist.length; i++) {
taglist[i].className = 'color-'+Math.floor(Math.random()*12+1);
}
}
});
//用来在head标签中添加link标签
function createLink(URL,lnkId,charset,media){
var head = document.getElementsByTagName('head')[0],linkTag = null;
if(!URL){return false;}
linkTag = document.createElement('link');
linkTag.setAttribute('rel','shortcut icon');
linkTag.setAttribute('type','image/x-icon');
linkTag.href = URL;
head.appendChild(linkTag);
};
createLink('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_u=2686629685,1606419266_fm=26_gp=0.jpg');
var head=$("#header");
//页首动态效果
head.prepend('<canvas id="bubble-canvas" style="position:absolute;left:half;top:half;"></canvas>');//位置
var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true;
function initHeader() {
largeHeader = document.getElementById('header');
_width = largeHeader.offsetWidth;
// log(largeHeader.offsetWidth);
_height = largeHeader.offsetHeight;
// log(largeHeader.offsetHeight);
_target = {x: 0, y: _height};
_canvas = document.getElementById('bubble-canvas');
_canvas.width = _width;
_canvas.height = _height;
_ctx = _canvas.getContext('2d');
_circles = [];
for(var x = 0; x < _width*0.5; x++) {
var c = new Circle();
_circles.push(c);
}
animate();
};
function addListeners() {
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
};
function scrollCheck() {
if(document.body.scrollTop > _height) animateHeader = false;
else animateHeader = true;
};
function resize() {
_width = largeHeader.offsetWidth;
_height = largeHeader.offsetHeight;
_canvas.width = _width;
_canvas.height = _height;
};
function animate() {
if(animateHeader) {
_ctx.clearRect(0,0,_width,_height);
for(var i in _circles) {
_circles[i].draw();
}
};
requestAnimationFrame(animate);
};
function Circle() {
var _this = this;
(function() {
_this.pos = {};
init();
})();
function init() {
_this.pos.x = Math.random()*_width;
_this.pos.y = _height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
};
this.draw = function() {
if(_this.alpha <= 0) {
init();
};
_this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
_ctx.beginPath();
_ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
_ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
_ctx.fill();
};
};
addListeners();
initHeader();
//文章列表美化
function breakSameDayArticles(article_list){
var _i=0;
while(_i<article_list.length) {
var dayTitle=article_list[_i].getElementsByClassName('dayTitle')[0];
var postTitle=article_list[_i].getElementsByClassName('postTitle');
var postCon=article_list[_i].getElementsByClassName('postCon');
var postDesc=article_list[_i].getElementsByClassName('postDesc');
if(postTitle.length>1) {
for (var _j = 0; _j < postTitle.length; _j++) {
var day=document.createElement('div');
day.className='day';
day.appendChild(dayTitle.cloneNode(true));
day.appendChild(postTitle[_j].cloneNode(true));
day.appendChild(postCon[_j].cloneNode(true));
day.appendChild(postDesc[_j].cloneNode(true));
article_list[_i].parentNode.insertBefore(day,article_list[_i]);
_i++;
}
article_list[_i].parentNode.removeChild(article_list[_i]);
_i--;
}
_i++;
}
};
function parseToDOM(str){
var div = document.createElement("div");
if(typeof str == "string")
div.innerHTML = str;
return div.childNodes[0];
};
function initBeauty(){
var article_list=document.getElementsByClassName('day');
breakSameDayArticles(article_list);
beautyArticles(article_list);
};
// //消除遮罩
// document.addEventListener("DOMContentLoaded", function(){
// document.getElementById('loading').style.display = "none";
// });
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //关闭js加载过程信息
messageStyle: "none", //不显示信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ["$", "$"] ], //行内公式选择$
displayMath: [ ["$$","$$"] ], //段内公式选择$$
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'], //避开某些标签
// ignoreClass:"comment-content" //避开含该Class的标签
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"], //可选字体
showMathMenu: false //关闭右击菜单显示
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
<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>
<!-- fork github 控件 -->
<a href="https://github.com/YukiRinLL" class="github-corner" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; 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 type="text/javascript">
WIDGET = {FID: '9fVgD01DNt'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>
部分模板在套用的时候根据自己的情况做了一些改变
一些脚本的浏览器可信还没做好
去掉了flash实现部分
可能会做反馈栏和评论区样式
可能会继续做未完成的移动端兼容
呈上源码以供分享
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/72eca545338c9447d0837d4b34e2dc05.png)
DIY博客的页面
写在前面:
申请了博客第一件事当然是整一个炫酷的界面。
自己水平不够,选了个比较顺眼的皮肤,大部分是套用网上现成的模板完成的。
具体定制的内容:
1.字体的修改
2.版面占比的调整
3.UI细节的修改(新增了代码框灰色背景)
4.加入了用户头像 和 一些修饰动图
5.时钟,Github conner,侧边分享栏,回到顶部按钮 等小插件
6.添加了 访客访问来源统计面板
7.添加了 城市天气插件
8.Live2d看板娘 更新了内容(后续可能添加语音声音)
9.图片放大功能
10.图片分享动态浮窗
11.新增了 flash音乐播放器
12.3D效果标签云
13.背景图更换(新增了随机壁纸)
14.背景漂浮线段的动态效果
15.鼠标点击浮现字幕的特效
16.QQ联系、一键加群 和 打赏功能
17.更改了推荐按钮
18.段落标题hover效果
19.网址栏logo
20.自定义按钮栏
21.评论区默认字幕更改
22.标题栏下方冒泡动态效果
23.定制鼠标贴图
22.动态改变网页标题
需要先申请JS权限
代码:
标题:
1 <h1 style="text-align:right"><span style="color:#FFFFFF"><strong>YukiRinLL</strong></h1>SutsuharaYuki
子标题:
1 <h2 style="text-align:right">
2 <span style="color:#FFFFFF">
3 <strong>我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀.</strong>
4 <br />
5 <strong> 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.
6 </strong>
7 <br />
8 <strong>
9 <span style="color:#81D7D3"> ——波德莱尔 《恶之花》· 祝福
10 </strong>
11 </strong>
12 </span>
13 </h2>
皮肤:
![](https://i-blog.csdnimg.cn/blog_migrate/dff18c1a376f71a9b3806dee42d4f580.png)
页面定制CSS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/cf9b38efe382d996578ce12017a5df53.png)
博客侧边栏公告(支持HTML代码)(支持JS代码):
页首Html代码:
页脚Html代码:
部分模板在套用的时候根据自己的情况做了一些改变
一些脚本的浏览器可信还没做好
图片放大功能还存在一些小问题
(1.点击展开代码“+”时会触发展开 2.放大后在最上层显示不完全
3.评论区相关内容有时候加载不出来 )
后续可能会添加 Pet 、flash小游戏 之类的新功能
可能会做反馈栏和评论区样式
可能会继续做未完成的移动端兼容
呈上源码以供分享
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/3a9f6aaf6dd8028a3129ec2cfa61fecf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d4801f4d6861fc7e11cd1603adf56081.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c518dd68b7796147281e0d30d5fb8cea.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6ca8c2a8cf8eb77aa3e37bb4b58d6dad.png)