一个漂亮的文章目录生成工具toc.js

今天看到阮一峰前辈博客一篇好文章，想收藏下来用时再看，无意间看见目录是自动生成的。看到有个toc.js，通过这个关键字没有找到对应的插件。果断启用拿来主义功能，在仔细端详了页面的代码后发现功能不是太复杂，下面列出了所需的代码。现在还没有找到如何生成目录级别标签的代码。暂且使用吧。正文中只需要使用h2,h3,h4标签即可识别。本文的目录就是这样生成的。

 

 

html

id为toc的div是用来放置目录数据的容器

<div class="article_content">
  <div class="panel callout radius" id="toc">目录</div>
   <!-- 正文 -->
   <?php the_content(); ?>
</div>

toc.js

这个就是那段神奇的代码

!function(a){a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.prefix+"-active",j=function(b){for(var c=0,d=arguments.length;d>c;c++){var e=arguments[c],f=a(e);if(f.scrollTop()>0)return f;f.scrollTop(1);var g=f.scrollTop()>0;if(f.scrollTop(0),g)return f}return[]},k=j(e.container,"body","html"),l=function(b){if(e.smoothScrolling){b.preventDefault();var c=a(b.target).attr("href"),f=a(c);k.animate({scrollTop:f.offset().top},400,"swing",function(){location.hash=c})}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},m=function(b){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=0,g=h.length;g>f;f++)if(h[f]>=c){a("li",d).removeClass(i),b=a("li:eq("+(f-1)+")",d).addClass(i),e.onHighlight(b);break}},50)};return e.highlightOnScroll&&(a(window).bind("scroll",m),m()),this.each(function(){var b=a(this),c=a("<ul/>");g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=(a("<span/>").attr("id",e.anchorName(d,f,e.prefix)).insertBefore(g),a("<a/>").text(e.headerText(d,f,g)).attr("href","#"+e.anchorName(d,f,e.prefix)).bind("click",function(c){l(c),b.trigger("selected",a(this).attr("href"))})),j=a("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(i);c.append(j)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",selectors:"h1,h2,h3",smoothScrolling:!0,prefix:"toc",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(a,b,c){return c+a},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);

生成目录程序

下面这两段程序，第一段没明白是做什么的，第二段是用来生成目录的程序。

//这个程序没看到有什么作用，可能是考虑了固定导航栏的高度
jQuery(document).on("click", "#toc a", function (a) {
    // #wpadminbar 替换了原来的 header
    $("#wpadminbar").animate({marginBottom: 130}, 200).animate({marginBottom: 30}, 200)
});
//这一段是用来生成目录的
jQuery(document).ready(function () {
    return 0 === $(".article_content h2").length ? ($("#toc").remove(), 0) : (jQuery("#toc").toc({
         selectors: "h2,h3,h4",
          container: ".article_content"
     }), jQuery("#toc").before("<h2>目录</h2>"), "参考链接" === $.trim($(".article_content h2:nth-last-of-type(1)").text()) && $(".article_content h2:nth-last-of-type(1)").addClass("reference").next("ul").addClass("reference-list"), void $("#toc~h2").wrap('<div class="chapter" />'))
});

美化

下面的css 就是本页面目录所使用的样式

    <style>
        #toc {
            /*background-color: #111;
            box-shadow: -5px 0 5px 0 #000 inset;
            color: #fff;
            font-family: Consolas,"Courier New",Courier,FreeMono,monospace;
            font-weight: 700;*/
            margin-bottom: 2em;
            padding-top: 20px;
        }
        #toc ul {
            /*list-style: outside none none;*/
            list-style:none;
            margin: 0;
            padding: 0;
        }
        #toc li {
            padding: 5px 10px;
            list-style:none;
        }
        #toc a {
            color: #a6e22e;
            display: block;
            text-decoration: none;
        }
        #toc li:hover {
            background: #369 none repeat scroll 0 0;
            /*box-shadow: -5px 0 10px -5px #000 inset;*/
        }
        #toc li a:hover{
            border:none;
        }
        #toc .toc-h2 {
            padding-left: 2em;
        }
        #toc .toc-h3 {
            padding-left: 4em;
        }
        #toc .toc-h4 {
            padding-left: 6em;
        }
    </style>

写在最后吧：
后来，我找到了官方项目地址，就算一次快乐的旅行吧：
http://projects.jga.me/toc/
https://github.com/jgallen23/toc