简单的博客页面客制化

最新推荐文章于 2023-05-12 21:47:56 发布

置顶 YukiRinLL

最新推荐文章于 2023-05-12 21:47:56 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qq_42607124/article/details/98148443

版权

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>&nbsp; &nbsp; 为了把我那神秘的冠冕编缀,须将一切时代一切领域征集.
 6 </strong>
 7 <br />
 8 <strong>
 9 <span style="color:#81D7D3">&nbsp; &nbsp; &mdash;&mdash;波德莱尔 《恶之花》&middot; 祝福
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联系*/

View Code

　　博客侧边栏公告（支持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&amp;uin=944989026&amp;site=qq&amp;menu=yes">
163              <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:944989026:41 &amp;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-->

View Code

　　页首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 -->

View Code

　　页脚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>&nbsp;关注");
 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>

View Code

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

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

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

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

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

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

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

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

　　呈上源码以供分享

效果图

YukiRinLL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单的博客页面客制化

DIY博客的页面写在前面：　　申请了博客第一件事当然是整一个炫酷的界面。　　自己水平不够，选了个比较顺眼的皮肤，大部分是套用网上现成的模板完成的。具体定制的内容：　　1.字体的修改　　2.版面占比的调整　　　　3.UI细节的修改（新增了代码框灰色背景）　　4.加入了用户头像和一些修饰动图　　5.时钟，Github conner，侧边分享栏，回到顶...
复制链接

扫一扫