博客园添加导航目录（转）

最近看很多用MarkDown编写文章的小伙伴，都在侧边栏生成了一个目录，于是我百度搜了搜，也打算加个目录。

但是百度搜到的结果千篇一律，基本上都是"孤傲苍狼"这位大佬出品，于是我就试着加在了自己博客上，然而效果并不是自己想要的，因为他只实现了两级目录，而我想实现多级。

于是就开启了代码改造之旅，经过周折最终终于实现了多级目录（h1~h6标签都会显示）。

客官：小儿，上代码~

好嘞，来喽。

CSS部分（添加到"设置"下面的"页面定制 CSS 代码"下面）

/*生成博客目录的CSS*/
#uprightsideBar{font-size:12px;font-family:Arial, Helvetica, sans-serif;text-align:left;position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/top:50px;right:0px;width: auto;height: auto;
}
#sideBarTab{float:left;width:30px; border:1px solid #e5e5e5;border-right:none;text-align:center;background:#ffffff;
}#sideBarContents{float:left;overflow:auto; overflow-x:hidden;!important;width:200px;min-height:108px;max-height:460px;border:1px solid #e5e5e5;border-right:none; background:#ffffff;
}
#sideBarContents dl{margin:0;padding:0;
}#sideBarContents dt{margin-top:5px;margin-left:5px;
}#sideBarContents dd, dt {cursor: pointer;
}#sideBarContents dd:hover, dt:hover {color:#A7995A;
}
#sideBarContents dd{margin-left:10px;
}
#sideBarContents dd.indent3{margin-left:20px;
}
#sideBarContents dd.indent4{margin-left:30px;
}
#sideBarContents dd.indent5{margin-left:40px;
}
#sideBarContents dd.indent6{margin-left:50px;
}

JS部分（添加到"设置"下面的"页首 HTML 代码"下面）

<script type="text/javascript">
/*功能：生成博客目录的JS工具测试：IE8，火狐，google测试通过一明2020-4-19
*/
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 = 'uprightsideBar';divSideBar.setAttribute('id', 'uprightsideBar');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和stmt = mt.toUpperCase();//转化成大写st = st.toUpperCase();//转化成大写//遍历所有元素结点for(var i=0; i<nodes.length; i++){var tits = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];if(tits.indexOf(nodes[i].nodeName) !== -1)    { // 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 'H1':    //若为主标题 item = document.createElement("dt");break;case 'H3':item = document.createElement("dd");item.setAttribute('class', 'indent3');//通过CSS样式定义距离break;case 'H4':item = document.createElement("dd");item.setAttribute('class', 'indent4');break;case 'H5':item = document.createElement("dd");item.setAttribute('class', 'indent5');break;case 'H6':item = document.createElement("dd");item.setAttribute('class', 'indent6');break;default:    //若为子标题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","h1","h2",20);
}
</script>

客官，请慢用~

后记

本人不是大佬，只是道路先行者，在落河后，向后来的人大喊一声，这里有坑，不要过来啊！

纵然如此，依旧有人重复着落河，重复着呐喊······

个人博客网站 Blog

技术交流Q群： 1012481075 群内有各种流行书籍资料

文章后续会在公众号更新，微信搜索 OneByOneDotNet 即可关注。

你的一分鼓励，我的十分动力，点赞免费，感恩回馈。喜欢就点赞评论吧，双击6666~

博客园添加导航目录（转）相关推荐

为博客园添加github跳转链接
一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看. 添加html 首先,需要在设置中添加一段html,用于跳转链接 <a class="git-l ...
博客园添加live2D看板娘和樱花飘落背景
写在前面本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落博客园文章目录写在前面本文使用 ...
博客园添加鼠标粒子吸附特效
本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示二. 权限申请三. 设置步骤一. 效果展示在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请点击博 ...
css文件插入背景音乐,博客园添加背景音乐,背景效果!
博客园添加背景音乐,背景效果申请博客园js权限申请话术实例尊敬的博客园管理员: 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢! 开通 ...
【分享】给自己的博客园添加一个板娘（可选）
全部样式分享更换模型的话只需要更换jsonpath中的模型名称即可 https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json ...
博客园_01_为博客园添加目录的方法总结
本文转自:作者:妙音天女地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html 目录第一种:在正文上方直接添加目录 1. 申请开通js权限 2. ...
如何为你的博客园添加到百度统计
1.打开百度统计的地址 https://tongji.baidu.com/web/welcome/login?castk=LTE%3D 2.注册,打开网址后,右面有注册按钮,点击注册选择站长版,点击 ...
python读取数据库数据、并保存为docx_Python - 爬取博客园某一目录下的随笔 - 保存为docx...
1 #coding:utf-8 2 importrequests3 from bs4 importBeautifulSoup4 importMySQLdb5 6 7 defget_html(url): ...
博客园左边导航菜单的问题
博客园左边分类的导航无法从其他分类返回到.net技术区,察看了连接.net技术区传递的参数好像和当前所在分类重复了转载于:https://www.cnblogs.com/cessk/archive/ ...

博客园添加导航目录（转）

后记

博客园添加导航目录（转）相关推荐

最新文章

热门文章