Question

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

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

降价页面

#### 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>

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

Answer 2

您可以使用Jekyll plugins覆盖标准行为。我把它放在_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。

Answer 3

如果没有Jekyll插件，从发电机的角度来看，这是不可能的。由于您使用的是GitHub页面，因此它们不支持自定义插件，因此无法实现。

一个合理的解决方案是创建一个脚本，该脚本可以找到包含ID的所有标题并将其转换为链接或附加链接图标。

Answer 4

如果您希望在不使用JavaScript的情况下实现GitHub Pages兼容的方式，则可以使用Liquid获得 ~~crazy~~ ^creative并仔细解析呈现的内容将HTML作为字符串进行处理。

或者您可以只使用完全符合以下条件的代码段：https://github.com/allejo/jekyll-anchor-headings

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

4 个答案: