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

V2EX = way to explore

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

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 4190 天前的主题，其中的信息可能已经有所发展或是发生改变。

文章来自：一段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 月 3 日

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

yanleijava

2014 年 11 月 3 日

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

bitbegin

2014 年 11 月 3 日 via Android

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

yanleijava

2014 年 11 月 3 日

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

yijian166

2014 年 11 月 3 日

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

yanleijava

2014 年 11 月 4 日

@yijian166 不错