前言
平时我的博客主要是给自己看的，把学的东西再写一遍会记得更牢固一些，并且忘记的时候又可以回来看看。
由于CSDN博客皮肤更改，搞得现在用CSDN博客变得很不方便，新的界面设计得也不是很喜欢，所以转到简书来写博客。
但是简书有一不太方便的一点就是没有左侧目录。所以通过自己定制给简书的博客自动生成侧边目录。
生成目录方法
1、安装 Tampermonkey
我用的谷歌浏览器，mac已经能翻墙，所以直接从chrome网上应用商店搜到安装好。
点击添加新脚本：
然后就可以在编辑器里写脚本为页面添加侧边目录。
思路
查看简书文章页面的源码，可以发现所有的标题行都放在h1,h2,h3,h4,h5,h6 标签内，所以将页面设计成在文章左侧插入列表, 按标题层级进行缩进，点击进行跳转。
将下面的代码贴进编辑器即可。
// ==UserScript==
// @name 简书目录
// @description:zh-cn 自动生成简书目录
// @namespace http://www.jianshu.com/u/c887880e8f06
// @version 1.0
// @description create content
// @author Wonder233
// @match http://www.jianshu.com/p/*
// @match https://www.jianshu.com/p/*
//// @require http://code.jquery.com/jquery-latest.js
// @grant none
// ==/UserScript==
var menuIndex = 0; //初始化标题索引
// 在侧边栏中添加目录项
function appendMenuItem(tagName,id,content){
console.log(tagName+" "+tagName.substring(1));
let paddingLeft = tagName.substring(1) * 30; //添加标题缩进
$('#menu_nav_ol').append('<li class="' + id +'" style="padding-left: '+ paddingLeft +'px;"><b>' + content + '</b></li>');
}
(function() {
'use strict';
// 使文章区域宽度适配屏幕
let wider = $('.note').width() - 400;
let oriWidth = $('.post').width();
console.log(wider);
console.log(oriWidth);
if (wider < oriWidth){
wider = oriWidth;
}
// 适配宽度
$('.post').width(wider);
// 保存标题元素
let titles = $('body').find('h1,h2,h3,h4,h5,h6');
if(titles.length === 0){
return;
}
// 将文章内容右移
$('.post').css('padding-left','200px');
// 在 body 标签内部添加 aside 侧边栏,用于显示文档目录
let contentHeight = window.innerHeight; //设置目录高度
let asideContent = '<aside id="sideMenu" style="position: fixed;padding: 80px 15px 20px 15px;top: 0;left: 0;margin-bottom:20px;background-color: #eee;background-color: #eee;z-index: 810;overflow: scroll;max-height:'+contentHeight+'px;min-height:'+contentHeight+'px;min-width:350px;max-width:350px;"><h2>目录<h2></aside>';
$('.show-content').prepend(asideContent);
$('#sideMenu').append('<ol id="menu_nav_ol" style="list-style:none;margin:0px;padding:0px;">');// 不显示 li 项前面默认的点标志, 也不使用默认缩进
// 遍历文章中的所有标题行, 按需添加id值, 并增加记录到目录列表中
titles.each(function(){
let tagName = $(this)[0].tagName.toLocaleLowerCase();
let content = $(this).text();
// 若标题的id不存在,则使用新id
let newTagId =$(this).attr('id');
if(!$(this).attr('id')){
newTagId = 'id_'+menuIndex;
$(this).attr('id',newTagId);
menuIndex++;
}
if(newTagId !=='id_0') //忽略标题
appendMenuItem(tagName,newTagId,content);
});
$('#sideMenu').append('</ol>');
// 绑定目录li点击事件,点击时跳转到对应的位置
$('#menu_nav_ol li').on('click',function(){
let targetId = $(this).attr('class');
$("#"+targetId)[0].scrollIntoView(true);
});
})();
