Jekyll 取消隐藏 Github 页面上的 reference-style 链接

Question

我的博客 auto-generating 使用 github 个页面 jekyll，使用 markdown 个文档。

我想使用 reference-style link 然后在页面底部显示 link 的列表。

基本上，我希望 reference-style link 打印在页面上，默认情况下它们是隐藏的。

我们的想法是有一个参考列表，reader 可以参考以获取更多信息。

例如下面的文字：

# some header
...some body text in the blog with a link to [wikipedia][1]
...
...
# reference links
[1]: https://www.wikipedia.org

应该生成以下输出：

一些header

...博客中的一些 body 文本带有 link 到 wikipedia ... ...

引用links

[1]: https://www.wikipedia.org

可以看出，reference-stylelink用在了markdown但是页面上也显示了

之前的“正确”输出是通过复制每一行并转义特殊字符来实现的，但这似乎有点多余。

这可以通过更改 _config.yml 或使用 ruby 来实现吗？也欢迎其他选项（css 魔法？）。

tldr；我想要一种方法来“取消隐藏”markdown 页面底部的 reference-style link。

Answer 1

首先，你必须准确理解什么是做什么的：

您的 markdown 解析器正在将您的 markdown 转换为 html。
Jekyll 正在处理 html 并将其组织成页面。
GitHub 个页面正在提供那些 html 个页面。
客户端读取html并执行任何JavaScript等

问题是 Markdown 解析器不包含页面底部的引用 link。它们不像是在那里，而是隐藏起来了。他们根本不存在。所以您不会找到 CSS 解决方案，因为没有任何样式。您可能能够使用自定义降价解析器完成此操作，该解析器在生成的 html 中包含引用 link，但这不适用于 GitHub 页，而且可能会很老套。

另一个选项是执行 JavaScript，它使用 document.links 获取页面上的每个 link，然后将它们输出到 <ul> 或底部的其他内容中这一页。类似于 this:

var links = document.links;
for(var i = 0; i < links.length; i++) {
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  document.body.appendChild(linkHref);
  document.body.appendChild(lineBreak);
}

您可以将其限制为仅在某个 div 中包含 link（如 this），这样您就不必解析导航 links 等等。还要考虑顺序。

另一种选择可能是将它们作为 yml 列表包含在每个 post 的 frontmatter 中，然后在显示 post.

的布局中显示它们

当然，您也可以使用 markdown 自己创建引用。

Jekyll 取消隐藏 Github 页面上的 reference-style 链接

Jekyll unhide reference-style links on Github pages

markdown

github

jekyll

一些header

引用links