部落格園新增目錄排版
阿新 • • 發佈:2020-09-03
效果圖:
1開通js許可權
設定 》 申請js許可權
2頁面定製 CSS 程式碼
/*生成部落格目錄的CSS*/ #uprightsideBar{ font-size: 12px; /* font-family: Arial, Helvetica, sans-serif; */ text-align: left; position: fixed; left: 15px; /* right: 0px; */ /* width: auto; */ /* height: auto;*/ top:50px; } #sideBarTab{ float:left; border:1px solid #e5e5e5; border-right:none; text-align:center; background:#ffffff; } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:300px; min-height:108px; border:1px solid #e5e5e5; border-right:none; background:#ffffff; max-height: 700px; } #sideBarContents dl{ margin:0; padding:0; } #sideBarContents at{ margin-top: 5px; margin-left: 10px; font-size: 14px; color: #000; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #sideBarContents dt{ margin-top: 5px; margin-left: 30px; font-size: 14px; color: #000; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clickBlue{ background: #18c7efba; } #sideBarContents cat_title{ margin-top: 5px; /* margin-left: 10px; */ font-size: 20px; color: #0d2a98; display: block; font-weight: bold; } #sideBarContents dd, dt ,at{ cursor: pointer; } #sideBarContents dd:hover, dt:hover { color:#A7995A; } #sideBarContents dd{ margin-left: 50px; font-size: 13px; color:#080e0a; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
3頁首 HTML 程式碼
<script type="text/javascript"> /* 功能:生成部落格目錄的JS工具 測試:IE8,火狐,google測試通過 孤傲蒼狼 2014-5-11 */ var BlogDirectory = { /* 獲取元素位置,距瀏覽器左邊界的距離(left)和距瀏覽器上邊界的距離(top) */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition = 0; while (ele){ topPosition += ele.offsetTop; leftPosition += ele.offsetLeft; ele = ele.offsetParent; } return {top:topPosition, left:leftPosition}; }, /* 獲取滾動條當前位置 */ getScrollBarPosition:function () { var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; return scrollBarPosition; }, /* 移動滾動條,finalPos 為目的位置,internal 為移動速度 */ moveScrollBar:function(finalpos, interval) { //若不支援此方法,則退出 if(!window.scrollTo) { return false; } //窗體滾動時,禁用滑鼠滾輪 window.onmousewheel = function(){ return false; }; //清除計時 if (document.body.movement) { clearTimeout(document.body.movement); } var currentpos =BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 var dist = 0; if (currentpos == finalpos) {//到達預定位置,則解禁滑鼠滾輪,並退出 window.onmousewheel = function(){ return true; } return true; } if (currentpos < finalpos) {//未到達,則計算下一步所要移動的距離 dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; } var scrTop = BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 window.scrollTo(0, currentpos);//移動視窗 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,則解禁滑鼠滾輪,並退出 { window.onmousewheel = function(){ return true; } return true; } //進行下一步移動 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); }, htmlDecode:function (text){ var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; }, /* 建立部落格目錄, id表示包含博文正文的 div 容器的 id, mt 和 st 分別表示主標題和次級標題的標籤名稱(如 H2、H3,大寫或小寫都可以!), interval 表示移動的速度 */ createBlogDirectory:function (id, at, mt, st, interval){ //獲取博文正文div容器 var elem = document.getElementById(id); if(!elem) return false; //獲取div中所有元素結點 var nodes = elem.getElementsByTagName("*"); //建立部落格目錄的div容器 var divSideBar = document.createElement('DIV'); divSideBar.className = 'uprightsideBar'; divSideBar.setAttribute('id', 'uprightsideBar'); var divSideBarContents = document.createElement('DIV'); divSideBarContents.setAttribute('id', 'sideBarContents'); divSideBar.appendChild(divSideBarContents); //建立自定義列表 var dlist = document.createElement("dl"); divSideBarContents.appendChild(dlist); var num = 0;//統計找到的mt和st at = at.toUpperCase();//轉化成大寫 mt = mt.toUpperCase();//轉化成大寫 st = st.toUpperCase();//轉化成大寫 //設定標題【目錄】 if(nodes.length>0){ var title = document.createElement("cat_title"); //建立錨鏈接 var itemtext = document.createTextNode("目錄"); title.appendChild(itemtext); dlist.appendChild(title); } //遍歷所有元素結點 for(var i=0; i<nodes.length; i++) { if(nodes[i].nodeName == at || nodes[i].nodeName == mt || nodes[i].nodeName == st) { //獲取標題文字 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML裡面的內容可能有HTML標籤,所以用正則表示式去除HTML的標籤 nodetext = nodetext.replace(/ /ig, "");//替換掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext); //插入錨 nodes[i].setAttribute("id", "blogTitle" + num); var item; switch(nodes[i].nodeName) { case at: //若為H1標題 item = document.createElement("at"); //建立錨鏈接 var itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); break; case mt: //若為主標題 item = document.createElement("dt"); //建立錨鏈接 var itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); break; case st: //若為子標題 item = document.createElement("dd"); //建立錨鏈接 var itemtext = document.createTextNode("○ " + nodetext); item.appendChild(itemtext); break; } item.setAttribute("name", num); item.onclick = function(){ //新增滑鼠點選觸發函式 $(this).addClass("clickBlue").siblings().removeClass("clickBlue"); var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; }; //將自定義表項加入自定義列表中 dlist.appendChild(item); num++; } } if(num == 0) return false; document.body.appendChild(divSideBar); } }; window.onload=function(){ /*頁面載入完成之後生成部落格目錄*/ BlogDirectory.createBlogDirectory("cnblogs_post_body","h1","h2","h3",20); } </script>