為什么要添加這個導航功能

之前在文章《Markdown是怎樣接管我的各種的寫作工作的》提到過如何在為知筆記中開啟markdown功能以及如何給markdown定制格式，但是在使用為知筆記的過程中，我發(fā)覺文章內的目錄導航，為知筆記提供的還是不太好用——沒有分層和索引序號。

因此，我決定擴展這個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;//如果目錄數(shù)目超過制定的值，只顯示更高一級的目錄} }; 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

轉載于:https://www.cnblogs.com/marvin/p/ExtendWizNoteAutoNnavigation.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的如何给你的为知笔记添加一个漂亮的导航目录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。