這篇文章使用的代碼來自于部落格園的marvin，非常感謝。在他的文章：如何給你的為知筆記添加一個漂亮的導航目錄中，介紹了給文章自動添加目錄的過程，我當時就非常興奮，一直想要個類似的插件，就是不會寫。是以當天就咨詢了marvin，在他的提示下，我把他部落格的CSS和js檔案扒下來了，經過一番改進，成為了我部落格目前使用的，是以分享出來。有了目錄，的确是友善很多，可以快速的跳到指定的段落。
部落格園美化相關文章目錄：部落格園部落格美化相關文章目錄
這篇文章使用的代碼來自于部落格園的marvin，非常感謝。在他的文章：如何給你的為知筆記添加一個漂亮的導航目錄中，介紹了給文章自動添加目錄的過程，我當時就非常興奮，一直想要個類似的插件，就是不會寫。是以當天就咨詢了marvin，在他的提示下，我把他部落格的CSS和js檔案扒下來了，經過一番改進，成為了我部落格目前使用的，是以分享出來。有了目錄，的确是友善很多，可以快速的跳到指定的段落。當然部落格園也有其他網友分享了一些其他的目錄樣式，個人感覺在底部側邊欄要好一點，根據喜好吧，另外薰衣草的旋律 在21号發表的一篇文章連結：http://www.cnblogs.com/wangqiguo/p/4355032.html，也不錯，原理都差不多，大家可以借鑒下。但是是加在頁面頂部，如果目錄很多，會占用比較大篇幅和空間。大家按需選擇。
本文原文位址：部落格美化(6)為你的博文自動添加目錄
marvin也把這個自動目錄添加到了他的部落格中，效果非常好。 看看他的原始效果：
效果非常好，而且前面的标号1，2，。。都是自動的。這一點不太符合我寫部落格的習慣，以為我的标題會把這個标号固定下來，是以就重複了，而且我想在這個目錄前面添加點東西，例如推薦部落格目錄等等，經過我的一番修改，成了這個樣子(在某些浏覽器中貌似出不來，特别是IE，Chrom核心的浏覽器好像都比較好)：
我修改的地方主要有3個：
1.調整了寬度，然後标題字元數h1提高到了30個字元(其他的不截斷顯示)；字型也變大了點，貌似比原來的要醜陋點，呵呵，沒關系，有空再改回來吧。
2.根據自己部落格的設定和寫作習慣，提取h1,h2作為目錄結果，原來作者是使用h2,h3，這個要看部落格模版的情況和部落格正文标題的樣式；
3.在最前面增加了一個推薦部落格，其實和文章推薦插件原理差不多，這裡隻不過是測試了一下，可以固定推薦幾篇文章。
看看源碼和使用過程：
1.目錄樣式檔案
樣式檔案定義了目錄的範圍和相關格式，例如縮進等。原始檔案在這裡下載下傳：marvin.nav.my1502.css，大家記得要自己下載下傳，安裝需求修改，然後上傳到自己部落格的檔案去，再添加引用，如果直接添加我部落格這個檔案的引用，以後我要是改動了，你就杯具了。
2.為文章添加強定的資訊
這個功能不屬于自動生成目錄裡面的，隻不過我在扒皮的時候，一起拔下來了，就是可以為每篇文章添加一個固定的結尾，或者加一個微信掃描功能，樣子就是這樣，我進行了一些修改：
是通過js來完成的，js檔案下載下傳，使用方法還是自己下載下傳然後上傳到自己的檔案目錄中再引用：marvin.cnblogs.js
3.自動生成目錄代碼
自動生成目錄的代碼是通過js完成的，就是尋找正文的h1,h2，然後把标題按照長度截斷處理一下，拼接就可以了，我把我修改的部分代碼貼出來看看：
//推薦部落格
j += '<li><span style="font-size: 14pt;">★推薦部落格</span></li>';
j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4288836.html' + '">' + '1.本部落格所有文章分類目錄' + '</a><span class="sideCatalog-dot"></span></li>';
j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329737.html' + '">' + '2.開源Math.NET基礎數學類庫使用' + '</a><span class="sideCatalog-dot"></span></li>';
j += '<li><a href="http://www.cnblogs.com/asxinyu/p/4329742.html' + '">' + '3.微軟Infer.NET機器學習元件使用' + '</a><span class="sideCatalog-dot"></span></li>';
j += '<li><span style="font-size: 14pt;">★本文目錄</span></li>';
o.each(function (t) {
var u = $(this),
v = u[0];
var title=u.text();
var text=u.text();
u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
if (v.localName === 'h1') {
l++;
m = 0;
if(text.length>26) text=text.substr(0,26)+"...";
j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
} else if (v.localName === 'h2') {
m++;
n = 0;
if(q){
if(text.length>30) text=text.substr(0,30)+"...";
j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
}
}
}); 我修改過的檔案下載下傳：marvin.nav.my1502.js，原始的檔案可以到作者marvin的部落格去扒下來。
最後就把要添加的代碼說一下吧，直接引用這幾個js和css檔案就可以了，注意的是，還有一個公共的bootstrap.js檔案，位址為：http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script> 大家記得把檔案路徑完成自己修改上傳過的。
儲存之後，重新整理應該可以看到效果了。有了這個思路，可以在上面添加你想要展現的資訊了，而不拘泥于隻是個目錄。
.NET資料挖掘與機器學習，作者部落格:
http://www.cnblogs.com/asxinyu
E-mail:[email protected]