如何添加一个按钮在一个.md文件与Jekyll

Question

有没有办法添加一个简单的HTML按钮，一些CSS格式化使用Jekyll的Markdown文件？我对杰基尔很陌生，不太了解自己的方式。我想将此按钮链接到外部URL以进行文件下载。

Answer 1

选项1.简码+ JavaScript的

首先是使用简码WordPress的风格，并与jQuery替换它们。你将需要一些聪明的JavaScript正则表达式来实现这一点。在这种情况下，您可以降价是这样的：

Lorem ipsum dolor sit amet. 

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

---

选项2.包括化身文件

另一种选择是使用杰基尔包括：

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.降价方式

最后一个选项是用降价来增加一个类，并使用CSS来将链接设置为按钮。

Lorem ipsum dolor sit amet. 

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

---

结论

你选择什么取决于你的喜好。第一种解决方案是最简单的，如果你想从WordPress或从端口。第二个是真正的Jekyll方式。第三个（HTML）也是有意义的。最后一个，降价方式，是最美丽的（在我看来），但不会产生真正的按钮。

Answer 2

从John Gruber himself：

降价不是HTML的替代品，甚至接近它。它的语法是非常小的 ，仅对应于非常小的HTML标签子集。 的想法不是创建一个语法，使插入HTML标签更容易。在我的 意见中，HTML标签已经很容易插入。 Markdown的想法是让 可以轻松阅读，编写和编辑散文。

按钮不是散文。要创建，必须使用HTML：

<button name="button">Click me</button> 

Answer 3

使用JoostS推荐的include选项（2）。以下是更详细的信息，显示如何使用包含参数的按钮。在_includes文件夹中，创建您的按钮模板（例如，按钮。HTML），像这样的：

<button type="button" class="btn btn-{{include.button_class}} active">{{include.button_name}}</button> 

（HTML代码假定您正在使用Bootstrap for your buttons）

，我已经写了那些地方{{include.button_name}}将是你传递参数。纳入您的包括。

现在你降价页面上，包括你的按钮是这样的：

{% include button.html button_name="My Button" button_class="primary" %} 

我使用这种技术进行标注，图像和通知我的文档。基本上任何时候你有复杂的HTML格式，你可以隐藏在一个像这样的包含模板。