markdown自动生成导航目录
把这一段代码插入到markdown生成的HTML文件的head标签中，将会自动根据markdown的标题按级别生成导航目录(示例页面)，可通过该js最前面的三个变量showNavBar、expandNavBar、addSNToTitle分别控制是否显示导航栏、是否展开导航栏、是否给标题自动增加序号。如果是api文档，这里有个md模板。
代码如下：
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//是否显示导航栏
var showNavBar = true;
//是否展开导航栏
var expandNavBar = true;
//是否给标题自动增加序号
var addSNToTitle = true;
$(document).ready(function(){
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 if(vH2Tag == null){
vH2Tag = 'h' + (i + 1);
break;
}
}
}
if(vH1Tag == null){
return;
}
$("body").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;
$("body").find(vH1Tag + (vH2Tag != null ? (','+vH2Tag) : '')).each(function(i,item){
var id = '';
var name = '';
var tag = $(item).get(0).tagName.toLowerCase();
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';
}
$(item).attr("id","wow"+id);
$(item).addClass("wow_head");
var originText = $(item).text();
if(addSNToTitle){
$(item).text(name + '. ' + originText);
}
$("#AnchorContent").css('max-height', ($(window).height() - 180) + 'px');
$("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" link="#wow'+id+'">'+name+" · "+originText+'</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();
}
});
</script>
<style>
/*导航*/
.BlogAnchor {
background: #f1f1f1;
padding: 10px;
line-height: 180%;
position: fixed;
right: 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;
}
</style>
在MarkdownPad2中，可以通过菜单->工具->选项->高级->HTML head编辑器来自动插入以上代码。
参考：灵感和部分代码来自于这里