简单的博客页面客制化ver2
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>
皮肤：
页面定制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代码）：
Border页首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实现部分
可能会做反馈栏和评论区样式
可能会继续做未完成的移动端兼容
呈上源码以供分享
（新版效果图
（旧版效果图对比
