背景
简书有个缺点就是无法用[TOC]自动生成目录，自定义目录也不行。所以找了一些脚本资源，加以修改，进行了完善。
由于有的目录比较多，原脚本无滚动条，我新加了滚动条等。
脚本不是原创，只是修改了一下留着自己当笔记用的。
效果图
插件功能
- 自动识别简书内标题，点击标题名即可计入相应位置
- 点击【收起目录】功能即可实现显示与隐藏导航的功能
- 双击一条目录可以收起相邻的同级目录（比如我双击“安装”同级的“Nginx运行控制命令”以及下列目录可以收起来）
实现方式
1. 安装 Tampermonkey
从chrome网上应用商店搜到安装就好。edge浏览器也可以
2. 添加脚本
在Tampermonkey中点击创建一个新脚本
然后在下面这个编辑页面
粘贴下面的代码即可。
// ==UserScript==
// @name 简书侧边栏文章导航
// @namespace http://tampermonkey.net/
// @version 0.2
// @description 简书侧边栏目录，点击收起目录按钮切换显示和隐藏目录列表，支持滚动。
// @author treelake
// @match http://www.jianshu.com/p/*
// @match https://www.jianshu.com/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){ // 层级更深
temp += ('<ul class="nav nav-stacked">' + t + '</li>');
}else if(last > now){
res += (temp + '</ul></li>');
temp = t;
}else{
temp += (t + '</li>');
}
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', '-10px');
}); // 首级目录样式
$(".btn-menu").click(function(){
$(".sidebar").slideToggle();
return false;
}); // 点击事件
$('.sidebar>.mwrz_nav>li').dblclick(function(e){
$(e.target).parent().next().slideToggle()
}); // 双击事件收起相邻栏
// Your code here...
})();
懒人做法
如果想简单搞搞，直接在脚本内搜索然后点击安装，然后稍加修改就OK了。
做法：
-
点击tampermonkey，点击查找新脚本
-
搜索“简书侧边栏文章导航”
- 然后点击安装即可
直接给出链接了，不用找了。
简书侧边栏文章导航 - 原脚本没有滑动窗口，直接在div中添加一个滑动窗口就可以：
设置一个高度值height，后面加上overflow-y:auto;然后点击File > save保存即可
