码匠笔记

用心雕琢

给博客添加目录

访问

前言

Hexo 模板的博客都带了文章目录[toc],但是作者当前使用的是 Octopress 博客系统,所以不支持目录。这样给阅读的人带来了很大的不便捷。所以作者使用了 Table of contents sidebar 为 Octopress 添加了目录,并且可以快速定位。过程很简单,内容如下。

添加插件

直接添加到如下代码到博客通用的文件即可,其中 querySelector 可以定义生成目录的区域。

1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="https://table-of-contents-sidebar.github.io/table-of-contents-sidebar-lib/table-of-contents-sidebar.js"></script>
<script type="text/javascript">
    window.onload = function(e){
        TableOfContents.init({
            basePath: "https://table-of-contents-sidebar.github.io/table-of-contents-sidebar-lib/",
            querySelector: "body" // or other css querySelector
        });
    }
</script>

插件

这样仅仅是看自己的博客有了目录,如果想看别人的博客也有目录,可以安装 Table of contents sidebar 的插件,这样只要能识别的文章都能查看目录并且快速定位了。
https://chrome.google.com/webstore/detail/table-of-contents-sidebar/ohohkfheangmbedkgechjkmbepeikkej

扩展阅读

  1. 修复 Octopress Table 样式
  2. Commenthub —— 多说、网易云跟帖的替代品
  3. Octopress 添加 扩展相关阅读
  4. Octopress 添加标签云
  5. Octopress 首页添加‘更多’功能
  6. Octopress 博客搜索优化
  7. Chrome自动生成网页目录插件的编写和使用

作者

本文作者麻酱,欢迎讨论,指正和转载,转载请注明出处。
原文地址:给博客添加目录
如果兴趣可以关注作者微信订阅号:码匠笔记
majiangbiji

评论