如何给文章添加内容目录索引？
发布时间:2015年06月03日 评论数：1
阅读数：13334
目录索引，顾名思义就是给文章内容添加一个目录，通过索引快速定位到指定的内容。那么如何给文章添加这样的目录索引勒，网上有许许多多的教程或者插件，其原理都大同小异，但是很多的都不理想，不能达到多级目录的效果，在这里分享下一个比较好的代码（可以看下本文的目录索引效果，也可以看下 多级目录 效果），分为三部分：
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实现的。
好了，代码分享就到这里，那么我们怎么才能正确建立目录索引呢？很简单，只要为文字添加二级标题（编辑器自带）或者三级标题（编辑器自带）标签就行了，对，就这么简单。
