用jquery實現文章自動生成二級目錄

前段時間有個同窗問有沒有辦法在博客園上發一篇文章而後自動生成文章的目錄。以前不知道該怎麼作這幾天看了些jquery以後以爲仍是容易的。

一級目錄

一級目錄的思路很簡單，找出做爲一級標題的元素，在某個地方將text列出，再加上連接就好。

target = $("#contents");
$(document).ready(function() {
    GenerateContents();
});

function GenerateContents() {
    var num = 0;
    var target = $("#contents");
    var content = "目錄";
    content += "<ul>";
    $("h2").each(function(){
        content += "<li>" + GenerateA(num,$(this).text()) + "</li>";
        $(this).before(GenerateLabel(num));
        num++;
    });
    target.append(content);
}

//這兩個函數原本想的是之後改着方便
function GenerateLabel(num){
    var a = "<a name = 'label" + num + "'></a>";
    return a;
}

function GenerateA(num ,text){
    var ss = "<a href='" + "#label" 
            + num +"'>" + text
            + "</a>";
    return ss;
}

 

二級目錄

二級目錄就是再找出兩個h2之間的h3就好，我這裏用h2,h3做爲1、二級標題。

target = $("#contents");
$(document).ready(function() {
    GenerateContents2();
});

function GenerateContents2() {
    var num = 0;
    var target = $("#contents");
    var content = "目錄";
    content += "<ul>";
    $("h2").each(function(){
        content += "<li>"+GenerateA(num,$(this).text());
        $(this).before(GenerateLabel(num));
        num++;

        var second = $(this).nextUntil("h2","h3");
        if (second) {
            content += "<ul>";
            second.each(function(){
                    content += "<li>"+GenerateA
                        (num,$(this).text())+"</li>";
                    $(this).before(GenerateLabel(num));
                    num++;
                }
            );
            content += "</ul>";
        };
        content += "</li>";
    });
    content += "</ul>";
    target.append(content);
}


//這兩個函數原本想的是之後改着方便
function GenerateLabel(num){
    var a = "<a name = 'label" + num + "'></a>";
    return a;
}

function GenerateA(num ,text){
    var ss = "<a href='" + "#label" 
            + num +"'>" + text
            + "</a>";
    return ss;
}

使用方法

寫完提交的時候忽然發如今隨筆里加js要申請js權限，想申請下來以後再加上。。不過想一想我這麼懶說不定哪天就忘記了，仍是加上好了。

 

首先，沒有js權限的申請js權限。

在寫好的文章的想要插入目錄的位置的HTML代碼里加上：

<div id="contents" display="block" style="padding:10px 0;background:#BBB">
</div>

在

<script type="text/javascript"></script>

之間加上代碼

在

<script type="text/css"></script>

加上想要的目錄樣式