Asciidoc：如何为锚点创建可点击的锚点答案

【问题标题】：Asciidoc: How to create clickable anchors for anchorsAsciidoc：如何为锚点创建可点击的锚点
【发布时间】：2021-03-29 14:08:39
【问题描述】：

我有一个使用 asciidoc 的 jekyll 博客站点。现在我希望在将鼠标悬停在标题上时出现“锚”符号，例如在 GitHub 上：

当点击符号时，浏览器应该跳转到标题，所以 HTML 输出应该是这样的：

<h2 id="whats-in-a-rainbow-table">
    <a href="#whats-in-a-rainbow-table"></a>
    What's in a Rainbow table?
</h2>

等效的 asciidoc 标记是：

== xref:whats-in-a-rainbow-table[ ]What's in a Rainbow table?

这在一些 CSS 上工作并且看起来不错，但我不想为每个标题都写这么多的标记。有没有办法实现自动化？

【问题讨论】：

老实说，我对 asciidoc 并不是很坚定。但据我所知/记得有可能以某种方式将 asciidoc 与 JS 连接起来吗？所以这可能是你可以用 JS 解决的一个典型目的……你能用 JS 做吗？
@Brebber 我猜这只适用于 JS 版本的 Asciidoc，我使用的是 Ruby 版本（因为 Jekyll 使用 Ruby）。不幸的是，我对 Ruby 不是很熟悉。
我看到了一个用 Ruby 编写 Asciidoc 宏的教程。我实际上可能会这样做，以减少每个标题的样板数量，但我希望有更好的解决方案。

【解决方案1】：

添加“永久链接”图标最好使用自定义 JavaScript，添加到用于生成 HTML 的主题中。

您可以使用“docinfo”文件添加自定义 JavaScript。请参阅我对this question 的回答，了解这样做的策略。

您的自定义 JavaScript 应该在页面加载时运行，搜索所有标题，创建永久链接锚，并将其注入标题标记中。

【讨论】：