为你的博文自动添加侧栏导航目录

　　博客园美化相关文章目录：博客园博客美化相关文章目录

　　这篇文章使用的代码来自于博客园的marvin，非常感谢。在他的文章：如何给你的为知笔记添加一个漂亮的导航目录中，介绍了给文章自动添加目录的过程，我当时就非常兴奋，一直想要个类似的插件，就是不会写。所以当天就咨询了marvin，在他的提示下，我把他博客的CSS和js文件扒下来了，经过一番改进，成为了我博客目前使用的，所以分享出来。有了目录，的确是方便很多，可以快速的跳到指定的段落。当然博客园也有其他网友分享了一些其他的目录样式，个人感觉在底部侧边栏要好一点，根据喜好吧，另外薰衣草的旋律 在21号发表的一篇文章链接：http://www.cnblogs.com/wangqiguo/p/4355032.html，也不错，原理都差不多，大家可以借鉴下。但是是加在页面顶部，如果目录很多，会占用比较大篇幅和空间。大家按需选择。

　　本文原文地址：博客美化(6)为你的博文自动添加目录

　　marvin也把这个自动目录添加到了他的博客中，效果非常好。 看看他的原始效果：

效果非常好，而且前面的标号1，2，。。都是自动的。这一点不太符合我写博客的习惯，以为我的标题会把这个标号固定下来，所以就重复了，而且我想在这个目录前面添加点东西，例如推荐博客目录等等，经过我的一番修改，成了这个样子(在某些浏览器中貌似出不来，特别是IE，Chrom内核的浏览器好像都比较好)：

我修改的地方主要有3个：

1.调整了宽度，然后标题字符数h1提高到了30个字符(其他的不截断显示)；字体也变大了点，貌似比原来的要丑陋点，呵呵，没关系，有空再改回来吧。

2.根据自己博客的设置和写作习惯，提取h1,h2作为目录结果，原来作者是使用h2,h3，这个要看博客模版的情况和博客正文标题的样式；

3.在最前面增加了一个推荐博客，其实和文章推荐插件原理差不多，这里只不过是测试了一下，可以固定推荐几篇文章。 

看看源码和使用过程：

1.目录样式文件

　　样式文件定义了目录的范围和相关格式，例如缩进等。原始文件在这里下载：marvin.nav.my1502.css，大家记得要自己下载，安装需求修改，然后上传到自己博客的文件去，再添加引用，如果直接添加我博客这个文件的引用，以后我要是改动了，你就杯具了。

2.为文章添加固定的信息

　　这个功能不属于自动生成目录里面的，只不过我在扒皮的时候，一起拔下来了，就是可以为每篇文章添加一个固定的结尾，或者加一个微信扫描功能，样子就是这样，我进行了一些修改：

是通过js来完成的，js文件下载，使用方法还是自己下载然后上传到自己的文件目录中再引用：marvin.cnblogs.js

3.自动生成目录代码

　　自动生成目录的代码是通过js完成的，就是寻找正文的h1,h2，然后把标题按照长度截断处理一下，拼接就可以了，我把我修改的部分代码贴出来看看：

复制代码
//推荐博客
    j += '<li><span style="font-size: 14pt;">★推荐博客</span></li>';
    j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4288836.html' + '">' + '1.本博客所有文章分类目录' + '</a><span class="sideCatalog-dot"></span></li>';
    j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329737.html' + '">' + '2.开源Math.NET基础数学类库使用' + '</a><span class="sideCatalog-dot"></span></li>';
    j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329742.html' + '">' + '3.微软Infer.NET机器学习组件使用' + '</a><span class="sideCatalog-dot"></span></li>';    
    j += '<li><span style="font-size: 14pt;">★本文目录</span></li>';
    o.each(function (t) {
        var u = $(this),
            v = u[0];

        var title=u.text();
        var text=u.text();

        u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
        
        if (v.localName === 'h1') {
            l++;
            m = 0;
            if(text.length>26) text=text.substr(0,26)+"...";
            j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
        } else if (v.localName === 'h2') {
            m++;
            n = 0;
            if(q){
                if(text.length>30) text=text.substr(0,30)+"...";
                j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
            }
        } 
    });
复制代码

我修改过的文件下载：marvin.nav.my1502.js，原始的文件可以到作者marvin的博客去扒下来。

最后就把要添加的代码说一下吧，直接引用这几个js和css文件就可以了，注意的是，还有一个公共的bootstrap.js文件，地址为：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script>

大家记得把文件路径完成自己修改上传过的。

保存之后，刷新应该可以看到效果了。有了这个思路，可以在上面添加你想要展现的信息了，而不拘泥于只是个目录。


 

出处：https://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html

=======================================================================================

如果有需要修改的，下载对应的css或js文件，修改后自己上传到自己的空间，并在此引用即可。

=======================================================================================

JavaScript自动生成博文目录导航

 

　　我们在写博客的时候，如果博文里面有目录，会给人结构清晰、一种一目了然的感觉，看目录就知道这篇博文要讲解的内容，并且点击目录标题就可以跳转到具体的内容，这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容，但是遗憾的是博客园不支持博文目录的生成，好像也有园友给博客园提建议，希望能够像CSDN那样能够自动生成博文目录，但是不知道是什么原因，博客园一直都没有把这个功能加上去，既然没有，那我就自己做吧，研究了2天，总算是按照自己的设想做出来了，最终效果如下：

　　　　

下面来介绍一下这个小工具的实现。

一、功能描述

　　这个小工具要实现的核心功能只有两个：

　　　　1.自动生成博文目录。

　　　　2.点击目录标题定位到标题对应的具体内容，就像使用word生成的目录那样。

1.1、自动生成博文目录

　　小工具的第一个核心功能，就是通过代码自动抽取标题，然后再包装一下插入文档中。基本实现原理：首先要求博主在写博文的时候，将主标题和次级标题用 HTML标签中的 title tag（如：h1、h2、h3...）包起来；

　　比如"1.1、自动生成博文目录"这个次级标题现在是段落的形式

　　将"1.1、自动生成博文目录"设置成"标题3"

　　然后通过 JS 代码遍历整个包含博文正文的 <div>，过滤出这些标签，再把它们组装成自定义列表的形式，再插入到HTML文档中，如下：

复制代码
 1     <dl>
 2         <dt>一、JAVA流式输入/输出原理</dt>
 3         <dt>二、输入输出流分类</dt>
 4         <dt>三、节点流和处理流</dt>
 5             <dd>3.1.节点流类型</dd>
 6             <dd>3.2.处理流类型</dd>
 7         <dt>四、InputStream(输入流)</dt>
 8             <dd>4.1.InputStream的基本方法</dd>
 9         <dt>五、OutputStream(输出流)</dt>
10             <dd>5.1.OutputStream的基本方法</dd>
11         <dt>六、Reader流</dt>
12             <dd>6.1.Reader的基本方法</dd>
13         <dt>七、Writer流</dt>
14             <dd>7.1.Writer的基本方法</dd>
15         <dt>八、节点流讲解</dt>
16         <dt>九、处理流讲解</dt>
17             <dd>9.1.第一种处理流——缓冲流(Buffering)</dd>
18             <dd>9.2.第二种处理流——转换流</dd>
19             <dd>9.3.第三种处理流——数据流</dd>
20             <dd>9.4.打印流——Print</dd>
21             <dd>9.5. 对象流——Object</dd>
22         <dt>十、IO流总结</dt>
23     </dl>
复制代码

　　如果不加任何样式，它在浏览器中的默认显示效果如下：

　　　　

1.2、点击目录标题定位到标题对应的具体内容

常规实现方式：使用HTML的锚点链接

　　锚点也可以理解成为一种超链接，只不过它是网页内部的超链接
　　比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。

范例：使用HTML的锚点链接定位到具体的内容

复制代码
 1 <html>
 2  <head>
 3   <title>使用HTML的锚点链接定位到具体的内容</title>
 4  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5  </head>
 6  <body>
 7     <h1>目录导航</h1>
 8     <dl>
 9         <!--设置锚点：<a href="#title0">一、JAVA流式输入/输出原理</a>
10         点击这个超链接时就会自动定位到<h2 id="title0" name="title0">一、JAVA流式输入/输出原理</h2>这个标题所在的位置
11         -->
12         <dt><a href="#title0">一、JAVA流式输入/输出原理</a></dt>
13         <dt><a href="#title1">二、输入输出流分类</a></dt>
14         <dt><a href="#title2">三、节点流和处理流</a></dt>
15             <dd><a href="#title3">3.1.节点流类型</a></dd>
16             <dd><a href="#title4">3.2.处理流类型</a></dd>
17         <dt><a href="#title5">四、InputStream(输入流)</a></dt>
18             <dd><a href="#title6">4.1.InputStream的基本方法</a></dd>
19         <dt><a href="#title7">五、OutputStream(输出流)</a></dt>
20             <dd><a href="#title8">5.1.OutputStream的基本方法</a></dd>
21         <dt><a href="#title9">六、Reader流</a></dt>
22             <dd><a href="#title10">6.1.Reader的基本方法</a></dd>
23         <dt><a href="#title11">七、Writer流</a></dt>
24             <dd><a href="#title12">7.1.Writer的基本方法</a></dd>
25         <dt><a href="#title13">八、节点流讲解</a></dt>
26         <dt><a href="#title14">九、处理流讲解</a></dt>
27             <dd><a href="#title15">9.1.第一种处理流——缓冲流(Buffering)</a></dd>
28             <dd><a href="#title16">9.2.第二种处理流——转换流</a></dd>
29             <dd><a href="#title17">9.3.第三种处理流——数据流</a></dd>
30             <dd><a href="#title18">9.4.打印流——Print</a></dd>
31             <dd><a href="#title19">9.5. 对象流——Object</a></dd>
32         <dt><a href="#title20">十、IO流总结</a></dt>
33     </dl>
34     <hr/>
35     <div style="background-color:Red; width:100%;height:150px;">
36         <!--经过测试发现，使用name的形式添加锚点在IE8和火狐下都不起作用，要设置Id才起作用
37         为了兼容，还是将name属性和id属性都一起写上，并且属性值设置成相同
38         -->
39         <h2 id="title0" name="title0">一、JAVA流式输入/输出原理</h2>
40     </div>
41     <div style="background-color:Yellow; width:100%;height:150px;">
42         <h2 name="title1" id="title1">二、输入输出流分类</h2>
43     </div>
44     <div style="background-color:Silver; width:100%;height:150px;">
45         <h2 name="title2" id="title2">三、节点流和处理流</h2>
46         <h3 name="title3" id="title3">3.1.节点流类型</h3>
47         <h3 name="title4" id="title4">3.2.处理流类型</h3>
48     </div>
49     <div style="background-color:Aqua; width:100%;height:150px;">
50         <h2 name="title5" id="title5">四、InputStream(输入流)</h2>
51         <h3 name="title6" id="title6">4.1.InputStream的基本方法</h3>
52     </div>
53     <div style="background-color:Fuchsia; width:100%;height:150px;">
54         <h2 name="title7" id="title7">五、OutputStream(输出流)</h2>
55         <h3 name="title8" id="title8">5.1.OutputStream的基本方法</h3>
56     </div>
57     <div style="background-color:Green; width:100%;height:150px;">
58         <h2 name="title9" id="title9">六、Reader流</h2>
59         <h3 name="title10" id="title10">6.1.Reader的基本方法</h3>
60     </div>
61     <div style="background-color:Blue; width:100%;height:150px;">
62         <h2 name="title11" id="title11">七、Writer流</h2>
63         <h3 name="title12" id="title12">7.1.Writer的基本方法</h3>
64     </div>
65     <div style="background-color:Olive; width:100%;height:150px;">
66         <h2 name="title13" id="title13">八、节点流讲解</h2>
67     </div>
68     <div style="background-color:Green; width:100%;height:150px;">
69         <h2 name="title14" id="title14">九、处理流讲解</h2>
70         <h3 name="title15" id="title15">9.1.第一种处理流——缓冲流(Buffering)</h3>
71         <h3 name="title16" id="title16">9.2.第二种处理流——转换流</h3>
72         <h3 name="title17" id="title17">9.3.第三种处理流——数据流</h3>
73         <h3 name="title18" id="title18">9.4.打印流——Print</h3>
74         <h3 name="title19" id="title19">9.5. 对象流——Object</h3>
75     </div>
76     <div style="background-color:Purple; width:100%;height:150px;">
77         <h2 name="title20" id="title20">十、IO流总结</h2>
78     </div>
79     <div style="height:130px;">&nbsp;</div>
80     <div style="height:130px;">&nbsp;</div>
81     <div style="height:130px;">&nbsp;</div>
82  </body>
83 </html>
复制代码

　　这是使用HTML锚点链接的解决方案，也是一种常规的实现方式，这种方案我觉得用户体验不怎么好，跳转到具体内容的时候速度太快了，没有一种平滑过度的效果。

JavaScript实现方式

　　实现原理：首先通过调用 DOM 方法，判断出浏览器滚动条（scroll bar）的当前位置，记为 currentPos；然后计算出目标标题（target title）的距页面顶端的距离，记为 finalPos；最后通过一定的算法实现平滑过度。

二、源代码

　　下面是这个JS工具的相关源代码：

2.1 js代码

原始js代码
/*
    功能：生成博客目录的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, 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 = 'sideBar';
        divSideBar.setAttribute('id', 'sideBar');
        var divSideBarTab = document.createElement('DIV');
        divSideBarTab.setAttribute('id', 'sideBarTab');
        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', 'sideBarContents');
        divSideBar.appendChild(divSideBarContents);
        //创建自定义列表
        var dlist = document.createElement("dl");
        divSideBarContents.appendChild(dlist);
        var num = 0;//统计找到的mt和st
        mt = mt.toUpperCase();//转化成大写
        st = st.toUpperCase();//转化成大写
        //遍历所有元素结点
        for(var i=0; i<nodes.length; i++)
        {
            if(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 mt:    //若为主标题
                        item = document.createElement("dt");
                        break;
                    case st:    //若为子标题
                        item = document.createElement("dd");
                        break;
                }

                //创建锚链接
                var itemtext = document.createTextNode(nodetext);
                item.appendChild(itemtext);
                item.setAttribute("name", num);
                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","h2","h3",20);
}
View Code

修改了后的代码：

增加了三级编号的显示：1级为文章标题，2级和3级还是沿用原始代码

/*
    功能：生成博客目录的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，
    at、mt 和 st 分别表示：文章标题、主标题和次级标题的标签名称（如 H1、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 = 'sideBar';
        divSideBar.setAttribute('id', 'sideBar');
        var divSideBarTab = document.createElement('DIV');
        divSideBarTab.setAttribute('id', 'sideBarTab');
        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 = 'block';
        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();//转化成大写
        //遍历所有元素结点
        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(/&nbsp;/ig, "");//替换掉所有的?
                nodetext = BlogDirectory.htmlDecode(nodetext);
                //插入锚
                nodes[i].setAttribute("id", "blogTitle" + num);
                var item;
                switch(nodes[i].nodeName)
                {
                    case at:    //若为文章标题
                        item = document.createElement("h2");
                        item.setAttribute("style","cursor: pointer;");
                        nodetext = nodetext.indexOf("《")<0?"《"+nodetext+"》":nodetext;
                        break;
                    case mt:    //若为主标题
                        item = document.createElement("dt");
                        break;
                    case st:    //若为子标题
                        item = document.createElement("dd");
                        break;
                }

                //创建锚链接
                var itemtext = document.createTextNode(nodetext);
                item.appendChild(itemtext);
                item.setAttribute("name", num);
                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 = _ => { divSideBarContents.style.display = 'block';}
        /*鼠标离开时的事件处理*/
        divSideBar.onmouseleave = _ => { divSideBarContents.style.display = 'none'; }
        /*鼠标点击时的事件处理*/
        //divSideBarTab.onclick = _ =>{ divSideBarContents.style.display = divSideBarContents.style.display=='none'?'block':'none';};

        document.body.appendChild(divSideBar);
    }

};

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

 


2.2. CSS样式代码

复制代码
 1 /*生成博客目录的CSS*/
 2 #sideBar{
 3     font-size:12px;
 4     font-family:Arial, Helvetica, sans-serif;
 5     text-align:left;
 6     position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
 7     top:50px;
 8     right:0px;
 9     width: auto;
10     height: auto; 
11 }
12 #sideBarTab{
13     float:left;
14     width:30px; 
15     border:1px solid #e5e5e5;
16     border-right:none;
17     text-align:center;
18     background:#ffffff;
19 }
20 
21 #sideBarContents{
22     float:left;
23     overflow:auto; 
24     overflow-x:hidden;!important;
25     width:200px;
26     min-height:108px;
27     max-height:460px;
28     border:1px solid #e5e5e5;
29     border-right:none; 
30     background:#ffffff;
31 }
32 #sideBarContents dl{
33     margin:0;
34     padding:0;
35 }
36 
37 #sideBarContents dt{
38     margin-top:5px;
39     margin-left:5px;
40 }
41 
42 #sideBarContents dd, dt {
43     cursor: pointer;
44 }
45 
46 #sideBarContents dd:hover, dt:hover {
47     color:#A7995A;
48 }
复制代码

2.3.由JavaScript动态生成的HTML代码结构如下

复制代码
 1 <div id="sideBar" class="sideBar">
 2     <div id="sideBarTab">
 3         <h2>目录导航</h2>
 4     </div>
 5     <div id="sideBarContents" style="display: none;">
 6         <dl>
 7             <dt name="0">一、功能描述</dt>
 8                 <dd name="1">1.1、自动生成博文目录</dd>
 9                 <dd name="2">1.2、点击目录标题定位到标题对应的具体内容</dd>
10             <dt name="3">二、源代码</dt>
11                 <dd name="4">2.1 js代码</dd>
12                 <dd name="5">2.2. CSS样式代码</dd>
13             <dt name="6">三、JS工具的使用</dt>
14                 <dd name="7">3.1、后台管理的相关设置</dd>
15                 <dd name="8">3.2、博文标题样式设置</dd>
16             <dt name="9">四、总结</dt>
17         </dl>
18     </div>
19 </div>
复制代码

三、JS工具的使用

3.1、后台管理的相关设置

　　进入到博客后台管理，点击设置

　　

然后在这里添加CSS样式代码，将上面的CSS样式代码直接copy到这里即可

　　

在这里添加javascript脚本，将上面的JS源代码直接copy到这里即可

　　

点击【保存】按钮，完成设置

3.2、博文标题样式设置

将博文标题的样式设置成标题

　　

例如：

将"三、JS工具的使用"这个一级标题的标题样式设置成【标题2】

　　

将"3.1、后台管理的相关设置"这个二级标题的标题样式设置成【标题3】

　　

　　这样执行这段代码时就会生成如下图所示的博客目录了

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

　　　　

　　生成的目录导航在紧挨着页面最右边的滚动条，鼠标移动到【目录导航】时就会显示生成的目录内容，鼠标离开就自动隐藏目录

　　　　

　　点击目录上的标题就会平滑跳转到该标题对应的具体内容。

四、总结

　　开发这个小工具的过程中还是遇到了不少的细节问题的，好在都解决了，目前做出来的效果总体来说还算比较满意，现在将代码分享出来给朋友们，可以自由修改和使用，希望对广大朋友们有所帮助吧！

 

出处：https://www.cnblogs.com/xdp-gacl/p/3718879.html

posted on 2021-03-30 22:20  jack_Meng  阅读(425)  评论(0)  编辑  收藏  举报

导航