Joplin实现炫酷的侧边栏目录
导读
我在Joplin的插件一文介绍过使用目录功能,但是开启TOC功能后目录的位置是固定的。如果我们看文章看到一半,想要使用目录跳转感觉非常麻烦,本文就给大家介绍一下如何实现炫酷的侧边栏目录,看到哪里都能唤醒目录进行跳转。
效果展示
先给大家展示一下炫酷的效果,下面是我打开的一篇笔记,我在文章开头设置了TOC,如果不懂TOC,建议先看看这篇文章,先开启目录扩展,然后在笔记中启用目录扩展。
好的,先看看文章的Markdown原文本

可以看到我使用了TOC命令,然后看看渲染效果

可以看到现在只显示目录两个字,下面显示了“请将你的鼠标移至程序的右边”,下面我们把鼠标移至右边,看看有什么惊喜

惊不惊喜?意不意外?目录马上就弹出来了!炫不炫酷?
设置教程
教程很简单,首先点击Joplin菜单栏的“工具->选项”按钮,在出来的选项页面依次点击下面的按钮

当你点击3的时候,会弹出记事本(也有可能是其它编辑器),将以下代码粘贴在文本的最后
nav.table-of-contents ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
}
nav.table-of-contents>ul {
top: 5px;
right: 0px;
z-index: 99;
font-size: 12px;
position: fixed;
padding: 15px;
border-radius: 10px 0px 0px 10px;
margin: 0px;
overflow: hidden;
height: 90%;
width: 5px;
transition: .2s;
}
nav.table-of-contents::after {
content: "[目录 - 请将你的鼠标移至程序的右边]";
color: black;
}
nav.table-of-contents>ul:hover {
background: #F8F8F8;
box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);
width: 30%;
color: none;
overflow: scroll;
}
nav.table-of-contents>ul:hover::before {
content: "目录"
}
nav.table-of-contents>ul:hover li {
display: list-item;
}
nav.table-of-contents li {
display: none;
white-space: nowrap;
overflow: hidden;
margin: 0px;
padding: 0px;
}
#rendered-md {
width: 100%;
}
}
粘贴后记得保存,然后关闭编辑器,重启Joplin,在你使用了Toc的文章,就能体验到和上面展示一样炫酷的效果了。
大佬,现在都不更新文章了吗?
大佬,问一下你有写了关于jopin 代码块行号的文章吗?前面有人提问过这个问题,您说后续会做一个,但是我好像没找到,谢谢
还没有时间写:(
Qdown有mac版的吗
没有哦,不好意思
我按照顺序操作 在userstyle.css中粘贴的代码 重启joplin之后 界面还是没有任何变化 目录还是在正文中,并没有改变成[目录 – 请将你的鼠标移至程序的右边],也没有侧边栏产生
win7 joplin 1.7.11
请问版本是最新版本吗?
我找到问题点了,不是点击切换编辑器,而是点击切换编辑器布局
对,编辑器是使用外部编辑器
大佬:
按文中所述,已添加,其中有台WIN10电脑: [目录 – 请将你的鼠标移至程序的右边] 这段话变成乱码怎么解决?其它WIN10电脑没有问题。
百度一下,应该是电脑的字体编码问题
学习了。
话说,能不能在预览窗口中也显示目录详情,滑到右边侧栏也显示目录详情呢?
可以的,代码修改一下就是
请问下怎么修改……查了下还是不太明白……
预览窗口也显示目录详情,你弄出来了吗
Joplin 社区已经有人开发了一款插件,https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/63
可以窗口显示 TOC.
以及文章介绍的 CSS 方式
我要也是同样的情况…加了[TOC]直接在正文上产生了目录,但是移动到右边缺不行…
最新版本