Joplin实现炫酷的侧边栏目录

导读

我在Joplin的插件一文介绍过使用目录功能,但是开启TOC功能后目录的位置是固定的。如果我们看文章看到一半,想要使用目录跳转感觉非常麻烦,本文就给大家介绍一下如何实现炫酷的侧边栏目录,看到哪里都能唤醒目录进行跳转。

效果展示

先给大家展示一下炫酷的效果,下面是我打开的一篇笔记,我在文章开头设置了TOC,如果不懂TOC,建议先看看这篇文章,先开启目录扩展,然后在笔记中启用目录扩展。

好的,先看看文章的Markdown原文本

插入TOC命令

可以看到我使用了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的文章,就能体验到和上面展示一样炫酷的效果了。

参考链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注