有没有办法使用 Jekyll 将带有一些 CSS 格式的简单 HTML 按钮添加到 Markdown 文件中?我对 Jekyll 很陌生,不太了解它的解决方法。我想让这个按钮链接到外部 URL 以进行文件下载。
选项 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方式,是最漂亮的(我认为),但是并没有生成真正的按钮。
来自 约翰·格鲁伯本人:
Markdown 并不能替代 HTML,甚至不能替代 HTML。它的语法是 非常小,仅对应于 HTML 标签的一个非常小的子集。这个想法 并不是要创建一种可以更轻松地插入 HTML 标签的语法。在我的 看来,HTML 标签已经很容易插入了。 Markdown 的想法是 使阅读、写作和编辑散文变得容易。
按钮不是散文。要创建,您必须使用 HTML:
<button name="button">Click me</button>
使用 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 格式,你都可以将它隐藏在像这样的包含模板中。
要添加一个简单的按钮,这在 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>
我们可以使用这样的语法来制作按钮。单细胞 |点我| |------------------------------------|