The realise of floating table of Contents

Features
1

Right now, when use [toc] in the top of one note, the table of contents will only display as the top of note. However when the note becoming large, we cannot visit the table of content conveniently.
But now, by config the Custom stylesheet for rendered Markdown(setting >Appearance > show Advance settings > Custom stylesheet for rendered Markdown), a floating table of content will apear in the right sidebar, as showing:

the top of note without table of content
the top of note without table of content1438×534 82.5 KB

When mouse move the right side, the floating table of content will appear as follow:
the top of note with floating table of content
the top of note with floating table of content1427×990 186 KB

Even when you are in the middle of the note, move the mouse to the right sidebar the floating table of content will appear. And when you click the content in the floating table of content, the note will jump to the section you have clicked:
the middle of note with floating table of contents
the middle of note with floating table of contents1475×995 182 KB

The configure as folllowing: (in setting >Appearance > show Advance settings > Custom stylesheet for rendered Markdown)

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: #000000;
    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%;
    }
}

Note when you want to set the backgroud color you should set the background value in nav.table-of-contents>ul:hover.
Unfortunately, there are some drawbacks with the configuration:

  1. cannot auto suit the Theme have setted.
  2. cannot auto suit the system language.

I hope this floating table of Content will appear in anyone who use Joplin to improve the user experience.

1 Like
2

实现了浮动侧边栏显示文件大纲的功能:
每当鼠标移动到右边时就会弹出，
点击对应的标题就会跳转到对应的内容，
当鼠标从右边移动开的时候大纲就会隐藏起来。

设置如下：

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: #000000;
    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%;
    }
}

不足之处：
不能根据已经使用的主题自动更改目录的背景。
不能自适应系统的语言。

1 Like