Next -25- 中文目录单击不跳转问题解决方案

本文最后更新于:2022年7月4日 上午

我配置的hexo环境下,next主题中,生成文章的中文目录点击后不会自动跳转到相应位置,本文记录解决方案。

解决方案

  • 在next github 上已经提出了该问题并给出了解决方案

  • 主要修改了如下函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
registerSidebarTOC: function() {
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.scrollingElement,
duration : 500,
easing : 'linear',
scrollTop: offset + 10
});
});
//return document.getElementById(link.getAttribute('href').replace('#', ''));
return target;
});

参考资料


Next -25- 中文目录单击不跳转问题解决方案
https://www.zywvvd.com/notes/hexo/theme/next/25-chinese-toc-not-jump/chinese-toc-not-jump/
作者
Yiwei Zhang
发布于
2021年7月20日
许可协议