如何给文章添加内容目录索引?

摘要

目录索引,顾名思义就

目录索引,顾名思义就是给文章内容添加一个目录,通过索引快速定位到指定的内容。那么如何给文章添加这样的目录索引勒,网上有许许多多的教程或者插件,其原理都大同小异,但是很多的都不理想,不能达到多级目录的效果,在这里分享下一个比较好的代码(可以看下本文的目录索引效果,也可以看下多级目录效果),分为三部分:
php代码(建立目录)

 //文章目录索引 function article_index($content){ $matches = array(); $ul_li = ''; $r = "/<(h[2-5])>([^<]+)<\/(h[2-5])>/im"; if(preg_match_all($r, $content, $matches)){ foreach($matches[2] as $num => $title){ //if($num==0) if(true){ $content = str_replace($matches[0][$num], '<'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'>', $content); }else{ $content = str_replace($matches[0][$num], '<div id="content_title"><'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'><span id="article-index-top"><a href="#article-index">top</a></span></div>', $content); } if($matches[1][$num] == 'h2') $ul_li .= '<li class="level2"><a href="#title-'.$num.'" >'.$title."</a></li>\n"; else if($matches[1][$num] == 'h3') $ul_li .= '<li class="level3"><a href="#title-'.$num.'" >'.$title."</a></li>\n"; } $content = '<div id="article-index"> <div id="index-title"><span id="the-index-title">正文目录</span><span id="show-index">[ 隐藏 ]</span></div><div id="index-ul"><ul>' . $ul_li . '</ul></div></div>' . $content; } return $content; }


把article_index()函数添加到function.php文件中,然后直接调用就行了,方法:article_index(“输出的内容”);
css代码(添加样式)

 /** article-index -start**/ #article-index{float: right;position: relative;margin: 0 0 10px 10px;width: 250px;border-radius: 6px;-webkit-border-radius: 6px;-khtml-border-radius: 6px;-moz-border-radius: 6px;border: 1px solid #aaa;background-color:#fff;} #article-index ul{margin: 0;} #article-index ul li{list-style: square;padding: 0;color: #A3C159;font-size: 12px;line-height:15px;background:url(''); } #article-index ul li a{text-decoration:none;} #index-title{border-radius: 7px 7px 0 0;padding: 4px 8px;border-bottom: 1px solid #aaa;background-color: #EEE} #the-index-title{line-height: 1.6;color: #019858;font-weight: bold} #show-index{cursor: pointer;margin-left: 8px;margin-right: 8px} #index-ul{list-style: none;padding: 4px 5px 4px 7px;margin: 0} #index-ul .level2{margin-left: 10px;} #index-ul .level3{margin-left: 30px;} #content_title{position: relative} #article-index-top{position: absolute;top: 5px;right: 10pxz-index: 111;} /** article-index -end**/


利用上面的css给目录索引添加样式,效果如本文上的目录索引。
js代码(隐藏与展开)

 /** article_index -start **/ $("#show-index").click(function() { if ($("#show-index").html() == "[ 隐藏 ]") { $("#index-ul").fadeOut("normal"); $("#show-index").html("[ 展开 ]") } else if ($("#show-index").html() == "[ 展开 ]") { $("#index-ul").fadeIn("normal"); $("#show-index").html("[ 隐藏 ]") } else { return false } }) /** article_index -end **/


我们注意到了,目录上有隐藏和展开的按钮,就是利用js实现的。

好了,代码分享就到这里,那么我们怎么才能正确建立目录索引呢?很简单,只要为文字添加二级标题(编辑器自带)或者三级标题(编辑器自带)标签就行了,对,就这么简单。


感谢作者:阿伟博客的投稿,欢迎大家投稿: http://likinming.com/post-87.html

发表评论

注意:本博客开启缓存,你的评论一般2小时后才能看到,如是广告,评论将无法显示!

目前评论:21 条

  1. avatar 上海保险网
    回复 2015-02-14 14:45  沙发

    博主要不把百度百科的目录代码扒下来,那个效果比较酷。

  2. avatar 广志博客
    回复 2015-02-06 23:17  板凳

    方法有点复杂,我直接用锚文本加float

    • avatar 阿伟

      @广志博客:这个一次性解决加锚点的问题,不用在手工加锚点

  3. avatar 清知枫
    回复 2015-02-06 21:42  地板

    老大,你这里也不整个自适应或者手机主题,回家了,手机上看有点惨不忍睹

    • avatar 李明

      @清知枫:我也经常使用手机看,沒感觉有问题的,哈哈!

  4. avatar 学史博客
    回复 2015-02-06 20:55  #4 楼

    要是有效果图就更完美了,还是非常谢谢分享!

  5. avatar WingsBlog
    回复 2015-02-06 15:40  #5 楼

    又图文的话就更好了

  6. avatar 森灭
    回复 2015-02-06 14:25  #6 楼

    如果博文再加上目录

    那不是彻底成百科了啊

    ------

    特来看望博主,望回访

  7. avatar 秋天日记
    回复 2015-02-06 07:24  #7 楼

    有机会再试试,哈哈

  8. avatar 包装盒
    回复 2015-02-05 21:45  #8 楼

    过来支持一下

  9. avatar 凌远
    回复 2015-02-05 21:27  #9 楼

    过来支持一下

  10. avatar Louis Han
    回复 2015-02-05 20:27  #10 楼

    平时写博客没有添加索引的习惯