在文章右上角添加目录导航

爱被打了一巴掌 2023-08-17 15:47 163阅读 0赞

## 在文章右上角添加目录导航 ##

### 1、添加css代码到“页面定制css代码” ###

1 /*生成博客目录的CSS*/
     2 #uprightsideBar{
     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 }
    49 #sideBarContents dd{
    50     margin-left:20px;
    51 }

### 2、添加js脚本到“页首html代码” ###

1 <script type="text/javascript">
      2 /*
      3     功能：生成博客目录的JS工具
      4     测试：IE8，火狐，google测试通过
      5     孤傲苍狼
      6     2014-5-11
      7 */
      8 var BlogDirectory = {
      9     /*
     10         获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）
     11     */
     12     getElementPosition:function (ele) {        
     13         var topPosition = 0;
     14         var leftPosition = 0;
     15         while (ele){              
     16             topPosition += ele.offsetTop;
     17             leftPosition += ele.offsetLeft;        
     18             ele = ele.offsetParent;     
     19         }  
     20         return {top:topPosition, left:leftPosition}; 
     21     },
     22 
     23     /*
     24     获取滚动条当前位置
     25     */
     26     getScrollBarPosition:function () {
     27         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
     28         return  scrollBarPosition;
     29     },
     30     
     31     /*
     32     移动滚动条，finalPos 为目的位置，internal 为移动速度
     33     */
     34     moveScrollBar:function(finalpos, interval) {
     35 
     36         //若不支持此方法，则退出
     37         if(!window.scrollTo) {
     38             return false;
     39         }
     40 
     41         //窗体滚动时，禁用鼠标滚轮
     42         window.onmousewheel = function(){
     43             return false;
     44         };
     45           
     46         //清除计时
     47         if (document.body.movement) { 
     48             clearTimeout(document.body.movement); 
     49         } 
     50 
     51         var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
     52 
     53         var dist = 0; 
     54         if (currentpos == finalpos) {
        //到达预定位置，则解禁鼠标滚轮，并退出
     55             window.onmousewheel = function(){
     56                 return true;
     57             }
     58             return true; 
     59         } 
     60         if (currentpos < finalpos) {
        //未到达，则计算下一步所要移动的距离
     61             dist = Math.ceil((finalpos - currentpos)/10); 
     62             currentpos += dist; 
     63         } 
     64         if (currentpos > finalpos) { 
     65             dist = Math.ceil((currentpos - finalpos)/10); 
     66             currentpos -= dist; 
     67         }
     68         
     69         var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
     70         window.scrollTo(0, currentpos);//移动窗口
     71         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出
     72         {
     73             window.onmousewheel = function(){
     74                 return true;
     75             }
     76             return true;
     77         }
     78         
     79         //进行下一步移动
     80         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
     81         document.body.movement = setTimeout(repeat, interval); 
     82     },
     83     
     84     htmlDecode:function (text){
     85         var temp = document.createElement("div");
     86         temp.innerHTML = text;
     87         var output = temp.innerText || temp.textContent;
     88         temp = null;
     89         return output;
     90     },
     91 
     92     /*
     93     创建博客目录，
     94     id表示包含博文正文的 div 容器的 id，
     95     mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），
     96     interval 表示移动的速度
     97     */
     98     createBlogDirectory:function (id, mt, st, interval){
     99          //获取博文正文div容器
    100         var elem = document.getElementById(id);
    101         if(!elem) return false;
    102         //获取div中所有元素结点
    103         var nodes = elem.getElementsByTagName("*");
    104         //创建博客目录的div容器
    105         var divSideBar = document.createElement('DIV');
    106         divSideBar.className = 'uprightsideBar';
    107         divSideBar.setAttribute('id', 'uprightsideBar');
    108         var divSideBarTab = document.createElement('DIV');
    109         divSideBarTab.setAttribute('id', 'sideBarTab');
    110         divSideBar.appendChild(divSideBarTab);
    111         var h2 = document.createElement('H2');
    112         divSideBarTab.appendChild(h2);
    113         var txt = document.createTextNode('目录导航');
    114         h2.appendChild(txt);
    115         var divSideBarContents = document.createElement('DIV');
    116         divSideBarContents.style.display = 'none';
    117         divSideBarContents.setAttribute('id', 'sideBarContents');
    118         divSideBar.appendChild(divSideBarContents);
    119         //创建自定义列表
    120         var dlist = document.createElement("dl");
    121         divSideBarContents.appendChild(dlist);
    122         var num = 0;//统计找到的mt和st
    123         mt = mt.toUpperCase();//转化成大写
    124         st = st.toUpperCase();//转化成大写
    125         //遍历所有元素结点
    126         for(var i=0; i<nodes.length; i++)
    127         {
    128             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
    129             {
    130                 //获取标题文本
    131                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签
    132                 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 
    133                 nodetext = BlogDirectory.htmlDecode(nodetext);
    134                 //插入锚        
    135                 nodes[i].setAttribute("id", "blogTitle" + num);
    136                 var item;
    137                 switch(nodes[i].nodeName)
    138                 {
    139                     case mt:    //若为主标题 
    140                         item = document.createElement("dt");
    141                         break;
    142                     case st:    //若为子标题
    143                         item = document.createElement("dd");
    144                         break;
    145                 }
    146                 
    147                 //创建锚链接
    148                 var itemtext = document.createTextNode(nodetext);
    149                 item.appendChild(itemtext);
    150                 item.setAttribute("name", num);
    151                 item.onclick = function(){        //添加鼠标点击触发函数
    152                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
    153                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
    154                 };            
    155                 
    156                 //将自定义表项加入自定义列表中
    157                 dlist.appendChild(item);
    158                 num++;
    159             }
    160         }
    161         
    162         if(num == 0) return false; 
    163         /*鼠标进入时的事件处理*/
    164         divSideBarTab.onmouseenter = function(){
    165             divSideBarContents.style.display = 'block';
    166         }
    167         /*鼠标离开时的事件处理*/
    168         divSideBar.onmouseleave = function() {
    169             divSideBarContents.style.display = 'none';
    170         }
    171 
    172         document.body.appendChild(divSideBar);
    173     }
    174     
    175 };
    176 
    177 window.οnlοad=function(){
    178     /*页面加载完成之后生成博客目录*/
    179     BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
    180 }
    181 </script>

### 3、备注 ###

这个脚本支持h2、h3两种标题，写博文时要对标题添加h2、h3格式，脚本会自动生效，帮你建立导航目录，并在页面右上角显示。

参考链接：[http://www.cnblogs.com/jiu0821/p/8215156.html\#\_label2\_1][http_www.cnblogs.com_jiu0821_p_8215156.html_label2_1]

转载于:https://www.cnblogs.com/lfri/p/10357313.html

[http_www.cnblogs.com_jiu0821_p_8215156.html_label2_1]: http://www.cnblogs.com/jiu0821/p/8215156.html#_label2_1