Jekyll 在 Github 页面上取消隐藏参考样式链接

Question

我一直在使用 github 页面来jekyll使用文档自动生成我的博客markdown。

我想使用参考样式链接，然后在页面底部显示链接列表。

基本上，我希望将参考样式链接打印在页面上，默认情况下它们是隐藏的。

这个想法是有一个参考列表，读者可以参考以获取更多信息。

例如，以下文本：

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

应生成以下输出：

---

一些标题

...博客中的一些正文带有维基百科的链接 ......

参考链接

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

---

如图所示，参考样式链接在 中使用，markdown但也显示在页面上。

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

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

太棒了；我想要一种方法来“取消隐藏”页面底部的参考样式链接markdown。

Answer 1

首先，你必须准确理解正在做什么：

• 你的 Markdown 解析器正在将你的 Markdown 转换成 html。
• Jekyll 正在获取该 html 并将其组织成页面。
• GitHub 页面正在提供这些 html 页面。
• 客户端读取该 html 并执行任何 JavaScript 等。

问题是 Markdown 解析器不包含页面底部的参考链接。它们并不在那里，而是隐藏起来。他们根本不在那儿。所以你不会找到 CSS 解决方案，因为没有任何样式可以设置。您也许可以使用自定义 Markdown 解析器来完成此任务，该解析器在生成的 html 中包含参考链接，但这不适用于 GitHub 页面，并且可能会变得非常黑客。

另一种选择是执行 JavaScript，用于document.links获取页面上的每个链接，然后将它们输出到<ul>页面底部的 a 或其他内容中。像这样的东西：

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 中的链接（例如这样），这样您就不必解析导航链接之类的东西。您还必须考虑顺序。

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

当然，您也可以使用 Markdown 自行创建参考。