由於顯示效果並不理想，現已棄用，新的博客是基於
LessIsMore模板定制而來。
0x01 效果展示
先給大家看一下最終的實現效果，如果你覺的還可以，那么請繼續閱讀。
在此首先要感謝marvin和asxinyu，我這次目錄的實現基本是結合了他們二人的成果，在此特別致謝。下面是他們相關博客的鏈接。
0x02 實現過程
基本原理在上面兩位大神的博客里已經進行了詳細的介紹，這里我就不再累述。
這里着重說一下我所更改的地方，在marvin的基礎上，參考asxinyu的實現，去掉了標題自動編號，因為我還是喜歡自己來對標題進行編號。
更改目錄為打開博客后自動展開（原來是默認關閉的）。
2.1 下載相關文件
2.2 文件說明
bootstrap.min.js 側邊欄
marvin.nav.js 目錄自定義文件，可以通過修改該文件配置來自定義自己的目錄。
2.3 文件使用
1） 申請JS權限
博客設置 -> 博客側邊欄公告
我的已經申請了JS權限，所以顯示（支持JS代碼），沒有申請前，這里有一個超鏈接申請JS權限，點擊后等待1天左右，管理員機會批准你的申請。
2）添加JS引用
在博客設置 -> 博客側邊欄公告內粘貼如下代碼，注意要下載后上傳到自己的博客園上，還有注意替換鏈接中的博客名，否則我的JS文件一旦修改，你也就遭殃了。
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>
3）自定義標題
想不想要好看的文章標題呢？下面將介紹如何來自定義文章標題。
博客設置 -> 頁面定制CSS代碼
粘貼如下代碼即可實現
<style type="text/css">
#cnblogs_post_body
{
color: black;
font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
font-size: 17px;
}
/*標題1*/
#cnblogs_post_body h1 {
color: #fff;
padding-left: 15px;
background-color: #6FA833 !important;
text-shadow: 2px 2px 3px #222222;
font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
margin-bottom: 5px;
}
/*標題2*/
#cnblogs_post_body h2 {
color: #6FA833;
border-left: 13px solid #6FA833;
padding: 5px;
background-color: #f5f5f5;
}
</style>
0x03 參考鏈接
http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html
http://www.cnblogs.com/marvin/p/ExtendWizNoteAutoNnavigation.html#autoid-5-2-0
2017-10-12 16:39:15 星期四