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

Question

有没有办法使用 Jekyll 添加一个简单的 HTML 按钮，将一些 CSS 格式设置为 Markdown 文件？我对 Jekyll 很陌生，并不真正了解如何解决它。我想将此按钮 link 设为外部 URL 以下载文件。

Answer 1

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose.

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

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

Answer 2

选项 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 添加一个 class 并使用 CSS 将 link 样式设置为按钮。

Lorem ipsum dolor sit amet.

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

结论

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

Answer 3

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

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

（此 HTML 代码假定您使用的是 Bootstrap for your buttons。）

我写的那些地方 {{include.button_name}} 将是您传递给包含的参数。

现在，在您的 Markdown 页面上，像这样包含您的按钮：

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

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

Answer 4

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

要在同一选项卡中打开 link：

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

要在新标签页中打开 link：

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

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

How can I add a button in a .md file with Jekyll

css

markdown

jekyll