• 目的为 Blog 加入目录，方便读者快速浏览主题和选择主题。搜索发现
• 生成文章目录
  • 使用 Kramdown
  • 在博文中开头加入
  • 添加样式
  • 只在文章里显示因为目录的链接只针对当前文章，如果使用<!-- more -->只显示部分文章在主页上，那么点击目录链接就会有问题，所以在主页隐去目录。
  • 效果效果就如这篇文章。

目的为 Blog 加入目录，方便读者快速浏览主题和选择主题。搜索发现

文章 1 使用 jQuery 来实现，比较复杂，和 文章 2 使用 kramdown 和 Octoptress 本身的样式来生成目录。

生成文章目录

使用 Kramdown

Kramdown 能自动为文章生成目录¹,所以使用 Kramdown 作为你的 Octopress 转换程序，并且它支持 Latex 写公式，如何用 krramdown 替换 rdiscount。

在博文中开头加入

1
2

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}

添加样式

1
2
3
4
5
6
7
8
9
10

#markdown-toc:before {
  content: "Table of Contents";
  font-weight: bold;
}
ul#markdown-toc {
  list-style: none;
  float: right;
  @include shadow-box;
  background-color: white;
}

只在文章里显示因为目录的链接只针对当前文章，如果使用<!-- more -->只显示部分文章在主页上，那么点击目录链接就会有问题，所以在主页隐去目录。

1
2
3

.blog-index #markdown-toc {
  display: none;
}

效果效果就如这篇文章。