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

为为为什么

发布于 2022-08-04 14:40:03

3220

发布于 2022-08-04 14:40:03

文章被收录于专栏：又见苍岚

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

解决方案

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

主要修改了如下函数：

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;
  });