部落格園新增頁首導航選單
阿新 • • 發佈:2020-08-13
<script> addNag("GitHUB","http://www.cnblogs.com/",3); addNag("友情連結","http://www.cnblogs.com/",3); function addNag(linkName,linkHref,linkLocation){ //獲得導航DOM物件 var _navigator = document.getElementsByTagName("ul")[0]; //建立導航無序列表中的li var _link = document.createElement("li"); var _a = document.createElement("a"); _a.class="menu"; _a.href= linkHref; var _text = document.createTextNode(linkName); _a.appendChild(_text); _link.appendChild(_a); //新增至指定的位置 var _lis = _navigator.getElementsByTagName("li"); if(linkLocation > _lis.length && linkLocation > 0){ _navigator.appendChild(_link); }else{ _navigator.insertBefore(_link,_lis[linkLocation-1]); } } </script>
也叫
<script type="text/javascript"> var head=$("#header"); head.prepend('<canvas id="bubble-canvas" style="position: absolute; left: 0px; top: 0px;"></canvas>'); var _width, _height, largeHeader, _canvas, _ctx, _circles, _target, animateHeader = true; function initHeader() { largeHeader = document.getElementById('header'); _width = largeHeader.offsetWidth; _height = 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 beautyArticles(article_list){ for (var i = 0; i <article_list.length; i++) { var desc_img=article_list[i].getElementsByClassName('desc_img')[0]; if(desc_img != undefined) { article_list[i].className+=' have-img'; var url=desc_img.src; var title=article_list[i].getElementsByClassName('postTitle2'); desc_img.parentNode.removeChild(desc_img); article_list[i].appendChild(parseToDOM('<a href="' + title[0].href + '" class="post-link"></a>')); article_list[i].appendChild(parseToDOM('<div class="img-layer"></div>')); article_list[i].getElementsByClassName('img-layer')[0].style.backgroundImage= 'url('+url+')'; } } }; function initBeauty(){ var article_list=document.getElementsByClassName('day'); breakSameDayArticles(article_list); beautyArticles(article_list); }; if(window.location.pathname.search(/\/p\//ig)==-1) { initBeauty(); } </script>
/* * CodingLife模板優化 * author stumpx */ /*手機外殼,參考Framework7官網 */ @media (min-width:430px) { .phone { position:relative; background:#111; border-radius:55px; box-shadow:0px 0px 0px 2px #aaa; width:320px; height:568px; padding:100px 25px 105px; display:inline-block; } .phone:before { content:''; width:60px; height:10px; border-radius:10px; position:absolute; left:50%; margin-left:-30px; background:#333; top:50px; } .phone:after { content:''; position:absolute; width:60px; height:60px; left:50%; margin-left:-30px; bottom:20px; border-radius:100%; box-sizing:border-box; border:5px solid #333; } .phone img { width:100% } }@media (min-width:460px) { .phone.phone-android { border-radius:20px; width:360px; padding:60px 20px; height:640px; margin-top:9px; } .phone.phone-android:before { width:14px; height:14px; border-radius:50%; position:absolute; left:50%; margin-left:-7px; background:#666; top:25px; } .phone.phone-android:after { content:''; width:8px; height:8px; border-radius:50%; position:absolute; left:50px; background:#444; top:30px; margin-left:0; } #sidebar_toptags { display:block; } #sidebar_toptags li { display:none; } #sidebar_toptags li:hover { background-color:transparent; } #sidebar_toptags li:hover a { color:#777; } #sidebar_toptags li:last-child { display:block; } #sidebar_recentcomments { display:none; } #blog-calendar { display:none !important; } #sidebar_topcommentedposts { display:none; } #blog_nav_sitehome { display:none; } #blog_nav_rss { display:none !important; } #sidebar_shortcut { display:none; } }/*/手機外殼*/ .catListTitle { border-top-left-radius:5px; border-top-right-radius:5px; background-color:#f6f8fa; border:none; border-bottom:1px solid #eee; font-size:16px; color:#555; } /*大屏*/ @media (min-width:769px) { #blog_post_info { border:1px dashed #dedede; } #green_channel { display:inline-block; border:none; } #author_profile { display:none; } .cnblogs_code { border:none; border-left:5px solid #dedede; padding-left:10px; } /*翻頁*/ #nav_next_page { /*text-align:center; */ } .pager { font-size:44px; margin:10px 0; text-align:center; color:#999; line-height:30px; } .pager a { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:none !important; color:#ffffff; margin:0 1px; padding:7px 10px; text-decoration:none; height:19px; line-height:19px; font-size:12px; background-color:#ea6f5a; } .pager a:hover { border:none !important; color:#ffffff !important; margin:0 1px !important; padding:5px 10px !important; text-decoration:none; height:19px !important; line-height:19px !important; font-size:12px !important; background-color:#ea6f5a !important; } #nav_next_page a { background-color:#ea6f5a; height:33px; line-height:33px; font-size:14px; } .topicListFooter { height:89px; } .topicListFooter:empty { display:none; } #nav_next_page a:hover { background-color:#ea6f5a; } /*/翻頁*/ #navigator { min-width:1200px; /*border-bottom-left-radius:5px; border-bottom-right-radius:5px; */ background-color:#24292e; border:none; box-shadow:0 1px 3px #bebebe; } #blog-calendar .CalTitle td,#blog-calendar .CalTitle td a { text-align:center; line-height:30px; background-color:transparent; color:black; } #blogCalendar:not(.CalTitle) a { display:block; background:#ea6f5a; color:white; border-left:1px solid #f0eef5; width:calc(100% - 1px); } div.commentform textarea { width:100%; width:calc(100% - 15px); height:80px; padding:5px; } .commentbox_title { line-height:22px; } div.commentform input.author { background-color:transparent; border:none; border-bottom:1px solid #dedede; margin-bottom:5px; padding-bottom:2px; width:200px; } #under_post_news { width:auto; } #comment_nav { padding:0 20px; } #sidebar_search_box input { border-radius:0; box-shadow:none; } #sidebar_search_box input.input_my_zzk { border-top-left-radius:3px; border-bottom-left-radius:3px; } #sidebar_search_box input.btn_my_zzk { background:#ea6f5a; margin-left:-6px; border-top-right-radius:3px; border-bottom-right-radius:3px; } #blog-comments-placeholder:empty { display:none; } #taglist_main { margin-top:0; background:white; padding:20px; border-radius:5px; border:none; box-shadow:0 0 5px #dedede; } #taglist_main:hover { box-shadow:0 0 5px #bebebe; } #taglist_title { font-size:18px; } #taglist_title_wrap { text-align:center; font-size:18px; line-height:35px; } #MyTag1_dtTagList { width:100%; } .catListTag ul li a:hover { color:#fff; } #under_post_news,#under_post_kb { margin-top:20px; } #mainContent .day:first-of-type { border-top-left-radius:5px; border-top-right-radius:5px; margin-bottom:20px; } #mainContent .day:nth-first-child(2) { border-top-left-radius:5px; border-top-right-radius:5px; } #mainContent .day:nth-first-child(1) { border-top-left-radius:5px; border-top-right-radius:5px; } #mainContent .day:nth-last-child(2) { border-bottom-left-radius:5px; border-bottom-right-radius:5px; } #mainContent .day:nth-last-child(1) { border-bottom-left-radius:5px; border-bottom-right-radius:5px; } #mainContent .day { border-radius:5px; margin-bottom:20px; border:none; box-shadow:0 0 5px #dedede; } #mainContent .day:hover { border:none; box-shadow:0 0 5px #00f; } .newsItem .catListTitle { border-top-left-radius:5px; border-top-right-radius:5px; background-color:#f6f8fa; border:none; border-bottom:1px solid #eee; font-size:16px; color:#555; } .newsItem #profile_block { border-bottom-left-radius:5px; border-bottom-right-radius:5px; border:none; font-size:14px; } .newsItem #profile_block:hover { border-color:#dedede; } .newsItem #p_b_follow { text-align:center; } .newsItem #p_b_follow a { border:1px solid #ea6f5a; border-radius:3px; padding:5px 15px; } #profile_block a { font-size:14px; } #profile_block a:first-child { color:#ea6f5a; font-size:16px; } .sidebar-block { border-radius:5px; overflow:hidden; box-shadow:0 0 5px #dedede; } .sidebar-block:hover { box-shadow:0 0 5px #00f; } .catListView,.catListFeedback { margin-top:0; } .sidebar-block ul { border-bottom-left-radius:5px; border-bottom-right-radius:5px; border:none; } .sidebar-block h3 { border-top-left-radius:5px; border-top-right-radius:5px; background-color:#f6f8fa; border:none; border-bottom:1px solid #eee; font-size:16px; color:#555; } .div_my_zzk { border:none !important; } #widget_my_google { border-bottom-left-radius:5px; border-bottom-right-radius:5px; } #topics,#comment_form_container,#under_post_news,#under_post_kb { border-radius:5px; border:none; box-shadow:0 0 5px #dedede; } #topics:hover,#comment_form_container:hover,#under_post_news:hover,#under_post_kb:hover { border-radius:5px; border:none; box-shadow:0 0 5px #00f; } #myposts .PostList { border-radius:5px; } #sideBar .newsItem { box-shadow:0 0 5px #dedede; border-radius:5px; overflow:hidden; } #blog-news { margin-bottom:0; } #sideBar .newsItem:hover { box-shadow:0 0 5px #00f; } .sidebar-block ul li:last-child { border-bottom:none; } .postSeparator { border-radius:5px; border-top:1px dashed #bebebe; } .day:hover .postSeparator { border-top:1px dashed #ea6f5a !important; } .entrylistItem { border-radius:5px; border:none; box-shadow:0 0 5px #dedede; } .entrylistItem:hover { border:none; } .entrylistTitle,.myposts_title { padding:0 20px; } .day .postTitle:hover a { color:#ea6f5a; } #comment_form [id^="cnblogs_c"],#comment_form [id^="ad_t"] { display:none !important; } body { background-size:auto 197px; background:none !important; background:#fafafa !important; } #blogTitle { width:100%; background-size:800px; background-position:0px 20px; height:197px; background:none; display:none !important; } #navList li a:link { text-shadow:none; } #navList li:hover a { color:#24292e; text-shadow:none; } .dayTitle { background-color:#ea6f5a; border-radius:3px; display:none; } .day .postTitle { font-size:20px; } .sidebar-block ul li { padding:12px 10px 12px 20px; border-bottom:1px solid #eee; } }/*/大屏*/ /*小屏*/ @media (max-width:768px) { .dayTitle { background-color:#ea6f5a; display:none; } #topics { border-left:none; border-right:none; } #blog-comments-placeholder { border-left:none; border-right:none; } #blog-comments-placeholder:empty { display:none; } #navigator { min-width:auto; background:#24292e; border:none; } body { background-size:auto 197px; background:none !important; } #blogTitle { width:100%; background-size:800px; background-position:0px 20px; height:197px; background:none; display:none !important; } #blogTitle h1 { width:300px; left:0; top:33px; } #blogTitle h2 { display:none; } #navList { width:100%; } #navList li:hover a { color:#24292e; text-shadow:none; } #mainContent .day { border-left:none; border-right:none; } #mainContent .day:hover { border-color:#ea6f5a; } #mainContent .day:hover .postSeparator { border-top:1px dashed #ea6f5a; margin:20px 0; clear:both; } #mainContent .topicListFooter { height:50px; line-height:0; font-size:16px; margin:20px 0; padding:0 20px; } #mainContent .topicListFooter:empty { display:none; } #sideBar { width:100%; margin-left:0; } #blog-calendar { display:none !important; padding:10px 15px; border:1px solid #dedede; border-left:none; border-right:none; background-color:white; } #profile_block,#widget_my_zzk,#widget_my_google,.div_my_zzk { border-left:none; border-right:none; } #blog-calendar .CalTitle td,#blog-calendar .CalTitle td a { text-align:center; line-height:30px; background-color:white; color:black; } #sidebar_search_box input { border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } #sidebar_search_box input[type=text] { width:188px !important; width:calc(100% - 115px) !important; border-radius:0; } #sideBar .sidebar-block ul { border:none; } #sideBar .sidebar-block ul li { padding:10px 20px; } #comment_form_container { border-left:none; border-right:none; } div.commentform input.author,div.commentform input.email,div.commentform input.url { width:244px; width:calc(100% - 35px); } div.commentform textarea.comment_textarea { width:100% !important; max-width:100%; } #under_post_news { width:100%; height:auto; padding:15px 0; border-left:none; border-right:none; margin-top:20px; } #cnblogs_c1 { /*padding:0; */ } #cnblogs_c1 a,#cnblogs_c1 img,#cnblogs_c2 a,#cnblogs_c2 img { display:block; max-width:100% !important; width:100% !important; height:auto !important; } #under_post_kb { border-left:none; border-right:none; } #ad_t2 { margin-top:20px; padding:0 20px; } .c_ad_block { margin-top:15px; padding:0 15px; } #commentbox_opt .comment_btn { width:50%; border:none; display:inline-block; line-height:30px; text-align:center; } #commentbox_opt a { width:45%; display:inline-block; padding-left:0; text-align:center; } #comment_nav { padding:5px 20px; } #green_channel { width:100% !important; padding-left:2px; } #green_channel a { margin-right:4px; } #green_channel a:last-child { margin-right:0; } #div_digg { margin-right:0; width:100%; } #div_digg .buryit { margin-left:0; margin-right:20px; } #div_digg .diggit { margin-left:0; margin-left:20px; } .sidebar-block h3 { font-size:16px; background-color:#f6f8fa; border:#bebebe; color:#333; } #cnblogs_post_body img { max-width:100% !important; } .day .postTitle { font-size:18px; line-height:31px; } .day .postTitle:hover a { color:#ea6f5a; } #topics .postTitle { font-size:18px; margin:0 -20px 20px; padding:0 20px; line-height:30px; } #myposts { margin-left:0; } #myposts .myposts_title { font-size:20px !important; padding:0 20px; } #myposts .Pager:only-child { display:none; } .pager { font-size:44px; margin:10px 0; text-align:center; color:#333; line-height:30px; } .pager a { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:1px solid #ea6f5a; color:#ffffff; margin:0 1px; padding:7px 10px; text-decoration:none; height:19px; line-height:19px; font-size:12px; background-color:#ea6f5a; } .pager a:hover { border:1px solid #ea6f5a !important; color:#ffffff !important; margin:0 1px !important; padding:8px 10px !important; text-decoration:none; height:12px !important; line-height:12px !important; font-size:12px !important; background-color:#ea6f5a !important; } #nav_next_page a { background-color:#ea6f5a; height:37px; line-height:37px; font-size:14px; } #nav_next_page a:hover { background-color:#ea6f5a; } #myposts .pager { margin-left:10px; } #myposts .PostList { border-left:none; border-right:none; } #kb_block { padding:0; } .c_ad_block a { border-bottom:1px dashed #dedede; } #mainContent { margin-bottom:20px; } #myposts .pager:empty { height:0; } #blogCalendar:not(.CalTitle) a { display:block; background:#ea6f5a; color:white; border-left:1px solid white; width:calc(100% - 1px); } #post_next_prev a.p_n_p_prefix { display:none; } #taglist_main { margin-top:20px; background:white; } #taglist_title_wrap { margin-left:auto; margin-right:auto; text-align:center; line-height:45px; background:#169fe6; color:white; font-size:16px; } #taglist td { padding:5px; font-size:10px; line-height:20px; } #taglist { padding:0 10px 10px; } #MyTag1_dtTagList { width:100%; } .catListTag ul li a:hover { color:#fff; } #footer { padding:5px 0 20px; margin:0; } .newsItem,#under_post_news,#under_post_kb,#sidebar_search,#sidebar_recentcomments,/*#sidebar_topviewedposts,*/ #sidebar_topcommentedposts,#sidebar_categories,#sidebar_topdiggedposts,#comment_form [id^="cnblogs_c"],#sidebar_toptags { display:none; } #sidebar_topviewedposts { display:block !important; } }@media (min-width:470px) and (max-width:1200px) { #div_digg { margin-right:-20px; width:150px; } }/*/小屏*/ /*/自定義優化*/ #sidebar_search .div_my_zzk { height:49px; } .day .postDesc { display:none; } .postTitle a:link { color:#131315; } .comment_textarea { width:855px; height:188px; } #under_post_kb { display:none; } #under_post_news { display:none; } #HistoryToday,.recomm-block { display:none; } #post_next_prev { display:none; } #topics .postDesc { display:none; } .postBody #blog_post_info_block{ display:none; } #comment_form #comment_form_container{ display:none; } #comment_form #ad_t2{ display:none; }