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权限

代码：

　　标题：

    
        YukiRinLL
    
    
        
 SutsuharaYuki
    

　　子标题：

 

    
        我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀.
        

            为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.
        

    
    
        
    ——波德莱尔 《恶之花》· 祝福
    

　　皮肤：

　　页面定制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 --未实现*/

　　博客侧边栏公告（支持HTML代码）（支持JS代码）：

　　页首Html代码：

 <script type="text/javascript">
    //
        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('');
    //]]>
    script>



<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('
').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>




<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>

　　页脚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(
        '
Contact with me
Email
Wechat
Github
QQ
'+text+' Theme By YukiRinLL'
    );
});

// 控制台输出信息
(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(''+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(" 关注");
    }
    if(option.url.indexOf("sidecolumn")>-1){
        //日历的两个换页按钮
        $('.CalNextPrev a:contains("<")').empty().prepend('');
        $('.CalNextPrev a:contains(">")').empty().prepend('');
        //多彩标签颜色
        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('');//位置
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 = $("").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>


<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实现部分

　　可能会做反馈栏和评论区样式

　　可能会继续做未完成的移动端兼容

　　呈上源码以供分享

（新版效果图

（旧版效果图对比