同步操作将从 Langzi/toc-helper 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
TocHelper
是一款给文章自动生成目录及侧边栏目录滚动特效的插件
特点
Hash
定位Body / div
滚动2.1.1 引入css和js
<link href="css/toc-helper.min.css" rel="stylesheet" />
<script src="js/toc-helper.min.js"></script>
2.1.2 文章内容添加 data
属性,值指向目录元素: data-toc="#toc"
<div data-toc="#toc"> </div>
注意: #toc
选择器对应的目录元素必须存在
<div id="toc"> </div>
2.1.3 目录已经存在, 调用 reload()
方法
new TocHelper().reload();
2.1.4 目录若不存在, 调用 reset()
方法,自动创建目录
new TocHelper().reset();
Webpack
, Browserify
, Gulp
, Rollup
等构建工具2.2.1 使用 npm
安装 TocHelper
npm install toc-helper --save
OR yarn add toc-helper
2.2.2 使用 require
引入
require('toc-helper/css/toc-helper.min.css')
const TocHelper = require('toc-helper')
2.2.3 使用 import
引入
import 'toc-helper/css/toc-helper.min.css'
import TocHelper from 'toc-helper'
2.2.4 简单应用
new TocHelper().reload()
TocHelper([selector,options])
构造器方法, 只能通过
new
创建实例
selector
类型:string | HTMLElement | Object
默认值: 无
selector
若为字符串,则必须是选择器,切可以通过该选择器获取相应的元素,否则无效
selector
若为Object
,则options = selector
第二个参数无效
options
类型:Object
默认值: {}
合并初始的
options
参数,并重新load
; 比如class
样式发生改变;megre
之后需要调用reload
方法
无参
实例化以及重新 megre
之后需要调用该方法
实例化后若目录已经存在则调用该方法,若不存在则调用
reset
方法,生成目录会自动调用该方法
无参
目录不存在或需要重新生成目录使用该方法
options
dom
文章内容
Dom
元素, 选择器或HTMLElement
类型的Dom
元素
类型:string | HTMLElement
默认值:*[data-toc]
classNames
class
选择器名称
toc
目录元素的
class
选择器名称
类型:string
默认值:toc
fxied
目录元素
position=fixed
的class
选择器名称
类型:string
默认值:toc-fixed
brand
目录
字的class
选择器名称
类型:string
默认值:toc-brand
navbar
目录菜单
class
选择器名称
类型:string
默认值:toc-navbar
hightlight
激活高亮/鼠标悬停高亮的
class
选择器名称
类型:string
默认值:toc-hightlight
nav
菜单父级节点
class
选择器名称
类型:string
默认值:toc-nav
link
菜单项
class
选择器名称
类型:string
默认值:toc-link
active
菜单项激活后的
class
选择器名称
类型:string
默认值:active
marginLeft1
二级标题偏移的
class
选择器名称
类型:string
默认值:ml-1
marginLeft1
二级标题偏移的
class
选择器名称
类型:string
默认值:ml-1
marginLeft2
三级标题偏移的
class
选择器名称
类型:string
默认值:ml-2
marginLeft3
四级标题偏移的
class
选择器名称
类型:string
默认值:ml-3
marginLeft4
五级标题偏移的
class
选择器名称
类型:string
默认值:ml-4
marginLeft5
六级标题偏移的
class
选择器名称
类型:string
默认值:ml-5
marginLeft6
暂无使用
hightlight
是否高亮显示
类型:Boolean
默认值:true
brand
目录文本
类型:string
默认值:目录
shadow
目录阴影
类型:string | false
默认值:shadow
若为
string
,则提供阴影的样式class
选择器名称,false
表示禁用阴影
idPrefix
生成
ID
选择器的前缀
类型:string
默认值:toc-heading-
后缀由数字组成
offsetBody
内容父级定位元素,该元素必须存在
position
属性,切position
的值不等于static
, 否则此值等于body
类型:string | HTMLElement
默认值:document.body
为
string
类型时,必须是选择器;无论是string
类型,还是HTMLElement
类型,都必须有position
属性,切position
的值不等于static
,否则此值等于body
topFixed
不使用或设置目录
fixed
定位
类型:false | Object
默认值:如下
false
表示不使用fixed
定位;Object
如下:
top
目录距离文档顶部的偏移量
类型: Number
默认值:24
top
目录距离文档左侧的偏移量
类型: Number
默认值:无
maxDepth
目录最大层级
类型: Number
默认值:6
层级最大为
6
,最小为1
,其他值无效
options
全部配置信息{
dom: '*[data-toc]', // 文章内容元素 选择器 或 HTMLElement
classNames: { // class选择器
toc: '.toc',
fxied: `toc-fixed`,
brand: `toc-brand`,
navbar: `toc-navbar`,
hightlight: `toc-hightlight`,
nav: `toc-nav`,
link: `toc-link`,
active: 'active',
marginLeft1: 'ml-1',
marginLeft2: 'ml-2',
marginLeft3: 'ml-3',
marginLeft4: 'ml-4',
marginLeft5: 'ml-5',
marginLeft6: 'ml-6'
},
hightlight: true,
brand: '目录',
shadow: 'shadow',
idPrefix: 'toc-heading-',
offsetBody: document.body,
topFixed: {
top: 24,
left: 0
},
maxDepth: 6
}
使用锚点 / Hash
定位时,若存在头部使用了fixed
或absolute
定位,会出现定位没达到预期效果; 可将所有的标题padding-top
等于头部的高, margin-top
等于头部高的相反值,这样可以解决定位不准切不会影响布局;
示例代码如下:
*[data-toc] h1,
*[data-toc] h2,
*[data-toc] h3,
*[data-toc] h4,
*[data-toc] h5,
*[data-toc] h6 {
margin-top: -83px;
padding-top: 83px;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。