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>
皮肤：
页面定制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 <!--Wider的一些样式--> 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">您的浏览器不兼容canvas</canvas><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 <!-- 头像(用QQ联系查件改，可链接) --> 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 <!--QQ联系设置--> 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 <!--QQ联系设置--> 170 171 <div id="contackInfo">姓名：鈴原 雪 172 173 <!--QQ群官网-一键加群--> 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 <!--引用js和css--> 206 <link href="http://files.cnblogs.com/files/Jerrycjc/zoomify.min.css" rel="stylesheet"> 207 <script src="http://files.cnblogs.com/files/Jerrycjc/zoomify.min.js"></script> 208 <!--引用js和css--> 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 <!-- 3D效果的标签云 --> 298 <script src="http://files.cnblogs.com/justinw/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script> 299 <script src="http://files.cnblogs.com/justinw/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script> 300 <script src="http://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("<div class='wrap' ></div>").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 <!--网页标题(title)动态改变--> 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 <!--宠物pet-->
页首Html代码：
1 <!--随机背景图--> 2 <script type="text/javascript"> 3 //<!CDATA[ 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('<style>body{background:url(' + bodyBgs[randomBgIndex] + ')fixed;background-size:cover;no-repeat 50% 0}</style>'); 31 //]]> 32 </script> 33 34 35 <!--Wider的一些样式--> 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('<div class=\'wrap\' ></div>').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 <!-- JiaThis Button BEGIN --> 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 <!-- JiaThis Button END -->
页脚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('<div id="customFooter"><h1 class="footer-title">Contact with me</h1><ul><li><a href="#" target="_blank"><i aria-hidden="true" class="fa fa-envelope fa-fw"></i>Email</a></li><li><a href="#" target="944989026@qq.com"><i aria-hidden="true" class="fa fa-weixin fa-fw"></i>Wechat</a></li><li><a href="#" target="_blank"><i aria-hidden="true" class="fa fa-github fa-fw"></i>Github</a></li><li><a href="#" target="https://github.com/YukiRinLL"><i aria-hidden="true" class="fa fa-qq fa-fw"></i>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>'); 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('<img src="'+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("<i class=\"fa fa-heart\" aria-hidden=\"true\"></i> 关注"); 44 } 45 if(option.url.indexOf("sidecolumn")>-1){ 46 //日历的两个换页按钮 47 $('.CalNextPrev a:contains("<")').empty().prepend('<i class="fa fa-chevron-left" aria-hidden="true"></i>'); 48 $('.CalNextPrev a:contains(">")').empty().prepend('<i class="fa fa-chevron-right" aria-hidden="true"></i>'); 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('<canvas id="bubble-canvas" style="position:absolute;left:half;top:half;"></canvas>');//位置 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 <!--网易云音乐-Lil' Goldfish - まりか--> 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 = $("<span></span>").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 <!-- fork github 控件 --> 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 <!-- 引入css样式 字体 --> 252 <!--原作者的css--><link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/> 253 <!--之前用的css--><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/SutsuharaYuki/waifuright.css"/> 254 <!-- 字体over --> 255 <!DOCTYPE html> 256 <head> 257 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 258 <title>Live2D</title> 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 <!-- 菜单begin --> 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 <!-- 菜单over --> 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小游戏 之类的新功能
可能会做反馈栏和评论区样式
可能会继续做未完成的移动端兼容
呈上源码以供分享
效果图
2922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
