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

Jekyll 靜態網站生成器：無需 Ruby 插件即可創建可定制的 HTML 小部件

Jekyll，這款輕量級的靜態網站生成器，憑藉其強大的功能和易用性而備受青睞。本文將介紹如何利用 Jekyll 和 Liquid 模板語言創建可定制的 HTML 小部件，無需任何 Ruby 插件，即使是非技術人員也能輕鬆上手。

設置自定義變量

本文將介紹兩種設置自定義變量的方法：內聯方法和前置內容方法。

1. 內聯變量

如果小部件可能多次包含在同一頁面中（例如博客文章），則內聯方法是最佳選擇。以下以 PayPal 按鈕為例：

首先，在 _includes 文件夾中創建一個名為 paypal-widget.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/imghw/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>

include.id 和 include.button 是兩個自定義變量。在 Markdown 文章中包含此小部件時，只需這樣寫：

{% include paypal-widget.html id="YOUR_PAYPAL_BUTTON_ID" button="立即购买 | " %}

這樣就創建了一個標註為“立即購買 | $30”的按鈕。您可以多次包含同一文件，每次使用不同的 include.id 和 include.button 值。

2. 前置內容變量

對於較長的文本字符串和每個文章只包含一次的小部件，可以使用前置內容方法。以下以新聞訂閱框為例：

同樣，在 _includes 文件夾中創建一個新文件，例如 signup-widget.html，並添加以下代碼：

<div class="signup-cta">
  <h2 id="page-cta-title">{{ 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>

在 Markdown 文章或頁面的前置內容中，使用 YAML 定義變量：

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

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

{% include signup-widget.html %}

(添加一些 CSS 樣式後的效果)

如果需要在一個頁面中多次包含小部件並分別自定義，則應使用內聯變量。

總結

本文介紹了兩種在 Jekyll 項目中創建強大模塊的簡便方法。 您可以根據需要靈活運用這兩種方法，創建各種自定義的小部件。

以上是快速提示：如何在Jekyll構建可自定義的HTML小部件的詳細內容。更多資訊請關注PHP中文網其他相關文章！