其实就是想想试试PS的制作长阴影的插件==(传送门:http://lab.rayps.com/lsg/

也是记录下来。

HTML结构

说明一下:

把这段代码插到post.php 文章内容的div下面即可!
把代码中的#haha改成你的文章内容div 的 ID。
调用文章内容的php代码是 即,用div层把这段内容包括起来就行。

代码来自这篇文章:js为博客文章自动生成目录

JS 代码

function GenerateContentList() {
    var mainContent = $("#mulu");
    var h1_list = $("#haha h1");
    var h2_list = $("#haha h2");
    if (mainContent.length  0) {
        var content = "";
        content += "";
        content += ' [文章目录]';
        content += '
    '; for (var i = 0; i '; $(h1_list[i]).before(go_to_top); var h2_list = $(h1_list[i]).nextAll("h2"); var li2_content = ""; for (var j = 0; j '; $(h2_list[j]).before(li2_anchor); li2_content += '
  1. ' + $(h2_list[j]).text() + "
  2. " } var li1_content = ""; if (li2_content.length > 0) { li1_content = '
  3. ' + $(h1_list[i]).text() + '
    1. ' + li2_content + "
    " } else { li1_content = '
  4. ' + $(h1_list[i]).text() + "
  5. " } content += li1_content } if ($("#mulu").length != 0) { $($("#mulu")[0]).prepend(content) } } else { if (h1_list.length == 0 && h2_list.length > 0) { var content = ""; content += ""; content += '[文章目录]'; content += '
      '; for (var i = 0; i '; $(h2_list[i]).before(go_to_top); var h3_list = $(h2_list[i]).nextAll("h3"); var li3_content = ""; for (var j = 0; j '; $(h3_list[j]).before(li3_anchor); li3_content += '
    1. ' + $(h3_list[j]).text() + "
    2. " } var li2_content = ""; if (li3_content.length > 0) { li2_content = '
    3. ' + $(h2_list[i]).text() + '
      1. ' + li3_content + "
      " } else { li2_content = '
    4. ' + $(h2_list[i]).text() + "
    5. " } content += li2_content } if ($("#mulu").length != 0) { $($("#mulu")[0]).prepend(content) } } } } GenerateContentList();

CSS代码

我根据小伙伴|真|以歌。先生的目录树基础上写的。

悬浮在文章右侧,你可以根据你的主题进行修改。

#mulu {
    float: right;
    margin-left: 10px;
    background: #f8f8f8;
    position: relative;
    z-index: 100
}

span.toc-text {
    color: #707070
}

span.toc-text:hover {
    color: #adadad;
}

ol.toc {
    padding-left: 15px;
    margin-left: 6px;
    margin-top: 0
}

a.title_menue {
    padding-left: 10px
}

.toc-item {
    margin-left: 10px;
    margin-right: 10px
}

撒花!!动手起来,开始享受你的文章目录树吧!

最后修改:2019 年 03 月 23 日 11 : 16 AM
如果觉得我的文章对你有用,请随意赞赏