如何给你的为知笔记添加一个漂亮的导航目录
为什么要添加这个导航功能
之前在文章《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 + '  </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 + '  </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 + '  </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文件
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注马非码的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。
本文版权归作者和博客园共有,来源网址:http://www.cnblogs.com/marvin/欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战