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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 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自动生成目录

bloganchor

margin

attr

6 条回复 • 2014-11-04 10:15:00 +08:00

kimmykuang

2014-11-03 17:17:31 +08:00

LZ你贴的链接不对哦，贴成admin后台的链接了

yanleijava

2014-11-03 17:19:41 +08:00

@kimmykuang 擦，错了，[这个](http://iyanlei.com/markdown_catelog.html)

bitbegin

2014-11-03 18:06:26 +08:00 via Android

不同的渲染工具有同样的效果码？

yanleijava

2014-11-03 18:51:14 +08:00

@bitbegin 效果都是CSS控制，一样的

yijian166

2014-11-03 21:55:49 +08:00

https://github.com/yijian166/md-toc.js 哈哈，自己也写了一个，不依赖任何js库，支持点击跳转~~

yanleijava

2014-11-04 10:15:00 +08:00

@yijian166 不错