V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yanleijava
V2EX  ›  程序员

一段 JS 代码让 Markdown 自动生成目录

  •  1
     
  •   yanleijava · 2014-11-03 17:07:57 +08:00 · 5217 次点击
    这是一个创建于 3678 天前的主题,其中的信息可能已经有所发展或是发生改变。

    文章来自:一段JS代码让Markdown自动生成目录

    前言

    已经习惯了使用Markdown书写文章,既方便也通用。

    但一直在想:应该生成一个方便的导航目录,这样查看文章会更方便。于是有了本文。

    实现方法

    页面结构

    //放入在文章页内容前面
    <div class="BlogAnchor">
        <p>
            <b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录[-]</b>
        </p>
        <div class="AnchorContent" id="AnchorContent"> </div>
    </div>
    

    Js代码

    //在文章中查找title并填充到div AnchorContent中
    $(".post-content").find("h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#AnchorContent").append('<li><a class="new'+tag+' anchor-link" onclick="return false;" href="#" link="#wow'+i+'">'+(i+1)+" · "+$(this).text()+'</a></li>');
        $(".newh2").css("margin-left",0);
        $(".newh3").css("margin-left",20);
        $(".newh4").css("margin-left",40);
        $(".newh5").css("margin-left",60);
        $(".newh6").css("margin-left",80);
    });
    $("#AnchorContentToggle").click(function(){
        var text = $(this).html();
        if(text=="目录[-]"){
            $(this).html("目录[+]");
            $(this).attr({"title":"展开"});
        }else{
            $(this).html("目录[-]");
            $(this).attr({"title":"收起"});
        }
        $("#AnchorContent").toggle();
    });
    

    CSS代码

    /*导航*/
    .BlogAnchor {
        background: #f4f7f9;
        padding: 10px;
        line-height: 180%;
    }
    .BlogAnchor p {
        font-size: 18px;
        color: #15a230;
        margin-bottom: 0.3em;
    }
    .BlogAnchor .AnchorContent {
        padding: 5px 0px;
    }
    .BlogAnchor li{
        text-indent: 20px;
        font-size: 14px;
    }
    #AnchorContentToggle {
        font-size: 13px;
        font-weight: normal;
        color: #FFF;
        display: inline-block;
        line-height: 20px;
        background: #5cc26f;
        font-style: normal;
        padding: 1px 8px;
        margin-right: 10px;
    }
    .BlogAnchor a:hover {
        color: #5cc26f;
    }
    .BlogAnchor a {
        text-decoration: none;
    }
    

    导航扩展

    同时也可以实现锚点之间的平滑滚动,使用jquery animate

    $(".anchor-link").click(function(){
        $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 1000);
    });
    

    具体效果参考本文

    文章来自:一段JS代码让Markdown自动生成目录

    6 条回复    2014-11-04 10:15:00 +08:00
    kimmykuang
        1
    kimmykuang  
       2014-11-03 17:17:31 +08:00
    LZ你贴的链接不对哦,贴成admin后台的链接了
    yanleijava
        2
    yanleijava  
    OP
       2014-11-03 17:19:41 +08:00
    bitbegin
        3
    bitbegin  
       2014-11-03 18:06:26 +08:00 via Android
    不同的渲染工具有同样的效果码?
    yanleijava
        4
    yanleijava  
    OP
       2014-11-03 18:51:14 +08:00
    @bitbegin 效果都是CSS控制,一样的
    yijian166
        5
    yijian166  
       2014-11-03 21:55:49 +08:00
    https://github.com/yijian166/md-toc.js 哈哈,自己也写了一个,不依赖任何js库,支持点击跳转~~
    yanleijava
        6
    yanleijava  
    OP
       2014-11-04 10:15:00 +08:00
    @yijian166 不错
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1673 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 16:51 · PVG 00:51 · LAX 08:51 · JFK 11:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.