使用JavaScript代码为博客园个人博客页面自动添置目录
当我们在博客中写的东西比较多,或者文章层次比较明显,有很多层次结构,这时如果没有目录导航,将特别难以阅读。博客园有着非常个性化的个人定制功能,可以通过添加js代码实现这个功能,由于对jquery不熟,因此采用原生js来做的。考虑到一般使用二级目录就够了,因此代码只实现到二级目录。也可以很方便的更改代码,实现更多级别。
另外,当页面滚动到后面时,再返回目录区域也很累,因此在右下加添加了一个返回目录的按钮,随着页面往下滚动,按钮出现并固定。
以下贴上代码:
//函数实现在父节点的最前面插入新的节点 function prependChild(parent,newChild){ if(parent.firstChild){ parent.insertBefore(newChild,parent.firstChild); } else { parent.appendChild(newChild); } return parent; } //var home = document.getElementById("home"); //var documents = document.getElementsByTagName("h1"); var con =document.getElementById("cnblogs_post_body"); var headTags = con.getElementsByTagName("h1"); var L = headTags.length; var titleContent = document.createElement("div");//标题存放区 titleContent.setAttribute("style","border:1px solid #999;"); titleContent.setAttribute("id","titleContent"); var titleTag = document.createElement("div");//显示目录字样 titleTag.innerHTML="<div style='font-size:20px;'><strong>目录</strong></div> <br/>" titleContent.appendChild(titleTag); var titleOl = document.createElement("ol");//标题存放区 var tagName = "H1_"; for(var i=0;i<L;i++){ //tagName=tagName+i; ////////////////////////////这里写主要代码 headTags[i].setAttribute("id",tagName+i); var headNode = document.createElement("li");//当前标题节点 var hrefNode = document.createElement("a"); hrefNode.setAttribute("href","#"+tagName+i); hrefNode.innerHTML = headTags[i].innerHTML; headNode.appendChild(hrefNode); /////查找二级标题 var titleOl_2 = document.createElement("ol");//二级标题存放区 var flag=0; var nextNode = headTags[i].nextSibling; while(true){ if(nextNode==null||nextNode==undefined){ break; } if(nextNode.nodeName=="H1"||nextNode.nodeName=="h1"||nextNode.nodeName== undefined ||nextNode.nodeName== null){ break; } if(nextNode.nodeName=="H2"||nextNode.nodeName=="h2"){ flag=flag+1; ////////////////插入二级标题 nextNode.setAttribute("id",tagName+i+"_"+flag); var headNode2 = document.createElement("li");//当前标题节点 var hrefNode = document.createElement("a"); hrefNode.setAttribute("href","#"+tagName+i+"_"+flag); hrefNode.innerHTML = nextNode.innerHTML; headNode2.appendChild(hrefNode); titleOl_2.appendChild(headNode2); //////////////// } nextNode = nextNode.nextSibling; } if(flag>0){ headNode.appendChild(titleOl_2); } ///// titleOl.appendChild(headNode); } if(L<=0){ titleContent.setAttribute("style","display:none;"); } titleContent.appendChild(titleOl); prependChild(con,titleContent); ///////////////////下面实现返回目录按钮 var goTopTag = document.createElement("a"); goTopTag.setAttribute("style","margin-top:20px;position:absolute;"); goTopTag.setAttribute("href","#titleContent"); goTopTag.innerHTML="返回目录"; var sideBar = document.getElementById("sideBar"); sideBar.appendChild(goTopTag); window.onscroll = function(){ if(getScrollTop()>=1400){ goTopTag.setAttribute("style","margin-top:"+(getScrollTop()-1400+20)+"px;position:absolute;"); } //goTopTag.innerHTML=getScrollTop(); } function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop; }
实现效果可以点击这里。
联系方式:wuchaodzxx@126.com