Skip to content

twikoo评论无法加载,Astro的js脚本刷新才运行,普通的点击不运行的解决方案。

🗓️ 发布于:21:30
标签:

twikoo评论无法加载,只有第1次打开页面,或者刷新页面才能看到twikoo评论。

发现一个很有趣的现象,就是Astro的js脚本刷新才运行,不管你点击哪个链接,到达哪个页面,只要没刷新,这个js脚本都不会运行,这是为什么?

还有返回页面顶部的backtoTop()函数,需要刷新页面才能运行,点击页面上的链接,在页面之间跳转,则不会运行。

还有网站统计也不生效,只能统计到用户的第一次浏览。

原因是astro有个过渡效果,这个过渡效果会阻止windows.onload事件的触发。

docs.astro.build/zh-cn/guides/view-transitions/

添加<ViewTransitions />可以添加过渡效果,5.0版本后是<ClientRouter />

这个过渡效果会使用prefetch,鼠标划过hover一个链接,就会加载这个链接,可以在不刷新浏览器的情况下,更新页面内容,并在页面之间提供无缝的动画效果,当时也是因为这个无缝丝滑的页面过渡效果,而选择了Astro。b站也使用了这种技术。

要强制内联脚本在每次过渡后重新执行,请添加data-astro-rerun属性。向脚本添加任何属性也会隐式地添加 is:inline,因此这只适用于未被 Astro 打包和处理的脚本。

docs.astro.build/zh-cn/guides/view-transitions/#data-astro-rerun

<script is:inline data-astro-rerun>
  // Your inline script here
</script>