对经过一周来,独立完成的一个 Vue 博客小项目,对学到的收获进行总结。
对动画、过渡的使用熟练了一些。学会使用了 anime 这个动画库。
学会使用 marked 库,进行简单配置。
-
进一步学会了对 h 标题标签的提取,并生成一个目录。
对每一个 h 标签加一个共有的类名。
等 md 渲染完成后,进行获取所有含有这个共有的类名 dom 对象,即所有 h 标签
初步进行遍历 dom 对象数组,生成一个一维数组目录
遍历一维数组目录,对 h 标签等级进行判断一系列的逻辑,最后生成一个多维的数组。即目录。
-
再进一步学会了,监听滚动距离,判断出当前浏览的标题,并在侧边栏中进行高亮显示当前浏览的标题。
组件渲染后进行监听滚动,销毁后移除监听事件
对目录数组进行遍历,分别获取 各个标题距离网页顶部的距离 与 当前滚动距顶距离 之 差 的绝对值
绝对值最小,即为当前浏览的标题,即为高亮显示。
然后再对子目录进行递归判断
学会了使用 highlight.js 在 marked 的配置中,对代码块进行高亮显示
学会了在 Vue 项目中配置并使用第三方包的 cdn