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

参考链接

18 Replies to “Joplin实现炫酷的侧边栏目录”

  1. 大佬,问一下你有写了关于jopin 代码块行号的文章吗?前面有人提问过这个问题,您说后续会做一个,但是我好像没找到,谢谢

  2. 我按照顺序操作 在userstyle.css中粘贴的代码 重启joplin之后 界面还是没有任何变化 目录还是在正文中,并没有改变成[目录 – 请将你的鼠标移至程序的右边],也没有侧边栏产生
    win7 joplin 1.7.11

  3. 大佬:
    按文中所述,已添加,其中有台WIN10电脑: [目录 – 请将你的鼠标移至程序的右边] 这段话变成乱码怎么解决?其它WIN10电脑没有问题。

      1. Joplin 社区已经有人开发了一款插件,https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/63
        可以窗口显示 TOC.

        以及文章介绍的 CSS 方式

        1. 我要也是同样的情况…加了[TOC]直接在正文上产生了目录,但是移动到右边缺不行…
          最新版本

发表评论

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