今天看到阮一峰前辈博客一篇好文章,想收藏下来用时再看,无意间看见目录是自动生成的。看到有个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