自用博客样式记录（一）
样式效果
选用皮肤
皮肤选用：BlueSky. 不禁用模板默认CSS
页面定制CSS代码
/** 原有样式修改 */ #sideBar{ display: block; } #mainContent{ width: 70%; box-shadow: 0 0 0; border-radius: 0px; opacity: 0; transition:0.5s; margin-top:40px; } #main{ width: 70%; background-color: white; /*max-width: 700px;*/ } @media screen and (max-width: 1000px) { #main {width: 100%;} } body{ background-image: none; background-color: white; font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important; line-height: 1.8; } #cnblogs_post_body{ font-size: 16px; } #green_channel{ display: none; } #post_next_prev{ display: none; } .forFlow img{ margin-top: 0; } /** 去除广告 */ /*#cb_post_title_url{*/ /*display: none;*/ /*}*/ #cnblogs_c1{ display: none; } #cnblogs_c2{ display: none; } #ad_t2{ display: none; } #kb_block{ display:none } #under_post_news{ display:none } #header{ display:none } #BlogPostCategory{ display: none; } /*#comment_nav{*/ /*display: none;*/ /*}*/ .postDesc{ border-bottom:none; } #author_profile_follow{ display: none; } div.commentform textarea{ height: 120px; } /*#comment_form_container{*/ /*display: none;*/ /*}*/ /** 自定义样式 */ /* 加载条 */ #myProgressBar{ width: 15%; height: 2px; background-color: #eb5055; position: fixed; top: 0; left: 0; z-index: 999; } #nprogress { pointer-events: none; } #nprogress .bar { background: #eb5055; position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #eb5055, 0 0 5px #eb5055; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } #nprogress .spinner { display: block; position: fixed; z-index: 1031; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #eb5055; border-left-color: #eb5055; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { overflow: hidden; position: relative; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /** 导航栏 */ #mynavbar{ width: 100%; height: 70px; position: fixed; display: block; top: 0px; z-index: 100; background-color: white; transition:0.5s ease-in-out; box-shadow: 0 1px 5px rgba(0,0,0,.1); } #mynavbar_menu{ display: inline-block; width: auto; position: relative; float: right; text-align: right; line-height: 68px; } #mynavbar_menu a{ padding: 0 15px; font-size: 14px; outline: 0; color: #313131; text-decoration: none; } #mynavbar_menu a:hover{ color: #eb5055 !important; } /** 头部 */ #myheader{ background-color: #2175bc!important; margin-top:70px; position: relative; width: 100%; height: 300px; } #myheader_bg{ width:100%; height:300px; background-position: center; background-size: cover; -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px); position: absolute; } #myheader_cover{ position: relative; margin-top: 70px; width: 100%; height: 300px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 5px rgba(0,0,0,.3); } #mypost_title{ position: relative; top: 105pt; margin: 0 auto; padding: 30px 25px 20px; max-width: 700px; color: white; transition:0.5s; opacity: 0; } #mypost_title_e{ margin: 0; padding: 5px 0 15px; } #mypost_title_e a{ border: 1px solid #6fa3ef; border-radius: 15px; background: #6fa3ef; color: #fff;display: inline-block; margin: 4px 8px 0 0; padding: 0 15px; letter-spacing: 0; font-weight: 600; font-size: 13px;outline: 0;text-decoration: none; transition: 0.5s; } #mypost_title_e a:before{ content: "# " } #mypost_title_e a:hover{ background-color: white; border: 1px solid white; color:black; } #mypost_title_f a{ color: white; } #mypost_title_f a:hover{ text-decoration:none; } /** 右侧导航 */ #right_meun{ position: fixed; z-index: 999; top: 100px; left: 75%; display: none; text-align: left; border-left: 1px solid #ddd; font-size: 12px; } #right_meun li{ list-style: none!important; } #right_meun a{ display: inline-table; margin-left: 5px; white-space: nowrap; text-decoration: none; color: #313131; outline: 0; } #right_meun a:hover{ color: #eb5055; } #right_meun>li::before { position: relative; top: 0; left: -4px; display: inline-block; width: 7px; height: 7px; content: ''; border-radius: 50%; background-color: #eb5055; } /* 底部导航 */ #post-bottom-bar{ position: fixed; right: 0; bottom: 0; left: 0; z-index: 2; height: 3pc; border-top: 1px solid #e0e0e0; background-color: #fff; margin: 0; padding: 0; transition: 0.5s ease-in-out; } #post-bottom-bar a{ text-decoration: none!important; } .post-bottom-bar .bottom-bar-inner{ margin: 0 auto; padding: 0 10px; max-width: 900px; } .bottom-bar-items{ margin: 0 0 0 10px; color: #313131; font-size: 14px !important; line-height: 3pc;float: left; } .post-bottom-bar{ margin: 0 0 0 10px; color: #313131; font-size: 14px; line-height: 3pc; } .post-bottom-bar .social-share .bottom-bar-item { padding: 4px; } .post-bottom-bar .bottom-bar-item.bottom-bar-facebook a { background-color: #4267b2; color: #fff; } .post-bottom-bar .social-share .bottom-bar-item a { padding: 2px 10px; border-radius: 15px; } .post-bottom-bar .bottom-bar-item a { margin: 0; padding: 9pt; border: 0; background: 0 0; color: #313131; font-size: 14px; line-height: 3pc; cursor: pointer; } .post-bottom-bar .bottom-bar-item.bottom-bar-twitter a { background-color: #1b95e0; color: #fff; } .post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a { background-color: #5f5f5f; color: #fff; } .bottom-bar-item a:hover{ color: #eb5055; } /** MarkDown样式调整 */ .cnblogs-markdown .hljs{ font-size: 16px!important; line-height: 2!important; padding: 15px!important; } .cnblogs-markdown code{ background:rgb(238,240,244) none !important; border:0px !important; color: rgb(73,59,92) !important; font-size: 16px!important; } .cnblogs-markdown h2{ font-weight: 500; margin: 20px 0; } .cnblogs-markdown h2:before{ content: "#"; color: #eb5055; position: relative; top: 0; left: -12px; } #cnblogs_post_body h2{ font-weight: 500; margin: 20px 0; } #cnblogs_post_body h3{ font-size: 16px; font-weight: bold; line-height: 1.5; margin: 10px 0; } .cnblogs-markdown h3:before{ content: "##"; color: #2175bc; position: relative; top: 0; left: -8px; } .postBody blockquote, .postCon blockquote{ background-image: none; border-left: 5px solid #DDDFE4; background-color: #EEF0F4; width: 100%; padding: 6px 0 6px 25px; } blockquote{ border:0; } /* code加上行数 */ .cnblogs-markdown .syntaxhighlighter table td.code { width:95% !important; } .cnblogs-markdown .syntaxhighlighter code { font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important; padding: 0 !important; border-radius: 0 !important; background-color: transparent !important; } .cnblogs-markdown .syntaxhighlighter code:before, .cnblogs-markdown .syntaxhighlighter code:before { letter-spacing: -0.5em; } /** 更改浏览器滚动条和选中字体背景颜色 */ ::selection { background-color: #eb5055; color: #fff; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { min-height: 28px; background-color: #c2c2c2; background-clip: padding-box; } ::-webkit-scrollbar-track-piece { background-color: #fff; } *, :after, :before { box-sizing: border-box; } /* 定制公告栏时钟位置 */ #clockdiv { /* left, center, right */ text-align: center; } /* 评论列表：支持、反对、删除、修改4个按钮隐藏 */ .comment_vote a{ display: none; } .comment_actions a{ display: none; } /* 文章title自定义带动画样式 */ .postTitle { font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; clear: both; background-color: #FBF9F9; margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px; margin-top: 20px; border-left: 3px solid #21759b; padding-left: 20px; font-size: 20px; border-radius:0px; } .postTitle a:hover { text-decoration: none; margin-left: 20px; color: #E00000; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { transition: all 0.4s linear 0s; } /*飞天火箭*/ #scrollTop div{ left:0; overflow:hidden; position:absolute; top:0; width:149px; margin:0; padding:0 } #scrollTop .level-2{ background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; display:none; height:250px; opacity:0; z-index:1 } #scrollTop .level-3{ background:none repeat scroll 0 0 transparent; cursor:pointer; display:block; height:150px; z-index:2 } #scrollTop{ background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent; cursor:default; display:block; height:180px; overflow:hidden; position:fixed; right:0; top:90%; width:149px; z-index:11; margin:-125px 0 0; padding:0 } /*好看的点赞按钮*/ #div_digg{ padding: 5px; border-radius: 5px; position: fixed; left: 0; bottom: 80px; width:80px; z-index:100; } .diggit{ background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat; width: 60px; height: 60px; } #div_digg .diggnum{ position: absolute; bottom: -20px; left: 6px; background: #D0D0D0; padding: 2px 0; display: block; color: #555; font-size: 12px; text-align: center; width: 60px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; } /* 删除反对按钮,有点邪恶了 */ .buryit{ display: none; }
侧边栏代码
<a href="https://info.flagcounter.com/bU1N"><img src="https://s11.flagcounter.com/count2/bU1N/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a> <meta charset="utf-8"/> <h2><B>一言（ヒトコト）</B></h2> <div class="daily a pome"> <div class="daily pome" id="qwq"></div> <script> var st=["<center>没有神的光环，我们生而平凡 <br> <center>这就是你不拿rank1得理由？<br>", "<center>我遇见你，我记住你<br><center>这座城市天生适合恋爱，<br><center>你的灵魂天生适合我<br>", "<center>你知道<br><center>Nice to meet you<br><center>是什么意思么？<br><center>很高兴见到你呗<br><center>不啊，“有生之年，幸得相逢。”<br>", "<center>前半生无你<br><center>余生请指教.<br>", "<center>你好，冒昧打搅了<br><center>我今天也特别喜欢你.<br>", "<center>it takes sonebody an hour to like someonoe,<br><center>and a day to like someone,<br><center>but it takes a life time to forget someone.<br>", "<center>you have only one life and one chance to do all the things you want to do.<br>", "<center>你就像桌上那份时事报,<br><center>当时读新鲜，以后读怀念<br><center>悲欢越来越远,<br><center>可还是会小心翼翼地折好，安放<br>", "<center>你特别好，我喜欢你<br>", "<center>我终不能改变那个开始，<br><center>何不忘了那个结局呢？<br>", "<center>it takes only a smile to make a darkday seem bright<br>", "<center>无论在哪里遇上你，<br><center>我都会喜欢你<br>", "<center> 你若盛开，清风自来<br>", "<center>用我一生,<br><center>换你十年天真。<br><center>忘了我吧，<br><center>吴邪。<br>", "<center>太想摘取星星得人，<br><center>往往忽视了脚下得鲜花。<br>", "<center> 无论发生什么，<br><center>希望你都不要后悔与我得相识。<br>", "<center> 生生生生暗生始，<br><center>死死死死冥死终。<br>", "<center> 未来不是被给予的，<br><center>而是自己争取的。 <br>", "<center> あたいってば最強ね！ <br>", "<center> 十步杀一人，<br><center> 千里不留行。<br>", "<center> 当一切都消失得时候<br><center> 你就会明白生命有何价值<br>", "<center> 不是他，变成他<br>", "<center> 也许我们都没有长大，<br><center> 只是世界变小了。<br>", "<center> Time waits for no one.<br>", "<center> 和绝望，<br><center> 和睦相处<br>"]; var num; num=Math.floor((Math.random()*25)); document.write(st[num]); var cli; </script> <div style="font-size: 1em; text-align: center; line-height: 1.5em; display: none; " id="qwq"></div> <div style="text-align: right; margin-top: 15px; font-size: 0.9em; color: #666; display: none; " id="qwq"></div> </div> <!--<div style = "display:none;">动态线条</div>--> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script> <!--<div style = "display:none;"> 动态线条end</div>--> <!--<div style = "display:none;">旋转立方体</div>--> <style> /*最外层容器样式*/ .wrap { width: 100px; height: 100px; margin: 150px; position: absolute; } /*包裹所有容器样式*/ .cube { width: 50px; height: 50px; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-80deg); animation: rotate linear 20s infinite; } @-webkit-keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube div { position: absolute; width: 200px; height: 200px; opacity: 0.8; transition: all .4s; } /*定义所有图片样式*/ .pic { width: 200px; height: 200px; } .cube .out_front { transform: rotateY(0deg) translateZ(100px); } .cube .out_back { transform: translateZ(-100px) rotateY(180deg); } .cube .out_left { transform: rotateY(-90deg) translateZ(100px); } .cube .out_right { transform: rotateY(90deg) translateZ(100px); } .cube .out_top { transform: rotateX(90deg) translateZ(100px); } .cube .out_bottom { transform: rotateX(-90deg) translateZ(100px); } /*定义小正方体样式*/ .cube span { display: block; width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; } .cube .in_pic { width: 100px; height: 100px; } .cube .in_front { transform: rotateY(0deg) translateZ(50px); } .cube .in_back { transform: translateZ(-50px) rotateY(180deg); } .cube .in_left { transform: rotateY(-90deg) translateZ(50px); } .cube .in_right { transform: rotateY(90deg) translateZ(50px); } .cube .in_top { transform: rotateX(90deg) translateZ(50px); } .cube .in_bottom { transform: rotateX(-90deg) translateZ(50px); } /*鼠标移入后样式*/ .cube:hover .out_front { transform: rotateY(0deg) translateZ(200px); } .cube:hover .out_back { transform: translateZ(-200px) rotateY(180deg); } .cube:hover .out_left { transform: rotateY(-90deg) translateZ(200px); } .cube:hover .out_right { transform: rotateY(90deg) translateZ(200px); } .cube:hover .out_top { transform: rotateX(90deg) translateZ(200px); } .cube:hover .out_bottom { transform: rotateX(-90deg) translateZ(200px); } </style> <!-- 外层最大容器 --> <div class="wrap"> <!--包裹所有元素的容器--> <div class="cube"> <!--前面图片 --> <div class="out_front"> <img src="https://i.loli.net/2018/05/03/5aeb0eef73838.jpg" class="pic"> </div> <!--后面图片 --> <div class="out_back"> <img src="https://i.loli.net/2018/05/03/5aeb0f2fb9a83.jpg" class="pic"> </div> <!--左面图片 --> <div class="out_left"> <img src="https://i.loli.net/2018/05/03/5aeb0f55411f0.jpg" class="pic"> </div> <!--右面图片 --> <div class="out_right"> <img src="https://i.loli.net/2018/05/03/5aeb0f79a1124.jpg" class="pic"> </div> <!--上面图片 --> <div class="out_top"> <img src="https://i.loli.net/2018/05/03/5aeb0f98a8b66.jpg" class="pic"> </div> <!--下面图片 --> <div class="out_bottom"> <img src="https://i.loli.net/2018/05/03/5aeb0fdd51b7e.jpg" class="pic"> </div> <!--小正方体 --> <span class="in_front"> <img src="https://i.loli.net/2018/05/03/5aeb100223dd0.jpg" class="in_pic"> </span> <span class="in_back"> <img src="https://i.loli.net/2018/05/03/5aeb101c2c24b.jpg" class="in_pic"> </span> <span class="in_left"> <img src="https://i.loli.net/2018/05/03/5aeb1038127b5.jpg" class="in_pic"> </span> <span class="in_right"> <img src="https://i.loli.net/2018/05/03/5aeb0dce1ca55.jpg" class="in_pic"> </span> <span class="in_top"> <img src="https://i.loli.net/2018/05/03/5aeb1057bb167.jpg" class="in_pic"> </span> <span class="in_bottom"> <img src="https://i.loli.net/2018/05/03/5aeb107514579.jpg" class="in_pic"> </span> </div> </div> <!--<div style = "display:none;">旋转立方体end</div>--> <!-- 添加公告栏时钟 --> <div id="clockdiv"> <canvas id="dom" width="120" height="120">时钟canvas</canvas> </div> <script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script> <!--QQ交谈--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=57953279&site=qq&menu=yes"> <img align="absmiddle" border="0" src="http://wpa.qq.com/pa?p=2:57953279:41 &r=0.30709030851721764" alt="欢迎与我联系" title="欢迎与我联系"> </a>
页首html代码
<!-- ............自定义首部代码开始............ --> <!-- 自定义进度条 --> <div id="myProgressBar"></div> <!-- 自定义导航条 --> <div id="mynavbar"> <div style="position:relative;width:65pc;height:70px;margin:0 auto;"> <a style="width: auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/jxl1996"> <img style="width: auto;height: 22px;outline: 0;margin-top: 25px;" src="https://ww1.sinaimg.cn/large/0062YmUwgy1fthbsa7nmoj302g02ggle.jpg"> </a> <div id="mynavbar_menu"> <a href="https://www.cnblogs.com/jxl1996">首页</a> <a href="https://msg.cnblogs.com/send/jxl1996">联系</a> <a href="javascript:;">Github</a> <a href="javascript:;">友情链接</a> <a href="https://www.cnblogs.com/">博客园</a> <a href="https://www.cnblogs.com/jxl1996/p/10321415.html">关于</a> <a href="https://i.cnblogs.com/">管理</a> </div> </div> </div> <!-- 自定义头部锚点 --> <a name="mtop"></a> <!-- 自定义头部 --> <div id="myheader"> <!-- 背景图片 --> <div id="myheader_bg"></div> <!-- 遮罩层 --> <div id="myheader_cover" title="点我点我"> <!-- 博客标题 --> <div id="mypost_title"> <div id="mypost_title_h" style="font-weight: 500;font-size: 21px;">佛系Coder</div> <!--<div id="mypost_title_f">Published on 2017-09-02 11:31 in 暂未分类 with 夏日浅笑、</div>--> <div id="mypost_title_e"> <!--<a href="https://www.cnblogs.com/jxl1996" style="">暂未分类</a>--> </div> </div> </div> </div> <!--<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">--> <!-- ............自定义首部代码结束............ --> <!--<div style = "display:none;" >把博客园图标替换成自己的图标 </div>--> <!--<script type="text/javascript" language="javascript">--> <!--//Setting ico for cnblogs--> <!--var linkObject = document.createElement('link');--> <!--linkObject.rel = "shortcut icon";--> <!--linkObject.href = "https://i.loli.net/2018/09/24/5ba8bcd213e78.jpg";--> <!--document.getElementsByTagName("head")[0].appendChild(linkObject);--> <!--</script>--> <!--<div style = "display:none;" >把博客园图标替换成自己的图标end </div>--> <!--漂亮的评论列表--> <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css"> <!--打赏插件--> <script> window.tctipConfig = { staticPrefix: "http://static.tctip.com", buttonImageId: 7, buttonTip: "dashang", list:{ alipay: {qrimg: "https://i.loli.net/2019/01/25/5c4b120458741.png"}, weixin:{qrimg: "https://i.loli.net/2019/01/25/5c4b1201de831.png"}, } }; </script> <script src="https://files.cnblogs.com/files/hafiz/tctip.min.js"></script> <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/myRewards.css">
页尾html代码
<!-- ............自定义尾部代码开始............ --> <div id="post-bottom-bar" class="post-bottom-bar"> <div class="bottom-bar-inner"> <!-- 左边 --> <div class="bottom-bar-items social-share" style="float: left;"> <span class="bottom-bar-item bottom-bar-facebook"> <a id="bottom-d" href="javascript:void(0)" target="_blank">好文要赞</a> </span> <span class="bottom-bar-item bottom-bar-twitter"> <a id="bottom-g" href="javascript:void(0)"" target="_blank">关注我</a> </span> <span class="bottom-bar-item bottom-bar-qrcode"> <a id="bottom-s" href="javascript:void(0)" target="_blank">收藏该文</a> </span> </div> <!-- 右边 --> <div class="bottom-bar-items right" style="float: right;"> <span class="bottom-bar-item"><a id="mbottom-left" href="javascript:void(0);">←</a></span> <span class="bottom-bar-item"><a id="mbottom-right" href="javascript:void(0);">→</a></span> <span class="bottom-bar-item"><a href="#mfooter">↓</a></span> <span class="bottom-bar-item"><a href="#mtop">↑</a></span> </div> </div> </div> <a name="mfooter"></a> <!-- ............自定义尾部代码结束............ --> <script type="text/javascript" src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script> <script type="text/javascript"> /** 用来设置初始时需要执行的js */ $(document).ready(function(){ //加载顶部进度条 NProgress.start(); NProgress.done(); $("#myProgressBar").hide(); //设置背景图片地址 if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") { $("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")"); }else{ // $("#myheader_bg").css("background-image","url(https://ww1.sinaimg.cn/large/0062YmUwgy1fthnpo4n7yj31hc0hrq8e.jpg)"); $("#myheader_bg").css("background-image","url(https://i.loli.net/2019/01/25/5c4af23eb3981.jpg)"); } //标题 $("#mypost_title_h").html($("#cb_post_title_url").html()); //正文和标题淡入 $("#mainContent").css("opacity","1"); $("#mainContent").css("margin-top","0"); $("#mypost_title").css("opacity","1"); $("#mypost_title").css("top","75pt"); //更改iocn图标 var linkObject = document.createElement("link"); linkObject.rel = "shortcut icon"; // linkObject.href = "https://ww1.sinaimg.cn/large/0062YmUwgy1fthbsa7nmoj302g02ggle.jpg"; linkObject.href = "https://i.loli.net/2019/01/25/5c4afc8c0feb3.jpg"; document.getElementsByTagName("head")[0].appendChild(linkObject); }) /** 设置ajax请求加载完所有数据时执行的js */ setTimeout(afterAjax,1000); function afterAjax(){ //假如是首页 if (window.location.href == "https://www.cnblogs.com/jxl1996"|| window.location.href == "https://www.cnblogs.com/jxl1996/"|| window.location.href == "http://www.cnblogs.com/jxl1996"|| window.location.href == "http://www.cnblogs.com/jxl1996/") { $("#mypost_title_f").html(""); $("#mypost_title_e").html("<a href='https://cnblogs.com/jxl1996'>不忘初心，方得始终.</a>"); }else{ var classification = null; if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") { classification = $("#BlogPostCategory").html(); classification = classification.substring(3,classification.length); }else{ classification = "<a href='https://cnblogs.com/jxl1996'>暂未分类</a>"; } var ftitle = "Published on "+ $("#post-date").html() + " in " + classification + " with <a href='https://cnblogs.com/jxl1996'>佛系Coder</a>"; //设置副标题标题 $("#mypost_title_f").html(ftitle); //设置标题分类按钮 $("#mypost_title_e").html(classification); //设置底部导航条上一篇下一篇文章 var pnp = $("#post_next_prev a"); $("#mbottom-left").attr("href",pnp[1].href); if (pnp.length>2) { $("#mbottom-right").attr("href",pnp[3].href); } } $("#myheader_bg").css("filter","blur(0px)"); } /** 自定义的js方法 */ //设置底部导航条点击事件 $("#bottom-g").click(function(){ follow('5dfde587-1816-e711-845c-ac853d9f53ac'); }) $("#bottom-s").click(function(){ AddToWz(cb_entryId);return false; }) if (window.location.href == "https://www.cnblogs.com/jxl1996"|| window.location.href == "https://www.cnblogs.com/jxl1996/"|| window.location.href == "http://www.cnblogs.com/jxl1996"|| window.location.href == "http://www.cnblogs.com/jxl1996/") { $("#bottom-d").html("友情链接"); $("#bottom-d").attr("href","https://www.cnblogs.com/jxl1996/p/9350833.html"); }else{ var url = window.location.href; var lastUrl = url.substring(url.lastIndexOf("/")+1); var mpageId = lastUrl.substring(0,lastUrl.indexOf(".")); $("#bottom-d").click(function(){ DiggIt(mpageId,cb_blogId,1); green_channel_success(this,'谢谢推荐！'); }) } //通过滚动条控制导航条的展现隐藏 var oldScrollNum = 0; window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; //下滑 if (t>oldScrollNum) { if (t>120) { $("#mynavbar").css("margin-top","-70px");//顶部导航 $("#post-bottom-bar").css("bottom","-3pc");//底部导航 } if (t>300) { $("#right_meun").css("display","inline-block");//右侧导航 } //上拉 }else{ //防止用a链接跳转也触发效果 if (oldScrollNum-t<20) { $("#mynavbar").css("margin-top","0px");//顶部导航 $("#post-bottom-bar").css("bottom","0");//底部导航 } if (t<=300) { $("#right_meun").css("display","none");//右侧导航 } } oldScrollNum = t; } //背景大图点击模糊||清晰 $("#myheader_cover").click(function(){ if ($("#myheader_bg").css("filter") == "blur(3px)") { $("#myheader_bg").css("filter","blur(0px)"); }else{ $("#myheader_bg").css("filter","blur(3px)"); } }) </script> <script type="text/javascript"> var setMyBlog = { setCopyright: function() { //设置版权信息，转载出处自动根据页面url生成 var info_str = '<p>作者：<a target="_blank">@gzdaijie</a><br>'+ '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>', info = $(info_str), info_a = info.find("a"), url = window.location.href; $(info_a[0]).attr("href","https://github.com/gzdaijie"); $(info_a[1]).attr("href",url).text(url); $("#cnblogs_post_body").prepend(info); }, setCodeRow: function(){ // 代码行号显示 var pre = $("pre.sourceCode"); //选中需要更改的部分 if(pre && pre.length){ pre.each(function() { var item = $(this); var lang = item.attr("class").split(" ")[1]; //判断高亮的语言 item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉 item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷 SyntaxHighlighter.all(); }) } }, setAtarget: function() { // 博客内的链接在新窗口打开 $("#cnblogs_post_body a").each(function(){ this.target = "_blank"; }) }, setContent: function() { // 根据h2、h3标签自动生成目录 var captions_ori = $("#cnblogs_post_body h2"), captions_ori2 = $("#cnblogs_post_body h3"), captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(), content = $("<ul id='right_meun'></ul>"); $("#cnblogs_post_body").prepend(content.append(captions)); var index = -1,index2 = -1; captions.replaceWith(function(){ var self = this; if(self.tagName == "H2" || self.tagName == "h2"){ // 设置点击目录跳转 index += 1; $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); return '<li id="'+index+'li"><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>'; } else { // add by jxl1996 增加h3链接跳转 index2 += 1; $('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]); $("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>"); return ; } }); }, runAll: function() { /* 运行所有方法 * setAtarget() 博客园内标签新窗口打开 * setContent() 设置目录 * setCopyright() 设置版权信息 * setCodeRow() 代码行号显示 */ this.setAtarget(); this.setContent(); // this.setCopyright(); this.setCodeRow(); } } setMyBlog.runAll(); </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> <!--<div style = "display:none;" > 浏览器标题切换 </div>--> <script> var OriginTitile = document.title; // 保存之前页面标题 var titleTime; document.addEventListener('visibilitychange', function(){ if (document.hidden){ document.title ='你不要我了么？qwq'; // 切出文字 clearTimeout(titleTime); }else{ document.title = '欢迎回来～'; // 切入文字 titleTime = setTimeout(function() { document.title = OriginTitile; }, 1000); // 2秒后恢复原标题 } }); </script> <!--<div style = "display:none;" > 浏览器标题切换end </div>--> <!--<script type="text/javascript">--> <!--$(function(){--> <!--$('#blogTitle h1').addClass('bounceInLeft animated');--> <!--$('#blogTitle h2').addClass('bounceInRight animated');--> <!--// 删除反对按钮--> <!--$('.buryit').remove();--> <!--initCommentData();--> <!--});--> <!--function initCommentData() {--> <!--$('.feedbackItem').each(function() {--> <!--var text = $(this).find('.feedbackListSubtitle .layer').text();--> <!--// 将楼层信息放到data里面--> <!--// $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));--> <!--if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');--> <!--var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';--> <!--$(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')--> <!--});--> <!--}--> <!--$(document).ajaxComplete(function(event, xhr, settings) {--> <!--// 监听获取评论ajax事件--> <!--if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {--> <!--initCommentData();--> <!--}--> <!--});--> <!--</script>--> <!--漂亮的评论列表--> <script type="text/javascript"> $(function(){ $('#blogTitle h1').addClass('bounceInLeft animated'); $('#blogTitle h2').addClass('bounceInRight animated'); // 删除反对按钮 $('.buryit').remove(); initCommentData(); }); function initCommentData() { $('.feedbackItem').each(function() { var text = $(this).find('.feedbackListSubtitle .layer').text(); // 将楼层信息放到data里面 // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, '')); if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself'); var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif'; $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>') }); } $(document).ajaxComplete(function(event, xhr, settings) { // 监听获取评论ajax事件 if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) { initCommentData(); } }); </script> <!--飞天火箭--> <script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script> <div id="scrollTop" style="display:none;"> <div class="level-2"></div> <div class="level-3"></div> </div> <script src="https://files.cnblogs.com/files/hafiz/scroll2top.js"></script> <script type="text/javascript"> UI.global_search(); var uvOptions = {}; // !important (function() { initScrollTop(); })(); </script>
=======================================
由于本人水平有限，文章在表述和代码方面如有不妥之处，欢迎批评指正。留下你的脚印，欢迎评论哦。你也可以关注我，一起学习哦！
