jqk6 / awesome-toc

generate awesome toc for web page

awesome-toc

awesome-toc是一个为网页生成目录的小工具，也支持回到顶部的功能。

用法

<script type="text/javascript" src="/path/to/awesome-toc.min.js"></script>
<script type="text/javascript">
    $.awesome_toc({        
      autoDetectHeadings: true,
      enableToTopButton: true,
      title: "INDEX",
      css: {
          fontSize: "14px",
          largeFontSize: "18px",
      },
    });
</script>

依赖

jQuery。

在jquery 1.11和jquery 2.0中测试通过。

配置项

属性	类型	说明
css.fontSize	string	目录项字体大小，"90%"、"16px"
css.largeFontSize	string	标题字体大小
css.fontColor	string	基本的字体颜色，"#999"、"red"
css.activeFontColor	string	标题和当前active的目录项的字体颜色
css.lineHeight	string	目录项的行高
css.backgroundColor	string	目录的背景颜色
css.zIndex	int	目录的z-index
title	string	标题
windowMinWidth	int	单位px。当窗口宽度低于此值时，不显示目录
sideBarId	string	目录的id，最好带随机字符，以防和网页中id冲突/混淆
sideBarWidth	string	目录的宽度
sideBarPrefix	string	目录中生成的元素的class的前缀， 最好带随机字符，以防和网页中id冲突/混淆
headingList	array of string	识别哪些h*标签
enableToTopButton	bool	是否显示“返回顶部”的按钮
enableToc	bool	是否生成目录
overlay	bool	是否以遮盖方式显示目录
autoDetectHeadings	bool	是否自动探测使用哪些h*标签生成目录
contentId	string	若不为空，则根据这个id对应的元素的内容生成目录
contentClass	string	若不为空，则根据这个class对应 的第一个元素的内容生成目录
displayNow	bool	是否立即显示目录
topOffset	int	单位px。有些网页的菜单是固定在顶部的， 占有一定空间，该属性值和菜单的高度应该一致。 如果设置的合理，点击目录项时， 页面滚动后，标题不会被覆盖
itemPrefix	string	每个菜单项目的前缀，例如"- "

小书签

首先开启本地的服务：

$ cd awesome-toc
$ python -m SimpleHTTPServer

在浏览器中创建书签，url使用下面的内容：

javascript:(function(){var a=function(a){var b=document.createElement("script");b.setAttribute("src",a+"?time="+Date.parse(new Date)),document.body.appendChild(b)};a("http://127.0.0.1:8000/build/loader.min.js")})();

示例：

其他

界面设计上参考了hexo-theme-next。

License

MIT