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

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

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

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