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

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

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实现的。



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

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