简单的博客页面客制化 v2
生活随笔
收集整理的這篇文章主要介紹了
简单的博客页面客制化 v2
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
DIY博客的頁面
去繁就簡，去掉了一些不必要的功能。
針對新版本的特性做了更改，修正了一些bug。
自己水平不夠，選了個比較順眼的皮膚，大部分是套用網上現成的模板完成的。
具體定制的內容：
1.字體的修改
2.版面占比的調整
3.UI細節的修改(新增了代碼框灰色背景)
4.加入了用戶頭像 和 一些修飾動圖
5.時鐘，Github conner，側邊分享欄，回到頂部按鈕 等小插件
6.刪除了 訪客訪問來源統計面板
7.添加了 城市天氣插件
8.刪除了 Live2d看板娘
9.圖片放大功能(改善了雙擊放大的bug
? 10.圖片分享動態浮窗
? 11.去掉了 flash音樂播放器
? 12.3D效果標簽云
? 13.背景圖更換(優化了隨機壁紙分辨率)
? 14.背景漂浮線段的動態效果
? 15.鼠標點擊浮現字幕的特效
? 16.刪除了 QQ聯系、一鍵加群 和 打賞功能
? 17.更改了推薦按鈕
? 18.段落標題hover效果
? 19.去掉了 網址欄logo
? 20.自定義按鈕欄
? 21.評論區默認字幕更改
? 22.標題欄下方冒泡動態效果
? ? ? 23.定制鼠標貼圖
? ? ? 22.動態改變網頁標題
需要先申請JS權限
代碼：
標題：
<h1 style="text-align: right"><span style="color: rgba(255, 255, 255, 1)"><strong>YukiRinLL</strong></span><span style="font-style: italic"><p> SutsuharaYuki</p></span> </h1>子標題：
<h2 style="text-align: right"><span style="color: rgba(255, 255, 255, 1)"><strong>我知道,痛苦乃是唯一的高貴,無論人世和地獄都不能將其侵蝕.</strong><br><strong> 為了把我那神秘的冠冕編綴,須將一切時代一切領域征集.</strong><br></span><span style="color: rgba(129, 215, 211, 1)"><p> ——波德萊爾 《惡之花》· 祝福</p></span> </h2>皮膚：
頁面定制CSS代碼：
/*================================*/ #home {zoom:0.85;/*縮放 0.85*/opacity: 0.80;/*透明度 默認0.80*/margin: 0 auto;width: 75%;/*原始65 自定義55*/min-width: 980px;/*頁面頂部的寬度 默認980*/background-color: rgba(245, 245, 245, 0.5);padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } /*================================*/ body {color: #000;/*原來用的背景圖*/background: url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg')fixed;/*背景圖*/background-size: cover;background-repeat: no-repeat;/*字體修改*/font-family: "Helvetica Neue",'Lato', "PingFang SC", "Microsoft YaHei", sans-serif,Helvetica,Verdana,Arial,sans-serif;font-size: 12px;/*set14*/line-height: 2;min-height: 101%;color: #555;}/*博客標題*/ #blogTitle {height: 100px; /*高度*/clear: both;background-color: rgba(245, 245, 245, 0); } #blogTitle h1 {font-size: 36px/*set 26*/;font-weight: bold;line-height: 1.8em;/*原始 1.6em set 1.5*/margin-top: 10px;/*原始 15px */margin-bottom: 20px;text-align: center;color: #81D7D3; } .headermaintitle {display: inline-block;vertical-align: top;line-height: 36px ！calc;font-size: 26px;font-weight: normal;color:#fff !important;font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; } #blogTitle h2 {font-weight: normal;font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/ line-height: 1.8;color: #111;font-weight: bold;text-align: right;float: right; } #navigator{width: 61.8%;/*customed*/background-color: rgba(0,0,0,0.35); } #navList a:link, #navList a:visited, #navList a:active{color: #eee;font-size: 18px;font-weight: bold; } .blogStats{color: #eee; } .postTitle {border-left: 8px solid rgba(33, 160, 139, 0.68);margin-left: 10px;margin-bottom: 10px;font-size: 20px;clear: both; } .postTitle a:link, .postTitle a:visited, .postTitle a:active {color: #21759b;transition: all 0.4s linear 0s; } .postTitle a:hover {margin-left: 30px;color: #0f3647;text-decoration: none; } .postCon {float: right;line-height: 1.5em;width: 90%;/*默認100*/clear: both;padding: 10px 0; } .day .postTitle a {padding-left: 10px; } .day {background: rgba(255, 255, 255, 0.5); } /*================================*//* 修改鼠標樣式為圖片 */ *{cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku1.png'), auto; } a{cursor:url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470910/o_miku2.png'), auto; }/*反饋欄*/ .feedback_area_title {margin-bottom:0;border-bottom:1px solid #EDEDED; } .feedbackItem {background-color: #F5F5F5;margin-top:10px; } .feedbackListSubtitle {padding:10px 10px 0 10px; } .feedbackCon {padding:10px;margin:0; } .feedbackCon img {border-radius: 50%;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out; } .feedbackCon img:hover {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);-o-transform: rotateZ(360deg);transform: rotateZ(360deg); } .feedbackCon .body_right {padding:0 10px 0 0; } .feedbackCon .comment_vote {padding:10px 0 0 0; }/*評論區*/ #comment_nav {margin-top:10px; } #commentform_title {margin-bottom:0;border-bottom:1px solid #EDEDED; }/*button input 美化*/ .input_my_zzk{ border-radius:3px; border: 1px solid #000000; width:120px; height:26px; } input.btn_my_zzk {height: 30px;padding:5px 10px;vertical-align: none; border-radius:3px; border:1px solid; } .comment_btn{height: 38px; border-radius:3px; border:1px solid; }/*代碼框背景*/ .cnblogs_code {background: #D6D6D6 !important; }/*代碼框一些其他定制*/ .code_img_closed,.code_img_opened {cursor:pointer; } .cnblogs_code_collapse {cursor:pointer;border:0;padding:0; } .cnblogs_code_toolbar {display:none; }/*文章附加信息*/ .postDesc { background: url(images/posted_time.png) no-repeat 0 1px;color: #757575;float: left;width: 100%;clear: both;text-align: left; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 13px;padding-right: 20px;/*5px padding-left: 90px;posted 發表時間左邊距離*/margin-top: 20px;line-height: 1.8;padding-bottom: 35px; } .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar {background: rgba(255, 255, 255, 0.5);margin-bottom: 35px;word-wrap: break-word; } .CalTitle{background: rgba(255, 255, 255, 0); } .catListTitle{background-color: rgba(33, 160, 139, 0.9); } #topics{background: rgba(255, 255, 255, 0.5); } .c_ad_block{display: none; } #tbCommentBody{width: 100%;/*默認100*/height: 200px;background: rgba(255, 255, 255, 0.5); } #q{background: rgba(255, 255, 255, 0);} .CalNextPrev{background: rgba(255, 255, 255, 0);} .cnblogs_code{background: rgba(255, 255, 255, 0); } .cnblogs_code div{background: rgba(255, 255, 255, 0); } .cnblogs_code_toolbar{background: rgba(255, 255, 255, 0); } .entrylist{background: rgba(255, 255, 255, 0.5); }/*推薦置頂設置*/ #div_digg{position:fixed;bottom:5px;width:140px;right:650px;border:2px solid #6FA833;padding:10px;background-color:#fff;border-radius:5px 5px 5px 5px !important;box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);} #div_digg:hover {box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5);} /*段落標題Hover效果設置*/#cnblogs_post_body{color: black; font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;font-size: 15px;}#cnblogs_post_body h1 {background: #169FE6;border-radius: 4px 4px 4px 4px;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 23px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h2 {background: #169FE6;border-radius: 4px 4px 4px 4px;color: #FFFFFF;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 20px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h3 {background: #D191FF;border-radius: 4px 4px 4px 4px;color: #FFFFFF;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 18px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h4{background: #A8D08D;border-radius: 4px 4px 4px 4px;color: #FFFFFF;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;font-size: 18px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 0 0;padding: 5px 0 5px 5px;transition: all 0.8s;}#cnblogs_post_body h1:hover {transform: rotateX(360deg);background-color: #0066FF;}#cnblogs_post_body h2:hover {transform: rotateX(360deg);background-color: #0066FF;}#cnblogs_post_body h3:hover {transform: rotateX(360deg);}#cnblogs_post_body h4:hover {transform: rotateX(360deg); } /*QQ_contact --未實現*/ CSS
博客側邊欄公告(支持HTML代碼)(支持JS代碼)：
Border頁首Html代碼：
<!--隨機背景圖--><script type="text/javascript">//<!CDATA[var bodyBgs = [];bodyBgs[0] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg";bodyBgs[2] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_99dc832a4dbb6bb3d62a292e8cf12f8d1652b5fd.jpg";bodyBgs[3] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_92206e6dd9468cf5b3d3202f7f66c7dfc64d4e04.jpg"; bodyBgs[4] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044364624-3.jpg"; bodyBgs[5] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_1-1Z10H24410-50.jpg"; bodyBgs[6] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_81877565632b8c89eacd8bd0ae26938199d49f79.jpg"; bodyBgs[7] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_e6674c08fbe0db19383ee84310c39459c2b44453gai2.jpg"; bodyBgs[8] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720150814130149.jpg"; bodyBgs[9] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044362493-19.jpg"; bodyBgs[10] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170133.jpg"; bodyBgs[11] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170140.jpg"; bodyBgs[12] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170216.jpg"; bodyBgs[13] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_2044361E0-2.jpg"; bodyBgs[14] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_QQ%E5%9B%BE%E7%89%8720181111170227.jpg"; bodyBgs[15] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_o_IMG_107gai.jpg"; bodyBgs[16] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443C944-15.jpg"; bodyBgs[17] = "https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_20443B236-14.jpg"; //bodyBgs[18] = ""; //bodyBgs[19] = ""; //bodyBgs[22] = ""; //bodyBgs[23] = ""; //bodyBgs[24] = "";var randomBgIndex = Math.round( Math.random() * 17 );//輸出隨機的背景圖document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ')fixed;background-size:cover;no-repeat 50% 0}</style>');//]]></script><!--Wider的一些樣式--> <link href="https://blog-static.cnblogs.com/files/SutsuharaYuki/font-awesome.min.css" rel="stylesheet"><!-- 定時器 --> <script> function customTimer(inpId, fn) {if ($(inpId).length) {fn();}else {var intervalId = setInterval(function () {if ($(inpId).length) { //如果存在了clearInterval(intervalId); // 則關閉定時器customTimer(inpId, fn); //執行自身}}, 100);} } function generateTagClouds() {$('.catListTag>ul').wrap('<div class=\'wrap\' ></div>').parent().css({ 'width': '240px', 'height': '240px' });var options = {'range': [-200, 300],'gravity': -10,'xPos': 0.5,'yPos': 0.5,'gravityVector': [0, 0, 1],'interval': 100,'hoverGravityFactor': 0};$('div.wrap').starfieldTagCloud(options); } $(function () {...customTimer('.catListTag', generateTagClouds);... }); </script><!-- 自定制樣式文件以及腳本 --> <!-- 分享 --><!-- 外源加載 --> <!-- JiaThis Button BEGIN --> <script type="text/javascript" > var jiathis_config={siteNum:15,sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",summary:"",boldNum:6,showClose:true,shortUrl:false,hideMore:false } </script> <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script> <!-- JiaThis Button END --> head頁腳Html代碼：
<script src="https://blog-static.cnblogs.com/files/SutsuharaYuki/MathJax.js?config=TeX-AMS_HTML"></script> <script src="https://files.cnblogs.com/files/SutsuharaYuki/SmoothScroll.min.js"></script> <script type="text/javascript"> //var canShowAdsense=function(){return !!0};//去廣告$(document).ready(function(){//美化footer var footer=$("#footer");var text=footer.text();footer.empty();footer.prepend('<div id="customFooter"><h1 class="footer-title">Contact with me</h1><ul><li><a href="#" target="_blank">Email</a></li><li><a href="#" target="944989026@qq.com">Wechat</a></li><li><a href="#" target="_blank">Github</a></li><li><a href="#" target="https://github.com/YukiRinLL">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>'); });// 控制臺輸出信息 (function(a){if (!a) return;var msg = "%c歡迎訪問YukiRinLL的博客,\n鄙人蒟蒻,望各位大佬多加指點.\n ";if (window.chrome) {a.log("%c ", "padding:50px;background:url('https://pic.cnblogs.com/avatar/1683480/20190509225808.png')no-repeat;background-size: contain;");a.log(msg, "color:#0080FF");} else {a.log(msg.replace(/%c/g,''));} })(top.console);//ajaxComplete $(document).ajaxComplete(function(event, xhr, option) {//評論頭像if(option.url.indexOf("GetComments")>-1){setTimeout(function(){$.each($(".blog_comment_body"),function(index,ele){var self=$(ele);var id=self.attr("id").split("_")[2];var imgSrc=$("#comment_"+id+"_avatar").html()||"http://pic.cnblogs.com/avatar/simple_avatar.gif";self.before('<img src="'+imgSrc+'" style="float:left;" class="author_avatar">');});},200)};//評論框水印+調整頁腳if(option.url.indexOf("CommentForm")>-1){setTimeout(function(){$("#tbCommentBody").attr("placeholder","來玩嘛大爺╰(￣▽￣)╭")},200)}if(option.url.indexOf("GetFollowStatus")>-1){//美化“加關注”按鈕 if($("#sideBar #p_b_follow a").text()=="+加關注")$("#sideBar #p_b_follow :contains('+加關注')").html("<i class=\"fa fa-heart\" aria-hidden=\"true\"></i> 關注");}if(option.url.indexOf("sidecolumn")>-1){//日歷的兩個換頁按鈕$('.CalNextPrev a:contains("<")').empty().prepend('<i class="fa fa-chevron-left" aria-hidden="true"></i>');$('.CalNextPrev a:contains(">")').empty().prepend('<i class="fa fa-chevron-right" aria-hidden="true"></i>');//多彩標簽顏色var taglist=document.querySelectorAll('#sidebar_postcategory li a')for(var i = 0; i < taglist.length; i++) {taglist[i].className = 'color-'+Math.floor(Math.random()*12+1);}} }); //用來在head標簽中添加link標簽 function createLink(URL,lnkId,charset,media){var head = document.getElementsByTagName('head')[0],linkTag = null;if(!URL){return false;}linkTag = document.createElement('link');linkTag.setAttribute('rel','shortcut icon');linkTag.setAttribute('type','image/x-icon');linkTag.href = URL;head.appendChild(linkTag); }; createLink('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_u=2686629685,1606419266_fm=26_gp=0.jpg');var head=$("#header");//頁首動態效果 head.prepend('<canvas id="bubble-canvas" style="position:absolute;left:half;top:half;"></canvas>');//位置 var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true; function initHeader() {largeHeader = document.getElementById('header');_width = largeHeader.offsetWidth;// log(largeHeader.offsetWidth);_height = largeHeader.offsetHeight;// log(largeHeader.offsetHeight);_target = {x: 0, y: _height};_canvas = document.getElementById('bubble-canvas');_canvas.width = _width;_canvas.height = _height;_ctx = _canvas.getContext('2d');_circles = [];for(var x = 0; x < _width*0.5; x++) {var c = new Circle();_circles.push(c);}animate(); }; function addListeners() {window.addEventListener('scroll', scrollCheck);window.addEventListener('resize', resize); }; function scrollCheck() {if(document.body.scrollTop > _height) animateHeader = false;else animateHeader = true; }; function resize() {_width = largeHeader.offsetWidth;_height = largeHeader.offsetHeight;_canvas.width = _width;_canvas.height = _height; }; function animate() {if(animateHeader) {_ctx.clearRect(0,0,_width,_height);for(var i in _circles) {_circles[i].draw();}};requestAnimationFrame(animate); }; function Circle() {var _this = this;(function() {_this.pos = {};init();})();function init() {_this.pos.x = Math.random()*_width;_this.pos.y = _height+Math.random()*100;_this.alpha = 0.1+Math.random()*0.3;_this.scale = 0.1+Math.random()*0.3;_this.velocity = Math.random();};this.draw = function() {if(_this.alpha <= 0) {init();};_this.pos.y -= _this.velocity;_this.alpha -= 0.0005;_ctx.beginPath();_ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);_ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';_ctx.fill();}; }; addListeners(); initHeader();//文章列表美化 function breakSameDayArticles(article_list){var _i=0;while(_i<article_list.length) {var dayTitle=article_list[_i].getElementsByClassName('dayTitle')[0];var postTitle=article_list[_i].getElementsByClassName('postTitle');var postCon=article_list[_i].getElementsByClassName('postCon');var postDesc=article_list[_i].getElementsByClassName('postDesc');if(postTitle.length>1) {for (var _j = 0; _j < postTitle.length; _j++) {var day=document.createElement('div');day.className='day';day.appendChild(dayTitle.cloneNode(true));day.appendChild(postTitle[_j].cloneNode(true));day.appendChild(postCon[_j].cloneNode(true));day.appendChild(postDesc[_j].cloneNode(true));article_list[_i].parentNode.insertBefore(day,article_list[_i]);_i++;}article_list[_i].parentNode.removeChild(article_list[_i]);_i--;}_i++;} }; function parseToDOM(str){var div = document.createElement("div");if(typeof str == "string")div.innerHTML = str;return div.childNodes[0]; };function initBeauty(){var article_list=document.getElementsByClassName('day');breakSameDayArticles(article_list);beautyArticles(article_list); };// //消除遮罩 // document.addEventListener("DOMContentLoaded", function(){ // document.getElementById('loading').style.display = "none"; // }); </script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({showProcessingMessages: false, //關閉js加載過程信息messageStyle: "none", //不顯示信息extensions: ["tex2jax.js"],jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath: [ ["$", "$"] ], //行內公式選擇$displayMath: [ ["$$","$$"] ], //段內公式選擇$$skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'], //避開某些標簽 // ignoreClass:"comment-content" //避開含該Class的標簽},"HTML-CSS": {availableFonts: ["STIX","TeX"], //可選字體showMathMenu: false //關閉右擊菜單顯示} }); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); </script><script type="text/javascript"> /* 鼠標特效 */ var a_idx = 0; jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("朧月","十六夜","花鳥風月","黃昏","花筏","雪月花","花吹雪","秋晴れ","冬枯れ","さようなら");var $i = $("<span></span>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});}); }); </script><!-- fork github 控件 --> <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><!-- 天氣插件 --><!--外源加載--> <script type="text/javascript"> WIDGET = {FID: '9fVgD01DNt'} </script> <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script> foot部分模板在套用的時候根據自己的情況做了一些改變
一些腳本的瀏覽器可信還沒做好
去掉了flash實現部分
可能會做反饋欄和評論區樣式
可能會繼續做未完成的移動端兼容
呈上源碼以供分享
效果圖
?
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代碼：
View Code
博客側邊欄公告(支持HTML代碼)(支持JS代碼)：
View Code頁首Html代碼：
View Code頁腳Html代碼：
View Code部分模板在套用的時候根據自己的情況做了一些改變
一些腳本的瀏覽器可信還沒做好
圖片放大功能還存在一些小問題
(1.點擊展開代碼“+”時會觸發展開 2.放大后在最上層顯示不完全
3.評論區相關內容有時候加載不出來 )
后續可能會添加 Pet 、flash小游戲 之類的新功能
可能會做反饋欄和評論區樣式
可能會繼續做未完成的移動端兼容
呈上源碼以供分享
效果圖
?
?
總結
以上是生活随笔為你收集整理的简单的博客页面客制化 v2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 磁盘分区和挂载
- 下一篇： 地图位置开发解析(一)