首页 > 代码库 > 【转】为博客园添加目录的方法总结
【转】为博客园添加目录的方法总结
本文转自:作者:妙音天女 地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html
目录
- 第一种:在正文上方直接添加目录
- 1. 申请开通js权限
- 2. 添加js脚本到“页脚Html代码”
- 3. 按格式写文章
- 第二种:在文章右上角添加目录导航
- 1. 申请开通js权限
- 2. 添加css代码到“页面定制CSS代码”
- 3. 添加js脚本到“页首Html代码”
- 4. 按格式写文章
参考链接:
http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655
http://www.cnblogs.com/zzqcn/p/4657124.html
http://www.cnblogs.com/jiangz/p/3734968.html
第一种:在正文上方直接添加目录
1. 申请开通js权限
默认是不支持,需要打开博客园后台,进入“设置”标签页,点击“申请开通js权限”,并注明用途
<iframe id="iframe_0.4485163114074393" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-29d472bc4b493c49.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.4485163114074393‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
如果想加快申请速度,也可以再向官方发个邮件(邮箱是contact@cnblogs.com),邮件也需要注明用途,快的话1小时就能搞定了
2. 添加js脚本到“页脚Html代码”
打开博客园后台,进入“设置”标签页,在最下面的“页脚Html代码”对应的编辑框粘贴下面的js代码,然后点“保存”按钮保存。
(如果没有开通js权限,此处无法添加)
<iframe id="iframe_0.19515142484081927" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-6cf216b26ad8be06.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.19515142484081927‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
<iframe id="iframe_0.31686274263748415" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-4d54307e03714fa2.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.31686274263748415‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
<script language="javascript" type="text/javascript">// 生成目录索引列表// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html// modified by: zzqfunction GenerateContentList(){ var mainContent = $(‘#cnblogs_post_body‘); var h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可 if(mainContent.length < 1) return; if(h2_list.length>0) { var content = ‘<a name="_labelTop"></a>‘; content += ‘<div id="navCategory" style="color:#152e97;">‘; content += ‘<p style="font-size:18px;"><b>目录</b></p>‘; content += ‘<ul>‘; for(var i=0; i<h2_list.length; i++) { var go_to_top = ‘<div style="text-align: right;"><a href="http://www.mamicode.com/#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘; $(h2_list[i]).before(go_to_top); var h3_list = $(h2_list[i]).nextAll("h3"); var li3_content = ‘‘; for(var j=0; j<h3_list.length; j++) { var tmp = $(h3_list[j]).prevAll(‘h2‘).first(); if(!tmp.is(h2_list[i])) break; var li3_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘; $(h3_list[j]).before(li3_anchor); li3_content += ‘<li><a href="http://www.mamicode.com/#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h3_list[j]).text() + ‘</a></li>‘; } var li2_content = ‘‘; if(li3_content.length > 0) li2_content = ‘<li><a href="http://www.mamicode.com/#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a><ul>‘ + li3_content + ‘</ul></li>‘; else li2_content = ‘<li><a href="http://www.mamicode.com/#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a></li>‘; content += li2_content; } content += ‘</ul>‘; content += ‘</div><p> </p>‘; content += ‘<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>‘; if($(‘#cnblogs_post_body‘).length != 0 ) { $($(‘#cnblogs_post_body‘)[0]).prepend(content); } } }GenerateContentList();</script>
3. 按格式写文章
在写新博文的时候,注意按照你js脚本里设定的格式来划分章节(这里只设定了h2,h3,对应普通编辑器中的二级标题和三级标题,对应markdown中的##和###)。当然,以前发布的文章如果有h2,h3,也会自动生成目录索引。
效果如下:
<iframe id="iframe_0.679140638160209" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-85f26e605ba11f1b.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.679140638160209‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
第二种:在文章右上角添加目录导航
1. 申请开通js权限
同上
2. 添加css代码到“页面定制CSS代码”
<iframe id="iframe_0.6282626698724283" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-66323d1d5ca908a2.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.6282626698724283‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
/*生成博客目录的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:20px;}
3. 添加js脚本到“页首Html代码”
<iframe id="iframe_0.22591333992679186" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-118df2570a63de6c.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.22591333992679186‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
<script type="text/javascript">/* 功能:生成博客目录的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 = ‘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和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);}</script>
4. 按格式写文章
同上
效果如下:
<iframe id="iframe_0.7798355024305776" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://upload-images.jianshu.io/upload_images/4334050-9dac637b2930256f.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240&_=6650533%22%20style=%22border:none;max-width:978px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.7798355024305776‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
【转】为博客园添加目录的方法总结