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

问题描述 投票:0回答:5

有没有办法使用 Jekyll 将带有一些 CSS 格式的简单 HTML 按钮添加到 Markdown 文件中?我对 Jekyll 很陌生,不太了解它的解决方法。我想让这个按钮链接到外部 URL 以进行文件下载。

css markdown jekyll
5个回答
29
投票

选项 1.简码 + javascript

第一个是使用 WordPress 风格的短代码并用 jQuery 替换它们。你需要在 JavaScript 中使用一些巧妙的正则表达式来实现这一点。在这种情况下,你的降价可能如下所示:

Lorem ipsum dolor sit amet.

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

选项 2.包含 Jekyll 文件

另一种选择是使用 Jekyll include:

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方式

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

Lorem ipsum dolor sit amet.

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

结论

您的选择取决于您的喜好。如果您想从 WordPress 移植或移植到 WordPress,第一个解决方案是最简单的。第二种是真正的杰基尔方式。第三个(HTML)也很有意义。最后一种,markdown方式,是最漂亮的(我认为),但是并没有生成真正的按钮。


13
投票

来自 约翰·格鲁伯本人

Markdown 并不能替代 HTML,甚至不能替代 HTML。它的语法是 非常小,仅对应于 HTML 标签的一个非常小的子集。这个想法 并不是要创建一种可以更轻松地插入 HTML 标签的语法。在我的 看来,HTML 标签已经很容易插入了。 Markdown 的想法是 使阅读、写作和编辑散文变得容易。

按钮不是散文。要创建,您必须使用 HTML:

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

3
投票

使用 JoostS 推荐的包含选项 (2)。以下是更具体的信息,展示了如何使用包含参数来合并按钮。在您的 _includes 文件夹中,创建按钮模板(例如,button.html),如下所示:

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

(此 HTML 代码假设您正在使用 Bootstrap 作为按钮。)

我编写 {{include.button_name}} 的地方将是您传递到 include 中的参数。

现在在您的 Markdown 页面上,包含您的按钮,如下所示:

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

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


3
投票

要添加一个简单的按钮,这在 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>

0
投票

我们可以使用这样的语法来制作按钮。单细胞 |点我| |------------------------------------|

© www.soinside.com 2019 - 2024. All rights reserved.