最后效果

静态效果:

动态效果:

GIF.gif

脚本安装地址

简书目录自动生成-浮框版

过程

1. 开始效果追求octotree风格,使用chrome插件形式.

下载octotree源码看了看,对chrome插件开发大概了解了下,贴一些文档
chrome插件编写之新版hello world
360插件开发文档
但是要达到octotree效果还是太难,放弃.

2. 后面看到了<<简书目录内嵌网页版>>,使用的是油猴脚本

贴下网址:
简书自动生成目录小工具
这内嵌目录效果非常好,但是个人想能否改成悬浮版?

3. 后面看到了<<markdown自动生成导航目录>>

贴下网址:
markdown自动生成导航目录
当时眼前一亮.

4. 于是,就打算做简书目录-浮动版-油猴脚本

步骤

1. 把<< markdown自动生成导航目录>>变成油猴脚本

2. 遇到了跳转问题和焦点冲突问题.

跳转问题:点击目录标题,没有调整到指定位置
焦点冲突:悬浮目录显示了,但是放到目录上,没有出现超链接效果.这里就不过多解释这个了.

3. 分析前面提到的的2种方式的实现源码

浮动版

a) 页面加载完成之后搞事情

b) 找到页面内容中的h1,h2,h3…动态赋一个id

看赋值之后的页面结果

但是生成id策略,针对简书内容,可能有些问题,就没有去仔细研究了.

用xpath看一下生成后的结果,发现太多相同id.

c) 自动生成目录,绝对定位悬浮,每个目录设置了一个锚点

看生成后网页源码

d) 通过锚点链接跳转

内嵌版本

a) 页面加载完成之后搞事情

b) 找到页面内容中的h1,h2,h3...动态赋一个id

看生成后网页源码

id生成策略是自增

c) 自动生成目录,内嵌到网页,目录class同网页标题的id

看生成后网页源码

d) 通过jquery调转

4. 修复相关问题,变成油猴脚本

调整问题:调整id生成策略,使用内嵌版本的自增的id策略
焦点问题:
默认是在body上追加内容,改为在”.show-content”上

完整脚本

// ==UserScript==
// @name         简书目录-浮框版
// @name:zh-CN   简书目录-浮框版
// @description:zh-cn 简书目录-浮框版
// @namespace
// @version      0.0.1
// @description  www.itheima.com
// @author       Billy
// @match        http://www.jianshu.com/p/*
// @match        https://www.jianshu.com/p/*
////@require      http://code.jquery.com/jquery-latest.js
// @grant        GM_addStyle
// ==/UserScript==
// 参考:https://www.jianshu.com/p/d02157db09d2
// 参考:https://github.com/chris-peng/markdown_nav

//是否显示导航栏
var showNavBar = true;
//是否展开导航栏
var expandNavBar = true;

$(document).ready(function(){
     'use strict';


    //与元数据块中的@grant值相对应，功能是生成一个style样式
    var menustyle='.BlogAnchor {background: #f1f1f1;padding: 10px;line-height: 180%;position: fixed;left: 48px;top: 48px;border: 1px solid #aaaaaa;}.BlogAnchor p {font-size: 18px;color: #15a230;margin: 0 0 0.3rem 0;text-align: right;}.BlogAnchor .AnchorContent {padding: 5px 0px;overflow: auto;}.BlogAnchor li {text-indent: 0.5rem;font-size: 14px;list-style: none;}.BlogAnchor li .nav_item {padding: 3px;}.BlogAnchor li .item_h1 {margin-left: 0rem;}.BlogAnchor li .item_h2 {margin-left: 2rem;font-size: 0.8rem;}.BlogAnchor li .nav_item.current {color: white;background-color: #5cc26f;}#AnchorContentToggle {font-size: 13px;font-weight: normal;color: #FFF;display: inline-block;line-height: 20px;background: #5cc26f;font-style: normal;padding: 1px 8px;}.BlogAnchor a:hover {color: #5cc26f;}.BlogAnchor a {text-decoration: none;}';
    GM_addStyle(menustyle);

    var h1s = $("body").find("h1");
    var h2s = $("body").find("h2");
    var h3s = $("body").find("h3");
    var h4s = $("body").find("h4");
    var h5s = $("body").find("h5");
    var h6s = $("body").find("h6");

    var headCounts = [h1s.length, h2s.length, h3s.length, h4s.length, h5s.length, h6s.length];
    var vH1Tag = null;
    var vH2Tag = null;
    for(var i = 0; i < headCounts.length; i++){
        if(headCounts[i] > 0){
            if(vH1Tag == null){
                vH1Tag = 'h' + (i + 1);
            }else{
                vH2Tag = 'h' + (i + 1);
            }
        }
    }
    if(vH1Tag == null){
        return;
    }

    $(".show-content").prepend('<div class="BlogAnchor">' +
        '<span style="color:red;position:absolute;top:-6px;left:0px;cursor:pointer;" onclick="$(\'.BlogAnchor\').hide();">×</span>' +
        '<p>' +
        '<b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录▲</b>' +
        '</p>' +
        '<div class="AnchorContent" id="AnchorContent"> </div>' +
        '</div>' );

    var vH1Index = 0;
    var vH2Index = 0;
    var menuIndex = 0;
    $("body").find("h1,h2,h3,h4,h5,h6").each(function(i,item){
        var id = '';
            // var name = '';
            var tag = $(item).get(0).tagName.toLowerCase();
            //不同标题,不同className,不同字体大小
            var className = '';
            if (tag == vH1Tag) {
                // id = name = ++vH1Index;
                // name = id;
                vH2Index = 0;
                className = 'item_h1';
            } else if (tag == vH2Tag) {
                // id = vH1Index + '_' + ++vH2Index;
                // name = vH1Index + '.' + vH2Index;
                className = 'item_h2';
            }
            //修改id生成策略
            id = "_" + menuIndex;
            menuIndex++;

        $(item).attr("id","wow"+id);
        $(item).addClass("wow_head");

        $("#AnchorContent").css('max-height', ($(window).height() - 180) + 'px');
        //$("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" href="#" link="#wow'+id+'">'+name+" · "+$(this).text()+'</a></li>');
        $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" href="#" link="#wow'+id+'">'+$(this).text()+'</a></li>');
    });

    $("#AnchorContentToggle").click(function(){
        var text = $(this).html();
        if(text=="目录▲"){
            $(this).html("目录▼");
            $(this).attr({"title":"展开"});
        }else{
            $(this).html("目录▲");
            $(this).attr({"title":"收起"});
        }
        $("#AnchorContent").toggle();
    });
    $(".anchor-link").click(function(){
        $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 500);
    });

    var headerNavs = $(".BlogAnchor li .nav_item");
    var headerTops = [];
    $(".wow_head").each(function(i, n){
        headerTops.push($(n).offset().top);
    });
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        $.each(headerTops, function(i, n){
            var distance = n - scrollTop;
            if(distance >= 0){
                $(".BlogAnchor li .nav_item.current").removeClass('current');
                $(headerNavs[i]).addClass('current');
                return false;
            }
        });
    });

    if(!showNavBar){
        $('.BlogAnchor').hide();
    }
    if(!expandNavBar){
        $(this).html("目录▼");
        $(this).attr({"title":"展开"});
        $("#AnchorContent").hide();
    }
});