如何讓簡書支持目錄?

??最近重啟開始寫blog了,一開始本來想自己搭一個博客但試了幾個之后,最終結(jié)論是不如直接找個第三方平臺來的簡單,so最終選擇回歸簡書。但簡書有一個令人抓狂的問題:markdown不支持自動生成目錄的toc。查了一下發(fā)現(xiàn)在2017年就有人就在某乎上問了這個問題,簡書的CEO還回復(fù)不支持了,但已經(jīng)過了2年仍然不支持,這就有點說不過去了。簡書的同學(xué)們啊,你們不作為啊。
??自己動手豐衣足食,這里來介紹一個簡單的支持方法:

  1. 安裝chrome插件:tampermonkey;
  2. 安裝好之后,在tampermonkey中添加如下腳本(這里直接貼腳本是因為屏幕適配的問題稍微改了一下,原腳本地址請戳這里):
// ==UserScript==
// @name                markdown自動生成簡書目錄
// @namespace           create-jianshuList
// @version             2.2
// @author              YIN
// @description         給簡書增加目錄功能(注:通過h1-h6標(biāo)題來識別,所以文章中必須有相應(yīng)的標(biāo)題才行)
// @match               http://www.itdecent.cn/p/*
// @match               http://www.itdecent.cn/p/*
// @grant               none
// @require             https://cdn.bootcss.com/jquery/3.4.1/jquery.js
// @require             https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js

// ==/UserScript==

var version=Number($.cookie('if_shakespeare'))  // 1為新版本    0為舊版本


//去除字符串所有空格
function trim (str, is_global) {
    var result;
    result = str.replace(/(^\s+)|(\s+$)/g, "");
    if (is_global&&is_global.toLowerCase() == "g") {
        result = result.replace(/\s/g, "");
    }
    return result;
}

//轉(zhuǎn)義尖括號
function toTxt(str) {
    var RexStr = /\<|\>/g
    str = str.replace(RexStr, function(MatchStr) {
        switch (MatchStr) {
            case "<":
                return "&lt;";
                break;
            case ">":
                return "&gt;";
                break;
            default:
                break;
        }
    })
    return str;
}
var menuIndex = 0; //初始化標(biāo)題索引

// 在側(cè)邊欄中添加目錄項
function appendMenuItem(tagName,id,content) {
    let paddingLeft = tagName.substring(1) * 20; //添加標(biāo)題縮進
    $('#menu_nav_ol').append('<li class=' + id + ' style="padding-left: '+ paddingLeft +'px;line-height:40px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><a href=javascript:; title='+toTxt(trim(content,"g"))+' style="color:#e1e3e4">' + content + '</a></li>');
}

(function() {
    // 獲取標(biāo)題元素
    let titles;

    if(version){
        titles=$('body article').find('h1,h2,h3,h4,h5,h6');
    }else{

        titles=$('.show-content').find('h1,h2,h3,h4,h5,h6');
    }
    if(titles.length === 0) {
        return;
    }
    // 將文章內(nèi)容右移
    $('.post').css({padding:'0 150px 0 400px',width:'100%'});
    // 在 body 標(biāo)簽內(nèi)部添加 aside 側(cè)邊欄,用于顯示文檔目錄
    let asideContent;
    if(version){
        asideContent = '<aside id="sideMenu" style="font-size:15px;color:#fff;position: fixed;padding: 20px 15px 20px 0;top: 66px;left: 0;margin-bottom:20px;background-color: #282c34;z-index: 810;overflow: auto;height:calc(100% - 124px);width:320px;"></aside>';
    }else{
        asideContent = '<aside id="sideMenu" style="font-size:15px;color:#fff;position: fixed;padding: 70px 15px 20px 0;top: 0;left: 0;margin-bottom:20px;background-color: #282c34;z-index: 810;overflow: auto;height:100%;width:320px;"></aside>';
    }
    $('body').prepend(asideContent);
    $('#sideMenu').append('<ol id="menu_nav_ol" style="list-style:none;margin:0px;padding:0px;">');// 不顯示 li 項前面默認的點標(biāo)志, 也不使用默認縮進
    if(version){
        $('div[role="main"]').css('paddingLeft','260px')
    }

    // 遍歷文章中的所有標(biāo)題行, 按需添加id值, 并增加記錄到目錄列表中
    titles.each(function() {
        let tagName = $(this)[0].tagName.toLocaleLowerCase();
        let content = $(this).text();
        // 若標(biāo)題的id不存在,則使用新id
        let newTagId =$(this).attr('id');

        if(content){
            if(!$(this).attr('id')) {
                newTagId = 'id_'+menuIndex;
                $(this).attr('id',newTagId);
                $(this).addClass('main-title')
                menuIndex++;
            }
            appendMenuItem(tagName,newTagId,content);

        }

    });

    $('#sideMenu').append('</ol>');

    if(!$('#menu_nav_ol li').length){
        $('#sideMenu').remove()
    }
    // 綁定目錄li點擊事件,點擊時跳轉(zhuǎn)到對應(yīng)的位置
    $('#menu_nav_ol li').on('click',function() {
        let targetId = $(this).attr('class');
        var _top=$("#"+targetId).offset().top-55
        $('html,body').animate({
            scrollTop:_top
        }, 300);
    });
    //滾動頁面增加左側(cè)菜單高亮
    var active=function(){
        var scrollTop=$(window).scrollTop();
        $('.main-title').each(function(i){
            if(i<$('.main-title').length-1){
                if(scrollTop+56>=$(this).offset().top&&scrollTop+56<$('.main-title').eq(i+1).offset().top){
                    $('#sideMenu li a').css({color:'#e1e3e4'})
                    $('#sideMenu li').eq(i).find('a').css({color:'#61aeee'})
                }
            }else{
                if(scrollTop+56>=$(this).offset().top){
                    $('#sideMenu li a').css({color:'#e1e3e4'})
                    $('#sideMenu li').eq(i).find('a').css({color:'#61aeee'})
                }
            }

        })

    }
    active()
    var timer=null;
    $(window).scroll(function(){
        clearTimeout(timer)
        timer=setTimeout(function(){
            active()
        },10)

    })
})();
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容