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

Question

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

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

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

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

例如，以下文字：

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

应该生成以下输出：

一些标题

...博客中的一些正文，其中包含wikipedia的链接 ... ...

参考链接

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

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

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

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

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

Answer 1

首先，您必须准确了解正在做什么：

• 您的降价解析器正在将您的降价转换为html。
• Jekyll正在使用该HTML并将其组织成页面。
• GitHub页面正在提供这些html页面。
• 客户端读取该HTML并执行任何JavaScript等

问题是降价解析器不包含页面底部的引用链接。它不像他们在那里但隐藏起来。他们根本就不在那里。因此，您无法找到CSS解决方案，因为没有任何风格。您可能能够通过自定义标记解析器完成此操作，该解析器包含生成的html中的引用链接，但不能与GitHub页面一起使用，并且可能会非常hackish。 / p>

另一种选择是执行JavaScript，使用document.links获取页面上的每个链接，然后将其输出到页面底部的<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中的链接（例如this），这样您就不必解析导航链接等等。您还必须考虑订单。

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

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