Skip to content

Latest commit

 

History

History
84 lines (62 loc) · 2.81 KB

README.md

File metadata and controls

84 lines (62 loc) · 2.81 KB
Raw

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