background

There is no table of contents in the gold digger booklet, and sometimes it hurts to read long articles.

The first step

First, you need your browser to install Tampermonkey

The second step

Left-click on the Tampermonkey to bring up the options shown

Administration panel

+

The third step

Paste the following code into the edit area

// ==UserScript== // @name Directory of nuggets // @description: zh-CN automatically generates nuggets directory // @namespace https://juejin.cn/book/* // @version 1.0 // @description create content // @author Simon // @match https://juejin.cn/book/* // @require HTTP: / / https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js / / @ grant none / / = = / UserScript = = var menuIndex = 0; (function() {
    'use strict'; init(); }) ();function init() {
    var a = setInterval(() => {
        var content = document.getElementsByClassName('article-content');
        if(content){ window.clearInterval(a); initSidebar(); }}, 1000); }function initSidebar() {

    let titles = $('.article-content').find('h1,h2,h3,h4,h5,h6');
    console.log(titles.length)
    if(titles.length === 0){
        return;
    }

    
    let contentHeight = window.innerHeight;
    let asideContent = '+contentHeight+'px; min-height:'+contentHeight+'px; min-width:200px; max-width:300px;" >< span style="padding-left:30px">;
    $('.book-content').prepend(asideContent);
    $('#sideMenu').append('
      

        '
      );
    
    titles.each(function() {let tagName = $(this)[0].tagName.toLocaleLowerCase();
          let content = $(this).text();
          
          let newTagId =$(this).attr('id');
          if(! $(this).attr('id')){
              newTagId = 'id_'+menuIndex;
              $(this).attr('id',newTagId);
              menuIndex++;
          }
          if(newTagId ! = ='id_0')
              appendMenuItem(tagName,newTagId,content);
    });

    $('#sideMenu').append('</ol>');
    
    $('#menu_nav_ol li').on('click'.function() {let targetId = $(this).attr('class');
        $(this).first().children("a").first().css('color'.'red');
        $("#"+targetId)[0].scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
        $('#menu_nav_ol').children().each(function() {let otherId = $(this).attr('class');
            if(targetId ! = otherId) { $(this).first().children("a").first().css('color'.'black'); }}); }); }function appendMenuItem(tagName,id,content){
    let paddingLeft = tagName.substring(1) * 20;
    $('#menu_nav_ol').append('<li class="' + id +'" style="padding-left: '+ paddingLeft +'px; margin:10px 0">' + content + '</a></li>');
}
Copy the code

Then click File => Save

Refresh again, the effect is as follows:

The last

• Sometimes a refresh does not come out of the directory to brush several times
• If you want to display the current chapter directory after switching chapters, you still need to refresh the page