标签：return 博客园 item 设置 var createElement document 目录 left

博客园是没有自带目录功能的，要实现如下的目录功能，我们可以通过个性化定制的方式实现。

1. 申请JS权限

博客园支持自定义 HTML、CSS、JS 文件，不过需要先向博客园申请 JS 权限。
【博客园】->【设置】->【博客设置】：

点击图中地方即可申请 JS 权限（由于这里已经申请通过了，所以展示的是已开通）。

待权限申请通过后，我们可以在页面定制 CSS 代码、页首 HTML 代码、页脚 HTML 代码中编写代码以实现个性化定制。

这里官方建议在页脚 HTML 代码添加代码，最好遵从这一建议，将 JS 代码放在其中。

2. 在页脚 HTML 代码中添加如下代码：

<script language="javascript" type="text/javascript">

    /**
     * 生成博客目录
     */
    var BlogDirectory = {

        /**
         * 获取元素位置
         * @param ele 元素
         * @returns {{top: number, left: number}} 距浏览器左边界的距离（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};
        },

        /**
         * 获取滚动条当前位置
         * @returns {number} 滚动条当前位置
         */
        getScrollBarPosition:function () {
            var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
            return scrollBarPosition;
        },

        /**
         * 移动滚动条
         * @param finalpos 为目的位置
         * @param interval 为移动速度
         * @returns {boolean}
         */
        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;
        },

        /**
         * 创建博客目录
         * @param id 表示包含博文正文的 div 容器的 id
         * @param title1 一级标题
         * @param title2 二级标题
         * @param title3 三级标题
         * @param title4 四级标题
         * @param title5 五级标题
         * @param title6 六级标题
         * @param interval 表示移动的速度
         * @returns {boolean}
         */
        createBlogDirectory:function (id, title1, title2, title3, title4, title5, title6, 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 divSideBarTab = document.createElement('DIV');
            divSideBarTab.setAttribute('id', 'sideBarTab');
            divSideBar.appendChild(divSideBarTab);
            var h1 = document.createElement('H1');
            divSideBarTab.appendChild(h1);
            var txt = document.createTextNode('目录导航');
            h1.appendChild(txt);
            var divSideBarContents = document.createElement('DIV');
            divSideBarContents.style.display = 'none';
            divSideBarContents.setAttribute('id', 'sideBarContents');
            divSideBar.appendChild(divSideBarContents);
            // 创建自定义列表
            var dlist = document.createElement("dl");
            divSideBarContents.appendChild(dlist);
            // 标识找到的标题
            var num = 0;
            // 转化成大写
            title1 = title1.toUpperCase();
            title2 = title2.toUpperCase();
            title3 = title3.toUpperCase();
            title4 = title4.toUpperCase();
            title5 = title5.toUpperCase();
            title6 = title6.toUpperCase();
            // 遍历所有元素结点
            for(var i = 0; i < nodes.length; i++) {
                if(nodes[i].nodeName == title1 || nodes[i].nodeName == title2 || nodes[i].nodeName == title3 || nodes[i].nodeName == title4 || nodes[i].nodeName == title5 || nodes[i].nodeName == title6) {
                    // 获取标题文本（innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签）
                    var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");
                    // 替换掉所有的 
                    nodetext = nodetext.replace(/ /ig, "");
                    nodetext = BlogDirectory.htmlDecode(nodetext);
                    // 插入锚
                    nodes[i].setAttribute("id", "blogTitle" + num);
                    var item;
                    var title;
                    switch(nodes[i].nodeName) {
                        //若为一级标题
                        case title1:
                        item = document.createElement("dt");
                        title = "title1";
                        break;
                        //若为二级标题
                        case title2:
                        item = document.createElement("dd");
                        title = "title2";
                        break;
                        //若为三级标题
                        case title3:
                        item = document.createElement("dd");
                        title = "title3";
                        break;
                        //若为四级标题
                        case title4:
                        item = document.createElement("dd");
                        title = "title4";
                        break;
                        //若为五级标题
                        case title5:
                        item = document.createElement("dd");
                        title = "title5";
                        break;
                        //若为六级标题
                        case title6:
                        item = document.createElement("dd");
                        title = "title6";
                        break;
                    }
                    // 创建锚链接
                    var itemtext = document.createTextNode(nodetext);
                    item.appendChild(itemtext);
                    item.setAttribute("name", num);
                    item.setAttribute("class", title);
                    // 添加鼠标点击触发函数
                    item.onclick = function() {
                        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
            }
            // 鼠标进入时的事件处理
            divSideBarTab.onmouseenter = function(){
                divSideBarContents.style.display = 'block';
            }
            // 鼠标离开时的事件处理
            divSideBar.onmouseleave = function() {
                divSideBarContents.style.display = 'none';
            }
            document.body.appendChild(divSideBar);
        }
    };

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

</script>

3. 在页面定制 CSS 代码中添加如下代码：

/*生成博客目录*/

#uprightsideBar{
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    position: fixed; /*将div的位置固定到距离top:250px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
    top: 376px;
    left: 0px; /*确定在左侧还是右侧*/
    width: auto;
    height: auto;
}

#sideBarTab {
    float: left;
    width: 40px;
    border: 4px solid #ED5736;
    border-left: none;
    text-align: center;
    background: #ffffff;
    font-size: 22px;
}

#sideBarContents{
    float: left;
    overflow: auto;
    overflow-x: hidden;!important;
    width: 300px;
    min-height: 100px;
    max-height: 500px;
    border: 1px solid #e5e5e5;
    border-left: none;
    background: #ffffff;
}


#sideBarContents dd, dt {
    cursor: pointer;
}

.title1:hover,
.title2:hover,
.title3:hover,
.title4:hover,
.title5:hover,
.title6:hover {
    color: #ED5736;
}

#sideBarContents dl{
    margin: 0;
    padding: 0;
}

.title1{
    margin-top: 5px;
    margin-left: 5px;
}

.title2{
    margin-left: 20px;
}

.title3{
    margin-left: 40px;
}

.title4{
    margin-left: 60px;
}

.title5{
    margin-left: 80px;
}

.title6{
    margin-left: 100px;
}

4. 点击保存。

至此，就实现了自定义目录，点击图中的标题可以跳转到内容中指定标题位置，可以方便博客内容的查阅。

标签：return,博客园,item,设置,var,createElement,document,目录,left
来源： https://www.cnblogs.com/codesail/p/15613687.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。