js 遍历html 生成目录,实现文章生成目录导航

一、原因

最近看大家的博客都比我优秀。然后就是不论博客大小都有这个目录导航功能。而且我自己在翻看自己的博客站点的时候觉得没有导航功能很麻烦。所以就给自己的博客升级下，增加了导航功能。

写出来的原因是因为这个功能比较冷门。写出来分享一下。

二、编写生成目录

1、先分析你的编辑器生成的文章html结构。

这一步很重要。为什么我不是在编辑器直接去生成目录呢？因为编辑器本身功能就很重，然后你如果在编辑器去生成目录，那么就需要存入数据库，那么就涉及增删改查。真的很low，而且这个其实说白了就是爬虫一样，你分析下html结构，然后for循环之后拿出来就行了。

这里我用的quill.js，生成的所有元素都是单独成行元素。

放个我自己的html结构图

这里只是html结构，最好是看childNodes字段，仔细去看。我的属于所有元素单独一行。不存在html嵌套

2、用js遍历你的文章的内部html结构

这时候比较简单了，就是遍历下html元素。得到一个数组

上代码// 生成目录

generate_catalog() {

// 保证渲染成功

this.$nextTick(() => {

const article_content = this.$refs["article"];

const nodes = ["H1", "H2", "H3"];

let titles = [];

article_content.childNodes.forEach((e, index) => {

if (nodes.includes(e.nodeName)) {

const id = "header-" + index;

e.setAttribute("id", id);

titles.push({

id: id,

title: e.innerHTML,

level: Number(e.nodeName.substring(1, 2)),

nodeName: e.nodeName

});

}

});

this.catalog = titles;

});

复制代码

可以看到，我生成的时候还给H1——H6标签设置了id，这个是很有必要的，因为你需要做锚点连接。

然后就是存储标题之类的

3、写html代码

数据都有了，那么也没什么难度了，

就是开写html就行了

:href="'#' + item.id"

:style="{ fontSize: 18 * (1 - 0.1 * item.level) + 'px' }"

>{{ item.title }}

>

复制代码

4、css吸顶效果

这里我没考虑兼容性，就是用了position: sticky;

复制代码

5、锚点连接

这里比较简单，说白了就是利用a标签的href属性里面是id属性的时候那么就会跳转到页面对应的html下面。

示例：biaoti

js 遍历html 生成目录,实现文章生成目录导航相关推荐

前端项目引入js文件写绝对目录还是相对目录_flask入门（三）静态文件
前言上篇文章讲到 flask 的模板文件如何使用,印象模糊的朋友可以回顾一下flask入门 (二)(不用写代码的前端!) 今天的主题 - flask 和静态文件结合的使用技巧. 静态文件概念先来简 ...
python tempfile cleanup_Python tempfile模块：生成临时文件和临时目录
Python tempfile模块:生成临时文件和临时目录 tempfile 模块专门用于创建临时文件和临时目录,它既可以在 UNIX 平台上运行良好,也可以在 Windows 平台上运行良好. te ...
php node 目录,node.js基于fs模块对系统文件及目录进行读写操作的方法详解
本文主要介绍了node.js基于fs模块对系统文件及目录进行读写操作的方法,结合实例形式分析了nodejs使用fs模块针对文件与目录的读写.创建.删除等相关操作技巧,需要的朋友可以参考下. 如果要用这 ...
python tempfile自动删除_Python tempfile模块生成临时文件和临时目录
tempfile 模块专门用于创建临时文件和临时目录,它既可以在 UNIX 平台上运行良好,也可以在 Windows 平台上运行良好. tempfile 模块中常用的函数,如表 1 所示. 表 1 t ...
大论文自动生成标题目录、图目录和表目录
大论文自动生成标题目录.图目录和表目录到了写大论文的时间啦,结果卡在了目录生成这里,各种小问题,网上找了找,没有一个较为系统地说明,花费了一些时间,在这里系统地介绍一下. 标题目录自动生成 1.刚 ...
【秃头系列】-【本科生毕设论文格式Word】自动生成目录并调整目录
文章目录 01 - 论文目录 02 - 如何自动生成 03 - 调整目录 04 - 使用效果 05 - 总结上一文:[秃头系列]-[本科生毕设论文格式Word]自动生成论文多级标题并排版正文 ...
java 更新word目录_java aspose.words 生成word目录和更新目录
1.生成目录 public static void creat(){ String resourceWordPath = "/media/xx/新加卷2/xx/UserName.docx&q ...
java aspose.words 生成word目录和更新目录
1.生成目录 public static void creat(){String resourceWordPath = "/media/xx/新加卷2/xx/UserName.docx&qu ...
aspose.words生成word文档（.dox、.docx等）时，生成目录后，目录中的页码和实际页码不对应，代码中更新域都没用
插入目录以及设置目录样式的代码: //将光标移到目录书签 builder.moveToBookmark("TOC"); builder.insertBreak(BreakType. ...

js 遍历html 生成目录,实现文章生成目录导航

js 遍历html 生成目录,实现文章生成目录导航相关推荐

最新文章

热门文章