Greasy Fork

Greasy Fork is available in English.

markdown自动生成简书目录

给简书增加目录功能

当前为 2019-08-19 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name                markdown自动生成简书目录
// @namespace           create-jianshuList
// @version             2.0
// @author              YIN
// @description         给简书增加目录功能
// @match               http://www.jianshu.com/p/*
// @match               https://www.jianshu.com/p/*
// @grant               none
// ==/UserScript==

//去除字符串所有空格
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;
}

//转义尖括号
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; //初始化标题索引

// 在侧边栏中添加目录项
function appendMenuItem(tagName,id,content) {
    console.log(tagName+" "+tagName.substring(1));
    let paddingLeft = tagName.substring(1) * 20; //添加标题缩进
    $('#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() {
    // 获取标题元素
    let titles = $('body').find('h1,h2,h3,h4,h5,h6');
    if(titles.length === 0) {
        return;
    }
    // 将文章内容右移
    $('.post').css({padding:'0 150px 0 400px',width:'100%'});
    // 在 body 标签内部添加 aside 侧边栏,用于显示文档目录
    let 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 项前面默认的点标志, 也不使用默认缩进

    // 遍历文章中的所有标题行, 按需添加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);
            $(this).addClass('main-title')
            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');
        var _top=$("#"+targetId).offset().top-55
        $('html,body').animate({
            scrollTop:_top
        }, 300);
    });
    //滚动页面增加左侧菜单高亮
    var active=function(){
        var scrollTop=$(window).scrollTop();
        $('.show-content .main-title').each(function(i){
            if(i<$('.show-content .main-title').length-1){
                if(scrollTop+56>=$(this).offset().top&&scrollTop+56<$('.show-content .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)

    })
})();