【分享】博客美化(6)爲你的博文自動添加目錄

　　博客園美化相關文章目錄：博客園博客美化相關文章目錄

　　這篇文章使用的代碼來自於博客園的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="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.cnblogs.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/asxinyu/marvin.nav.my1502.js"></script>

你們記得把文件路徑完成本身修改上傳過的。

保存以後，刷新應該能夠看到效果了。有了這個思路，能夠在上面添加你想要展示的信息了，而不拘泥於只是個目錄。