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小游戏 之类的新功能
可能会做反馈栏和评论区样式
可能会继续做未完成的移动端兼容
呈上源码以供分享
效果图