博客的文章目录代码是通过查询文章的所有内容，获取里面的某个标签来得到的一个集合。其实本人也不太清楚这种做法值不值得，其实很浪费表情。尤其是在gg被和谐之后。
以上在谷歌中搜索“前端开发规范文档”时，谷歌结果展示的效果，列出了这篇文章的目录的前四个标题。其他的文章中同样会有这种表现。将以下代码加到function.php中，在文章就可以查看了。
//Code From qdkfweb.cn
function article_index($content) {
$matches = array();
$ul_li = '';
$r = "/<h3>([^<]+)<\/h3>/im";
if(preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $num => $title) {
$content = str_replace($matches[0][$num], '<h3 class="title-'.$num.'">'.$title.'</h3>', $content);
$ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\" class=\"article-index hidden-xs\">
<strong class=\"title\">文章目录</strong>
<ul id=\"index-ul\" class=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( "the_content", "article_index" );
本站的文章目录相对复杂点，多了点CSS和JS。
CSS代码：
#article-index{position:relative; z-index:2;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:1px solid #DEDFE1;float:right;margin:0 0 15px 15px;padding:0 6px;width:200px;line-height:23px; background: #fff;}
#article-index strong{border-bottom:1px dashed #DDDDDD;display:block;line-height:30px;padding:0 4px}
#index-ul{margin:0;padding-bottom:10px;}
#index-ul li{background:none repeat scroll 0 0 transparent;list-style-type:disc;padding:0;margin-left:20px}
.index-more{padding-left:20px;}
JQuery代码：
//滚动到某个位置
function scrollTo(ele, speed){
if(!speed) speed = 300;
if(!ele){
$("html,body").animate({scrollTop:0},speed);
}else{
if(ele.length>0) $("html,body").animate({scrollTop:$(ele).offset().top},speed);
}
return false;
}
//右侧滑动到某个位置时，复制文章目录，并添加到侧栏指定标签内“.mulu ul”内，样式保持一致
//Code From qdkfweb.cn
var muluBox = $(".mulu ul");
var _html = $(".index-ul").html();
if(_html){
muluBox.html(_html);
//当滚动距离大于侧栏高度和目录的原本高度时，目录才会显示。
function resizeWindow(e){
if($(window).width()>1000){
var sidebarHeight = $(".sidebar").height();
//文章滚动的过程中，目录的列表锚点会随着高度的变化而相应的改变，如上图中的图片规范是亮点
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var items = muluBox.find("li");
for(var i=0; i<items.length; i++){
var anchor = $(".title-"+i);
// console.log(anchor);
var pos = anchor.offset();
var winH = $(window).height();
if(pos.top < (winScrollTop+20)){
// console.log(i);
muluBox.find("li").eq(i).addClass("current").siblings().removeClass();
}
}
if(winScrollTop > sidebarHeight){
$(".mulu").show().stop(true,false);
}else{
$(".mulu").hide();
}
})
}
}
resizeWindow();
//点击目录下边的小按钮可以隐藏目录和展开目录
$(window).bind("resize", resizeWindow);
$(".mulu-toggle").on("click",function(){
var muLu = $(".mulu");
$(this).toggleClass("active");
if(muLu.is(":visible")) muLu.hide();
else muLu.show();
})
}else{
$(".mulu, .mulu-toggle").hide();
}
var indexUL = $(".index-ul");
var indexLi = $(".index-ul li").length;
//目录的个数大于7时，收缩起来，点击展开更多后展开，点击收缩起来时，恢复原样
if(indexLi >7 ){
$(".index-ul li:gt(6)").hide();
indexUL.after("<li class='index-more'><a href='#'>展开更多</a>");
$(".index-more").on("click","a",function(){
var more =$(".index-ul li:gt(6)");
var _this = $(this);
if(more.is(":visible")){
more.hide();
_this.text("展开更多");
}else{
more.show();
_this.text("伸缩起来");
}
return false;
})
}
//点击目录的链接，会跳转到相对应的位置
$(".index-ul, .mulu ul").on("click","li",function(){
var itemName = $(this).find("a").attr("href").slice(1);
$(this).addClass("current").siblings().removeClass();
scrollTo("."+itemName,500);
return false;
})
这个JQuery效果比较难理解，如果你不需要这种效果，可以直接使用上面的php和CSS代码即可。
如果有需要，可以联系付费定做。
