博客搭建之路: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;
    });

参考文献

相关推荐
亚雷14 小时前
深入浅出 MySQL:彻底搞懂 redo log、undo log 与 binlog
数据库·后端·程序员
DyLatte16 小时前
你不是做的不够多,而是做的还不够好
程序员
LovelyAqaurius17 小时前
了解Unity中的URP Renderer Features:Object Renderer Features
程序员
SimonKing18 小时前
Java 8 日期时间 API 全面指南:使用技巧与场景实践
java·后端·程序员
redreamSo19 小时前
AI Daily | AI日报:AWS:破解Agentic AI落地难题; 谷歌MoR架构:或成Transformer杀手; 米哈游5亿成立新公司,AI布局野心大
程序员·aigc·资讯
程序员鱼皮21 小时前
会Vibe Coding的同事:我一个人干掉整个技术部!
ai·程序员·互联网·编程·开发·代码
liangdabiao21 小时前
不求人!Wordpress + WooCommerce 自定义商店前端 - 简单高效方法介绍 - 轻松解决问题
程序员·开源
小凡敲代码1 天前
2025年Java后端秋招面试的高频八股文+场景题
java·面试·程序员·java面试·java面试题·互联网大厂·java场景题
无责任此方_修行中1 天前
最后的重构 第二章:破局之路
程序员