如何使用 Jekyll 在 .md 文件中添加按钮

Question

有没有办法使用 Jekyll 向 Markdown 文件添加一个简单的 HTML 按钮，以及一些 CSS 格式？我对 Jekyll 很陌生，我真的不知道如何解决它。我想将此按钮链接到外部 URL 以进行文件下载。

原文由 Inigo Mantoya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

选项 1. 简码 + javascript

第一个是使用短代码 WordPress 样式并用 jQuery 替换它们。您将需要一些巧妙的 javascript 正则表达式来实现这一点。在这种情况下，您的降价可能如下所示：

 Lorem ipsum dolor sit amet.

[button url="http://www.google.com"]

---

选项 2. 包含 Jekyll 文件

另一种选择是使用 Jekyll 包括：

 Lorem ipsum dolor sit amet.

{% include button.html url="http://www.google.com" %}

---

选项 3. 纯 HTML

第三种选择是编写纯 HTML：

 Lorem ipsum dolor sit amet.

<button name="button" onclick="http://www.google.com">Click me</button>

---

选项 4. 降价方式

最后一个选项是使用 markdown 添加类并使用 CSS 将链接样式设置为按钮。

 Lorem ipsum dolor sit amet.

[Click me](http://www.google.com){: .btn}

---

结论

您选择什么取决于您的喜好。如果您想从 WordPress 移植或移植到 WordPress，第一个解决方案是最简单的。第二种是真正的 Jekyll 方式。第三个（HTML）也很有意义。最后一种，markdown方式，是最漂亮的（在我看来），但不会生成真正的按钮。

原文由 Mr. Hugo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要添加一个简单的按钮，这在任何带有 Jekyll 的 .md 文件中都可以正常工作。只需在 markdown (.md) 文件中使用它并根据您的更改链接“https://bing.com”。

要在同一选项卡中打开链接：

 <button onclick="window.location.href='https://bing.com';">Click</button>

要在新选项卡中打开链接：

  <form action="https://stackoverflow.com/" method="get" target="_blank"><button type="submit">Click me</button></form>

原文由 Trees 发布，翻译遵循 CC BY-SA 4.0 许可协议