之前在文章《markdown是怎樣接管我的各種的寫作工作的》提到過如何在為知筆記中開啟markdown功能以及如何給markdown定製格式,但是在使用為知筆記的過程中,我發覺文章內的目錄導航,為知筆記提供的還是不太好用——沒有分層和索引序號。
因此,我決定擴充套件這個markdown外掛程式,讓為知筆記顯示markdown樣式的筆記跟我的部落格一樣有乙個自動導航的目錄。
首先,找到為知筆記的markdown外掛程式,如下圖所示:
開啟其中的wiznote-markdown.js
,我們找到其中載入js
和css
部分的**如下:
function initmarkdown() );
}function ondocumentcomplete()
}
大概的原理就是遍歷整個內容,找到其中的標題標籤,即h1
、h2
等,然後把這些標題插入到乙個容器中,針對這個容器設定絕對定位的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助手 下是否正常 解除安裝是否刪除所有相關的檔案 是否可以成功註冊 註冊成功後可不可以成功登入 無網狀態下是否可以安裝成功 主要功能...