[发明专利]一种页面文章右侧导航栏定位及跟随高亮的方法

权利要求书

1.一种页面文章右侧导航栏定位及跟随高亮的方法，其特征在于，包括以下步骤：

S1：读取Markdown文件并将它转换成HTML文件；使用react-markdown插件解析markdown文件，获得滚动效果；

S2：提取出页面文章中的标题，使用MD5加密技术对标题进行加密，获得标题ID，实现锚点定位功能；

S3：在右侧导航栏上生成目录，添加锚点定位功能和高亮效果，滚动页面，应用到相应的标题，激活标题；

S4：用户激活标题时，实现高亮效果。

2.根据权利要求1所述的一种页面文章右侧导航栏定位及跟随高亮的方法，其特征在于，使用react-markdown插件解析markdown文件，获得滚动效果的步骤为：在要渲染markdown文件的App.js中引入ReactMarkdown，初始化一个headingList作为存定位元素的数组，再初始一个Heading标签作为anchorElement，在ReactMarkdown渲染器中指定自定义渲染器，在Heading标签渲染之前将定位元素存入headingList中，在页面标题跟随滚动的时候，遍历headingList，取出将要滚动的元素，并用anchorElement将其渲染到页面上，实现滚动效果。

3.根据权利要求2所述的一种页面文章右侧导航栏定位及跟随高亮的方法，其特征在于，在步骤S3中，在滚动内容的同时，监控当前滚动位置，然后将当前滚动到的标题与之前headingList中的所有标题做对比，发现索引位置一致，此刻理解为当前处于这个标题处，然后将右侧导航栏中的标题激活。

4.根据权利要求1所述的一种页面文章右侧导航栏定位及跟随高亮的方法，其特征在于，在步骤S4中，实现高亮的具体步骤为：在滚动事项上注册监听事件，当事件被触发时，遍历当前文档中所有标题级别的标签，判断当前滚动Y坐标是否大于或等于标签节点的Y坐标，如果大于或等于则激活该标签，并设置其高亮。

5.根据权利要求4所述的一种页面文章右侧导航栏定位及跟随高亮的方法，其特征在于，代码逻辑为：定义一个函数，传入目录数组及坐标的高度，通过找到最近值的算法监听定位到的标题，目录则跟随高亮且滚动。

6.根据权利要求1所述的一种页面文章右侧导航栏定位及跟随高亮的方法，其特征在于，在步骤S2中，还包括：过滤掉三级标题以下的标题，再次使用MD5加密技术对其进行加密。