美文网首页
简书侧边栏文章导航(小白适用)

简书侧边栏文章导航(小白适用)

作者: 明月___ | 来源:发表于2018-12-10 18:26 被阅读0次

背景

简书有个缺点就是无法用[TOC]自动生成目录,自定义目录也不行。所以找了一些脚本资源,加以修改,进行了完善。
由于有的目录比较多,原脚本无滚动条,我新加了滚动条等。
脚本不是原创,只是修改了一下留着自己当笔记用的。

效果图

插件功能

  • 自动识别简书内标题,点击标题名即可计入相应位置
  • 点击【收起目录】功能即可实现显示与隐藏导航的功能
  • 双击一条目录可以收起相邻的同级目录(比如我双击“安装”同级的“Nginx运行控制命令”以及下列目录可以收起来)

实现方式

1. 安装 Tampermonkey

从chrome网上应用商店搜到安装就好。edge浏览器也可以


2. 添加脚本

在Tampermonkey中点击创建一个新脚本



然后在下面这个编辑页面



粘贴下面的代码即可。
// ==UserScript==
// @name         简书侧边栏文章导航
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  简书侧边栏目录,点击收起目录按钮切换显示和隐藏目录列表,支持滚动。
// @author       treelake
// @match        http://www.jianshu.com/p/*
// @match        https://www.jianshu.com/p/*
// @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;left: 0px;top: 55px;border: 0px solid black;background-color: #BDF1F6;">收起目录</button>'
        + '<div class="sidebar" style="width: 300px;height: 535px;position: fixed;left: 1px;top: 85px;border: 0px solid black;overflow-x:auto;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', '-10px');
    }); // 首级目录样式

    $(".btn-menu").click(function(){
        $(".sidebar").slideToggle();
        return false;
    }); // 点击事件

    $('.sidebar>.mwrz_nav>li').dblclick(function(e){
        $(e.target).parent().next().slideToggle()
    }); // 双击事件收起相邻栏

    // Your code here...
})();

懒人做法

如果想简单搞搞,直接在脚本内搜索然后点击安装,然后稍加修改就OK了。
做法:

  1. 点击tampermonkey,点击查找新脚本


  2. 搜索“简书侧边栏文章导航”


  3. 然后点击安装即可
    直接给出链接了,不用找了。
    简书侧边栏文章导航
  4. 原脚本没有滑动窗口,直接在div中添加一个滑动窗口就可以:
    设置一个高度值height,后面加上overflow-y:auto;然后点击File > save保存即可

相关文章

  • 简书侧边栏文章导航(小白适用)

    背景 简书有个缺点就是无法用[TOC]自动生成目录,自定义目录也不行。所以找了一些脚本资源,加以修改,进行了完善。...

  • js篇

    请配合 简书侧边栏文章导航[https://www.jianshu.com/p/9c8ff62b1f86] 食用,...

  • JS实现侧边栏显示隐藏

    网页中侧边栏是一个重要的排版位置,尤其是侧边导航栏用的最多。在一些窄屏的侧边导航栏中,控制侧边导航栏的显示与隐藏可...

  • vuepress-sidebar-atuo+vuepress侧边

    前言: vuepress需要手动设置侧边栏、导航栏,导入大量笔记就很费时间。为了能够专心写作而不用去管侧边栏、导航...

  • 关于侧边栏滚动导航事件

    侧边栏滚动导航事件 html部分:

  • 侧边栏导航

    为了提高用户体验,我们可以在侧边栏添加导航。 步骤一 在data文件夹找到navigation.yml,根据作者写...

  • vue路由

    区分登录页面(不含有公共的侧边栏和顶部导航),和普通页面(含有公共的侧边栏和顶部导航) router 下的inde...

  • 为简书添加一个侧边栏文章导航

    一直觉得简书的工具类\教学类文章少个内容导航栏来提高浏览效率。(文学类就不用了,慢慢欣赏即可)。 作为js菜鸡,一...

  • bootstrap绝对定位写法

    以侧边导航栏为例 html代码 css代码

  • Android从零开始之一步一步教你实现联系人功能(一)

    可以看到,右边是一个A到Z的侧边菜单导航栏,当我们点击右边侧边菜单导航栏时,中间显示当前点击item。相信这个UI...

网友评论

      本文标题:简书侧边栏文章导航(小白适用)

      本文链接:https://www.haomeiwen.com/subject/moydhqtx.html