博客資源
待更javascript
總地址
倉庫地址：githubphp
介紹
CSS
1.頁面定製
樣式表。css
#contentlinks{
background:rgba(255,255,255,0);
border:0px;
width:100%;
text-align:left;
padding-top:2px;
padding-bottom:2px;
transition-duration:0.2s;
}
#contentlinks:hover{
background:rgba(255,255,255,0.2);
border:2px solid #FFFFFF;
border-radius:4px;
padding-top:0px;
padding-bottom:0px;
transition-duration:0.2s;
}
#mainm{
height:98%;
width:170px;
position:fixed;
top:0px;
left:-200px;
padding-left:15px;
padding-right:15px;
padding-top:7%;
text-align:center;
z-index:100000000;
background:black!important;
}
#cmenu{
height:98%;
width:400px;
position:fixed;
top:0px;
right:-430px;
padding-left:15px;
padding-right:15px;
padding-top:3%;
text-align:center;
z-index:100000000;
background:black!important;
}
#cmenu h1{
color:white;
font-size:32px;
}
#menu{
height:85%;
overflow-y:scroll;
}
#menu h1{color:white;font-size:20px;font-family:"Helvetica Neue","微軟雅黑";font-weight:100;}
#menu h1 strong{font-weight:100!important;}
#menu h2{color:white;font-size:20px;font-family:"Helvetica Neue","微軟雅黑";font-weight:100;}
#menu h2 strong{font-weight:100!important;}
#menu h3{color:white;font-size:20px;font-family:"Helvetica Neue","微軟雅黑";font-weight:100;}
#menu h3 strong{font-weight:100!important;}
#menu h4{color:white;font-size:20px;font-family:"Helvetica Neue","微軟雅黑";font-weight:100;}
#menu h4 strong{font-weight:100!important;}
#menu h5{color:white;font-size:20px;font-family:"Helvetica Neue","微軟雅黑";font-weight:100;}
#menu h5 strong{font-weight:100!important;}
#menu h6{color:white;font-size:20px;font-family:"Helvetica Neue","微軟雅黑";font-weight:100;}
#menu h6 strong{font-weight:100!important;}
#menu::-webkit-scrollbar{background:#202020;}
#menu::-webkit-scrollbar-thumb{background:white;}
#linkk p{
font-family:"仿宋";
color:white;
font-size:30px;
}
#blog_stats{
font-family:"仿宋";
color:white;
font-size:20px;
}
#csdn p{
font-family:"Letter Gothic Std";
color:white;
font-size:30px;
}
#char{color:#D25252;}
#navList{font-size:14px;}
#cb_post_title_url{font-size:23px;}
#homepage1_HomePageDays_ctl00_DayList_TitleUrl_0{font-size:23px;}
#SubTitle{font-size:15px;}
#Header1_HeaderTitle{
font-family:"微軟雅黑";
font-size:32px;
}
#navigator{margin-top:-15px;}
#jrtjy{color:white;}
#tjy{
font-family:"微軟雅黑";
font-size:30px;
background:rgba(101,167,255,1);
opacity:0.8;
padding-top:7px;
padding-bottom:7px;
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:1000000;
}
#home{
width:75%;
margin-top:72px;
padding-top:5px;
background:rgba(255,255,255,0.7);
}
#friend{
height:0px;
position:relative;
overflow:hidden;
background:rgba(255,255,255,0.4)!important;
}
#but{
background-color:rgba(255,255,255,0.4);
border-radius:8px;
width:100%;
border:2px solid rgba(255,255,255,0.6);
}
#but:hover{
cursor:pointer;
background-color:rgba(255,255,255,0);
border-radius:8px;
width:100%;
border:2px solid rgba(255,255,255,0.6);
transition-duration:0.2s;
}
#but:active{
background-color:rgba(255,255,255,0);
border-radius:8px;
width:100%;
border:2px solid rgba(255,255,255,0.6);
transform:translateY(2px);
transition-duration:0.1s;
}
#but h1{
font-family:"微軟雅黑";
display:inline-block;
position:relative;
transition:0.3s;
}
#but h1:after{
content:'dalaos';
position:absolute;
opacity:0;
top:0;
right:-20px;
transition:0.3s;
}
#but:hover h1{padding-right:70px;}
#but:hover h1:after{opacity:1;right: 0;}
#blogCalendar{opacity:0.75;}
body{
background-repeat:no-repeat;
background-size:100% 100%;
background-attachment:fixed;
background-position:center;
overflow-x:hidden;
}
p{font-size:16px;}
#tbCommentBody{background:rgba(255,255,255,0.6);}
#q{background:rgba(255,255,255,0.4)!important;}
#google_q{background:rgba(255,255,255,0.4)!important;}
pre>code.hljs{opacity:0.9;}
pre.cpp>code.hljs{
font-family:"Consolas"!important;
color:#BED6FF!important;
background-color:#1E1E1E!important;
}
pre.css>code.hljs{
font-family:"Consolas"!important;
color:#F8F8F2!important;
background-color:#272822!important;
}
pre.html>code.hljs.xml{
font-family:"Consolas"!important;
color:#F8F8F2!important;
background-color:#272822!important;
}
pre.javascript>code.hljs{
font-family:"Consolas"!important;
color:#F8F8F2!important;
background-color:#272822!important;
}
pre.cpp .hljs-meta{color:#79ABFF;}
pre.cpp .hljs-meta-string>#special{color:#79ABFF;}
pre.cpp .hljs-keyword{color:#FFFFFF;font-weight:400;}
pre.cpp .hljs-literal{color:#FFFFFF;font-weight:400;}
pre.cpp .hljs-built_in{color:#FFFFFF;}
pre.cpp .hljs-number{color:#7FB347}
pre.cpp .hljs-title{color:#BED6FF;}
pre.cpp .hljs-string{color:#FFC600;}
pre.cpp .hljs-comment{color:#FFC600;}
pre.css .hljs-selector-id{color:#A6E22E;}
pre.css .hljs-selector-class{color:#A6E22E;}
pre.css .hljs-number{color:#AE81FF;}
pre.css .hljs-string{color:#E6DB74;}
pre.css .hljs-meta{color:#F9264C;}
pre.css .hljs-selector-tag{color:#F9264C;}
pre.css .hljs-selector-pseudo{color:#F8F8F2;}
pre.css .hljs-attribute{color:#66D9EF;}
pre.css .hljs-built_in{color:#66D9EF;}
pre.html .hljs-name{color:#F92659;}
pre.html .hljs-attr{color:#A6E22E;}
pre.html .hljs-string{color:#E6DB67;}
pre.html .hljs-tag{color:#F8F8F2;}
pre.javascript .hljs-keyword{color:#66D9EF;}
pre.javascript .hljs-string{color:#E6DB74;}
pre.javascript .hljs-built_in{color:#66D9EF;}
pre.javascript .hljs-title{color:#A6E22E;}
pre.javascript .hljs-params{color:#FD971F;}
pre.javascript .hljs-regexp{color:#E6BF4D;}
pre.javascript .hljs-number{color:#AE81FF;}
table{width:100%;}
#sideBar div{background:rgba(0,0,0,0);}
.header{background-color:rgba(0,0,0,0.15)}
img{opacity:0.7;}
#symbol{color:#D9E577;}
#mainbt{
background-color:rgba(255,255,255,0.7);
position:fixed;
text-align:right;
padding-right:0.5%;
left:-20px;
top:46%;
height:8%;
width:45px;
z-index:10000000;
border-radius:8px;
border:0px;
}
#mainbt span{font-size:30px;}
#menubt{
background-color:rgba(255,255,255,0.7);
position:fixed;
text-align:left;
padding-left:0.5%;
right:-20px;
top:46%;
height:8%;
width:45px;
z-index:10000000;
border-radius:8px;
border:0px;
}
#menubt span{font-size:26px;}
HTML
2.博客側邊欄公告
友鏈&側面菜單。html
<div align="center">
<button id="but">
<h1 style="font-size: 20px">友鏈</h1>
</button>
<div id="friend">
<h1 style="font-size: 17px">2017級</h1>
<a href="https://blog.csdn.net/EZ_2016gdgzoi471" style="color: red; font-size: 16px"><strong>TZW</strong></a><br>
<a href="https://www.cnblogs.com/2016gdgzoi316" style="color: red; font-size: 16px"><strong>LYX</strong></a><br>
<a href="https://www.cnblogs.com/ezoiHY" style="color: red; font-size: 16px"><strong>HY</strong></a><br>
<a href="http://www.cnblogs.com/Sleepy-Piggy/" style="color: red; font-size: 16px"><strong>CHX</strong></a><br>
<a href="https://www.cnblogs.com/2016gdgzoi509" style="color: red; font-size: 16px"><strong>WYC</strong></a><br>
<a href="https://blog.csdn.net/ezoihqm" style="color: red; font-size: 16px"><strong>HQM</strong></a><br>
<a href="https://blog.csdn.net/sillywxk" style="color: red; font-size: 16px"><strong>LPY</strong></a><br>
<a href="https://www.luogu.org/blog/200812yeh-yw666/" style="color: red; font-size: 16px"><strong>YEH</strong></a><br>
<a href="http://www.cnblogs.com/ezoiLZH/" style="color: red; font-size: 16px"><strong>LZH</strong></a>
<h1 style="font-size: 17px">2016級</h1>
<a href="https://blog.csdn.net/ezoixx130" style="color: red; font-size: 16px"><strong>ZH</strong></a><br>
<a href="https://www.luogu.org/blog/gzez-174-lc/" style="color: red; font-size: 16px"><strong>LC</strong></a><br>
<a href="https://blog.csdn.net/ezoixx118" style="color: red; font-size: 16px"><strong>MJS</strong></a>
</div>
</div>
<button id="mainbt">
<span>»</span>
</button>
<div id="mainm">
<a href="http://www.cnblogs.com/" id="linkk"><p>博客園</p></a><br>
<hr /><br>
<a href="http://www.cnblogs.com/eztjy" id="linkk"><p>首頁</p></a><br>
<hr /><br>
<a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" id="linkk"><p>新隨筆</p></a><br>
<hr /><br>
<a href="https://msg.cnblogs.com/send/%E8%92%9F%E8%92%BBTJY" id="linkk"><p>聯繫</p></a><br>
<hr /><br>
<a href="http://www.cnblogs.com/eztjy/rss" id="linkk"><p>訂閱</p></a><br>
<hr /><br>
<a href="https://i.cnblogs.com/" id="linkk"><p>管理</p></a><br>
<hr /><br>
<a href="https://blog.csdn.net/EZ_TJY" id="csdn"><p>CSDN</p></a><br>
<hr /><br>
<div align="center"><a href="http://www.amazingcounters.com/"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3225190&c=9675883" alt="AmazingCounters.com" width="150px"></a></div><br>
<hr /><br>
</div>
<button id="menubt">
<span>≡</span>
</button>
<div id="cmenu">
<h1>目錄</h1>
<br>
<div id="menu"></div>
</div>
3.頁首
頁首標題&JS代碼加載。java
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/Icon.js"></script>
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/Background.js"></script>
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/Codes.js"></script>
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/Circles.js"></script>
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/Buttons.js"></script>
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/Contents.js"></script>
<script type="text/javascript" defer="defer" async src="https://blog-static.cnblogs.com/files/eztjy/AdBlock.js"></script>
<div id="tjy" align="center">
<a href="https://www.cnblogs.com/eztjy" id="jrtjy">蒟蒻TJY的博客</a>
<p id="jrtjy" style="font-family:仿宋">要是別人說懷有但願是錯誤的事，無論幾回我都必定會否認這句話，無論到何時。</p>
</div>
JS
4.加載圖標
文件存在favicon.ico。git
$(function(){
var x=$("<link></link>").attr({
"rel":"icon",
"href":"https://files.cnblogs.com/files/eztjy/favicon.ico",
"type":"image/x-icon"
});
$("head").append(x);
});
5.加載目錄
代碼掃描主題中的標題，根據等級組織。github
$(function(){
window.doc=document;
var ch=$("#cnblogs_post_body").find(":header"),
chs=ch.clone(),
sons=[];
for(var i=0,len=chs.length;i<len;i++){
if(chs[i].tagName=="H1")chs[i].innerHTML=""+chs[i].innerHTML;
else if(chs[i].tagName=="H2")chs[i].innerHTML="  "+chs[i].innerHTML;
else if(chs[i].tagName=="H3")chs[i].innerHTML="    "+chs[i].innerHTML;
else if(chs[i].tagName=="H4")chs[i].innerHTML="      "+chs[i].innerHTML;
else if(chs[i].tagName=="H5")chs[i].innerHTML="        "+chs[i].innerHTML;
else if(chs[i].tagName=="H6")chs[i].innerHTML="          "+chs[i].innerHTML;
var bt=$("<button></button>").attr("id","contentlinks").append(chs[i]);
bt.click(function(){window.scrollTo(0,doc.getElementById(this.childNodes[0].id).offsetTop-80);});
sons.push(bt,"<br>");
}
$("#menu").append(sons);
});
6.更改代碼樣式
使代碼中的符號有顏色。web
var sps=['%','^','&','*','(',')','-','+','=','{','}','[',']','|',':',';','<',',','>','.','/','?','!',"~"],
pttc=/'[\s\S]'/g;
function special(c){return sps.indexOf(c)!=-1;}
function expandstr(e){
var str=e.text().split(""),
txt="",
fsp=$("<span></span>");
e.after(fsp);
fsp.append(e);
e=fsp;
for(var i=0,len=str.length;i<len;i++){
if(special(str[i])){
e.text(txt);
txt="";
var sp=$("<span></span>").attr("id","symbol").text(str[i]);
e.after(sp);
e=$("<span></span>");
sp.after(e);
}else txt+=str[i];
}
e.text(txt);
}
function markcode(e){
var ch=e.contents();
for(var i=0,len=ch.length;i<len;i++){
var cls=ch[i].className;
if(typeof(cls)=="undefined")expandstr(ch.eq(i));
else if(cls=="hljs-function"||cls=="hljs-params")markcode(ch.eq(i));
}
ch=e.find("*");
for(var i=0,len=ch.length;i<len;i++)if(pttc.test(ch.eq(i).text()))ch.eq(i).attr("id","char");
}
$(function(){
var chs=$("pre.cpp>code.hljs");
for(var i=0,len=chs.length;i<len;i++)markcode(chs.eq(i));
});
7.鼠標點擊特效
當鼠標點擊時生成一個圓。app
function randomcolor(){
var r=parseInt(Math.random()*256).toString(16);
var b=parseInt(Math.random()*256).toString(16);
var g=parseInt(Math.random()*256).toString(16);
return "#"+r+g+b;
}
var bd=$("body"),
$d=$("<div></div>"),
sty={
"border-radius":"50%",
"width":"0px",
"height":"0px",
"position":"absolute",
"pointer-events":"none",
"opacity":"1",
"z-index":"2147483647"
};
function gene(e){
var pg=[e.pageX,e.pageY];
bd.unbind("click");
$d.css(sty);
$d.css({
"border":"2px solid "+randomcolor(),
"left":pg[0],
"top":pg[1]
});
var x=parseInt(pg[0])-150,
y=parseInt(pg[1])-150;
$d.animate({
width:"300px",
height:"300px",
left:x.toString()+"px",
top:y.toString()+"px",
opacity:"0"
},400,function(){bd.bind("click",gene);});
}
$(function(){
$d.css(sty);
$("body").append($d);
bd.bind("click",gene);
});
8.加載按鈕
加載友鏈，左、右側欄的按鈕。dom
$(function(){
$("#mainm").append($("#blog_stats"));
$("#stats_post_count").text($("#stats_post_count").text().trim()).after("<br>");
$("#stats_article_count").text($("#stats_article_count").text().trim()).after("<br>");
$("#header").remove();
var fr=$("#friend"),
mbt=$("#mainbt"),
mbts=$("#mainbt span"),
mm=$("#mainm"),
cm=$("#cmenu"),
mnbt=$("#menubt");
$("#but").click(function(){
if(fr.css("height")!="0px")fr.animate({height:"0px"});
else fr.animate({height:"262px"});
});
mbt.click(function(){
if(mm.css("left")!="0px"){
setTimeout(function(){mm.animate({left:"0px"},200);},100);
setTimeout(function(){mbt.animate({left:"180px"},200);mbts.text("«");},0);
}else{
setTimeout(function(){mm.animate({left:"-200px"},200);},100);
setTimeout(function(){mbt.animate({left:"-20px"},200);mbts.text("»");},0);
}
});
mnbt.click(function(){
if(cm.css("right")!="0px"){
setTimeout(function(){cm.animate({right:"0px"},200);},100);
setTimeout(function(){mnbt.animate({right:"410px"},200);},0);
}else{
setTimeout(function(){cm.animate({right:"-430px"},200);},100);
setTimeout(function(){mnbt.animate({right:"-20px"},200);},0);
}
});
});
9.加載背景
隨機切換兩張背景圖。
$(function(){
var x=Math.floor(Math.random()*2),
bd=$("body");
if(x==0){bd.css("background-image","url(https://www.cnblogs.com/images/cnblogs_com/eztjy/1277698/o_background1.jpg)");}
else if(x==1){bd.css("background-image","url(https://www.cnblogs.com/images/cnblogs_com/eztjy/1277698/o_background2.jpg)");}
});
10.刪除廣告
將頁面底部的廣告刪除。
$(function(){
$("#ad_t2").remove();
$("#opt_under_post").remove();
$("#cnblogs_c1").remove();
$("#under_post_news").remove();
$("#under_post_kb").remove();
$("#cnblogs_c2").remove();
});
相關文章
- 1. 爬蟲github_博客資源
- 2. 博客源碼
- 3. 第一頁博客——從筆記到博客【附：豐富視頻資源】
- 4. 基於springboot的資源+博客系統發佈【原創】【開源】
- 5. Qt網絡資源彙總（官網、源碼、社區、博客）
- 6. 工具和開源博客
- 7. JavaWeb開源我的博客
- 8. 試試開源博客
- 9. CleanBlog(我的博客+源碼)
- 10. 【遷移博客】GreenDao源碼
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Java Agent入門實戰（二）-Instrumentation源碼概述
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 爬蟲github_博客資源
- 2. 博客源碼
- 3. 第一頁博客——從筆記到博客【附：豐富視頻資源】
- 4. 基於springboot的資源+博客系統發佈【原創】【開源】
- 5. Qt網絡資源彙總（官網、源碼、社區、博客）
- 6. 工具和開源博客
- 7. JavaWeb開源我的博客
- 8. 試試開源博客
- 9. CleanBlog(我的博客+源碼)
- 10. 【遷移博客】GreenDao源碼