OSChina博客自動生成目錄功能

1、寫在前面的話

這篇文章主要介紹博客自動生成目錄的功能，以及怎麼來生成漂亮的目錄。

爲何要有目錄呢？一篇很長的文章，有了目錄後就能夠定位到想看的位置。這是很是方便的！

一、自動生成目錄原理

public static List<String> Anchor = new ArrayList<String>(){{
	add("h1");
	add("h2");
	add("h3");
	add("h4");
	add("h5");
	add("h6");
}};

• 檢測文章中的H標籤，添加錨點

public String htmlAnchor(String html) {
    Document doc = Jsoup.parseBodyFragment(html);
    Elements anchors = doc.select("*");
    int i = 0;
    for(Element anchor : anchors){
        String tagName = anchor.tagName().toLowerCase();
        if(Anchor.contains(tagName) && anchor.hasText()) {
            i++;
            anchor.before("<span id='OSC_"+tagName+"_"+String.valueOf(i)+"'></span>");
        }
    }
    return doc.body().html();
}

• 根據錨點，生成對應的目錄

public String htmlContent(String html) {
    StringBuffer content = new StringBuffer();
    Document doc = Jsoup.parseBodyFragment(html);
    Elements anchors = doc.select("*");
    int i = 0;
    for(Element anchor : anchors) {
        String tagName = anchor.tagName().toLowerCase();
        if(Anchor.contains(tagName) && anchor.hasText()) {
            i++;
            content.append("<li class='osc_"+tagName+"'><a href='#OSC_"+tagName+"_"+String.valueOf(i)+"'>"+anchor.text()+"</a></li>");
        }
    }
    return content.toString();
}

二、寫OSChina博客的時候怎麼自動生成呢？

（1）、可視化編輯器

設置每一段落的小標題，如上圖標題一、標題二、標題3...，也能夠在html代碼中使用h一、h二、h3...標籤

（2）、MarkDown編輯器

markdown編輯器，只要在標題的前面添加「#」，標題(h1~h6)可以使用相應個數的#來生成，以下

### this is a level-3 header ###

將生成 h3 標籤

更多markdown語法 http://www.oschina.net/question/100267_75314

最後發表的時候別忘了把自動生成目錄勾選爲 是

三、怎麼使生成的目錄比較好看？

h1生成的目錄是頂級目錄，依次是h二、h3...

不一樣級別的標題使用不一樣的h標籤，對應的markdown編輯器就是「#」號的個數，可視化編輯器就是「標題1」、「標題2」選項...

2、最後的話

返回到這篇博客的前面，目錄是否是挺好看的呢

注：目前可視化編輯器和markdown編輯器只能生成到h5標籤，h6無效, markdown預覽的時候只到h3(預覽由js解析，最終顯示是由java解析的)。