Table of Contents Navigation Fails on the Chinese Blog

Problem 1

Environment: Hugo extended version + the LoveIt theme series

Hugo generates a table of contents for every blog post, and the TOC headings should support click-to-jump. A few days ago I noticed that on my blog, the Chinese pages couldn’t jump to headings, while the English ones still could.

The cause

After asking the doit theme maintainer, I got the cause of the error:

I’d added a BGM to the page (as below) — this feature uses APIayer, and APIayer in turn calls smoothScroll.

smoothScroll’s default settings use English parameters; after introducing APIayer to play music, the TOC jump return value becomes null.

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

The solution

In the end I found a solution in the blog post APlayer causing blog TOC navigation to fail.

Modify APlayer.min.js in the <personal website>\assets\lib\aplayer directory.

The blogger 鱼の乐 has provided his modified APlayer.min.js.

If the blogger’s domain hasn’t been renewed, you can refer to the file I copied:

APlayer.min.js

Just replace the whole file.

These problems have been exposed since 2018, and it looks like there won’t be any maintenance going forward, so I suggest fixing it yourself.

Problem 2

When I added the giscus comment section, this problem appeared again? The previous solution also stopped working.

Huge thanks here to @yllhwa for the help😍👍.

Copy themes\LoveIt\assets\data\cdn\jsdelivr.yml to <your website>\assets\data\cdn\jsdelivr.yml.

Then comment out aplayerJS: aplayer@1.10.1/dist/APlayer.min.js.