分享 部落格美化 6 為你的博文自動新增目錄

閱讀目錄

這篇文章使用的**來自於的marvin，非常感謝。在他的文章：如何給你的為知筆記新增乙個漂亮的導航目錄

marvin也把這個自動目錄新增到了他的部落格中，效果非常好。 看看他的原始效果：

效果非常好，而且前面的標號1，2，。。都是自動的。這一點不太符合我寫部落格的習慣，以為我的標題會把這個標號固定下來，所以就重複了，而且我想在這個目錄前面新增點東西，例如推薦部落格目錄等等，經過我的一番修改，成了這個樣子(在某些瀏覽器中貌似出不來，特別是ie，chrom核心的瀏覽器好像都比較好)：

我修改的地方主要有3個：

1.調整了寬度，然後標題字元數h1提高到了30個字元(其他的不截斷顯示)；字型也變大了點，貌似比原來的要醜陋點，呵呵，沒關係，有空再改回來吧。

2.根據自己部落格的設定和寫作習慣，提取h1,h2作為目錄結果，原來作者是使用h2,h3，這個要看部落格模版的情況和部落格正文標題的樣式；

3.在最前面增加了乙個推薦部落格，其實和文章推薦外掛程式原理差不多，這裡只不過是測試了一下，可以固定推薦幾篇文章。 

看看原始碼和使用過程：

回到目錄

回到目錄

回到目錄

自動生成目錄的**是通過js完成的，就是尋找正文的h1,h2，然後把標題按照長度截斷處理一下，拼接就可以了，我把我修改的部分**貼出來看看：

//

推薦部落格
j += '推薦部落格
'; j += '' + '1.本部落格所有文章分類目錄' + '
'; j += '' + '2.開源math.net基礎數學類庫使用' + '
'; j += '' + '3.微軟infer.net機器學習元件使用' + '
'; 
j += '本文目錄
'; o.each(
function
(t) 
else
if (v.localname === 'h2') 
} });

儲存之後，重新整理應該可以看到效果了。有了這個思路，可以在上面新增你想要展現的資訊了，而不拘泥於只是個目錄。

分享 部落格美化 6 為你的博文自動新增目錄

這篇文章使用的 來自於的marvin，非常感謝。在他的文章 如何給你的為知筆記新增乙個漂亮的導航目錄 marvin也把這個自動目錄新增到了他的部落格中，效果非常好。看看他的原始效果 效果非常好，而且前面的標號1，2，都是自動的。這一點不太符合我寫部落格的習慣，以為我的標題會把這個標號固定下來，所以就...

分享 部落格美化 3 為部落格新增乙個漂亮的分享按鈕

下面將像大家介紹幾種分享按鈕以及使用步驟。當然可能對很多人是小菜一碟，這裡也算是乙個拋磚引玉的作用，希望大家分享更多自己折騰的外掛程式，因為我找這個東西花了很長時間 不懂原理，不知道搜尋啥關鍵字 現在看來當然是非常簡單了。進入主題之前，先感謝團隊，sevennight，marvin，博皮小組以及 n...

為部落格園博文新增目錄的兩種方法

1 這個指令碼支援h2，h3兩種標題，寫博文時按照h2 h3格式寫文字，指令碼會生效，幫你建立目錄，並在博文正上方顯示。1 生成部落格目錄的css 2 uprightsidebar 12 sidebartab 2021 sidebarcontents 32 sidebarcontents dl 36...