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

参考文献

相关推荐
程序员小范1 天前
孙玲:从流水线工人到谷歌程序员
人工智能·程序员·谷歌·远程工作
程序员鱼皮1 天前
我发现很多程序员都不会打日志。。
计算机·程序员·开发·编程经验·java程序员
demo007x2 天前
「创意故事卡片创作助手」扣子模板使用教程
前端·后端·程序员
酷熊代理3 天前
网络安全:我们的安全防线
运维·网络·安全·web安全·网络安全·程序员
一只爱撸猫的程序猿3 天前
简单实现一个苹果支付的场景
spring boot·后端·程序员
豆包MarsCode3 天前
基于豆包MarsCode 和 Threejs 实现3D地图可视化
大数据·开发语言·人工智能·python·3d·程序员
狼叔3 天前
解读前端大牛TC39 成员Hax贺师俊:如何保持个人竞争力-浪说播客04
前端·程序员
京东云开发者4 天前
质量视角下的系统稳定性保障--稳定性保障常态化自动化实践
程序员
哔哩哔哩技术4 天前
哔哩哔哩客服坐席调度系统的演进
程序员