如何給你的為知筆記新增乙個漂亮的導航目錄

2022-02-14 21:23:23 字數 1404 閱讀 9126

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

因此,我決定擴充套件這個markdown外掛程式,讓為知筆記顯示markdown樣式的筆記跟我的部落格一樣有乙個自動導航的目錄。

首先,找到為知筆記的markdown外掛程式,如下圖所示:

開啟其中的wiznote-markdown.js,我們找到其中載入jscss部分的**如下:

function initmarkdown() );

}function ondocumentcomplete()

}

大概的原理就是遍歷整個內容,找到其中的標題標籤,即h1h2等,然後把這些標題插入到乙個容器中,針對這個容器設定絕對定位的css即可。主要**如下:

o = s.find(':header');

if (o.length > p)

};o.each(function (t) else if (v.localname === 'h3')

} else if (v.localname === 'h4')

}});

另外,使用了bootstrap外掛程式的滾動定位功能:

b.data('spy', 'scroll');

b.data('target', '.sidecatalogbg');

$('body').scrollspy();

效果如下:

注意,外掛程式之間依賴的寫法。其中bootstrap依賴於jquery,而我們的導航外掛程式依賴於bootstrap

分享 部落格美化 3 為部落格新增乙個漂亮的分享按鈕

下面將像大家介紹幾種分享按鈕以及使用步驟。當然可能對很多人是小菜一碟,這裡也算是乙個拋磚引玉的作用,希望大家分享更多自己折騰的外掛程式,因為我找這個東西花了很長時間 不懂原理,不知道搜尋啥關鍵字 現在看來當然是非常簡單了。進入主題之前,先感謝團隊,sevennight,marvin,博皮小組以及 n...

如何新增乙個提醒

下面的說明適合pluto 和 cosmos,在10a1108mp之後的版本上新增乙個提醒。具體步驟如下 1,在 srv reminder type 中新增type 例如 注意,定義的鬧鐘響應完了,需要執行 srv reminder notify finish 來清除定時器。取消alarm,使用srv...

給你乙個app你如何展開測試?

首先分析需求 根據測試用例進行測試 安裝解除安裝路徑是否能自己選擇 在不同作業系統下 android ios 安裝是否正常,能正常執行 安裝來自不同 的 應用寶 360助手 下是否正常 解除安裝是否刪除所有相關的檔案 是否可以成功註冊 註冊成功後可不可以成功登入 無網狀態下是否可以安裝成功 主要功能...