给 vimwiki 添加文章目录 TOC

http://projects.jga.me/toc/

TOC is a jQuery plugin that will automatically generate a table of contents for your page. You can see an example of it on the left side of the page.

下载js文件

wget https://raw.github.com/jgallen23/toc/master/dist/jquery.toc.min.js

加入到 vimwiki 的模板 html 中

测试

2级子目录

二级子目录

三级子目录

3级子目录

toc1

toc2

toc3

toc1

出现不会缩进的问题.

坑爹的事情发生了.只要使用 toc 主页上的 css,但是不要使用其构建 toc 的js,正常了

这个js切忌不能用

$('#toc').toc({
    'selectors': 'h1,h2,h3', //elements to use as headings
    'container': 'body', //element to find all selectors in
    'smoothScrolling': true, //enable or disable smooth scrolling on click
    'prefix': 'toc', //prefix for anchor tags and class names
    'onHighlight': function(el) {}, //called when a new section is highlighted 
    'highlightOnScroll': true, //add class to heading that is currently in focus
    'highlightOffset': 100, //offset to trigger the next headline
    'anchorName': function(i, heading, prefix) { //custom function for anchor name
        return prefix+i;
    },
    'headerText': function(i, heading, $heading) { //custom function building the header-item text
        return $heading.text();
    },
'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
  return $heading![pic](0).tagName.toLowerCase();
}
});

只要用

#toc {
    top: 0px;
    left: 0px;
    height: 100%;
    position: fixed;
    background: #333;
    box-shadow: inset -5px 0 5px 0px #000;
    width: 150px;
    padding-top: 20px;
    color: #fff;
}

#toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#toc li {
    padding: 5px 10px;
}

#toc a {
    color: #fff;
    text-decoration: none;
    display: block;
}

#toc .toc-h2 {
    padding-left: 10px;
}

#toc .toc-h3 {
    padding-left: 20px;
}

#toc .toc-active {
    background: #336699;
    box-shadow: inset -5px 0px 10px -5px #000;
}

一级目录,和二级目录是平级的,不做缩进.

三级目录做缩进