10

我正在用 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>
4

4 回答 4

8

您可以在每个标题的 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 构建您的页面，则不能使用这些替代方法，但您可以在本地构建并提交输出。

于 2016-11-07T22:02:49.663 回答
6

如果您想要一种无需 JavaScript 的 GitHub Pages 兼容方式，您可以使用 Liquid 获得疯狂的 创意，并仔细地将渲染的 HTML 解析为字符串并对其进行操作。

或者你可以使用这个片段来做到这一点：https ://github.com/allejo/jekyll-anchor-headings

于 2019-06-01T02:39:34.927 回答
6

您可以使用 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

正则表达式将所有带有 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
于 2018-12-22T05:07:54.397 回答
1

从生成器的角度来看，如果没有 Jekyll 插件，这是不可能的。由于您使用的是 GitHub Pages，因此这是不可能的，因为它们不支持自定义插件。

一个合理的解决方案是创建一个脚本来查找所有带有 ID 的标题并将它们转换为链接或附加链接图标。

于 2016-11-07T20:54:52.607 回答