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

　　皮肤：

　　页面定制CSS代码：

  1 /*字体修改*/
  2 body {
  3     font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  4     font-size: 14px;
  5     line-height: 2;
  6     color: #555;
  7 }
  8 /*博客标题*/
  9 #blogTitle h1 {
 10     font-size: 26px;
 11     font-weight: bold;
 12     line-height: 1.5em;
 13     margin-top: 10px;
 14     margin-bottom: 20px;
 15     text-align: center;
 16 
 17 }
 18 .headermaintitle {
 19     display: inline-block;
 20     vertical-align: top;
 21     line-height: 36px ！calc;
 22     font-size: 26px;
 23     font-weight: normal;
 24    color:#fff !important;
 25     font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
 26 }
 27 #home {
 28     zoom:0.85;/*缩放*/
 29     opacity: 0.80;/*透明度 默认0.80*/
 30     margin: 0 auto;
 31     width: 20%;/*原始65 自定义38.2*/
 32     min-width: 980px;/*页面顶部的宽度 默认980*/
 33     background-color: rgba(245, 245, 245, 0.7);
 34     padding: 30px;
 35     margin-top: 50px;
 36     margin-bottom: 50px;
 37     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 38 }
 39 body {
 40     color: #000;
 41 /*
 42     /*原来用的背景图*/
 43     background: url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg')fixed;/*背景图*/
 44     background-size: cover;
 45     background-repeat: no-repeat;
 46 */
 47     font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 48     font-size: 12px;
 49     min-height: 101%;
 50 }
 51 #blogTitle {
 52     height: 100px;  /*高度*/
 53     clear: both;
 54     background-color: rgba(245, 245, 245, 0);
 55 }
 56 #blogTitle h1 {
 57     font-size: 36px;
 58     font-weight: bold;
 59     line-height: 1.8em;/*原始 1.6em*/
 60     margin-top: 10px;/*原始 15px */
 61     color: #548B54;
 62 }
 63 #blogTitle h2 {
 64     font-weight: normal;
 65     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
 66     line-height: 1.8;
 67     color: #111;
 68     font-weight: bold;
 69     text-align: right;
 70     float: right; 
 71 }
 72 #navigator{
 73     background-color: rgba(33, 160, 139, 0.9);
 74 }
 75 #navList a:link, #navList a:visited, #navList a:active{
 76     color: #eee;
 77     font-size: 18px;
 78     font-weight: bold;
 79 }
 80 .blogStats{
 81     color: #eee;
 82 }
 83 .postTitle {
 84     border-left: 8px solid rgba(33, 160, 139, 0.68);
 85     margin-left: 10px;
 86     margin-bottom: 10px;
 87     font-size: 20px;
 88     clear: both;
 89 }
 90 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
 91     color: #21759b;
 92     transition: all 0.4s linear 0s;
 93 }
 94 .postTitle a:hover {
 95     margin-left: 30px;
 96     color: #0f3647;
 97     text-decoration: none;
 98 }
 99 .postCon {
100     float: right;
101     line-height: 1.5em;
102     width: 100%;
103     clear: both;
104     padding: 10px 0;
105 }
106 .day .postTitle a {
107     padding-left: 10px;
108 }
109 .day {
110     background: rgba(255, 255, 255, 0.5);
111 }
112 
113 /* 修改鼠标样式为图片 */
114 *{
115      cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku1.png'), auto;
116 }
117 a{
118      cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku2.png'), auto;
119 }
120 
121 
122 /*反馈栏*/
123 .feedback_area_title {
124     margin-bottom:0;
125     border-bottom:1px solid #EDEDED;
126 }
127 .feedbackItem {
128     background-color: #F5F5F5;
129     margin-top:10px;
130 }
131 .feedbackListSubtitle {
132     padding:10px 10px 0 10px;
133 }
134 .feedbackCon {
135     padding:10px;
136     margin:0;
137 }
138 .feedbackCon img {
139     border-radius: 50%;
140     -webkit-transition: all 0.6s ease-out;
141     -moz-transition: all 0.5s ease-out;
142     -ms-transition: all 0.5s ease-out;
143     -o-transition: all 0.5s ease-out;
144     transition: all 0.5s ease-out;
145 }
146 .feedbackCon img:hover {
147     -webkit-transform: rotateZ(360deg);
148     -moz-transform: rotateZ(360deg);
149     -ms-transform: rotateZ(360deg);
150     -o-transform: rotateZ(360deg);
151     transform: rotateZ(360deg);
152 }
153 .feedbackCon .body_right {
154     padding:0 10px 0 0;
155 }
156 .feedbackCon .comment_vote {
157     padding:10px 0 0 0;
158 }
159 /*评论区*/
160 #comment_nav {
161     margin-top:10px;
162 }
163 #commentform_title {
164     margin-bottom:0;
165     border-bottom:1px solid #EDEDED;
166 }
167 /*button input 美化*/
168 .input_my_zzk{
169 border-radius:3px;
170 border: 1px solid #000000;
171 width:120px;
172 height:26px;
173 }
174 input.btn_my_zzk {
175     height: 30px;
176    padding:5px  10px;
177     vertical-align: none;
178 border-radius:3px;
179 border:1px solid;
180 }
181 .comment_btn{
182   height: 38px;
183 border-radius:3px;
184 border:1px solid;
185 }
186 
187 /*代码框背景*/
188 .cnblogs_code {
189     background: #D6D6D6 !important;
190 }
191 /*代码框一些其他定制*/
192 .code_img_closed,.code_img_opened {
193     cursor:pointer;
194 }
195 .cnblogs_code_collapse {
196     cursor:pointer;
197     border:0;
198     padding:0;
199 }
200 .cnblogs_code_toolbar {
201     display:none;
202 }
203 
204 
205 /*文章附加信息*/
206 .postDesc {   
207     background: url(images/posted_time.png) no-repeat 0 1px;
208     color: #757575;
209     float: left;
210     width: 100%;
211     clear: both;
212     text-align: left;     
213     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
214     font-size: 13px;
215     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
216     margin-top: 20px;
217     line-height: 1.8;
218     padding-bottom: 35px;
219 }
220 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
221 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
222 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
223 {
224     background: rgba(255, 255, 255, 0.5);
225     margin-bottom: 35px;
226     word-wrap: break-word;
227 }
228 .CalTitle{
229     background: rgba(255, 255, 255, 0);
230 }
231 .catListTitle{
232     background-color: rgba(33, 160, 139, 0.9);
233 }
234 #topics{
235     background: rgba(255, 255, 255, 0.5);
236 }
237 .c_ad_block{
238     display: none;
239 }
240 #tbCommentBody{
241     width: 100%;
242     height: 200px;
243     background: rgba(255, 255, 255, 0.5);
244 }
245 #q{background: rgba(255, 255, 255, 0);}
246 .CalNextPrev{background: rgba(255, 255, 255, 0);}
247 .cnblogs_code{
248     background: rgba(255, 255, 255, 0);    
249 }
250 .cnblogs_code div{
251     background: rgba(255, 255, 255, 0);    
252 }
253 .cnblogs_code_toolbar{
254     background: rgba(255, 255, 255, 0);  
255 }
256 .entrylist{
257     background: rgba(255, 255, 255, 0.5);  
258 }
259 
260 
261 /*推荐置顶设置*/
262  #div_digg{
263      position:fixed;
264      bottom:5px;
265      width:140px;
266      right:650px;
267      border:2px solid #6FA833;
268      padding:10px;
269      background-color:#fff;
270      border-radius:5px 5px 5px 5px !important;
271      box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
272    }
273    #div_digg:hover {
274       box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5);
275    }
276 
277 /*段落标题Hover效果设置*/
278    #cnblogs_post_body
279    {
280        color: black; 
281        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
282        font-size: 15px;
283    }
284    #cnblogs_post_body h1    {
285        background: #169FE6;
286        border-radius: 4px 4px 4px 4px;
287          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
288          font-size: 23px;
289          font-weight: bold;
290          height: 25px;
291          line-height: 25px;
292        margin: 18px 0 0 0;
293        padding: 5px 0 5px 5px;
294        transition: all 0.8s;
295    }
296    #cnblogs_post_body h2    {
297        background: #169FE6;
298        border-radius: 4px 4px 4px 4px;
299        color: #FFFFFF;
300          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
301          font-size: 20px;
302          font-weight: bold;
303          height: 25px;
304          line-height: 25px;
305        margin: 18px 0 0 0;
306        padding: 5px 0 5px 5px;
307        transition: all 0.8s;
308    }
309    #cnblogs_post_body h3    {
310        background: #D191FF;
311        border-radius: 4px 4px 4px 4px;
312        color: #FFFFFF;
313          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
314          font-size: 18px;
315          font-weight: bold;
316          height: 25px;
317          line-height: 25px;
318        margin: 18px 0 0 0;
319       padding: 5px 0 5px 5px;
320        transition: all 0.8s;
321    }
322    #cnblogs_post_body h4{
323       background: #A8D08D;
324        border-radius: 4px 4px 4px 4px;
325        color: #FFFFFF;
326          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
327          font-size: 18px;
328          font-weight: bold;
329         height: 25px;
330          line-height: 25px;
331        margin: 18px 0 0 0;
332        padding: 5px 0 5px 5px;
333        transition: all 0.8s;
334    }
335    #cnblogs_post_body h1:hover {
336        transform: rotateX(360deg);
337        background-color: #0066FF;
338    }
339    #cnblogs_post_body h2:hover {
340        transform: rotateX(360deg);
341        background-color: #0066FF;
342    }
343    #cnblogs_post_body h3:hover {
344        transform: rotateX(360deg);
345    }
346    #cnblogs_post_body h4:hover {
347        transform: rotateX(360deg);
348 }
349 
350 /* 看板娘 */
351 canvas#live2dcanvas {
352 
353     border: 0 !important;
354     position:absolute; bottom:0; right:0;
355 }
356 /* 看板娘 */
357 
358 /*宠物pet*/
359 /*QQ联系*/

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

  1 
  2 <style type="text/css">
  3 .dashboard{
  4     background: #fff;
  5     z-index: 1;
  6     position: relative;
  7     overflow: hidden;
  8     margin: 20px;
  9 }
 10 .dashboard a{
 11     color: #5a5f69;
 12     float: left;
 13     width: calc(25% - 4px);
 14     height: 51px;
 15     display: block;
 16     font-size: 26px;
 17     line-height: 51px;
 18     text-align: center;
 19     border-radius: 100%;
 20     margin: 2px;
 21 }
 22 style>
 23 
 24 
 25 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/ujq3/RoundClock.js">
 26   var dom = document.getElementById('clock');
 27   var ctx = dom.getContext('2d');
 28   var width = ctx.canvas.width;
 29   var height = ctx.canvas.height;
 30   var r = width / 2;
 31   //定义钟盘
 32   function drawBackground(){
 33       ctx.save();
 34       ctx.translate(r, r);
 35       ctx.beginPath();
 36       ctx.lineWidth = 10;
 37       ctx.font ='18px Arial';
 38       ctx.textAlign = 'center'
 39       ctx.textBaseline = 'middle'
 40       ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
 41       ctx.stroke();
 42       var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 43     //遍历获取坐标
 44     hourNumbers.forEach(function(number, i){
 45         var rad = 2 * Math.PI / 12 * i;
 46         var x = Math.cos(rad) * (r - 30);
 47         var y = Math.sin(rad) * (r - 30);
 48         ctx.fillText(number, x ,y);
 49     })
 50     //定义刻度
 51     for(var i=0;i<60;i++){
 52         var rad = 2 * Math.PI / 60 * i;
 53         var x = Math.cos(rad) * (r - 18);
 54         var y = Math.sin(rad) * (r - 18);
 55         ctx.beginPath();
 56         if(i % 5 == 0){
 57             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
 58             ctx.fillStyle = '#000';
 59         }else{
 60             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
 61             ctx.fillStyle = '#ccc';
 62         }
 63         ctx.fill();
 64     }
 65 }
 66 //定义时钟
 67 function drawHour(hour,minute){
 68     ctx.save();
 69     ctx.beginPath();
 70     var rad = 2 * Math.PI / 12 * hour;
 71     var mrad = 2 * Math.PI / 12 / 60 * minute;
 72     ctx.rotate(rad + mrad);
 73     ctx.lineWidth = 6;
 74     ctx.lineCap= 'round';
 75     ctx.moveTo(0 ,10);
 76     ctx.lineTo(0 ,-r / 2);
 77     ctx.stroke();
 78     ctx.restore();
 79 }
 80 //定义分钟
 81 function drawMinute(minute,second){
 82     ctx.save();
 83     ctx.beginPath();
 84     var rad = 2 * Math.PI / 60 * minute;
 85     var srad = 2 * Math.PI / 60 /60 * second;
 86     ctx.rotate(rad + srad);
 87     ctx.lineWidth = 3;
 88     ctx.lineCap= 'round';
 89     ctx.moveTo(0 ,10);
 90     ctx.lineTo(0 ,-r + 18);
 91     ctx.stroke();
 92     ctx.restore();
 93 }
 94 //定义秒钟
 95 function drawSecond(second){
 96     ctx.save();
 97     ctx.beginPath();
 98     var rad = 2 * Math.PI / 60 * second;
 99     ctx.rotate(rad);
100     ctx.lineWidth = 3;
101     ctx.lineCap= 'round';
102     ctx.moveTo(-2 ,20);
103     ctx.lineTo( 2, 20);
104     ctx.lineTo( 1, -r + 18);
105     ctx.lineTo( -1, -r + 18);
106     ctx.fillStyle = '#c14543';
107     ctx.fill();
108     ctx.restore();
109 }
110 //定义钟盘圆点样式
111 function drawDot(){
112     ctx.beginPath();
113     ctx.fillStyle = '#fff';
114     ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
115     ctx.fill();
116 }
117 //时间函数
118 function draw(){
119     ctx.clearRect(0, 0, width, height);
120     var now = new Date();
121     var hour = now.getHours();
122     var minute = now.getMinutes();
123     var second = now.getSeconds();
124     drawBackground();
125     drawHour(hour,minute);
126     drawMinute(minute,second);
127     drawSecond(second);
128     drawDot();
129     ctx.restore();
130 }
131 setInterval(draw, 1000);
132 RoundClock.js
133 script>
134 <div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvascanvas><div>
135 
136 
137  
138 <a href="https://info.flagcounter.com/NOFm">
139 <img src="https://s05.flagcounter.com/countxl/NOFm/bg_FFFFFF/txt_108780/border_000000/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0">a>
140 
141 
142 
143 <div class="dashboard">
144     <a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" title="新随笔"><i aria-hidden="true" class="fa fa-book fa-fw">i>a>
145     <a href="https://msg.cnblogs.com/send/SutsuharaYuki/" title="联系"><i aria-hidden="true" class="fa fa-comment fa-fw">i>a>
146     <a href="http://www.cnblogs.com/SutsuharaYuki/rss" title="订阅"><i aria-hidden="true" class="fa fa-rss fa-fw">i>a>
147     <a href="https://i.cnblogs.com/" title="管理"><i aria-hidden="true" class="fa fa-cog fa-fw">i>a>
148 div>
149 
150 
151 
152 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=944989026&site=qq&menu=yes"><img border="0" src="https://pic.cnblogs.com/avatar/1683480/20190509225808.png" alt="YukiRinLL的QQ" title="YukiRinLL的QQ"/>a>
153 
154 
155 
156 DOCTYPE html>
157  <html>
158  <head>
159  <meta charset="utf-8" />
160  head>
161  <body>
162     <div id="contackInfo">联系：
163          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=944989026&site=qq&menu=yes">
164              <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:944989026:41 &r=0.30709030851721764" alt="欢迎与我联系"
165                  title="欢迎与我联系">
166          a>    
167      div>
168  html>
169 
170 
171 <div id="contackInfo">姓名：鈴原 雪
172 
173 
174 <div id="contackInfo">加群：
175 <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=303a701e79b0f2b46fdb9ff1ef683a465944759d9c1ae75b0edc8098174495e5"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="成理ACM竞赛队/程协新" title="成理ACM竞赛队/程协新">a>
176  
177  
178 
179 <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;">canvas>
180 <script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js">script>
181 
182 
183 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
184 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.min.js" type="text/javascript" charset="utf-8">script>
185 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.min.js" type="text/javascript" charset="utf-8">script>
186 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.min.js" type="text/javascript" charset="utf-8">script>
187 
188 
189 <style type="text/css"> 
190 #div_digg{
191   position:fixed;
192   bottom:5px;
193   width:140px;
194   right:390px;
195   border:2px solid #6FA833;
196   padding:10px;
197   background-color:#fff;
198   border-radius:5px 5px 5px 5px !important;
199   box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
200 }
201 style>
202 
203 
204 
205 
206 <link href="https://files.cnblogs.com/files/Jerrycjc/zoomify.min.css" rel="stylesheet">
207 <script src="https://files.cnblogs.com/files/Jerrycjc/zoomify.min.js">script>
208 
209 <script>
210 $(function(){
211 $('#cnblogs_post_body').find('img:not([alt="复制代码"])').each(function(){
212     $(this).zoomify(); // Default settings
213     $(this).zoomify({ duration: 1000 }); // 1s duration
214 })
215 })
216 script>
217 
218 
219 
220 <script>
221          window.tctipConfig = {
222              staticPrefix: "http://static.tctip.com",
223              buttonImageId: 5,
224              buttonTip:  "zanzhu",
225              list:{
226                  alipay: { qrimg: "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%B6%E6%AC%BE%E7%A0%81.png"}, //修改1
227                  weixin: { qrimg: "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_%E5%BE%AE%E4%BF%A1%E6%94%B6%E6%AC%BE%E7%A0%81.png"}, //修改2
228              }
229          };
230  script>
231  <script src="http://static.tctip.com/js/tctip.min.js">script>
232 
233 
234 
235 <style>
236 .box{
237 
238     position:fixed;
239     right:20px;
240     bottom: 480px;
241     height:30px;
242     width: 50px;    
243     text-align:center;
244     padding-top:20px;    
245     background-color: lightblue;
246     border-radius: 20%;
247     overflow: hidden;
248 }
249 .box:hover:before{
250     top:50%
251 }
252 .box:hover .box-in{
253     visibility: hidden;
254 }
255 .box:before{
256     position: absolute;
257     top: -50%;
258     left: 50%;
259     transform: translate(-50%,-50%);
260     content:'顶部';
261     width: 40px;
262     color:peru;
263     font-weight:bold;
264 }    
265 .box-in{
266     visibility: visible;
267     display:inline-block;
268     height:20px;
269     width: 20px;
270     border: 3px solid black;
271     border-color: white transparent transparent white;
272     transform:rotate(45deg);
273 }
274 style>
275 <body style="height:2000px;">
276 <div id="box" class="box">
277     <div class="box-in">div>
278 div>    
279 body>
280 <script>
281 var timer  = null;
282 box.onclick = function(){
283     cancelAnimationFrame(timer);
284     timer = requestAnimationFrame(function fn(){
285         var oTop = document.body.scrollTop || document.documentElement.scrollTop;
286         if(oTop > 0){
287             document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
288             timer = requestAnimationFrame(fn);
289         }else{
290             cancelAnimationFrame(timer);
291         }    
292     });
293 }
294 script>
295 
296 
297 
298 <script src="https://files.cnblogs.com/justinw/jquery.engine3D.js" type="text/javascript" charset="utf-8">script>
299 <script src="https://files.cnblogs.com/justinw/jquery.particlePhysics.js" type="text/javascript" charset="utf-8">script>
300 <script src="https://files.cnblogs.com/justinw/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8">script>
301 <script type="text/javascript">
302     jQuery(document).ready(function() {
303     //注意：这里是用的随笔分类做例子，你自己可以根据你自己情况任意设定。
304     $(".catListPostCategory>ul").wrap("
").parent().css({ 'width': '245px', 'height': '496px' });
305     var options = { "range": [-200, 300], "gravity": -10, "xPos": 0.5, "yPos": 0.5, "gravityVector": [0, 0, 1], "interval": 100, "hoverGravityFactor": 0 };
306     jQuery("div.wrap").starfieldTagCloud(options);
307 }); 
308 script>
309 
310 
311 
312 <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"YukiRinLL - 博客","bdMini":"2","bdMiniList":["mshare","qzone","tsina","weixin","tqq","tieba","sqq","fbook","twi","copy"],"bdPic":"https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_46c84c10b912c8fcbd61ceaffc039245d7882180.gif","bdStyle":"1","bdSize":"24"},"slide":{"type":"slide","bdImg":"3","bdPos":"left","bdTop":"250"},"image":{"viewList":["qzone","sqq","tqq","tsina","weixin","tieba","fbook","twi","mail","copy","mshare"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","sqq","tqq","tsina","weixin","tieba","fbook","twi","mail","copy","mshare"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
313 
314 
315 <title>标题</title>
316 <script>
317     document.title = '(ノ￣▽￣)    请多指教 !'
318 script>
319 
320 
321     <script>
322         window.onload = function () {
323             var OriginTitile = document.title;
324             var titleTime;
325             document.addEventListener('visibilitychange', function () {
326                 if (document.hidden) {
327                     $('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");
328                     document.title = '( * ￣▽￣)／肿么不看了呢？';
329                     clearTimeout(titleTime);
330                 }
331                 else {
332                     $('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");
333                     document.title = '(～￣▽￣)～咦！又开始看了！' + OriginTitile;
334                     titleTime = setTimeout(function () {
335                         document.title = OriginTitile;
336                     }, 2000);
337                 }
338             });
339         }
340     script>
341 
342 

　　页首Html代码：

 1 
 2  <script type="text/javascript">
 3     //
 4         var bodyBgs = [];
 5         bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg";
 6         bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_99dc832a4dbb6bb3d62a292e8cf12f8d1652b5fd.jpg";
 7         bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_92206e6dd9468cf5b3d3202f7f66c7dfc64d4e04.jpg";
 8 bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044364624-3.jpg";
 9 bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_1-1Z10H24410-50.jpg";
10 bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_81877565632b8c89eacd8bd0ae26938199d49f79.jpg";
11 bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_e6674c08fbe0db19383ee84310c39459c2b44453gai2.jpg";
12 bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720150814130149.jpg";
13 bodyBgs[9] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044362493-19.jpg";
14 bodyBgs[10] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170133.jpg";
15 bodyBgs[11] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170140.jpg";
16 bodyBgs[12] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170216.jpg";
17 bodyBgs[13] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044361E0-2.jpg";
18 bodyBgs[14] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170227.jpg";
19 bodyBgs[15] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_o_IMG_107gai.jpg";
20 bodyBgs[16] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443C944-15.jpg";
21 bodyBgs[17] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443B236-14.jpg";
22 //bodyBgs[18] = "";
23 //bodyBgs[19] = "";
24 //bodyBgs[22] = "";
25 //bodyBgs[23] = "";
26 //bodyBgs[24] = "";
27 
28         var randomBgIndex = Math.round( Math.random() * 17 );
29     //输出随机的背景图
30         document.write('');
31     //]]>
32     script>
33 
34 
35 
36 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
37 
38 
39 <script>
40 function customTimer(inpId, fn) {
41   if ($(inpId).length) {
42     fn();
43   }
44   else {
45     var intervalId = setInterval(function () {
46       if ($(inpId).length) {  //如果存在了
47         clearInterval(intervalId);  // 则关闭定时器
48         customTimer(inpId, fn);              //执行自身
49       }
50     }, 100);
51   }
52 }
53 function generateTagClouds() {
54   $('.catListTag>ul').wrap('
').parent().css({ 'width': '240px', 'height': '240px' });
55   var options = {
56     'range': [-200, 300],
57     'gravity': -10,
58     'xPos': 0.5,
59     'yPos': 0.5,
60     'gravityVector': [0, 0, 1],
61     'interval': 100,
62     'hoverGravityFactor': 0
63   };
64   $('div.wrap').starfieldTagCloud(options);
65 }
66 $(function () {
67   ...
68   customTimer('.catListTag', generateTagClouds);
69   ...
70 });
71 script>
72 
73 
74 
75 
76 <script type="text/javascript" >
77 var jiathis_config={
78     siteNum:15,
79     sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",
80     summary:"",
81     boldNum:6,
82     showClose:true,
83     shortUrl:false,
84     hideMore:false
85 }
86 script>
87 <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8">script>
88 

　　页脚Html代码：

  1 <script src="https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML">script>
  2 <script src="https://cdn.bootcss.com/smoothscroll/1.4.6/SmoothScroll.min.js">script>
  3 <script type="text/javascript">
  4 //var canShowAdsense=function(){return !!0};//去广告
  5 
  6 $(document).ready(function(){
  7     //美化footer 
  8     var footer=$("#footer");
  9     var text=footer.text();
 10     footer.empty();
 11     footer.prepend('
Contact with me
Email
Wechat
Github
QQ
'+text+' Theme By YukiRinLL');
 12 });
 13 
 14 // 控制台输出信息
 15 (function(a){
 16     if (!a) return;
 17     var msg = "%c欢迎访问YukiRinLL的博客,\n鄙人蒟蒻,望各位大佬多加指点.\n ";
 18     if (window.chrome) {
 19         a.log("%c ", "padding:50px;background:url('https://pic.cnblogs.com/avatar/1683480/20190509225808.png')no-repeat;background-size: contain;");
 20         a.log(msg, "color:#0080FF");
 21     } else {
 22         a.log(msg.replace(/%c/g,''));
 23     }
 24 })(top.console);
 25 
 26 //ajaxComplete
 27 $(document).ajaxComplete(function(event, xhr, option) {
 28     //评论头像
 29     if(option.url.indexOf("GetComments")>-1){setTimeout(function(){
 30         $.each($(".blog_comment_body"),function(index,ele){
 31             var self=$(ele);
 32             var id=self.attr("id").split("_")[2];
 33             var imgSrc=$("#comment_"+id+"_avatar").html()||"http://pic.cnblogs.com/avatar/simple_avatar.gif";
 34             self.before(''+imgSrc+'" style="float:left;" class="author_avatar">');
 35         });
 36     },200)};
 37 
 38     //评论框水印+调整页脚
 39     if(option.url.indexOf("CommentForm")>-1){setTimeout(function(){$("#tbCommentBody").attr("placeholder","来玩嘛大爷╰(￣▽￣)╭")},200)}
 40     if(option.url.indexOf("GetFollowStatus")>-1){
 41         //美化“加关注”按钮 
 42         if($("#sideBar #p_b_follow a").text()=="+加关注")
 43         $("#sideBar #p_b_follow :contains('+加关注')").html(" 关注");
 44     }
 45     if(option.url.indexOf("sidecolumn")>-1){
 46         //日历的两个换页按钮
 47         $('.CalNextPrev a:contains("<")').empty().prepend('');
 48         $('.CalNextPrev a:contains(">")').empty().prepend('');
 49         //多彩标签颜色
 50         var taglist=document.querySelectorAll('#sidebar_postcategory li a')
 51         for(var i = 0; i < taglist.length; i++) {
 52            taglist[i].className = 'color-'+Math.floor(Math.random()*12+1);
 53         }
 54     }
 55 }); 
 56 
 57 //用来在head标签中添加link标签
 58 function createLink(URL,lnkId,charset,media){
 59     var head = document.getElementsByTagName('head')[0],linkTag = null;
 60     if(!URL){return false;}
 61     linkTag = document.createElement('link');
 62     linkTag.setAttribute('rel','shortcut icon');
 63     linkTag.setAttribute('type','image/x-icon');
 64     linkTag.href = URL;
 65     head.appendChild(linkTag);
 66 };
 67 createLink('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_u=2686629685,1606419266_fm=26_gp=0.jpg');
 68 
 69 var head=$("#header");
 70 
 71 //页首动态效果
 72 head.prepend('');//位置
 73 var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true;
 74 function initHeader() {
 75     largeHeader = document.getElementById('header');
 76     _width = largeHeader.offsetWidth;
 77     // log(largeHeader.offsetWidth);
 78     _height = largeHeader.offsetHeight;
 79     // log(largeHeader.offsetHeight);
 80     _target = {x: 0, y: _height};
 81     _canvas = document.getElementById('bubble-canvas');
 82     _canvas.width = _width;
 83     _canvas.height = _height;
 84     _ctx = _canvas.getContext('2d');
 85     _circles = [];
 86     for(var x = 0; x < _width*0.5; x++) {
 87         var c = new Circle();
 88         _circles.push(c);
 89     }
 90     animate();
 91 };
 92 function addListeners() {
 93     window.addEventListener('scroll', scrollCheck);
 94     window.addEventListener('resize', resize);
 95 };
 96 function scrollCheck() {
 97     if(document.body.scrollTop > _height) animateHeader = false;
 98     else animateHeader = true;
 99 };
100 function resize() {
101     _width = largeHeader.offsetWidth;
102     _height = largeHeader.offsetHeight;
103     _canvas.width = _width;
104     _canvas.height = _height;
105 };
106 function animate() {
107     if(animateHeader) {
108         _ctx.clearRect(0,0,_width,_height);
109         for(var i in _circles) {
110             _circles[i].draw();
111         }
112     };
113     requestAnimationFrame(animate);
114 };
115 function Circle() {
116     var _this = this;
117     (function() {
118         _this.pos = {};
119         init();
120     })();
121     function init() {
122         _this.pos.x = Math.random()*_width;
123         _this.pos.y = _height+Math.random()*100;
124         _this.alpha = 0.1+Math.random()*0.3;
125         _this.scale = 0.1+Math.random()*0.3;
126         _this.velocity = Math.random();
127     };
128     this.draw = function() {
129         if(_this.alpha <= 0) {
130             init();
131         };
132         _this.pos.y -= _this.velocity;
133         _this.alpha -= 0.0005;
134         _ctx.beginPath();
135         _ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
136         _ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
137         _ctx.fill();
138     };
139 };
140 addListeners();
141 initHeader();
142 
143 //文章列表美化
144 function breakSameDayArticles(article_list){
145     var _i=0;
146     while(_i<article_list.length) {
147         var dayTitle=article_list[_i].getElementsByClassName('dayTitle')[0];
148         var postTitle=article_list[_i].getElementsByClassName('postTitle');
149         var postCon=article_list[_i].getElementsByClassName('postCon');
150         var postDesc=article_list[_i].getElementsByClassName('postDesc');
151         if(postTitle.length>1) {
152 
153             for (var _j = 0; _j < postTitle.length; _j++) {
154                 var day=document.createElement('div');
155                 day.className='day';
156                 day.appendChild(dayTitle.cloneNode(true));
157                 day.appendChild(postTitle[_j].cloneNode(true));
158                 day.appendChild(postCon[_j].cloneNode(true));
159                 day.appendChild(postDesc[_j].cloneNode(true));
160                 article_list[_i].parentNode.insertBefore(day,article_list[_i]);
161                 _i++;
162             }
163             article_list[_i].parentNode.removeChild(article_list[_i]);
164             _i--;
165         }
166         _i++;
167     }
168 };
169 function parseToDOM(str){
170    var div = document.createElement("div");
171    if(typeof str == "string")
172        div.innerHTML = str;
173    return div.childNodes[0];
174 };
175 
176 function initBeauty(){
177     var article_list=document.getElementsByClassName('day');
178     breakSameDayArticles(article_list);
179     beautyArticles(article_list);
180 };
181 
182 
183 // //消除遮罩
184 // document.addEventListener("DOMContentLoaded", function(){
185 //     document.getElementById('loading').style.display = "none";
186 // });
187 script>
188 <script type="text/x-mathjax-config">
189 MathJax.Hub.Config({
190     showProcessingMessages: false, //关闭js加载过程信息
191     messageStyle: "none", //不显示信息
192     extensions: ["tex2jax.js"],
193     jax: ["input/TeX", "output/HTML-CSS"],
194     tex2jax: {
195         inlineMath:  [ ["$", "$"] ], //行内公式选择$
196         displayMath: [ ["$$","$$"] ], //段内公式选择$$
197         skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'], //避开某些标签
198 //        ignoreClass:"comment-content" //避开含该Class的标签
199     },
200     "HTML-CSS": {
201         availableFonts: ["STIX","TeX"], //可选字体
202         showMathMenu: false //关闭右击菜单显示
203     }
204 });
205 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
206 script>
207 
208 
209 
210 <embed src="//music.163.com/style/swf/widget.swf?sid=22703777&type=2&auto=0&width=320&height=66" 
211     width="340" height="86"  allowNetworking="all" >
212 embed>
213 
214 
215 
216 <script type="text/javascript">
217 /* 鼠标特效 */
218 var a_idx = 0;
219 jQuery(document).ready(function($) {
220     $("body").click(function(e) {
221         var a = new Array("朧月","十六夜","花鳥風月","黄昏","花筏","雪月花","花吹雪","秋晴れ","冬枯れ","さようなら");
222         var $i = $("").text(a[a_idx]);
223         a_idx = (a_idx + 1) % a.length;
224         var x = e.pageX,
225         y = e.pageY;
226         $i.css({
227             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
228             "top": y - 20,
229             "left": x,
230             "position": "absolute",
231             "font-weight": "bold",
232             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
233         });
234         $("body").append($i);
235         $i.animate({
236             "top": y - 180,
237             "opacity": 0
238         },
239         1500,
240         function() {
241             $i.remove();
242         });
243     });
244 });
245 script>
246 
247 
248 <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>
249 
250 
251 
252     <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
253     <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/SutsuharaYuki/waifuright.css"/>
254     
255 DOCTYPE html>
256 <head>
257     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
258     <title>Live2Dtitle>
259 
260     <link rel="stylesheet" type="text/css" href="assets/waifuright.css"/>
261 head>
262 <body>
263     <link rel="stylesheet" type="text/css" href="./assets/waifuright.css">
264     <div class="waifu" id="waifu">
265         <div class="waifu-tips" style="opacity: 1;">div>
266         <canvas id="live2d" width="280" height="250" class="live2d">canvas>
267         
268         <div class="waifu-tool">
269             <span class="fui-home">span>
270             <span class="fui-chat">span>
271             <span class="fui-eye">span>
272             <span class="fui-user">span>
273             <span class="fui-photo">span>
274             <span class="fui-info-circle">span>
275             <span class="fui-cross">span>
276         
277         div>
278     div>
279     <script src="https://blog-static.cnblogs.com/files/SutsuharaYuki/live2d.js">script>
280     <script src="https://blog-static.cnblogs.com/files/SutsuharaYuki/waifu-tips.js">script>
281     <script type="text/javascript">initModel()script>
282 body>
283 html>
284 script>
285 
286 
287 <script type="text/javascript">
288 WIDGET = {FID: '9fVgD01DNt'}
289 script>
290 <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111">script>

　　部分模板在套用的时候根据自己的情况做了一些改变

　　一些脚本的浏览器可信还没做好

　　图片放大功能还存在一些小问题

　　（1.点击展开代码“+”时会触发展开　　2.放大后在最上层显示不完全　　

　　　3.评论区相关内容有时候加载不出来　　）

　　后续可能会添加 Pet 、flash小游戏 之类的新功能

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

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

　　呈上源码以供分享

效果图