博客添加浮动目录
一直都想给自己的博客添加一个浮动的目录,在网上也找也几个,从易用性方面都不是太理想,所以今天才有了想法自己去写一个插件 。
需求
1. 当打开博客的时候在右下角自动生成对应的目录
2. 支持拖拽移动
3. 可以点击展开和收缩 (目前未实现)
易用性方面,希望能够直接引用 js后,来执行一句代码来完成对应的动作 。
实现逻辑
读取页面的所有h1,h2,h3,h4,h5
根据对应的元素和排序,生成对应的数据,格式如下:
[ { text: "目录", level: 2, achorName: "目录", order: 1, chapterIndex: "1" }, { text: "UTF8的出现", level: 3, achorName: "utf8的出现", order: 6, chapterIndex: "1.5" } ]
根据数据生成对应的html
相关使用
代码地址:ICatalogJs
使用时候只需要引用js后,执行init方法:
<script type="text/Javascript">
catalog.init();
</script>
本篇对应的效果可以看右下角