type
status
date
slug
summary
tags
category
icon
password
在做自己博客网站的时候，需要做一个根据页面内容来显示标题导航的功能，例如根据 h1,h2,h3 来导航文章内容，文章内容变化标题导航的menu的active类也会切换，所以我就想做一个相关的组件，方便有相同需求的朋友。
如何实现
获取menu
首先我们需要根据拿到页面的内容，我最开始是后端直接传文章内容过来，所以最开始一版只通过markdown的内容来渲染标题导航的menu，后面优化可以通过获取元素内容来渲染menu，代码如下
获取实时内容
由于最初的内容是后端传过来是死的，所以开始并没有对内容做监听，后来需要适配编写md内容的时候实时获取menu，所以就需要监听内容的变化来实时渲染menu，相关代码如下：
获取active的标题
根据滚动距离获取显示在最上面的标题来渲染active的menuItem,在这里有个地方需要注意，有可能滚动的不是document而是某个元素，所以在这里需要判断一下，获取正确的offsetTop
监听路由变化
在给组件库加上我这个库时发现路由一发生改变，menu的内容没有变动，发现是由于没有监听路由变化来重新渲染menu，所以加上了一个监听路由的功能,由于浏览器没有对pushState和replaceState事件的监听，所以在监听浏览器变化的时候，需要给事件添加监听，然后根据是否需要监听路由的添加浏览器的监听事件
相关的props在我github中有说明，下面是我的github仓库markdwon-it-navbar,希望对jym有用，欢迎给我提issues🤓
有关markdown的问题，欢迎您在底部评论区留言，一起交流~
- 作者:皮卡秋
- 链接:https://pikachu1024.com/article/markdown-it-navbar
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。