生成CSDN侧边导航

背景

根据简书的脚本修改
由于有些文章目录比较多，原脚本无滚动条，我新加了滚动条等。
由于CSDN整个页面都是满的，所以看起来不是很好看，如果挡住了需要的内容，点击【收起目录即可】
脚本不是原创，只是修改了一下留着自己当笔记。

效果图

---------------的下面是CSDN推送的文章标题。

显示目录的效果图

隐藏目录的效果图

插件功能

• 自动识别CSDN内标题，点击标题名即可计入相应位置
• 点击【收起目录】功能即可实现显示与隐藏导航的功能
• 双击一条目录可以收起相邻的同级目录（比如我双击“安装”同级的“Nginx运行控制命令”以及下列目录可以收起来）

实现方式

1. 安装 Tampermonkey

从chrome网上应用商店搜到安装就好。edge浏览器也可以

2. 添加脚本

在Tampermonkey中点击创建一个新脚本

然后在下面这个编辑页面

粘贴下面的代码即可。

// ==UserScript==
// @name         CSDN侧边栏文章导航
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  简单的CSDN侧边栏导航使用，方便快速浏览查找文章，点击目录按钮切换显示
// @author       mwrz
// @match        https://blog.csdn.net/*article/details/*
// @match        http://blog.csdn.net/*article/details/*
// @grant        none
// @require      http://code.jquery.com/jquery-latest.js
// ==/UserScript==

(function() {
    'use strict';

    $('body').append(
        '收起目录'
        + '
'
        + '
'
        + '
'
        + '
');

    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 = '
+ $(this).attr('id')
        + '">'
        + $(this).text()
        + '';

        var head = '';
        var tail = '';
        if (last == ''){
            res += t;
        }else if(last < now){ // 层级更深
            temp += ('
' + t + '');
        }else if(last > now){
            res += (temp + '
');
            temp = t;
        }else{
            temp += (t + '');
        }

        last = now;
    }); // 构造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');
    }); // 内层列表线宽

    $('.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', '00px');
    }); // 首级目录样式

    $(".btn-menu").click(function(){
        $(".sidebar").slideToggle();
        return false;
    }); // 点击事件

    $('.sidebar>.mwrz_nav>li').dblclick(function(e){
        $(e.target).parent().next().slideToggle()
    }); // 双击事件收起相邻栏

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

不足之处

CSDN文章下面有很多推荐文章，这个脚本默认把它们收进目录页面。看起来有点多余。凑合用吧。