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

有没有一种方法可以添加一个简单的HTML按钮，使用Jekyll将一些CSS格式添加到标记文件中？我对杰基尔很陌生，不太了解它。我想将此按钮链接到文件下载的外部URL。

来自：

Markdown不是HTML的替代品，甚至与之相近。它的语法是 非常小，只对应于非常小的HTML标记子集。想法 不是创建一种语法，使插入HTML标记更容易。在我的 在我看来，HTML标签已经很容易插入了。降价的想法是 使阅读、写作和编辑散文变得容易

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

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

点击我

选项1。短代码+javascript

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

Lorem ipsum dolor sit amet.

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

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

---

选项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>

---

结论

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

使用JoostS推荐的包含选项（2）。下面是更具体的信息，说明如何使用包含参数合并按钮。在_includes文件夹中，创建按钮模板（例如button.html），如下所示：

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

---

我将此技术用于文档中的标注、图像和警报。基本上，任何时候当你有复杂的HTML格式时，你都可以把它隐藏在像这样的包含模板中。

要添加一个简单的按钮，这在任何带有Jekyll的.md文件中都可以很好地工作。只需在标记（.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>

点击我

Great，对于最后一个选项，我应该在哪里包含带有.btn类的样式表，还是在Jekyll中包含？再说一次，我对Jekyll很陌生。在您当前的样式表中最好。您还可以向布局中添加样式块。这是我的button.html文件：{{{include.button\u name}}这是我的.md文件：{%include.html button\u name=“My1 button”button\u class=“outline primary”url=”“%}

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