欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Autocjs生成文章目录

程序员文章站 2022-05-26 19:10:08
...

1、灵感

AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？ 于是就有了 AutocJS。

2、 What is AutocJS?

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

3、Why AutocJS?

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

4、 AutocJS 的特点

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

5、安装

npm install

npm install autocjs
  • 1

bower install

bower install autocjs
  • 1

6、使用

Use as a CommonJS/AMD/CMD Module

var AutocJS = require('autocjs');

new AutocJS({
    article: '#article'
});
  • 1
  • 2
  • 3
  • 4
  • 5

Use as a jQuery plugin

$('#article').autoc({
    title: 'AutocJS v0.2.0'
});
  • 1
  • 2
  • 3

Use as an independent Module

new AutocJS({
    article: '#article',
    title: 'AutocJS v0.2.0'
});
  • 1
  • 2
  • 3
  • 4

7、API

This task primarily delegates to AutocJS, so please consider the AutocJS documentation as required reading for advanced configuration.

7-1、选项

article

Type: String HTMLElement 
Default: ' '

必选，用来指定页面中显示文章正文的 DOM 节点或者 ID 选择器。如果没有指定它，则程序将不会执行。查看详情

selector

Type: String 
Default: 'h1,h2,h3,h4,h5,h6'

可选，用来指定 article 节点下，要生成导航的标题标签的选择器。查看详情

title

Type: String 
Default: 'Table of Contents'

可选，用来指定 AutocJS 自动创建的文章导读索引导航菜单的标题文字。查看详情

isAnchorsOnly

Type: Boolean 
Default: false

可选，用来指定是否只创建标题链接。查看详情

isAnimateScroll

Type: Boolean 
Default: true

可选，用来指定在点击段落索引导航链接时，是使用动画滚动定位，还是使用默认的锚点链接行为。查看详情

hasDirectoryInArticle

Type: Boolean 
Default: false

可选，用来指定是否在文章（开始位置）中创建目录导航。查看详情

hasChapterCodeAtHeadings

Type: Boolean 
Default: false

可选，用来指定是否在文章标题中显示该标题的段落索引编号。查看详情

hasChapterCodeInDirectory

Type: Boolean 
Default: true

可选，用来指定是否在导航菜单中显示段落索引编号。查看详情

Properties

defaults： 
Type: Objects

静态属性，存储的是 AutocJS 对象默认配置选项。查看详情

version

Type: String

存储的是 AutocJS 当前的版本号。查看详情

8、Methods

init - 初始化程序 
initElements - 初始化 elements 属性（AutocJS 对象相关 DOM 元素） 
initData - 初始化 data 属性（文章段落章节数据） 
reload - （根据新的配置信息）重启程序 
set - 设置 attributes 属性 
get - 返回某个 attributes 属性 
dom - 返回 elements 属性 
article - 返回页面文章正文的容器 DOM 元素 
headings - 返回 article 中 selector 匹配的所有标题 DOM 元素 
chapters - 设置或者返回 data.chapters 属性 
anchors - 返回 data.anchors 属性 
list - 返回 data.list 属性 
getChapterIndex - 返回 chapter 在 data.list 中对应段落层次位置索引值 
render - 绘制 UI 界面 
renderArticleDirectory - 在文章开始处绘制目录导航 
renderAnchors - 绘制标题锚点链接和标题段落章节索引代码 
renderHeadingChapterCode - 在文章标题中绘制其对应的段落章节索引编码 
renderSidebarDirectory - 绘制侧边栏的目录导航菜单 
renderSidebarOutline - 绘制侧边栏菜单的框架 
renderChapters - 绘制文章章节索引 
show - 展开侧边栏菜单 
hide - 收起侧边栏菜单 
toggle - 收起/展开侧边栏菜单 
updateLayout - 根据当前窗口高度更新侧边栏菜单界面高度 
scrollTo - 将窗口的滚动条滚动到指定 top 值的位置 
destroy - 移除所有绘制的 DOM 节点，并移除绑定的事件处理器

9、实例

Customize selector

new AutocJS({
    article: '#container',
    // 只收集文章中的 h2　标题标签 
    selector: 'h2'
});
  • 1
  • 2
  • 3
  • 4
  • 5

演示地址：http://yaohaixiao.github.io/AutocJS/examples/customize-selector.htm

Customize title
new AutocJS({
    article: '#container',
    title: 'Customize Title'
});
  • 1
  • 2
  • 3
  • 4
  • 5

演示地址：http://yaohaixiao.github.io/AutocJS/examples/customize-title.htm

Create anchors only

new AutocJS({
    article: '#container',
    isAnchorsOnly: true
});
  • 1
  • 2
  • 3
  • 4

演示地址：http://yaohaixiao.github.io/AutocJS/examples/create-anchors-only.htm

Positioning behavior

new AutocJS({
    article: '#container',
    // 不配置 isAnimateScroll 或者设置为 true 则是默认的动画滚动定位 
    isAnimateScroll: false
});
  • 1
  • 2
  • 3
  • 4
  • 5

演示地址：http://yaohaixiao.github.io/AutocJS/examples/positioning-behavior.htm

Create directory navigation in the article

new AutocJS({
    article: '#container',
    // 不配置 hasDirectoryInArticle 或者设置为 false，则不会在文章开始位置显示目录导航 
    hasDirectoryInArticle: true,
    // 通常这个时候就不需要侧边栏的导航菜单了，当然你也可以两个都要（isAnchorsOnly: false 即可）。 
    onlyAnchors: true
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

演示地址：http://yaohaixiao.github.io/AutocJS/examples/create-directory-navigation-in-the-article.htm

Has chapter code at the headings：

new AutocJS({
    article: '#container',
    // 不配置 hasCodeAtHeadings 或者设置为 false，则不会在文章中的标题上显示段落章节索引编码 
    hasCodeAtHeadings: true
});
  • 1
  • 2
  • 3
  • 4
  • 5

演示地址：http://yaohaixiao.github.io/AutocJS/examples/has-chapter-code-at-the-headings.htm

Release History

See the CHANGELOG.

License

Code licensed under MIT License.

API Documentation licensed under

文章转自：https://blog.csdn.net/u014695532/article/details/60965569#t16
相关标签： AutocJS js 富文本编辑器

上一篇： Google Earth Engine（gee）中的Dictionary

下一篇： 训练随机森林回归模型 RandomForestRegressor

推荐阅读