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的文章，就能体验到和上面展示一样炫酷的效果了。

参考链接