为什么要添加这个导航功能

之前在文章《Markdown是怎样接管我的各种的写作工作的》提到过如何在为知笔记中开启markdown功能以及如何给markdown定制格式，但是在使用为知笔记的过程中，我发觉文章内的目录导航，为知笔记提供的还是不太好用——没有分层和索引序号。

因此，我决定扩展这个markdown插件，让为知笔记显示markdown样式的笔记跟我的博客一样有一个自动导航的目录。

如何在为知笔记中引入样式和脚本

首先，找到为知笔记的markdown插件，如下图所示：

打开其中的WizNote-Markdown.js，我们找到其中加载js和css部分的代码如下：

function initMarkdown() {appendCssSrc("markdown\\GitHub2.css");appendScriptSrc('HEAD', "text/javascript", "markdown\\marked.min.js");appendScriptSrc('HEAD', "text/javascript", "google-code-prettify\\prettify.js");appendScriptSrc2('HEAD', "text/javascript", "markdown\\jquery.min.js", false, function() {appendScriptSrc('HEAD', "text/javascript", "wiznote-markdown-inject.js");});
}function onDocumentComplete() {if (isMarkdown()) {initMarkdown();}
}

添加自动目录的基本原理

大概的原理就是遍历整个内容，找到其中的标题标签，即h1、h2等，然后把这些标题插入到一个容器中，针对这个容器设置绝对定位的css即可。主要代码如下：

o = s.find(':header');
if (o.length > p) {r = false;var t = s.find('h2');var u = s.find('h3');if (t.length + u.length > p) {q = false;//如果目录数目超过制定的值，只显示更高一级的目录}
};
o.each(function (t) {var u = $(this),v = u[0];var title=u.text();var text=u.text();u.attr('id', 'autoid-' + l + '-' + m + '-' + n)if (v.localName === 'h2') {l++;m = 0;if(text.length>14) text=text.substr(0,12)+"...";j += '<li><span>' + l + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';} else if (v.localName === 'h3') {m++;n = 0;if(q){if(text.length>12) text=text.substr(0,10)+"...";j += '<li class="h2Offset"><span>' + l + '.' + m + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';}} else if (v.localName === 'h4') {n++;if(r){j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';}}
});

滚动定位

另外，使用了bootstrap插件的滚动定位功能：

b.data('spy', 'scroll');
b.data('target', '.sideCatalogBg');
$('body').scrollspy({target: '.sideCatalogBg'
});

效果如下：

最终效果

在markdown中添加的js代码

function initMarkdown() {appendCssSrc("markdown\\GitHub2.css");appendCssSrc("marvin-wizNote-plugin\\marvin.nav.css");  appendScriptSrc('HEAD', "text/javascript", "markdown\\marked.min.js");appendScriptSrc('HEAD', "text/javascript", "google-code-prettify\\prettify.js");appendScriptSrc2('HEAD', "text/javascript", "markdown\\jquery.min.js", false, function() {appendScriptSrc('HEAD', "text/javascript", "wiznote-markdown-inject.js");appendScriptSrc2('HEAD', "text/javascript", "marvin-wizNote-plugin\\bootstrap.min.js", false, function(){appendScriptSrc('HEAD', "text/javascript", "marvin-wizNote-plugin\\marvin.nav.js");});});
}

注意，插件之间依赖的写法。其中bootstrap依赖于jquery，而我们的导航插件依赖于bootstrap。

最终的效果

对应的css文件和js文件

• Wiz_sideToolbar.gif
• Wiz_marvin.nav.js
• Wiz_marvin.nav.css