博客园自定义目录:版本3

目录

• 博客园自定义目录:版本3
  • JavaScript
  • css

博客园自定义目录:版本3

将我自己写的 https://www.cnblogs.com/ziyue7575/p/11409850.html 重新改了一下,使用超链接跳转.

JavaScript

<script type="text/javascript">
    /*
    功能：生成博客目录的JS工具
    */
    var BlogDirectory = {
        /*
            获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
        */

        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, 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 = 'sideBarml';
            divSideBar.setAttribute('id', 'sideBarml');
            var divSideBarTab = document.createElement('DIV');
            divSideBarTab.setAttribute('id', 'sideBarTabml');
            divSideBar.appendChild(divSideBarTab);
            var h2 = document.createElement('H2');
            divSideBarTab.appendChild(h2);
            var txt = document.createTextNode('目录导航');
            h2.appendChild(txt);
            var divSideBarContents = document.createElement('DIV');
            divSideBarContents.style.display = 'none';
            divSideBarContents.setAttribute('id', 'sideBarContentsml');
            divSideBar.appendChild(divSideBarContents);
            //创建自定义列表
            var dlist = document.createElement("DIV");
            divSideBarContents.appendChild(dlist);
            var num = 0;//统计找到的mt和st
            mt = mt.toUpperCase();//转化成大写
            st = st.toUpperCase();//转化成大写
            // console.log(mt);
            var hList = ["H1", 'H2', 'H3', 'H4', 'H5'];
            //遍历所有元素结点
            var next_i=0;
            var h_i = [1, 1, 1, 1, 1];

            for (var i = 0; i < nodes.length; i++) {
                var index=hList.indexOf(nodes[i].nodeName);
                if (index!==-1) {
                    // console.log(hList.indexOf(nodes[i].nodeName))

                    //获取标题文本
                    var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g, "");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
                    nodetext = nodetext.replace(/&nbsp;/ig, "");//替换掉所有的&nbsp;
                    nodetext = BlogDirectory.htmlDecode(nodetext);
                    //插入锚
                    nodes[i].setAttribute("id", "blogTitle" + num);
                    nodes[i].setAttribute("name", "blogTitle" + num);

                    let returnTop='  <a href="#blogTitle0" style="color: cornflowerblue;font-size: 16px;">[回到顶部]</a>'

                    nodes[i].innerHTML+=returnTop;
                    var item = document.createElement("a");
                    nodetext=h_i[index]+". "+nodetext;
                    if (next_i===index){
                        //若是同级标题
                        h_i[index]++;
                    } else if(next_i<index){
                        h_i[index]++;
                        next_i=index;
                    }else{
                        next_i=index;
                        h_i[index]++;
                        for (let j = index+1; j < h_i.length; j++) {
                            h_i[j]=1;
                        }

                    }

                    //创建锚链接
                    var itemtext = document.createTextNode(nodetext);
                    item.appendChild(itemtext);
                    item.setAttribute("href", "#blogTitle" + num);
                    item.style.marginLeft=(15*index)+'px';

                    //将自定义表项加入自定义列表中
                    dlist.appendChild(item);
                    let br=document.createElement("br");
                    dlist.appendChild(br);

                    num++;
                }
            }
            if (num === 0) return false;
            /*鼠标进入时的事件处理*/
            divSideBarTab.onmouseenter = function () {
                divSideBarContents.style.display = 'block';
            };
            /*鼠标离开时的事件处理*/
            divSideBar.onmouseleave = function () {
                divSideBarContents.style.display = 'none';
            };
            /*鼠标点击时的事件处理*/
            divSideBarTab.onclick = function () {
                if (divSideBarContents.style.display==='block'){
                    divSideBarContents.style.display = 'none';
                }else{
                    divSideBarContents.style.display = 'block';
                }

            };

            document.body.appendChild(divSideBar);
            let toc=document.getElementsByClassName("wiz_toc_layer");
            if (toc!=null&&toc.length>0){
                toc[0].innerHTML=divSideBarContents.innerHTML;
            }
        }

    };

    window.onload = function () {
        /*页面加载完成之后生成博客目录*/
        BlogDirectory.createBlogDirectory("cnblogs_post_body", "h2", "h3", 20);
    }


</script>

css

#sideBarml{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    position: fixed;
    top: 40px;
    right: 0px;
    width: auto;
}
#sideBarTabml{
    float: left;
    width: 30px;
    border: 1px solid #e5e5e5;
    border-right: none;
    text-align: center;
    background: #ffffff;
}

#sideBarTabml h2 {
    margin-top: 0px!important;
    padding: 10px;
}

#sideBarContentsml {
   float: left;
    overflow: auto;
    overflow-x: hidden;
    min-height: 96px;
    max-height: 460px;
    border: 1px solid #e5e5e5;
    border-right: none;
    background: #ffffff;
    padding-left: 5px;
}