博客添加浮动目录

付威

发布于 2018-12-05 12:06:54

1.1K0

发布于 2018-12-05 12:06:54

一直都想给自己的博客添加一个浮动的目录，在网上也找也几个，从易用性方面都不是太理想，所以今天才有了想法自己去写一个插件。

需求

 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"
    }
]

3. 根据数据生成对应的html

相关使用

代码地址：ICatalogJs

使用时候只需要引用js后，执行init方法：

	<script type="text/javascript">
		catalog.init();
	</script>

本篇对应的效果可以看右下角

(本文完)

作者:老付如果觉得对您有帮助,可以下方的订阅,或者选择右侧捐赠作者，如果有问题，请在捐赠后咨询，谢谢合作如有任何知识产权、版权问题或理论错误，还请指正。自由转载-非商用-非衍生-保持署名,请遵循：创意共享3.0许可证交流请加群113249828：点击加群或发我邮件 laofu_online@163.com

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html