使用JavaScript代码为博客园个人博客页面自动添置目录

Posted 2020-07-12 且听风吟-wuchao

　　当我们在博客中写的东西比较多，或者文章层次比较明显，有很多层次结构，这时如果没有目录导航，将特别难以阅读。博客园有着非常个性化的个人定制功能，可以通过添加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;
        }
        
    

实现效果可以点击这里。