博客搭建之路: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 小时前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员
XinZong7 小时前
【VSCode插件推荐】想准时下班,你需要codemoss的帮助,分享AI写代码的愉快体验,附详细安装教程
前端·程序员
Goboy17 小时前
0帧起步:3分钟打造个人博客,让技术成长与职业发展齐头并进
程序员·开源·操作系统
JaxNext18 小时前
不选总统选配色,这一票投给 CSS logo
前端·css·程序员
程序员鱼皮2 天前
刚毕业,去做边缘业务,还有救吗?
计算机·程序员·互联网·求职·简历
WujieLi2 天前
独立开发沉思录周刊:vol18.AI 正在成为无处不在的基础设施
程序员·设计·创业
_祝你今天愉快2 天前
重学Android:从位运算到二进制表示(零)
算法·程序员
肖哥弹架构2 天前
并发编程之同步/异步/回调/任务 工作流程分析图解
java·后端·程序员
袁庭新3 天前
云原生+AI核心技术&最佳实践
java·人工智能·ai·云原生·程序员·袁庭新
安妮的心动录3 天前
2024 Sep & Oct Review
程序员·年终总结