解决文章目录点击不跳转的问题

Views: Word count in article: 1.5k Reading time ≈ 3 mins.

摘要

网页文章目录罢工了？

今天在巡视我的小破站时，突然发现我的网页文章目录罢工了：点击目录文章不发生跳转。STFW找到了NexT主题下的一个2020年的Issue , 但我发现官方现在已经把这个bug修复了。之后我才找到原因：Hexo没有正确地渲染出我的markdown语法，或者说，我没有正确的书写markdown。 将h标签写的标题改成markdown语法即可，即<h3>摘要</h3>改成### 摘要

正文

  • Bug复现

点击文章目录不跳转，打开开发者工具，发现：

1
Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

监听器确实监听到了一个response , 但 message channel在response接受前已关闭？不懂什么意思……

  • 开发者模式Debug

打开开发者工具，选择一个元素进行检查，例如摘要，发现浏览器将其渲染为：

1
2
3
4
<a class = "nav-link">
	<span class = "nav-number">1.</span>
    <span class = "nav-text">摘要</span>
</a>

这明显没设置锚点链接！！！怎么可能跳转！！！

我又去看了下在建站初，Hexo自己给出的文章实例Hello World,检查Quick Start:

1
2
3
4
<a class = "nav-link" href = "#Quick-Start">
	<span class = "nav-number">1.</span>
    <span class = "nav-text">Quick Start</span>
</a>

检查文章中的标题Quick Start:

1
2
3
4
5
<h2 id="Quick-Start">
	<a href="#Quick-Start" class="headerlink" title="Quick Start">
		Quick Start
	</a>
</h2>

发现文章内的大标题都被加上了``id`锚点。而我写的文章都没有渲染加上锚点。

  • 问题分析

同样是_post文件夹里的md文件，渲染结果却不同，问题肯定处在markdown文件内部，我仔细对比了官方参考的Hello World文章与我的文章，发现了问题所在：原来我的文章内的标题都是用HTML格式写的，而官方文章都是用markdown语法写的，即：

我的摘要：

1
<h3>摘要</h3>

官方的摘要：

1
### 摘要

markdown里写的是<h3>摘要</h3>,那hexo当然要原封不动地渲染为<h3>摘要</h3> , 难不成还修改你的HTML代码？ 被自己傻到了:sweat_smile:

  • 解决方案

把markdown源文件修改即可，即<h3>摘要</h3>改成### 摘要