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

说明书

本发明公开一种页面文章右侧导航栏定位及跟随高亮的方法，首先，读取Markdown文件并将它转换成HTML文件；之后，提取出文件中的标题，使用MD5加密技术对标题进行加密；然后，过滤掉三级标题以下的标题；生成标题列表headingList后，再次使用MD5加密技术对其进行加密；在右侧导航栏上生成目录，添加锚点、效果，定位到相应的标题；当页面滚动时，目录也跟随滚动；最后，当用户激活标题时，实现高亮效果。本发明通过使用JavaScript和CSS来实现滚动和高亮效果，当用户滚动页面内容时可以实现目录跟随滚动和当前滚动到的位置的锚点定位高亮。与传统的文本跟随目录定位方式相比，本方案更加节约计算资源，更高效地实现定位高亮，并且可以根据用户滚动实时刷新目录高亮正确位置。

技术领域

本发明涉及计算机软件前端领域，尤其涉及一种页面文章右侧导航栏定位及跟随高亮的方法。

背景技术

很多WEB应用程序，都可以手动地从markdown文件中读取目录，比如静态网站生成器，比如Gatsby。此外，还有一些React插件，比如react-markdown，也可以从markdown文件中解析文本。举个例子，React开发者可以使用parseMarkdown插件方法，将markdown文件解析为React Components，之后就可以通过在命令行中执行mdx-node进行读取目录的操作，或者使用remark-gfm插件方法，生成目录进行操作。以上都是在以来目录的插件进行对解析后的文本进行操作，但如果react项目不能引入目录插件时该怎么生成目录该怎么办呢？这些目录插件不兼容前端开发语言该怎么办呢？

因此，现有技术存在缺陷，需要改进。

发明内容

本发明要解决的技术问题是：提供一种页面文章右侧导航栏定位及跟随高亮的方法，更加节约计算资源，更高效地实现定位高亮，并且可以根据用户滚动实时刷新目录高亮正确位置。

本发明的技术方案如下：提供一种页面文章右侧导航栏定位及跟随高亮的方法，包括以下步骤。

S1：读取Markdown文件并将它转换成HTML文件；使用react-markdown插件解析markdown文件，获得滚动效果。使用react-markdown插件解析markdown文件，获得滚动效果的步骤为：在要渲染markdown文件的App.js中引入ReactMarkdown，初始化一个headingList作为存定位元素的数组，再初始一个Heading标签作为anchorElement，在ReactMarkdown渲染器中指定自定义渲染器，在Heading标签渲染之前将定位元素存入headingList中，在页面标题跟随滚动的时候，遍历headingList，取出将要滚动的元素，并用anchorElement将其渲染到页面上，实现滚动效果。

S2：提取出页面文章中的标题，使用MD5加密技术对标题进行加密，获得标题ID，实现锚点定位功能。过滤掉三级标题以下的标题，再次使用MD5加密技术对其进行加密。

S3：在右侧导航栏上生成目录，添加锚点定位功能和高亮效果，滚动页面，应用到相应的标题，激活标题。在滚动内容的同时，监控当前滚动位置，然后将当前滚动到的标题与之前headingList中的所有标题做对比，发现索引位置一致，此刻理解为当前处于这个标题处，然后将右侧导航栏中的标题激活。

S4：用户激活标题时，实现高亮效果。实现高亮的具体步骤为：在滚动事项上注册监听事件，当事件被触发时，遍历当前文档中所有标题级别的标签，判断当前滚动Y坐标是否大于或等于标签节点的Y坐标，如果大于或等于则激活该标签，并设置其高亮。代码逻辑为：定义一个函数，传入目录数组及坐标的高度，通过找到最近值的算法监听定位到的标题，目录则跟随高亮且滚动。