中文博客目录跳转失败

滑翔闪收录于 Hugo 搭建记录

2024-03-21 约 470 字预计阅读 1 分钟次阅读

/img/中文博客目录跳转失败.zh-cn-20240523120401318.webp

问题

环境：hugo 扩展版+loveit 系列主题

Hugo 会为每个博客文章生成目录，并且目录标题应该能实现点击跳转。几天前我发现我的博客，中文页面不能实现标题跳转，英文依旧可以。

/img/中文博客目录跳转失败.zh-cn-20240523120305243.webp — hugo目录生成

原因

在询问 doit主题维护者后我得到了错误原因：

我在页面里添加了 BGM（如下）——这个功能使用了 APIayer，同时 APIayer 又调用了 smoothScroll。

smoothScroll 默认设置是英文参数，当引入 APIayer 播放音乐后，目录跳转返回值就变成了空值。

1
2
3
4
5
6
7


        if (location.hash !== this.hash) window.history.pushState(null, null, this.hash)
        // using the history api to solve issue #1 - back doesn't work
        // most browser don't update :target when the history api is used:
        // THIS IS A BUG FROM THE BROWSERS.
        // change the scrolling duration in this call
        var node = document.getElementById(this.hash.substring(1))
        if (!node) return; // Do not scroll to non-existing node

解决方法

最后是在博客文章使用 Aplayer 导致博客目录跳转失效中找到了解决方法。

修改 <个人网站>\assets\lib\aplayer 目录下的 APlayer.min.js。

鱼の乐大佬给出了他修改好的 APlayer.min.js。

全文替换即可。

这些问题都是 2018 年就暴露的问题，看来以后也不会有维护了，建议自己修改。

但是当我添加评论区后，这个问题又出现了？个人感觉问题出在网站监听，但个人就无法解决了。