博客園博文生成章節目錄
阿新 • • 發佈:2018-08-14
xtu ali 步驟 size index 添加 fir dex before
一、自動生成章節目錄
為博文添加目錄索引可以得到更加舒適的閱讀感受,為此,本文為博客園博客自動生成章節目錄索引。
1. 介紹
本代碼同時適配如下三種復雜標題情況:
- “只有一級標題”或“只有二級標題”或“只有三級標題”
- “只有二級和三級標題”或“只有一級和二級標題”
- “只有一級、二級和三級標題”
2. 操作步驟
- 登錄到博客園,進入你的博客頁面
- 打開導航欄的“管理”菜單
- 切換到“設置”選項卡
往下翻頁找到“頁腳HTML代碼”
你需要獲得JS代碼權限,在“博客側邊欄公告(支持HTML代碼)”右側,若沒有權限,需要向管理員申請(說明你的合理的理由)
- 復制本博文下方的js代碼,粘貼到 “頁腳HTML代碼” 區
別忘了保存
3. 效果
3.1 生成三級目錄
此為“只有一級標題”或“只有二級標題”或“只有三級標題”的展示效果
3.1 生成二級和三級目錄
此為“只有二級和三級標題”或“只有一級和二級標題”的展示效果
3.1 生成一級、二級和三級目錄
此為“只有一級、二級和三級標題”的展示效果
上述JS代碼默認支持前三級(h1,h2,h3)標題,如果你的標題不只是前三級,請對代碼自行修改。如果你覺得有用,請支持一下喲。
4. 用於目錄生成的JS代碼
<!-- 目錄索引列表生成 --> <script language="javascript" type="text/javascript"> function GenerateContentList() { if ($('#cnblogs_post_body').length == 0) { return; } var jquery_h1_list = $('#cnblogs_post_body h1'); var jquery_h2_list = $('#cnblogs_post_body h2'); var jquery_h3_list = $('#cnblogs_post_body h3'); if (jquery_h1_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul class="first_class_ul">'; for (var i = 0; i < jquery_h1_list.length; i++) { var go_to_top = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label' + i + '"></a></div>'; $(jquery_h1_list[i]).before(go_to_top); var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>'; var nextH1Index = i + 1; if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; } var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2"); if (jquery_h2_list.length > 0) { li_content += '<ul class="second_class_ul">'; } for (var j = 0; j < jquery_h2_list.length; j++) { var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_lab2_'+ i + '_' + j + '"></a></div>'; $(jquery_h2_list[j]).before(go_to_top2); li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>'; var nextH2Index = j + 1; var next; if (nextH2Index == jquery_h2_list.length) { if (i + 1 == jquery_h1_list.length) { next = jquery_h1_list[0]; } else { next = jquery_h1_list[i + 1]; } } else { next = jquery_h2_list[nextH2Index]; } var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3"); if (jquery_h3_list.length > 0) { li_content += '<ul class="third_class_ul">'; } for (var k = 0; k < jquery_h3_list.length; k++) { var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; $(jquery_h3_list[k]).before(go_to_third_Content); li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>'; } if (jquery_h3_list.length > 0) { li_content += '</ul>'; } li_content += '</li>'; } if (jquery_h2_list.length > 0) { li_content +='</ul>'; } li_content +='</li>'; content += li_content; } content += '</ul>'; content += '</div>'; } else if (jquery_h2_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul class="second_class_ul">'; for(var i =0; i < jquery_h2_list.length; i++) { var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_lab2_'+ i + '_' + j + '"></a></div>'; $(jquery_h2_list[j]).before(go_to_top2); var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>'; var nextH1Index = i + 1; if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; } var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i+1], "h3"); if(jquery_h3_list.length>0) { li_content +='<ul class="third_class_ul">'; } for(var j = 0;j < jquery_h3_list.length;j++) { var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; $(jquery_h3_list[k]).before(go_to_third_Content); li_content +='<li><a href="#_lab2'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>'; } if(jquery_h3_list.length>0) { li_content +='</ul>'; } li_content +='</li>'; content += li_content; } content += '</ul>'; content += '</div>'; } else if (jquery_h3_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul>'; for(var i = 0; i < jquery_h3_list.length; i++) { var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; $(jquery_h3_list[k]).before(go_to_third_Content); var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>'; content += li_content; } content += '</ul>'; content += '</div>'; } else { return; } $($('#cnblogs_post_body')[0]).prepend(content); } GenerateContentList(); </script>
本博文參考了http://www.cnblogs.com/wangqiguo/p/4355032.html自動生成目錄的方法,感謝該博文的作者做出的貢獻。
本博文在博客https://www.qiuhlee.com/cnblogs-directories.html同時發布。
博客園博文生成章節目錄