博客搭建之路:hexo使用next主题博客侧边栏标题点击不跳转

hexo使用next主题博客侧边栏标题点击不跳转

hexo版本5.0.2 npm版本6.14.7 next版本7.8.0

本着我肯定不是第一个出这个问题的人,去github上找了找,果然我不是第一个

好吧,也跟着改吧(修改themes/next/source/js/utils.js),找到registerSidebarTOC函数

ini 复制代码
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;
    });

参考文献

相关推荐
摆烂工程师5 小时前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员
小兵张健6 小时前
如何面对职场的迷茫和焦虑
程序员
Hello kele9 小时前
解构与重构:“整体部分”视角下的软件开发思维范式
大数据·经验分享·程序员·重构·项目管理·人月神话·沟通困局
南0极0熊10 小时前
Nordic Android 扫描 SDK 最优配置指南
程序员
南0极0熊10 小时前
如何用nRF52正确扫描蓝牙设备名称?解决广播包与回应包拼接问题
程序员
小凡敲代码12 小时前
美团Java后端二面面经!
java·程序员·java面试·java面试题·java开发·java场景题·美团java后端
小厂永远得不到的男人12 小时前
登录功能实现深度解析:从会话管理到安全校验全流程指南
后端·程序员
JavaGuide13 小时前
腾讯Java后端一面,被速通了!
网络·http·缓存·程序员·idea·多线程·校招·java基础·并发编程·aio·计算机基础·认证授权
前端大白话14 小时前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
欧达克18 小时前
注册加解密流程梳理
前端·程序员