【分享】博客美化(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>

大家記得把文件路徑完成自己修改上傳過的。

保存之后,刷新應該可以看到效果了。有了這個思路,可以在上面添加你想要展現的信息了,而不拘泥於只是個目錄。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM