AutocJS – 自动为你的文章创建目录导航

AutocJS 的开发灵感

AnchorJS 是我开发的创作灵感。既然 AnchorJS 可创建标题的链接,为什么不直接给文章生成一个目录(Table of Contents)导航呢? 于是就有了 autocjs。

AutocJS 是什么?

autocjs 是一个专门用来生成文章目录(Table of Contents)导航的 JavaScript 控件。它会查找文章指定区域中的所有 h1~h6 的标签,并自动分析文章的层次结构,生成文章的目录导航(独立的侧边栏菜单,或者在文章的开始处生成文章目录)。

为什么选择 AutocJS

AnchorJS 由于不是中国工程师开发的,所以对中文支持不好,无法给中文标题生成锚点。而 autocjs 即支持英文也支持中文。它在拥有 AnchorJS 的基础功能同时,还可以自动分析文章的层次结构,生成文章的目录导航。

AutocJS 的特点

  • 支持 AMD 和 CMD 规范;
  • 可以作为独立模块使用,也可以作为 jQuery 插件使用;
  • 支持中文和英文(标题文字);
  • 界面简洁大方;
  • 拥有 AnchorJS 的基础功能;
  • 即支持生成独立文章目录导航菜单,又可以直接在文章中生成目录导航;
  • 可直接在段落标题上显示段落层级索引值;
  • 配置灵活,丰富,让你随心所欲掌控;

在浏览器中使用 CDN 文件

<script type="text/javascript" src="https://unpkg.com/autocjs@1.3.0/dist/autoc.min.js"></script>

Install

Install with npm:

$ npm install autocjs

Install width bower

$ bower install autocjs

Configuration Options

Properties

Methods

  • reload – (根据新的配置信息)重启程序
  • set – 设置 attributes 属性
  • get – 返回某个 attributes 属性
  • dom – 返回 elements 属性
  • article – 返回页面文章正文的容器 DOM 元素
  • headings – 返回 article 中 selector 匹配的所有标题 DOM 元素
  • chapters – 设置或者返回 data.chapters 属性
  • anchors – 返回 data.anchors 属性
  • list – 返回 data.list 属性
  • index – 返回 chapter 在 data.list 中对应段落层次位置索引值
  • render – 绘制 UI 界面
  • show – 展开侧边栏菜单
  • hide – 收起侧边栏菜单
  • toggle – 收起/展开侧边栏菜单
  • resize – 根据当前窗口高度更新侧边栏菜单界面高度
  • scrollTo – 将窗口的滚动条滚动到指定 top 值的位置
  • destroy – 移除所有绘制的 DOM 节点,并移除绑定的事件处理器

完整的 API 文档:http://yaohaixiao.github.io/autocjs/

Fork on Github

http://yaohaixiao.github.io/autocjs

Download

master.zip

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论