快速提示：如何在Jekyll构建可自定义的HTML小部件

Jekyll 静态网站生成器：无需 Ruby 插件即可创建可定制的 HTML 小部件

Jekyll，这款轻量级的静态网站生成器，凭借其强大的功能和易用性而备受青睐。本文将介绍如何利用 Jekyll 和 Liquid 模板语言创建可定制的 HTML 小部件，无需任何 Ruby 插件，即使是非技术人员也能轻松上手。

设置自定义变量

本文将介绍两种设置自定义变量的方法：内联方法和前置内容方法。

1. 内联变量

如果小部件可能多次包含在同一页面中（例如博客文章），则内联方法是最佳选择。以下以 PayPal 按钮为例：

首先，在 _includes 文件夹中创建一个名为 paypal-widget.html 的新文件，并添加以下代码：

<code class="language-html"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="{{ include.id }}">
  <input type="submit" class="buy-button" name="submit" value="{{ include.button }}">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173985127475091.gif" class="lazy" alt="" border="0"    style="max-width:90%"  style="max-width:90%" style="display: none !important;">
</form></code>

include.id 和 include.button 是两个自定义变量。在 Markdown 文章中包含此小部件时，只需这样写：

<code class="language-liquid">{% include paypal-widget.html id="YOUR_PAYPAL_BUTTON_ID" button="立即购买 | " %}</code>

这样就创建了一个标注为“立即购买 | $30”的按钮。您可以多次包含同一文件，每次使用不同的 include.id 和 include.button 值。

2. 前置内容变量

对于较长的文本字符串和每个文章只包含一次的小部件，可以使用前置内容方法。以下以新闻订阅框为例：

同样，在 _includes 文件夹中创建一个新文件，例如 signup-widget.html，并添加以下代码：

<code class="language-html"><div class="signup-cta">
  <h2>{{ page.cta.title }}</h2>
  <p>{{ page.cta.body }}</p>
  <form method="POST">
    <input type="text" id="name" placeholder="姓名">
    <input type="email" placeholder="邮箱地址">
    <input type="submit" value="{{ page.cta.button }}">
  </form>
</div></code>

在 Markdown 文章或页面的前置内容中，使用 YAML 定义变量：

<code class="language-yaml">---
cta:
  title: "订阅我们的新闻"
  body: "喜欢这篇文章？订阅我们的新闻，每天接收更多精彩内容！"
  button: "立即订阅！"
---</code>

然后，在文章中包含小部件：

<code class="language-liquid">{% include signup-widget.html %}</code>

(添加一些 CSS 样式后的效果)

如果需要在一个页面中多次包含小部件并分别自定义，则应使用内联变量。

总结

本文介绍了两种在 Jekyll 项目中创建强大模块的简便方法。 您可以根据需要灵活运用这两种方法，创建各种自定义的小部件。

以上是快速提示：如何在Jekyll构建可自定义的HTML小部件的详细内容。更多信息请关注PHP中文网其他相关文章！