背景

簡書有個(gè)缺點(diǎn)就是無法用[TOC]自動(dòng)生成目錄，自定義目錄也不行。所以找了一些腳本資源，加以修改，進(jìn)行了完善。
由于有的目錄比較多，原腳本無滾動(dòng)條，我新加了滾動(dòng)條等。
腳本不是原創(chuàng)，只是修改了一下留著自己當(dāng)筆記用的。

效果圖

插件功能

• 自動(dòng)識(shí)別簡書內(nèi)標(biāo)題，點(diǎn)擊標(biāo)題名即可計(jì)入相應(yīng)位置
• 點(diǎn)擊【收起目錄】功能即可實(shí)現(xiàn)顯示與隱藏導(dǎo)航的功能
• 雙擊一條目錄可以收起相鄰的同級(jí)目錄（比如我雙擊“安裝”同級(jí)的“Nginx運(yùn)行控制命令”以及下列目錄可以收起來）

實(shí)現(xiàn)方式

1. 安裝 Tampermonkey

從chrome網(wǎng)上應(yīng)用商店搜到安裝就好。edge瀏覽器也可以

2. 添加腳本

在Tampermonkey中點(diǎn)擊創(chuàng)建一個(gè)新腳本

然后在下面這個(gè)編輯頁面

// ==UserScript==
// @name         簡書側(cè)邊欄文章導(dǎo)航
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  簡書側(cè)邊欄目錄，點(diǎn)擊收起目錄按鈕切換顯示和隱藏目錄列表，支持滾動(dòng)。
// @author       treelake
// @match        http://m.itdecent.cn/p/*
// @match        http://m.itdecent.cn/p/*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==
(function() {
    'use strict';

    $('body').append(
        '<button class="btn btn-menu" style="width: auto;height: auto;position: fixed;left: 0px;top: 55px;border: 0px solid black;background-color: #BDF1F6;">收起目錄</button>'
        + '<div class="sidebar" style="width: 300px;height: 535px;position: fixed;left: 1px;top: 85px;border: 0px solid black;overflow-x:auto;overflow-y:auto;">'
        + '<ul class="mwrz_nav nav">'
        + '</ul>'
        + '</div>');

    var titles = $('body').find('h1,h2,h3,h4,h5,h6').slice(1);
    var i = 0;
    //var a = new Array();
    var last = '';
    var now = '';
    var temp = '';
    var res = '';

    titles.each(function(index, el){

        now = el.tagName.slice(-1);

        $(this).attr('id', 'mwrz' + i);
        i += 1;

        var t = '<li><a href="#'
        + $(this).attr('id')
        + '">'
        + $(this).text()
        + '</a>';

        var head = '';
        var tail = '';
        if (last == ''){
            res += t;
        }else if(last < now){ // 層級(jí)更深
            temp += ('<ul class="nav nav-stacked">' + t + '</li>');
        }else if(last > now){
            res += (temp + '</ul></li>');
            temp = t;
        }else{
            temp += (t + '</li>');
        }

        last = now;
    }); // 構(gòu)造ul,li列表

    $('.sidebar .mwrz_nav').append(res+temp);

    $('.sidebar>.mwrz_nav a').each(function(){
        $(this).css('max-width', '300px');
    }); // 最大寬度

    var width = '3px';
    $('.sidebar>.mwrz_nav>li>ul').each(function(){
        $(this).css('border-left', width + ' solid #A0E418');
    }); // 內(nèi)層列表線寬

    $('.sidebar>.mwrz_nav>li>ul:last').css(
        'border-bottom', '2px' + ' solid #A0E418'
    );  // 最底部列表線寬

    $('.sidebar>.mwrz_nav>li>a').each(function(){
        $(this).css('background-color', 'rgba(255, 111, 90, 1)');
        $(this).css('color', 'white');
        $(this).css('margin-left', '-10px');
    }); // 首級(jí)目錄樣式

    $(".btn-menu").click(function(){
        $(".sidebar").slideToggle();
        return false;
    }); // 點(diǎn)擊事件

    $('.sidebar>.mwrz_nav>li').dblclick(function(e){
        $(e.target).parent().next().slideToggle()
    }); // 雙擊事件收起相鄰欄

    // Your code here...
})();

懶人做法

如果想簡單搞搞，直接在腳本內(nèi)搜索然后點(diǎn)擊安裝，然后稍加修改就OK了。
做法：

1. 點(diǎn)擊tampermonkey，點(diǎn)擊查找新腳本

   
   

2. 搜索“簡書側(cè)邊欄文章導(dǎo)航”

   
   
3. 然后點(diǎn)擊安裝即可
   直接給出鏈接了，不用找了。
   簡書側(cè)邊欄文章導(dǎo)航
4. 原腳本沒有滑動(dòng)窗口，直接在div中添加一個(gè)滑動(dòng)窗口就可以：
   設(shè)置一個(gè)高度值height，后面加上overflow-y:auto;然后點(diǎn)擊File > save保存即可