博客文章目录生成插件（tocbot）

生成目录的插件-tocbot

在逛网站的时候，发现很多网站都会有文章目录，在GitHub上发现了一个javascript生成的插件，就顺手复制过来了。

1.访问地址

官网访问地址：https://tscanlin.github.io/tocbot/

2.下载

3.文件目录

4.文件引入

引入相关文件

<link rel="stylesheet" href="/tocbot.css">
<script src="/tocbot.min.js"></script>

初始化tocbot

<script type="text/javascript">
			
  tocbot.init({
    // Where to render the table of contents.
    // 把目录显示在那个区域
    tocSelector: '.js-toc',
    // Where to grab the headings to build the table of contents.
    // 生成目录的文本源在哪儿
    contentSelector: '.js-toc-content',
    // Which headings to grab inside of the contentSelector element.
    // 生成那些标题的级别
    headingSelector: 'h1, h2, h3',
    // For headings inside relative or absolute positioned containers within content.
    hasInnerContainers: true,
  });
  
</script>

自己修改后的插件

有时候直接拿来的插件，并不能很好的适应自己的网站，这就需要自己来修改了。

演示地址：

https://www.lingyublog.com/demo/blog-catalogue/index.html

https://www.lingyublog.com/htmlnote/html45.html

html文档结构

在文章中都会使用h1、h2、h3和p来作为文章的标题结合段落，内容结构文档如下：

<div class="content">
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <p>内容段落</p>
</div>
<div class="toc"></div>

1.标题产生唯一的id

var id = 1;
$(".content").children("h1,h2,h3,h4,h5").each(function () {
    // .content 为正文容器的 class，根据自己的情况修改
    var hyphenated = "mashiro-" + id;
    $(this).attr('id', hyphenated);
    id++;
});

2.引入tocbot

引入tocbot相关的文件，在文档中添加目录容器

<script src="js/tocbot.min.js"></script>
<div class="toc"></div>

3.初始化tocbot

tocbot.init({
  tocSelector: '.toc',
  contentSelector: '.content',
  headingSelector: 'h1, h2, h3, h4, h5',
  positionFixedSelector: ".toc",
  //滚动去掉顶部导航的高度
  scrollEndCallback: function (e) {
      if($(document).scrollTop() >= $(document).height() - $(window).height()) {
          window.scrollTo(window.scrollX, window.scrollY);
      }else{
          window.scrollTo(window.scrollX, window.scrollY - 80);
      }
  },
});

4.悬浮效果

$(document).ready(function() {
        if ($("div").hasClass("toc")) {
            var $elm = $('.toc');
            var iniTop = 500; 
            var finTop = 100; 
            var hasScrolled = $('.content').offset().top;
            if (hasScrolled > iniTop) {
                $elm.css({
                    'top': finTop
                });
            }
            $(window).scroll(function() {
                var p = $(window).scrollTop();
                if (p > iniTop - finTop) {
                    $elm.css({
                        'top': finTop
                    });
                } else {
                    $elm.css({
                        'top': iniTop - p
                    });
                }
            });
        }
    });

5.css样式

*{
  margin: 0;
  padding: 0;
}
.content{
  width: 1000px;
  margin: 0 auto;
  margin-top: 80px;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
}
.content p,.content h2{
  text-indent: 2rem;
  margin: 10px 0;
  line-height: 35px;
}
/* 文章目录 */
.toc{width: 200px;height: auto;z-index: 98;padding: 10px 10px 10px 0; border-radius: 5px; background: #fff;transform: translateX(0);right: calc((100% - 1610px) / 2);position: fixed !important;top:120px;position: absolute;}
.toc{overflow-y:auto}
.toc>.toc-list{overflow:hidden;position:relative}
.toc>.toc-list li{list-style:none}
.toc-list{margin:0;padding-left:10px}
a.toc-link{color:currentColor;height:100%;display: block; padding: 5px 0;}
.is-collapsible{max-height:1000px;overflow:hidden;transition:all 300ms ease-in-out}
.is-collapsed{max-height:0}
.is-position-fixed{position:fixed !important;top:100px;}
.is-active-link{font-weight:700}
.toc-link::before{background-color:#EEE;content:' ';display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:5px}
.is-active-link::before{background-color:#12b7de;}

把以上内容，整合起来，就可以了.(整体文档打开演示地址，ctrl+s保存网页即可)