背景
根據簡書的腳本修改
由於有些文章目錄比較多,原腳本無滾動條,我新加了滾動條等。
由於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文章下面有很多推薦文章,這個腳本默認把它們收進目錄頁面。看起來有點多餘。湊合用吧。