0%

Hexo博客文章目录无法跳转

好久之前就发现博客的文章目录点击之后不能正常跳转,这对于篇幅较长的文章来说非常不便。通过查询,了解了是由于官方Hexo引入的bug,想想也确实在更新hexo后出现的目录无法跳转的问题,搜索找到了解决方法,供参考。

我使用的是hexo+next环境,Next主题为7.5.0,hexo版本如下:

1
2
3
4
5
└> hexo -v
INFO Validating config
hexo: 6.0.0
hexo-cli: 4.3.0
os: darwin 19.6.0 10.15.7

解决的方法很简单,找到next配置文件目录,主题配置文件\source\js\utils.js第240行左右如下修改即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
diff --git a/themes/next/source/js/utils.js b/themes/next/source/js/utils.js
index a249585..62ada15 100644
--- a/themes/next/source/js/utils.js
+++ b/themes/next/source/js/utils.js
@@ -232,10 +232,10 @@ NexT.utils = {
const navItems = document.querySelectorAll('.post-toc li');
const sections = [...navItems].map(element => {
var link = element.querySelector('a.nav-link');
+ var target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));
// TOC item animation navigate.
link.addEventListener('click', event => {
event.preventDefault();
- var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
var offset = target.getBoundingClientRect().top + window.scrollY;
window.anime({
targets : [document.documentElement, document.body],
@@ -244,7 +244,7 @@ NexT.utils = {
scrollTop: offset + 10
});
});
- return document.getElementById(link.getAttribute('href').replace('#', ''));
+ return target;
});

var tocElement = document.querySelector('.post-toc-wrap');

然后删除html文件重新部署:

1
2
hexo clean
hexo g & d

即可解决Hexo+Next主题无法跳转问。

参考:
Hexo-NexT主题中文目录不跳转的解决方法_Bingin的博客-CSDN博客_hexo 目录失效