tocbot.js_使用Tocbot自动生成目录

最新推荐文章于 2024-08-10 08:02:00 发布
最新推荐文章于 2024-08-10 08:02:00 发布
阅读量4.7k 收藏
点赞数 1
文章标签： java python linux js vue ViewUI
Tocbot是一款JavaScript工具，能自动生成固定目录列表，适用于长篇内容的阅读导航。它无依赖，可在大部分浏览器中运行，通过简单设置即可实现目录的定制，如折叠选项、子标题和导航偏移。尽管自定义目录需要JavaScript知识，但Tocbot提供了一个高效的方法，替代手动创建目录，节省时间和工作量。
摘要由CSDN通过智能技术生成

越来越长的内容正成为一种规范， 受到了Google和用户的广泛欢迎。 但是，阅读带有大量副标题的长格式内容可能会有些令人头疼 。

输入Tocbot ，这是一个基于JavaScript的免费目录生成器 。 这会在任何页面上自动创建一个固定的目录列表，并在您滚动经过每个标题时更新您的位置。

最低0.47元/天 解锁文章
cune1359
关注
leaf-blog-pages:基于语义ui前端ui框架快速构建的个人博客页面，里面集成了markdown编辑器，particles.js炫酷粒子背景，prisms高亮，tocbot目录生成，动画效果，航点滚动检测，jquery.scrollTo平滑滚动，qrcode二维码等使用的前端插件，对于有意于建造个人网站的前端小白来说是一个挺不错的学习资源
03-23
基于语义ui前端ui框架快速构建的个人博客页面，里面集成了markdown编辑器，particles.js炫酷粒子背景，prisms高亮，tocbot目录生成，动画效果，航点滚动检测，jquery.scrollTo平滑滚动，qrcode二维码等使用的前端...
MyBlog:java开发的个人博客系统，利用SpringBoot+Mybatis框架，prism代码高亮，目录生成Tocbot
04-28
myblog java开发的个人博客系统，利用SpringBoot+Mybatis框架，prism代码高亮，目录生成Tocbot。 一、技术栈 1.前端 JS框架：JQuery CSS框架： Markdown编辑器： 代码高亮： 动画效果： 文章目录： 音乐盒 照片墙 2.后端 核心框架：SpringBoot 2.2.5 项目构建：jdk1.8、Maven 3 持久层框架：Mybatis 模板框架：Thymeleaf 分页插件：PageHelper 加密：MD5加密 3.数据库 MySQL 8 SQL文件在文末 二、功能需求 因为是个人博客，所以没有做用户权限管理，只是简单的区分了一下普通用户和管理员用户，这里就根据普通用户和管理员用户来讲述功能需求，其实从上一篇博文的前端页面就能大致的看出需求了 1.普通用户 查看文章信息：文章列表、推荐文章、文章标题、文章内容、发布时间、访问量以及评论
使用tocbot给自动文章添加目录
李波的blog，一名喜欢编程和分享技术的研究僧~
03-12 2243
文章目录使用tocbot给自动文章添加目录引入文件给markdown生成的html里的所有h标签生产自己的id属性值初始化tocbot 使用tocbot给自动文章添加目录 引入文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.5.0/tocbot.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/aj
Tocbot 开源项目使用教程
最新发布
gitblog_00928的博客
08-10 352
Tocbot 开源项目使用教程 tocbotBuild a table of contents from headings in an HTML document.项目地址:https://gitcode.com/gh_mirrors/to/tocbot 1、项目的目录结构及介绍 Tocbot 是一个用于生成 HTML 文档目录的 JavaScript 库。以下是 Tocbot 项目的目录结构及...
前端项目-tocbot.zip
09-02
前端项目-tocbot,根据HTML文档的标题结构生成目录。
tocbot:根据HTML文档中的标题构建目录
04-27
Tocbot通过HTML文档中的标题构建（TOC）。 这对于文档网站或较长的降价页面很有用，因为它使它们更易于浏览。 该库的灵感来自 ，主要区别在于Tocbot使用本机DOM方法，并且避免了jQuery＆jQuery UI依赖项。 开始使用 您可以使用npm进行安装，也可以使用HTML将脚本包含在页面上。 包含JS 用npm安装它。 npm install --save tocbot 或者 在关闭正文标记之前，在页面底部添加脚本。 < script src =" https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js " > </ script > 包括CSS CSS用于扩展和折叠分组以及一些基本样式。 < link rel =" stylesheet " href =" https://cdnjs.
tocbot生成文章目录
pscool的博客
04-09 1090
github上的tocbot npmjs上的tocbot 2. vue组件中使用引入tocbot 只需要引入tocbot，然后调用tocbot.init(…)，指定提取的文章内容所在的dom，以及要把生成的目录放到哪个dom里面，就可以生成目录了。 tocbot生成的目录结构
toc-加锚链接js适用于长文章
06-18
标题“toc-加锚链接js适用于长文章”指的是在网页中使用JavaScript实现的目录（Table of Contents，简称TOC）锚点链接功能，这个功能特别适用于篇幅较长的文章，可以帮助读者快速定位到他们感兴趣的内容部分。...
Tocbot 使用指南
gitblog_00724的博客
08-10 423
Tocbot 使用指南 tocbotBuild a table of contents from headings in an HTML document.项目地址:https://gitcode.com/gh_mirrors/to/tocbot 项目介绍 Tocbot 是一个基于 JavaScript 的开源库，用于自动生成 HTML 文档或 Markdown 页面的目录（Table of C...
tocbot-demo:Tocbot演示
04-28
Tocbot演示 入门 $ yarn install $ yarn start 现在，将浏览器指向 。
toc.js:一个简单的 javascript 来在网页中生成目录
06-22
目录 一个简单的 javascript 来在网页中生成目录
推荐开源项目：Tocbot——高效文档导航的利器
gitblog_00061的博客
05-14 447
推荐开源项目：Tocbot——高效文档导航的利器 tocbotBuild a table of contents from headings in an HTML document.项目地址:https://gitcode.com/gh_mirrors/to/tocbot 项目介绍 Tocbot 是一个轻量级的JavaScript库，它能够自动构建HTML文档或长篇Markdown页面的目录（T...
如何使文章内容自动生成目录
wind的博客
04-14 1181
链接：https://pan.baidu.com/s/1uICmDLUi4fRh_nqStzzM9g 提取码：n2rt 文件结构： 使用方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字排版测试</title> &...
通过网页内容生成目录
weixin_44735933的博客
03-03 853
下载安装命令 npm install --save tocbot 下载后将dist目录下面的内容copy到自己的项目目录下 然后在组件中引入这个插件的css和js 在组件的mounted钩子函数中添加这段代码 // 生成目录插件初始化 tocbot.init({ // Where to render the table of contents. tocSelector: '.js-toc', // 生成的目录放在哪儿 , 这里用css选中
关于Tocbot插件中目录无法导航到指定位置的问题
FanShenDeXianYu的博客
04-15 568
tocbot生成的目录是依托于h1，h2，h3标题的。但是定位是基于id的。所以我改成了 于是，成功定位
Vue2根据文章h标签，自动生成一个目录树（Toc），并可以跳转位置(动画)，同时可以监听滑动位置，改变对应目录高亮
weixin_47554687的博客
09-29 2575
vue2实现 类似 tocbot的效果，自动生成一个目录树，同时具备动画以及滑动检测高亮的效果
个人博客项目--插件集成
m0_46795558的博客
11-06 426
博客发布页 用Markdown编写博客内容 在此链接https://pandao.github.io/editor.md/下载该插件。 将下载的压缩包解压，在工程里新建lib/editormd 将解压后的css,fonts,images,languages,lib,plugins,editormd.min.js和editormd.js复制到该路径下，并在博客发布页引入资源 <link rel="stylesheet" href="../static/lib/editormd/css/editormd
springboot壁纸
09-21
对于使用Spring Boot搭建一个好看的个人博客，你可以参考李仁密老师在B站上的视频教程【SpringBoot开发一个小而美的个人博客】。视频链接为：https://www.bilibili.com/video/BV1nE411r7TF?share_source=copy_web&vd_source=d8832ef814411d4572d6eb1d6763a454。在视频教程中，他提供了一个简洁美观的个人博客源码，包括博客表、用户表、评论表、留言表、类型表、友链表和图片表等七张表。 为了实现一个好看的个人博客，你可以按照以下步骤进行操作： 1. 使用Spring Boot框架创建一个新的项目。 2. 根据视频教程提供的源码，创建所需的表结构。 3. 使用Semantic UI作为CSS框架，以实现美观的页面样式。 4. 使用JQuery来处理页面的动态效果。 5. 使用编辑器插件来支持Markdown格式的文章编辑。 6. 使用代码高亮插件来美化代码展示效果。 7. 使用动画插件来增加页面的动态效果。 8. 使用Tocbot插件生成文章目录。 9. 使用Aplayer插件来添加音乐播放功能。 10. 使用canvas-nest.js插件来实现背景动态线条效果。 11. 可选项：添加壁纸图片表，并根据需要随时更换壁纸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值