如何在kramdown中为标题添加永久链接？

Question

我正在建立一个用Markdown写的Jekyll和Github-Page的网站.我希望能够轻松地永久链接到标题,就像大多数在线文档一样.

当我点击标题时,我想获得带有哈希的URL.有没有一种简单的方法可以在Kramdown或Jekyll的配置中实现这一目标？

Markdown页面

#### A regular header

A regular sentence.

理想的结果

<h4 id="a-regular-header"><a href="#a-regular-header">A regular header</a></h4>
<p>A regular sentence.</p>

Answer 1

您可以在Markdown中为每个标题手动执行此操作：

#### [A regular header](#a-regular-header)

A regular sentence.

缺点是维护成本。另一种选择是在客户端上创建链接，方法是将其添加到所选页面的底部：

<script>
    var headings = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]");

    for (var i = 0; i < headings.length; i++) {
        headings[i].innerHTML =
            '<a href="#' + headings[i].id + '">' +
                headings[i].innerText +
            '</a>';
    }
</script>

您可以查看插件，经过修改的Markdown解析器或诸如gulp.js之类的任务运行器，以在构建时执行此操作（如果JavaScript依赖项不适合您的受众）。如果希望GitHub Pages构建页面，则不能使用这些替代方法，但是可以在本地构建并提交输出。

Answer 2

您可以使用 Jekyll插件来覆盖标准行为。我把这个放在_plugins/header.rb：

class Jekyll::MarkdownHeader < Jekyll::Converters::Markdown
    def convert(content)
        super.gsub(/<h(\d) id="(.*?)">/, '<h\1 id="\2"><a href="#\2">§</a>')
    end
end

regexp 用一个 ID 标签替换所有标题，同时添加一个链接。这不是在一般情况下执行此操作<h2 class="foo" id="x")的万无一失的方法（例如，不起作用），但 Kramdown 输出相当可靠且一致，因此应该没问题。我在 Jekyll 3.8.4 和 Kramdown 1.17.0 中添加了这个。

如果您想要/需要更强大的解决方案，那么您可以使用 HTML 解析器。应该没有那么难。

这样做的好处是它在客户端不需要 JavaScript。

或者，如果您想链接实际标题而不是预先添加链接：

class Jekyll::MarkdownHeader < Jekyll::Converters::Markdown
  def convert(content)
    super.gsub(/<h(\d) id="(.*?)">(.*)<\/h(\d)>/, '<h\1 id="\2"><a href="#\2">\3</a></h\1>')
  end
end

Answer 3

如果您想要一种无需 JavaScript 的 GitHub Pages 兼容方式来执行此操作，您可以使用 Liquid获得疯狂的 ^创意，并小心地将呈现的 HTML 解析为字符串并对其进行操作。

或者你可以直接使用这个片段：https : //github.com/allejo/jekyll-anchor-headings