首页 > 解决方案 > 发出 JQuery 异常的 Hugo Markdown 脚注

问题描述

我有一个 Hugo 网站,其中包含指定脚注的 Markdown 内容。该站点包括 JQuery 3.4.1。

单击脚注锚点时,控制台中会发出 JQuery 异常:

Uncaught Error: Syntax error, unrecognized expression: [name=fn:1]
    at Function.se.error (jquery-3.4.1.min.js:2)
    at se.tokenize (jquery-3.4.1.min.js:2)
    at se.select (jquery-3.4.1.min.js:2)
    at Function.se [as find] (jquery-3.4.1.min.js:2)
    at k.fn.init.find (jquery-3.4.1.min.js:2)
    at new k.fn.init (jquery-3.4.1.min.js:2)
    at k (jquery-3.4.1.min.js:2)
    at HTMLAnchorElement.<anonymous> ((index):255)
    at HTMLAnchorElement.dispatch (jquery-3.4.1.min.js:2)
    at HTMLAnchorElement.v.handle (jquery-3.4.1.min.js:2)

为脚注链接生成的 HTML 代码如下所示:

<sup id="fnref:1">
  <a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a>
</sup>

为脚注生成的 HTML 代码如下所示:

<section class="footnotes" role="doc-endnotes">
  <hr>
  <ol>
    <li id="fn:1" role="doc-endnote">
      <p>
        <a href="https://en.wikipedia.org/wiki/Pineapple">Pineapple</a>
        <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a>
      </p>
    </li>
  </ol>
</section>

对我来说,这看起来像是标准的 HTML。为什么 JQuery 会抛出异常?

标签: jquerymarkdownhugo

解决方案


我将问题追溯到我也在使用Smooth Scrolling CSS Trick的事实。

生成的代码使用ids 作为锚点,但平滑滚动代码不处理它。


推荐阅读