https://github.com/typecho-fans/plugins/tree/master/ContentIndex

这个仓库最新的更新时间是三年前,但是功能依旧很强大。我最开始是想给博客添加一个目录功能,但是我自己又对 php 不太了解,因此只能借鉴别人开发过的代码。

主要代码

简单看一下代码实现主要功能的地方

public static function singleHandle($that,$select) {
  if (preg_match_all("/<h(\d)>(.*)<\/h\d>/isU",$that->content,$outarr)) {
    $index = array();
    $index_out = "";
    $minlevel = 6;
    for ($key=0; $key<count($outarr[2]);$key++) {
      $ta = $that->content;
      $tb = strpos($ta, $outarr[0][$key]);
      $that->content = substr($ta, 0, $tb)."<a name=\"ci_title{$key}\"></a>".substr($ta, $tb);

      if ($outarr[1][$key]<$minlevel) 
        $minlevel = $outarr[1][$key];
     array_push($index,
    array(
    "level"=>$outarr[1][$key],
    "link"=>"<a href=\"#ci_title{$key}\">{$outarr[2][$key]}</a>"
      )
    );
  }

  $curlevel = 0;
  foreach ($index as $i) {
    <!-- 根据 html 的标题标签生成一个 ul 列表  -->
    if ($i["level"]>$curlevel) $index_out.="<ul>\n";
    elseif ($i["level"]<$curlevel) $index_out.=str_repeat("</ul>\n", $curlevel-$i["level"]);
    $curlevel = $i["level"];
    $index_out .= "<li>{$i['link']}</li>\n";
  }
  $index_out.=str_repeat("</ul>\n", $curlevel - $minlevel + 1);

    <!-- 将 ul 列表插入 id=theContentIndex 的容器中,然后展示在 content 区域 -->
    $that->content = "<div id=\"theContentIndex\">{$index_out}</div>". $that->content;
  }
}

移动位置

这样就可以在页面中展示出来,展示的区域是 post 的 content 前面,这样就无法在阅读文章的时候实时预览目录,很不优雅,我本意是想让目录显示在 slide 区域,但是我改了半天,总是语法报错。

然后我就想能否通过 js 直接修改 dom 移动目录的位置。

首先,我在 slide 新建了一个容器

<div id="mulu"></div>

然后使用 jq 语法移动 dom ,因为我在网站的 <head> 引入过了 jquery 库,所以这里可以直接写。

$('#mulu').append($('#theContentIndex'))

打开一篇文章,果然移动到了我想要的位置,但是文章很长的话,目录栏会直接滑上去,很不优雅,继续修改。

完善细节

我想要他滑动的时候灵活贴着顶部,然后顺便写一个返回顶部的按钮,下面是代码:

$(function() { 
  var elm = $('#mulu'); 
  var startPos = $(elm).offset().top; 
  
  $.event.add(window, "scroll", function() { 
    var p = $(window).scrollTop(); 
    $(elm).css('position',((p) > startPos) ? 'fixed' : 'static'); 
    $(elm).css('top',((p) > startPos) ? '20px' : ''); 
    $(elm).css('width',((p) > startPos) ? '280px' : ''); 
  }); 
}); 

$('#mulu').append('<p><a id="gotop">点击回到顶部</a></p>')
$("#gotop").click(function(){
 $("html,body").animate({
    'scrollTop':'0'
 },300);
})