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 *{
3 cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku1.png'), auto;
4 }
5 a{
6 cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku2.png'), auto;
7 }
8
9 /*字体修改*/
10 body {
11 font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
12 font-size: 14px;
13 line-height: 2;
14 color: #555;
15 }
16 /*博客标题*/
17 #blogTitle h1 {
18 font-size: 26px;
19 font-weight: bold;
20 line-height: 1.5em;
21 margin-top: 10px;
22 margin-bottom: 20px;
23 text-align: center;
24
25 }
26 .headermaintitle {
27 display: inline-block;
28 vertical-align: top;
29 line-height: 36px !calc;
30 font-size: 26px;
31 font-weight: normal;
32 color:#fff !important;
33 font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
34 }
35 #home {
36 zoom:0.85;/*缩放*/
37 opacity: 0.80;/*透明度*/
38 margin: 0 auto;
39 width: 20%;/*原始65 自定义38.2*/
40 min-width: 980px;/*页面顶部的宽度 默认980*/
41 background-color: rgba(245, 245, 245, 0.7);
42 padding: 30px;
43 margin-top: 50px;
44 margin-bottom: 50px;
45 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
46 }
47 body {
48 color: #000;
49 background: url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg')fixed;
50 background-size: cover;
51 background-repeat: no-repeat;
52 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
53 font-size: 12px;
54 min-height: 101%;
55 }
56 #blogTitle {
57 height: 100px; /*高度*/
58 clear: both;
59 background-color: rgba(245, 245, 245, 0);
60 }
61 #blogTitle h1 {
62 font-size: 36px;
63 font-weight: bold;
64 line-height: 1.8em;/*原始 1.6em*/
65 margin-top: 10px;/*原始 15px */
66 color: #548B54;
67 }
68 #blogTitle h2 {
69 font-weight: normal;
70 font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/
71 line-height: 1.8;
72 color: #111;
73 font-weight: bold;
74 text-align: right;
75 float: right;
76 }
77 #navigator{
78 background-color: rgba(33, 160, 139, 0.9);
79 }
80 #navList a:link, #navList a:visited, #navList a:active{
81 color: #eee;
82 font-size: 18px;
83 font-weight: bold;
84 }
85 .blogStats{
86 color: #eee;
87 }
88 .postTitle {
89 border-left: 8px solid rgba(33, 160, 139, 0.68);
90 margin-left: 10px;
91 margin-bottom: 10px;
92 font-size: 20px;
93 clear: both;
94 }
95 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
96 color: #21759b;
97 transition: all 0.4s linear 0s;
98 }
99 .postTitle a:hover {
100 margin-left: 30px;
101 color: #0f3647;
102 text-decoration: none;
103 }
104 .postCon {
105 float: right;
106 line-height: 1.5em;
107 width: 100%;
108 clear: both;
109 padding: 10px 0;
110 }
111 .day .postTitle a {
112 padding-left: 10px;
113 }
114 .day {
115 background: rgba(255, 255, 255, 0.5);
116 }
117
118 /*反馈栏*/
119 .feedback_area_title {
120 margin-bottom:0;
121 border-bottom:1px solid #EDEDED;
122 }
123 .feedbackItem {
124 background-color: #F5F5F5;
125 margin-top:10px;
126 }
127 .feedbackListSubtitle {
128 padding:10px 10px 0 10px;
129 }
130 .feedbackCon {
131 padding:10px;
132 margin:0;
133 }
134 .feedbackCon img {
135 border-radius: 50%;
136 -webkit-transition: all 0.6s ease-out;
137 -moz-transition: all 0.5s ease-out;
138 -ms-transition: all 0.5s ease-out;
139 -o-transition: all 0.5s ease-out;
140 transition: all 0.5s ease-out;
141 }
142 .feedbackCon img:hover {
143 -webkit-transform: rotateZ(360deg);
144 -moz-transform: rotateZ(360deg);
145 -ms-transform: rotateZ(360deg);
146 -o-transform: rotateZ(360deg);
147 transform: rotateZ(360deg);
148 }
149 .feedbackCon .body_right {
150 padding:0 10px 0 0;
151 }
152 .feedbackCon .comment_vote {
153 padding:10px 0 0 0;
154 }
155 /*评论区*/
156 #comment_nav {
157 margin-top:10px;
158 }
159 #commentform_title {
160 margin-bottom:0;
161 border-bottom:1px solid #EDEDED;
162 }
163
164 /*代码框背景*/
165 .cnblogs_code {
166 background: #D6D6D6 !important;
167 }
168 /*代码框一些其他定制*/
169 .code_img_closed,.code_img_opened {
170 cursor:pointer;
171 }
172 .cnblogs_code_collapse {
173 cursor:pointer;
174 border:0;
175 padding:0;
176 }
177 .cnblogs_code_toolbar {
178 display:none;
179 }
180
181
182 /*文章附加信息*/
183 .postDesc {
184 background: url(images/posted_time.png) no-repeat 0 1px;
185 color: #757575;
186 float: left;
187 width: 100%;
188 clear: both;
189 text-align: left;
190 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
191 font-size: 13px;
192 padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
193 margin-top: 20px;
194 line-height: 1.8;
195 padding-bottom: 35px;
196 }
197 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
198 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
199 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
200 {
201 background: rgba(255, 255, 255, 0.5);
202 margin-bottom: 35px;
203 word-wrap: break-word;
204 }
205 .CalTitle{
206 background: rgba(255, 255, 255, 0);
207 }
208 .catListTitle{
209 background-color: rgba(33, 160, 139, 0.9);
210 }
211 #topics{
212 background: rgba(255, 255, 255, 0.5);
213 }
214 .c_ad_block{
215 display: none;
216 }
217 #tbCommentBody{
218 width: 100%;
219 height: 200px;
220 background: rgba(255, 255, 255, 0.5);
221 }
222 #q{background: rgba(255, 255, 255, 0);}
223 .CalNextPrev{background: rgba(255, 255, 255, 0);}
224 .cnblogs_code{
225 background: rgba(255, 255, 255, 0);
226 }
227 .cnblogs_code div{
228 background: rgba(255, 255, 255, 0);
229 }
230 .cnblogs_code_toolbar{
231 background: rgba(255, 255, 255, 0);
232 }
233 .entrylist{
234 background: rgba(255, 255, 255, 0.5);
235 }
236
237
238 /*推荐置顶设置*/
239 #div_digg{
240 position:fixed;
241 bottom:5px;
242 width:140px;
243 right:650px;
244 border:2px solid #6FA833;
245 padding:10px;
246 background-color:#fff;
247 border-radius:5px 5px 5px 5px !important;
248 box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
249 }
250 #div_digg:hover {
251 box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5);
252 }
253
254 /*段落标题Hover效果设置*/
255 #cnblogs_post_body
256 {
257 color: black;
258 font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
259 font-size: 15px;
260 }
261 #cnblogs_post_body h1 {
262 background: #169FE6;
263 border-radius: 4px 4px 4px 4px;
264 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
265 font-size: 23px;
266 font-weight: bold;
267 height: 25px;
268 line-height: 25px;
269 margin: 18px 0 0 0;
270 padding: 5px 0 5px 5px;
271 transition: all 0.8s;
272 }
273 #cnblogs_post_body h2 {
274 background: #169FE6;
275 border-radius: 4px 4px 4px 4px;
276 color: #FFFFFF;
277 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
278 font-size: 20px;
279 font-weight: bold;
280 height: 25px;
281 line-height: 25px;
282 margin: 18px 0 0 0;
283 padding: 5px 0 5px 5px;
284 transition: all 0.8s;
285 }
286 #cnblogs_post_body h3 {
287 background: #D191FF;
288 border-radius: 4px 4px 4px 4px;
289 color: #FFFFFF;
290 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
291 font-size: 18px;
292 font-weight: bold;
293 height: 25px;
294 line-height: 25px;
295 margin: 18px 0 0 0;
296 padding: 5px 0 5px 5px;
297 transition: all 0.8s;
298 }
299 #cnblogs_post_body h4{
300 background: #A8D08D;
301 border-radius: 4px 4px 4px 4px;
302 color: #FFFFFF;
303 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
304 font-size: 18px;
305 font-weight: bold;
306 height: 25px;
307 line-height: 25px;
308 margin: 18px 0 0 0;
309 padding: 5px 0 5px 5px;
310 transition: all 0.8s;
311 }
312 #cnblogs_post_body h1:hover {
313 transform: rotateX(360deg);
314 background-color: #0066FF;
315 }
316 #cnblogs_post_body h2:hover {
317 transform: rotateX(360deg);
318 background-color: #0066FF;
319 }
320 #cnblogs_post_body h3:hover {
321 transform: rotateX(360deg);
322 }
323 #cnblogs_post_body h4:hover {
324 transform: rotateX(360deg);
325 }
326
327 /* 看板娘 */
328 canvas#live2dcanvas {
329
330 border: 0 !important;
331 position:absolute; bottom:0; right:0;
332 }
333 /* 看板娘 */
334
335 /*宠物pet*/
336 /*QQ联系*/
博客侧边栏公告(支持HTML代码)(支持JS代码):
1 <style type="text/css">
2 .dashboard{
3 background: #fff;
4 z-index: 1;
5 position: relative;
6 overflow: hidden;
7 margin: 20px;
8 }
9 .dashboard a{
10 color: #5a5f69;
11 float: left;
12 width: calc(25% - 4px);
13 height: 51px;
14 display: block;
15 font-size: 26px;
16 line-height: 51px;
17 text-align: center;
18 border-radius: 100%;
19 margin: 2px;
20 }
21 </style>
22
23 <!--时钟插件-->
24 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/ujq3/RoundClock.js">
25 var dom = document.getElementById('clock');
26 var ctx = dom.getContext('2d');
27 var width = ctx.canvas.width;
28 var height = ctx.canvas.height;
29 var r = width / 2;
30 //定义钟盘
31 function drawBackground(){
32 ctx.save();
33 ctx.translate(r, r);
34 ctx.beginPath();
35 ctx.lineWidth = 10;
36 ctx.font ='18px Arial';
37 ctx.textAlign = 'center'
38 ctx.textBaseline = 'middle'
39 ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
40 ctx.stroke();
41 var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
42 //遍历获取坐标
43 hourNumbers.forEach(function(number, i){
44 var rad = 2 * Math.PI / 12 * i;
45 var x = Math.cos(rad) * (r - 30);
46 var y = Math.sin(rad) * (r - 30);
47 ctx.fillText(number, x ,y);
48 })
49 //定义刻度
50 for(var i=0;i<60;i++){
51 var rad = 2 * Math.PI / 60 * i;
52 var x = Math.cos(rad) * (r - 18);
53 var y = Math.sin(rad) * (r - 18);
54 ctx.beginPath();
55 if(i % 5 == 0){
56 ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
57 ctx.fillStyle = '#000';
58 }else{
59 ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
60 ctx.fillStyle = '#ccc';
61 }
62 ctx.fill();
63 }
64 }
65 //定义时钟
66 function drawHour(hour,minute){
67 ctx.save();
68 ctx.beginPath();
69 var rad = 2 * Math.PI / 12 * hour;
70 var mrad = 2 * Math.PI / 12 / 60 * minute;
71 ctx.rotate(rad + mrad);
72 ctx.lineWidth = 6;
73 ctx.lineCap= 'round';
74 ctx.moveTo(0 ,10);
75 ctx.lineTo(0 ,-r / 2);
76 ctx.stroke();
77 ctx.restore();
78 }
79 //定义分钟
80 function drawMinute(minute,second){
81 ctx.save();
82 ctx.beginPath();
83 var rad = 2 * Math.PI / 60 * minute;
84 var srad = 2 * Math.PI / 60 /60 * second;
85 ctx.rotate(rad + srad);
86 ctx.lineWidth = 3;
87 ctx.lineCap= 'round';
88 ctx.moveTo(0 ,10);
89 ctx.lineTo(0 ,-r + 18);
90 ctx.stroke();
91 ctx.restore();
92 }
93 //定义秒钟
94 function drawSecond(second){
95 ctx.save();
96 ctx.beginPath();
97 var rad = 2 * Math.PI / 60 * second;
98 ctx.rotate(rad);
99 ctx.lineWidth = 3;
100 ctx.lineCap= 'round';
101 ctx.moveTo(-2 ,20);
102 ctx.lineTo( 2, 20);
103 ctx.lineTo( 1, -r + 18);
104 ctx.lineTo( -1, -r + 18);
105 ctx.fillStyle = '#c14543';
106 ctx.fill();
107 ctx.restore();
108 }
109 //定义钟盘圆点样式
110 function drawDot(){
111 ctx.beginPath();
112 ctx.fillStyle = '#fff';
113 ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
114 ctx.fill();
115 }
116 //时间函数
117 function draw(){
118 ctx.clearRect(0, 0, width, height);
119 var now = new Date();
120 var hour = now.getHours();
121 var minute = now.getMinutes();
122 var second = now.getSeconds();
123 drawBackground();
124 drawHour(hour,minute);
125 drawMinute(minute,second);
126 drawSecond(second);
127 drawDot();
128 ctx.restore();
129 }
130 setInterval(draw, 1000);
131 RoundClock.js
132 </script><!-- 圆形时钟 -->
133 <div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div><!-- 圆形时钟 -->
134
135
136 <!--访问统计-->
137 <a href="https://info.flagcounter.com/NOFm">
138 <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>
139
140
141 <!-- 按钮 -->
142 <div class="dashboard">
143 <a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" title="新随笔"><i aria-hidden="true" class="fa fa-book fa-fw"></i></a>
144 <a href="https://msg.cnblogs.com/send/SutsuharaYuki/" title="联系"><i aria-hidden="true" class="fa fa-comment fa-fw"></i></a>
145 <a href="http://www.cnblogs.com/SutsuharaYuki/rss" title="订阅"><i aria-hidden="true" class="fa fa-rss fa-fw"></i></a>
146 <a href="https://i.cnblogs.com/" title="管理"><i aria-hidden="true" class="fa fa-cog fa-fw"></i></a>
147 </div>
148
149
150 <!-- 头像(用QQ联系查件改,可链接) -->
151 <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>
152
153
154 <!--QQ联系设置-->
155 <!DOCTYPE html>
156 <html>
157 <head>
158 <meta charset="utf-8" />
159 </head>
160 <body>
161 <div id="contackInfo">联系:
162 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=944989026&site=qq&menu=yes">
163 <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:944989026:41 &r=0.30709030851721764" alt="欢迎与我联系"
164 title="欢迎与我联系">
165 </a>
166 </div>
167 </html>
168 <!--QQ联系设置-->
169
170 <div id="contackInfo">姓名:鈴原 雪
171
172 <!--QQ群官网-一键加群-->
173 <div id="contackInfo">加群:
174 <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>
175
176
177 <!-- 背景线段动画 -->
178 <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
179 <script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>
180
181 <!-- 标签云相关库 -->
182 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
183 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.min.js" type="text/javascript" charset="utf-8"></script>
184 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.min.js" type="text/javascript" charset="utf-8"></script>
185 <script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.min.js" type="text/javascript" charset="utf-8"></script>
186
187 <!--更改推荐按钮-->
188 <style type="text/css">
189 #div_digg{
190 position:fixed;
191 bottom:5px;
192 width:140px;
193 right:390px;
194 border:2px solid #6FA833;
195 padding:10px;
196 background-color:#fff;
197 border-radius:5px 5px 5px 5px !important;
198 box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
199 }
200 </style>
201
202
203 <!--点击图片放大// 展开代码会触发?-->
204 <!--引用js和css-->
205 <link href="http://files.cnblogs.com/files/Jerrycjc/zoomify.min.css" rel="stylesheet">
206 <script src="http://files.cnblogs.com/files/Jerrycjc/zoomify.min.js"></script>
207 <!--引用js和css-->
208 <script>
209 $(function(){
210 $('#cnblogs_post_body').find('img:not([alt="复制代码"])').each(function(){
211 $(this).zoomify(); // Default settings
212 $(this).zoomify({ duration: 1000 }); // 1s duration
213 })
214 })
215 </script>
216
217
218 <!--支付打赏-->
219 <script>
220 window.tctipConfig = {
221 staticPrefix: "http://static.tctip.com",
222 buttonImageId: 5,
223 buttonTip: "zanzhu",
224 list:{
225 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
226 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
227 }
228 };
229 </script>
230 <script src="http://static.tctip.com/js/tctip.min.js"></script>
231
232
233 <!--回到顶部-->
234 <style>
235 .box{
236
237 position:fixed;
238 right:20px;
239 bottom: 480px;
240 height:30px;
241 width: 50px;
242 text-align:center;
243 padding-top:20px;
244 background-color: lightblue;
245 border-radius: 20%;
246 overflow: hidden;
247 }
248 .box:hover:before{
249 top:50%
250 }
251 .box:hover .box-in{
252 visibility: hidden;
253 }
254 .box:before{
255 position: absolute;
256 top: -50%;
257 left: 50%;
258 transform: translate(-50%,-50%);
259 content:'顶部';
260 width: 40px;
261 color:peru;
262 font-weight:bold;
263 }
264 .box-in{
265 visibility: visible;
266 display:inline-block;
267 height:20px;
268 width: 20px;
269 border: 3px solid black;
270 border-color: white transparent transparent white;
271 transform:rotate(45deg);
272 }
273 </style>
274 <body style="height:2000px;">
275 <div id="box" class="box">
276 <div class="box-in"></div>
277 </div>
278 </body>
279 <script>
280 var timer = null;
281 box.onclick = function(){
282 cancelAnimationFrame(timer);
283 timer = requestAnimationFrame(function fn(){
284 var oTop = document.body.scrollTop || document.documentElement.scrollTop;
285 if(oTop > 0){
286 document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
287 timer = requestAnimationFrame(fn);
288 }else{
289 cancelAnimationFrame(timer);
290 }
291 });
292 }
293 </script>
294
295
296 <!-- 3D效果的标签云 -->
297 <script src="http://files.cnblogs.com/justinw/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
298 <script src="http://files.cnblogs.com/justinw/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
299 <script src="http://files.cnblogs.com/justinw/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>
300 <script type="text/javascript">
301 jQuery(document).ready(function() {
302 //注意:这里是用的随笔分类做例子,你自己可以根据你自己情况任意设定。
303 $(".catListPostCategory>ul").wrap("<div class='wrap' ></div>").parent().css({ 'width': '245px', 'height': '496px' });
304 var options = { "range": [-200, 300], "gravity": -10, "xPos": 0.5, "yPos": 0.5, "gravityVector": [0, 0, 1], "interval": 100, "hoverGravityFactor": 0 };
305 jQuery("div.wrap").starfieldTagCloud(options);
306 });
307 </script>
308
309
310 <!--百度分享栏-->
311 <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>
312
313 <!--更改网页标题-->
314 <title>标题</title>
315 <script>
316 document.title = '(ノ ̄▽ ̄) 请多指教 !'
317 </script>
318 <!--网页标题(title)动态改变-->
319 <!--离开和回到当前页 网页标题改变-->
320 <script>
321 window.onload = function () {
322 var OriginTitile = document.title;
323 var titleTime;
324 document.addEventListener('visibilitychange', function () {
325 if (document.hidden) {
326 $('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");
327 document.title = '( *  ̄▽ ̄)/肿么不看了呢?';
328 clearTimeout(titleTime);
329 }
330 else {
331 $('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");
332 document.title = '(~ ̄▽ ̄)~咦!又开始看了!' + OriginTitile;
333 titleTime = setTimeout(function () {
334 document.title = OriginTitile;
335 }, 2000);
336 }
337 });
338 }
339 </script>
340
341 <!--宠物pet-->
页首Html代码:
1 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2
3 <!-- 定时器 -->
4 <script>
5 function customTimer(inpId, fn) {
6 if ($(inpId).length) {
7 fn();
8 }
9 else {
10 var intervalId = setInterval(function () {
11 if ($(inpId).length) { //如果存在了
12 clearInterval(intervalId); // 则关闭定时器
13 customTimer(inpId, fn); //执行自身
14 }
15 }, 100);
16 }
17 }
18 function generateTagClouds() {
19 $('.catListTag>ul').wrap('<div class=\'wrap\' ></div>').parent().css({ 'width': '240px', 'height': '240px' });
20 var options = {
21 'range': [-200, 300],
22 'gravity': -10,
23 'xPos': 0.5,
24 'yPos': 0.5,
25 'gravityVector': [0, 0, 1],
26 'interval': 100,
27 'hoverGravityFactor': 0
28 };
29 $('div.wrap').starfieldTagCloud(options);
30 }
31 $(function () {
32 ...
33 customTimer('.catListTag', generateTagClouds);
34 ...
35 });
36 </script>
37
38 <!-- 自定制样式文件以及脚本 -->
39 <!-- 分享 -->
40 <!-- JiaThis Button BEGIN -->
41 <script type="text/javascript" >
42 var jiathis_config={
43 siteNum:15,
44 sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",
45 summary:"",
46 boldNum:6,
47 showClose:true,
48 shortUrl:false,
49 hideMore:false
50 }
51 </script>
52 <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script>
53 <!-- 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小游戏 之类的新功能
可能会做反馈栏和评论区样式
可能会继续做未完成的移动端兼容
呈上源码以供分享
效果图