hexo博客实现url锚点与markdown分级标题同步

type

status

date

slug

summary

有的网页页面，可以在页面滚动的时候，给 url 自动添加或者改变锚点，锚点内容即为当前页面正在显示的内容的分级标题。我希望自己的博客页面也能有这样的效果，这样的话，复制 url 的时候就可以带上锚点，打开后就能快速定位到需要查看的内容处。

要实现这个功能，做到以下两点就可以了

打开控制台，可以看到，hexo next 的主题，通过 markdown 渲染出的内容，包含在 class 为 post-block 的元素中。

而所有的分级标题渲染出来后，会依次对应 html 的 h1 到 h6 标签，且 id 名与标题等同。（不过空格会被替换为 - )

我们可以通过 Element.getBoundingClientRect().top 来获取一个 dom 元素的顶部与视口顶部的距离，如果得到一个负值，那么证明这个元素是在视口之上、或者正处于视口中。我们要的就是处于视口上的那个元素。获取它的 id 即可。

利用 HTML5 的历史记录 API，history.replaceState，它可以修改当前历史记录项，改变 url 信息，但却不会引起 url 跳转。

游方