自己动手给博客添加一个文章目录功能

发布于 2018-07-15  1.16k 次阅读

本站目前用的主题并没有自带文章目录功能，所以说假如我写了篇超级超级长的文章，你看这篇文章的时候绝对会非常吃力，然后吐槽一句“太长不看”走人。作为一名优秀的店长，我怎么能就这样看着宝贵的客人们不断流失呢？因此动手给我的live2d看板娘写了个文章目录的功能。有了这玩意儿，我的文章看起来应该就会变得更有条理了吧~（大概）

也许你的博客没有在使用live2d插件，所以接下来我就重点来讲文章目录功能的实现方法。至于如何把这个功能整合进live2d插件，请查看本站源代码自己研究吧。

1.文章目录……是啥？

接下来我们要做的文章目录，应该具备以下功能：

（1）按顺序输出文章的小标题

（2）点击一个小标题，网页就能自动跳转到标题所在的位置

大概就这两点。

2.这个功能……大概是什么思路？

思路不是很复杂，两步到位。

（1）通过jQuery选择器来抓取文章中的小标题，并给它们分别添加唯一的id属性，从而在各个标题处设置锚点

（2）还是通过jQuery选择器来输出锚点超链接

3.不扯淡了，走起！

差不多知道这是个什么东西，而且已经有了个大概的思路了，那还等啥？开工吧。

3.1.一些准备工作

首先自然是要创建一些东西咯。这里我们需要创建一个变量来计数，还要创建一个字符串来存储要输出的内容。到时候只要输出这个字符串就行了。

var tits = 0;
var catalog;

 

3.2.抓取对应的标题元素

我们需要清楚这一点：现在需要做的是文章的目录，所以我们抓取的范围当然是在文章内部。显然，标题元素并不是文章部分的专利，如果不设定一个范围的话，很有可能就会抓取到一些奇怪的东西。

本站目前使用的主题中，文章部分是被一个article标签包裹的。而文章页面也就只有这一个article标签，因此就只需要抓取article元素后代的标题元素并对每一个抓取到的元素分别进行操作就行了。

由于我目前写文章习惯只用二级和三级标题，下面我就只抓了这两种。

啊，对了，既然是要抓取元素，首先总得判断一下目标元素是否存在吧？

if ($('h2').length || $('h3').length) {
  catalog = "<p class=\"cat\">Here's the catalog of this archive:</p><br>";
  $('article h2, article h3').each(function(){

 

3.3.锚点的设置

添加锚点倒是没什么好说的，但生成超链接总不能不管它是几级标题都按照同一种样式无脑生成吧？那样看起来多没条理啊。因此需要先判断是几级标题再生成超链接。

  $(this).attr("id","title-" + tits);
  if(0 == $(this).filter('h2').val()) catalog += "<p class=\"h2cat\">&raquo;<a class=\"h2wrap\" href=\"#title-"+tits+"\">"+$(this).text()+"</a></p><br>";
  if(0 == $(this).filter('h3').val()) catalog += "<p class=\"h3cat\">&raquo;<a class=\"h3wrap\" href=\"#title-"+tits+"\">"+$(this).text()+"</a></p><br>";
  tits++;
});

 

3.4.找个地方输出文章目录

这个嘛就因人而异了。反正目录已经存储在了字符串catalog里面了，要怎么输出这个字符串就看你喜欢咯。

3.5.加个平滑滚动到锚点的特效

什么都不做的情况下，点击指向锚点的超链接，网页会瞬间跳到锚点的位置。这看起来多不爽啊。为什么不能平滑滚动过去呢？可以添加下面的代码来实现这个效果。

$('.h2wrap, .h3wrap').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
    if ($target.length) {
      var targetOffset = $target.offset().top;
      $('html,body').animate({
        scrollTop: targetOffset
      },
      700);
      return false;
    }
  }
});

3.6.CSS样例

仅供参考。由于是我随手写的，可能并不符合你的审美。还请不要在意。

.cat {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-family: Century Gothic, Microsoft YaHei;
}

.h2cat {
  margin: 0;
  padding: 0;
  text-align: left;
  text-indent: 2em;
  line-height: 5px;
  font-size: 14px;
  font-family: Century Gothic, Microsoft YaHei;
}

.h3cat {
  margin: 0;
  padding: 0;
  text-align: left;
  text-indent: 4em;
  line-height: 3px;
  font-size: 12px;
  font-family: Century Gothic, Microsoft YaHei;
}

4.见证效果

在我写这段话的时候这篇文章还没发表出去呢，所以就拿友人R的文章来做个示例吧。

自己动手给博客添加一个文章目录功能