前言: 博主为了使用emoji🎃将next主题自带的markdown渲染引擎改成了markdown-it渲染引擎,但是导致了文章左侧的目录的跳转功能出现了错误

TOC定向错误

分析原因: 经过排查,发现原本会被编译为h2 id="title">title</h2>的代码

现在会被编译为<h2><span id="title">title</span></h2>

因此导致了在hexo生成TOC时,标题的元素的id未定义,以上变更是由于hexo-toc变更导致的

方法1

进入根目录下node_modules\hexo-toc\lib\filter.js脚本将28-31行修改为

1
2
3
4
$title.attr('id', id);
// $title.children('a').remove();
// $title.html( '<span id="' + id + '">' + $title.html() + '</span>' );
// $title.removeAttr('id');

但是我的hexo中并没有找到这个目录

所以我找了另外的

方法2

首先安装markdown-it-named-headings插件

1
npm install markdown-it-named-headings --save

然后进入你项目的根目录,修改根目录下 node_modules\hexo-renderer-markdown-it\lib\renderer.js 文件,在 renderer.js 中添加一行以使用此插件:

1
parser.use(require('markdown-it-named-headings'))

尝试以上两种方法,均未成功

时间不早了,后面有时间再解决

参考文章:

Hexo 博客踩坑 Cannot render headings with ids?