Winse Blog

走走停停都是风景, 熙熙攘攘都向最好, 忙忙碌碌都为明朝, 何畏之.

octopress生成TOC

尝试了jekyll直接生成toc的方式都失败了，最终通过jquery运行时生成的方式实现目录导航。

参考

步骤实现

添加jquery.toc.min.js

1、下载 https://ndabas.github.io/toc/ 当前是 0.4.0 版本。解压把 jquery.toc.min.js 放到 source/javascripts/libs/ 目录下。

2、在 source/_includes/head.html 文件的 jquery.min.js 下一行引入 jquery.toc.min.js ：

1
2
3
4


  <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ root_url }}/javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
  <script src="{{ root_url }}/javascripts/libs/jquery.toc.min.js" type="text/javascript"></script>

使用toc创建目录导航

3、在 source/javascripts 目录下创建 generate-toc.js ，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function generateTOC(insertBefore, heading) {
  var container = jQuery("<div id='tocBlock'></div>");
  var div = jQuery("<ul id='toc'></ul>");
  
  var content = $(insertBefore).first();

  if (heading != undefined && heading != null) {
    container.append('<span class="tocHeading">' + heading + '</span>');
  }

// div.tableOfContents(content);
  div.toc({content: content, headings: "h2,h3,h4"});
  container.append(div);
  container.insertBefore(insertBefore);
}

并在 source/_includes/custom/head.html 引入该文件：

1
2
3


<script src="{{ root_url }}/javascripts/generate-toc.js" type="text/javascript"></script>

4、运行时调用toc创建目录，在 source/_includes/custom/after_footer.html 添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


{% if index %}
  {% comment %}
  No table of contents on the index page.
  {% endcomment %}

{% elsif page.toc == true %}
  <script type="text/javascript">
  jQuery(document).ready(function() {
    // Put a TOC right before the entry content.
    generateTOC('.entry-content', '目录');
  });
  </script>
{% endif %}

CSS样式

5、添加样式，在 sass/custom 目录下添加 _screen.scss 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$toc-bg: #dfdfdf;

$toc-incr: 5px;

div#tocBlock {
border-radius: 10px;
padding: 10px;
box-shadow: 5px 5px 5px #999;

    float: right;
    font-size: 10pt;
    width: 300px;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0px;

    background: $toc-bg;
    border: solid 1px #999999;
    margin: 0 0 10px 15px;

    .tocHeading {
        font-weight: bold;
        font-size: 125%;
    }

    #toc {
        background: $toc-bg;
        ul {
            list-style: disc;
            li {
                margin-left: $toc-incr !important;
                padding: 0 !important;
            }
        }
    }
}

并把该文件添加到 sass/screen.scss ：

1

@import "custom/screen";

运行调试

6、删除 source/stylesheets/screen.css

7、预览看效果 rake preview

jekyll生成 查看

{:toc} ，jekyll-toc ，jekyll html 都没试成功，难道是jekyll-2太老了？

–END

Comments