背景
根据简书的脚本修改
由于有些文章目录比较多,原脚本无滚动条,我新加了滚动条等。
由于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(
'<button class="btn btn-menu" style="width: auto;height: auto;position: fixed;right: 15px;top: 0px;border: 0px solid black;background-color: #BDF1F6;">收起目录</button>'
+ '<div class="sidebar" style="width: 250px;height: 535px;position: fixed;right: 15px;top: 35px;border: 0px solid black;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', '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文章下面有很多推荐文章,这个脚本默认把它们收进目录页面。看起来有点多余。凑合用吧。