推广 热搜: 行业  设备    系统  参数  经纪    教师  机械  中国 

实现文章生成目录导航

   日期:2024-11-13     作者:caijiyuan    caijiyuan   评论:0    移动:http://dgsw198.xhstdz.com/news/685.html
核心提示:最近看大家的博客都比我优秀。然后就是不论博客大小都有这个目录导航功能。而且我自己在翻看自己的博客站点的时候觉得没有导航功

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

实现文章生成目录导航

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

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

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

放个我自己的html结构图

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

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

上代码

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

然后就是存储标题之类的

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

就是开写html就行了

这里我没考虑兼容性,就是用了

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

示例:

本文地址:http://dgaty.xhstdz.com/news/685.html    物流园资讯网 http://dgaty.xhstdz.com/ , 查看更多
 
 
更多>同类行业资讯
0相关评论

新闻列表
企业新闻
推荐企业新闻
推荐图文
推荐行业资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号