注:本篇所講代碼已失效献起，簡(jiǎn)書生成目錄 新的方式參考：http://www.reibang.com/p/c9eb0ebed253

無(wú)法識(shí)別toc目錄.png

一、簡(jiǎn)書文章左側(cè)目錄(帶滾動(dòng))

簡(jiǎn)書有一不太方便的一點(diǎn)就是沒(méi)有左側(cè)目錄奸焙。所以自己定制給簡(jiǎn)書的博客自動(dòng)生成側(cè)邊目錄嫌术。

簡(jiǎn)書MD語(yǔ)法不識(shí)別 [TOC] ,也不會(huì)根據(jù)標(biāo)題行(#) 來(lái)插入目錄,作為每次看資料喜歡先看目錄把握總體的我來(lái)說(shuō),很不習(xí)慣,查找跳轉(zhuǎn)也不方便,所以就考慮查找資料搞個(gè)小腳本來(lái)自動(dòng)識(shí)別并生成目錄;

功能: 添加了滾動(dòng)效果, 以及對(duì)非 h1 起頭的標(biāo)題的識(shí)別. 另外完善了注釋

具體描述：此功能不僅可以查看自己的簡(jiǎn)書自動(dòng)識(shí)別生成目錄，也可以在瀏覽別人的簡(jiǎn)書自動(dòng)生成目錄曙求，方便查看和查找碍庵；

目錄樹(shù)滾動(dòng)效果.gif

生成目錄方式：

1. 安裝 Tampermonkey

Tampermonkey介紹：

tampermonkey插件是免費(fèi)的，不僅僅支持谷歌Chrome瀏覽器悟狱、還支持ie静浴、360瀏覽器等，安裝方式不一樣挤渐；
Microsoft Edge 瀏覽器可以直接擴(kuò)展里搜到安裝苹享；

演示：作為開(kāi)發(fā)人員-我就以Chiome瀏覽器 安裝Tampermonkey插件演示：

Tampermonkey獲取方式：（推薦使用方式三下載）

方式一：從chrome網(wǎng)上應(yīng)用商店搜到安裝就好

方式二：從插件網(wǎng) http://www.cnplugins.com/top/

搜索：Tampermonkey

方式三：直接下載地址 http://www.cnplugins.com/office/tampermonkey/download.html

下載文件為：tampermonkey.crx

下載完成后，參考下方：Chrome瀏覽器插件安裝
http://www.reibang.com/p/1f52955e6f44

2. 點(diǎn)擊添加新腳本：

添加腳本.png

3.在編輯器里寫腳本為頁(yè)面添加側(cè)邊目錄

寫腳本.png

4.將下面的腳本代碼貼進(jìn)編輯器即可

// ==UserScript==
// @name         簡(jiǎn)書網(wǎng)站左側(cè)目錄生成
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  簡(jiǎn)書網(wǎng)站左側(cè)目錄生成,支持非h1標(biāo)題,支持滾動(dòng)
// @author       https://github.com/lxx2013
// @match        http://www.reibang.com/p/*
// @match        http://www.reibang.com/p/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    initSidebar('.sidebar', '.post');
})();

/**
* 簡(jiǎn)書網(wǎng)站左側(cè)目錄生成插件
* 代碼參考了 https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js
* @param {string} sidebarQuery - 目錄 Element 的 query 字符串 
* @param {string} contentQuery - 正文 Element 的 query 字符串
*/
function initSidebar(sidebarQuery, contentQuery) {
    addAllStyle()
    var body = document.body
    var sidebar = document.querySelector(sidebarQuery)
    // 在 body 標(biāo)簽內(nèi)部添加 div.sidebar 側(cè)邊欄,用于顯示文檔目錄
    if (!sidebar) {
        sidebar = document.createElement('div')
        body.insertBefore(sidebar, body.firstChild)
    }
    sidebar.classList.add('sidebar')
    var content = document.querySelector(contentQuery)
    if (!content) {
        throw ('Error: content not find!')
        return
    }
    content.classList.add('content-with-sidebar');
    var ul = document.createElement('ul')
    ul.classList.add('menu-root')
    sidebar.appendChild(ul)

    var allHeaders = []
    // 遍歷文章中的所有 h1或 h2(取決于最大的 h 是多大) , 編輯為li.h3插入 ul
    //因?yàn)闃?biāo)題一定是 h1 所以優(yōu)先處理,然后再看文章正文部分是以 h1作為一級(jí)標(biāo)題還是 h2或 h3作為一級(jí)標(biāo)題
    //采用的方法是優(yōu)先遍歷正文, 然后再插入標(biāo)題這個(gè)h1
    var i = 1
    var headers = [].slice.call(content.querySelectorAll('h' + i++), 1)
    while (!headers.length && i <= 6) {
        headers = Array.from(content.querySelectorAll('h' + i++))
    }
    [].unshift.call(headers, content.querySelector('h1'))
    if (headers.length) {
        [].forEach.call(headers, function (h) {
            var h1 = makeLink(h, 'a', 'h1-link')
            ul.appendChild(h1)
            allHeaders.push(h)
            //尋找h1的子標(biāo)題
            var h2s = collectHs(h)
            if (h2s.length) {
                [].forEach.call(h2s, function (h2) {
                    allHeaders.push(h2)
                    var h3s = collectHs(h2)
                    h2 = makeLink(h2, 'a', 'h2-link')
                    ul.appendChild(h2)
                    //再尋找 h2 的子標(biāo)題 h3
                    if (h3s.length) {
                        var subUl = document.createElement('ul')
                        subUl.classList.add('menu-sub')
                        h2.appendChild(subUl)
                            ;[].forEach.call(h3s, function (h3) {
                                allHeaders.push(h3)
                                h3 = makeLink(h3, 'a', 'h3-link')
                                subUl.appendChild(h3)
                            })
                    }
                })
            }
        })
    }
    //增加 click 點(diǎn)擊處理,使用 scrollIntoView,增加控制滾動(dòng)的 flag
    var scrollFlag = 0
    var scrollFlagTimer
    sidebar.addEventListener('click', function (e) {
        e.preventDefault()
        if (e.target.href) {
            scrollFlag = 1
            clearTimeout(scrollFlagTimer)
            scrollFlagTimer = setTimeout(() => scrollFlag = 0, 1500)
            setActive(e.target, sidebar)
            var target = document.getElementById(e.target.getAttribute('href').slice(1))
            target.scrollIntoView({ behavior: 'smooth', block: "center" })
        }
    })
    //監(jiān)聽(tīng)窗口的滾動(dòng)和縮放事件
    window.addEventListener('scroll', updateSidebar)
    window.addEventListener('resize', throttle(updateSidebar))
    function updateSidebar() {
        if (scrollFlag)
            return
        var doc = document.documentElement
        var top = doc && doc.scrollTop || document.body.scrollTop
        if (!allHeaders.length) return
        var last
        for (var i = 0; i < allHeaders.length; i++) {
            var link = allHeaders[i]
            if (link.offsetTop > (top + document.body.clientHeight / 2 - 73)) {
                if (!last) { last = link }
                break
            } else {
                last = link
            }
        }
        if (last) {
            setActive(last.id, sidebar)
        }
    }
}

/**
>為正文的標(biāo)題創(chuàng)建一個(gè)對(duì)應(yīng)的錨,返回的節(jié)點(diǎn)格式為`<li><tag class="className"> some text </tag><li>`
@param {HTMLElement} h - 需要在目錄中為其創(chuàng)建鏈接的一個(gè)標(biāo)題,它的`NodeType`可能為`H1 | H2 | H3`
@param {string} tag - 返回的 li 中的節(jié)點(diǎn)類型, 默認(rèn)為 a
@param {string} className - 返回的 tag 的 class ,默認(rèn)為空
@returns {HTMLElement} 返回的節(jié)點(diǎn)格式為`<li><a> some text </a><li>`
*/
function makeLink(h, tag, className) {
    tag = tag || 'a'
    className = className || ''
    var link = document.createElement('li')
    var text = [].slice.call(h.childNodes).map(function (node) {
        if (node.nodeType === Node.TEXT_NODE) {
            return node.nodeValue
        } else if (['CODE', 'SPAN', 'A'].indexOf(node.tagName) !== -1) {
            return node.textContent
        } else {
            return ''
        }
    }).join('').replace(/\(.*\)$/, '')
    if (!h.id) h.id = IdEscape(text)
    link.innerHTML =
        `<${tag} class="${className}" href="#${h.id}">${htmlEscape(text)}</${tag}>`
    return link
}

/**
*對(duì) id 進(jìn)行格式化.把空白字符和引號(hào)轉(zhuǎn)義為下劃線
*>注意：id值使用字符時(shí)浴麻，除了 ASCII字母和數(shù)字得问、“—”、“-"软免、"."之外宫纬，可能會(huì)引起兼容性問(wèn)題，因?yàn)樵贖TML4中是不允許包含這些字符的膏萧，這個(gè)限制在HTML5中更加嚴(yán)格漓骚，為了兼容性id值必須由字母開(kāi)頭,同時(shí)不允許其中有空格。參考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/id
*>但是本程序中使用了 document.getElementById 的要求稍放寬了一些,"#3.1_createComponent"這樣的 id能成功執(zhí)行
@param {string} text - HTML特殊字符
@returns {string} 轉(zhuǎn)義后的字符串,例如`# 1'2"3標(biāo)題`被轉(zhuǎn)義為`#_1_2_3標(biāo)題`
*/
function IdEscape(text) {
    return text.replace(/[\s"']/g, '_') //注意這里不加 g 的話就會(huì)只匹配第一個(gè)匹配,所以會(huì)出錯(cuò)
}
/**
>HTML 特殊字符[ &, ", ', <, > ]轉(zhuǎn)義
@param {string} text - HTML特殊字符
@returns {string} 轉(zhuǎn)義后的字符,例如`<`被轉(zhuǎn)義為`&lt`
*/
function htmlEscape(text) {
    return text
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
}
/**
*為一個(gè) `h(x)`標(biāo)題節(jié)點(diǎn)收集跟在它屁股后面的 `h(x+1)`標(biāo)題節(jié)點(diǎn),
>若屁股后面沒(méi)有`h(x+1)`節(jié)點(diǎn),則收集`h(x+2)`節(jié)點(diǎn)甚至`h(x+3)`,畢竟不知道文章作者喜歡用哪種大小做標(biāo)題
>收集過(guò)程中若遇到 `h(x)或h(x-1)`節(jié)點(diǎn)的話要立即返回
@param {HTMLElement}  h - HTML 標(biāo)題節(jié)點(diǎn) `H1~H6`
@returns {HTMLElement[]} 一個(gè)由 h(x+1)或 h(x+2)等后代目錄節(jié)點(diǎn)組成的數(shù)組
*/
function collectHs(h) {
    var childIndexes = []
    var thisTag = h.tagName
    var count = 1
    do {
        var childTag = h.tagName[0] + (parseInt(h.tagName[1]) + count++)
        var next = h.nextElementSibling
        while (next) {
            if (next.tagName[0] == 'H' && next.tagName[1] <= thisTag[1]) {
                break
            }
            else if (next.tagName === childTag) {
                childIndexes.push(next)
            }
            next = next.nextElementSibling
        }
    } while (childTag < 'H6' && childIndexes.length == 0)
    return childIndexes
}
/**
*設(shè)置目錄的激活狀態(tài),按既定規(guī)則添加 active 和 current 類
*>無(wú)論對(duì)h2還是 h3進(jìn)行操作,首先都要移除所有的 active 和 current 類, 然后對(duì) h2添加 active 和 current, 或?qū)?h3添加 active 對(duì)其父目錄添加 current
@param {String|HTMLElement}  id - HTML標(biāo)題節(jié)點(diǎn)或 querySelector 字符串
@param {HTMLElement} sidebar - 邊欄的 HTML 節(jié)點(diǎn)
*/
function setActive(id, sidebar) {
    //1.無(wú)論對(duì)h2還是 h3進(jìn)行操作,首先都要移除所有的 active 和 current 類, 
    var previousActives = sidebar.querySelectorAll(`.active`)
        ;[].forEach.call(previousActives, function (h) {
            h.classList.remove('active')
        })
    previousActives = sidebar.querySelectorAll(`.current`)
        ;[].forEach.call(previousActives, function (h) {
            h.classList.remove('current')
        })
    //獲取要操作的目錄節(jié)點(diǎn)
    var currentActive = typeof id === 'string'
        ? sidebar.querySelector('a[href="#' + id + '"]')
        : id
    if (currentActive.classList.contains('h2-link') != -1) {
        //2. 若為 h2,則添加 active 和 current
        currentActive.classList.add('active', 'current')
    }
    if ([].indexOf.call(currentActive.classList, 'h3-link') != -1) {
        //3. 若為 h3,則添加 active 且對(duì)其父目錄添加 current
        currentActive.classList.add('active')
        var parent = currentActive
        while (parent && parent.tagName != 'UL') {
            parent = parent.parentNode
        }
        parent.parentNode.querySelector('.h2-link').classList.add('current', 'active')
    }
    //左側(cè)目錄太長(zhǎng)時(shí)的效果
    currentActive.scrollIntoView({ behavior: 'smooth' })
}
/**
>增加 sidebar 需要的全部樣式
@param {string} highlightColor - 高亮顏色, 默認(rèn)為'#c7254e'
*/
function addAllStyle(highlightColor) {
    highlightColor = highlightColor || "#c7254e"
    var sheet = newStyleSheet()
    /**
    >創(chuàng)建一個(gè)新的`<style></style>`標(biāo)簽插入`<head>`中
    @return {Object} style.sheet,`它具有方法insertRule`
    */
    function newStyleSheet() {
        var style = document.createElement("style");
        // 對(duì)WebKit hack :(
        style.appendChild(document.createTextNode(""));
        // 將 <style> 元素加到頁(yè)面中
        document.head.appendChild(style);
        return style.sheet;
    }
    var position = 0
    /**
    >添加一條 css 規(guī)則
    @param {string} str - css樣式,也可以是@media
    */
    function addStyle(str) {
        sheet.insertRule(str,position++);
    }
    addStyle(`.sidebar{position:fixed;    z-index: 10;
        top: 61px;
        left: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 40px 20px 60px 30px;
        max-width: 310px;
    }`)
    addStyle(`.menu-root { list-style:none; text-align:left }`)
    addStyle(`.menu-root .h1-link{
        display:inline-block;
        color:rgb(44, 62, 80);
        font-family:"source sans pro", "helvetica neue", Arial, sans-serif;
        font-size:17.55px;
        font-weight:600;
        height:22px;
        line-height:22.5px;
        list-style-type:none;
        margin-block-end:11px;
        margin-block-start:11px;
    }`)
    addStyle(`.menu-root .h2-link:hover {
        border-bottom: 2px solid ${highlightColor};
    }`)
    addStyle(`.menu-root .h2-link.current+.menu-sub{
        display:block;
    }`)
    addStyle(`.menu-root .h2-link{
        color:rgb(127,140,141);
        cursor:pointer;
        font-family:"source sans pro", "helvetica neue", Arial, sans-serif;
        font-size:15px;
        height:auto;
        line-height:22.5px;
        list-style-type:none;
        text-align:left;
        text-decoration-color:rgb(127, 140, 141);
        text-decoration-line:none;
        text-decoration-style:solid;
        margin-left:12.5px;
    }`)
    addStyle(`.menu-sub {
        padding-left:25px;
        list-style:none;
        display:none;
    }`)
    addStyle(`.menu-sub .h3-link{
        color:#333333;
        cursor:pointer;
        display:inline;
        font-family:"source sans pro", "helvetica neue", Arial, sans-serif;
        font-size:12.75px;
        height:auto;
        line-height:19.125px;
        list-style-type:none;
        text-align:left;
        text-decoration-color:rgb(52, 73, 94);
        text-decoration-line:none;
        text-decoration-style:solid;
    }`)
    addStyle(`@media only screen and (max-width : 1300px){
        .content-with-sidebar {
            margin-left:310px !important;
        }
    }`)
    addStyle(`.sidebar .active{
        color:${highlightColor};
        font-weight:700;
    }`)
}
/**
>函數(shù)節(jié)流
>參考https://juejin.im/entry/58c0379e44d9040068dc952f
@param {Fuction} fn - 要執(zhí)行的函數(shù)
*/
function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}

5.保存腳本

點(diǎn)擊-保存圖標(biāo)

保存圖標(biāo).png

6.啟動(dòng)腳本：

啟動(dòng)腳本.png

7.測(cè)試腳本是否成功：

打開(kāi)簡(jiǎn)書榛泛，訪問(wèn)效果如下：

腳本測(cè)試.png

二蝌蹂、推薦幾個(gè)實(shí)用腳本地址

簡(jiǎn)書自動(dòng)生成目錄小工具腳本
http://www.reibang.com/u/70d69269bd09
簡(jiǎn)書網(wǎng)站左側(cè)目錄生成腳本
http://www.reibang.com/p/0ab2b77f59a1
掘金文章自動(dòng)顯示全文腳本
http://www.reibang.com/p/73131e43b462
CSDN廣告清除請(qǐng)自適應(yīng)寬度腳本
http://www.reibang.com/p/36f1448de43e