Jekyll 靜態(tài)網(wǎng)站生成器：無需 Ruby 插件即可創(chuàng)建可定制的 HTML 小部件

Jekyll，這款輕量級(jí)的靜態(tài)網(wǎng)站生成器，憑借其強(qiáng)大的功能和易用性而備受青睞。本文將介紹如何利用 Jekyll 和 Liquid 模板語言創(chuàng)建可定制的 HTML 小部件，無需任何 Ruby 插件，即使是非技術(shù)人員也能輕松上手。

設(shè)置自定義變量

本文將介紹兩種設(shè)置自定義變量的方法：內(nèi)聯(lián)方法和前置內(nèi)容方法。

1. 內(nèi)聯(lián)變量

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

首先，在 _includes 文件夾中創(chuàng)建一個(gè)名為 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 是兩個(gè)自定義變量。在 Markdown 文章中包含此小部件時(shí)，只需這樣寫：

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

這樣就創(chuàng)建了一個(gè)標(biāo)注為“立即購買 | $30”的按鈕。您可以多次包含同一文件，每次使用不同的 include.id 和 include.button 值。

2. 前置內(nèi)容變量

對于較長的文本字符串和每個(gè)文章只包含一次的小部件，可以使用前置內(nèi)容方法。以下以新聞?dòng)嗛喛驗(yàn)槔?/p>

同樣，在 _includes 文件夾中創(chuàng)建一個(gè)新文件，例如 signup-widget.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>

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

---
cta:
  title: "訂閱我們的新聞"
  body: "喜歡這篇文章？訂閱我們的新聞，每天接收更多精彩內(nèi)容！"
  button: "立即訂閱！"
---

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

{% include signup-widget.html %}

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

如果需要在一個(gè)頁面中多次包含小部件并分別自定義，則應(yīng)使用內(nèi)聯(lián)變量。

總結(jié)

本文介紹了兩種在 Jekyll 項(xiàng)目中創(chuàng)建強(qiáng)大模塊的簡便方法。 您可以根據(jù)需要靈活運(yùn)用這兩種方法，創(chuàng)建各種自定義的小部件。

以上是快速提示：如何在Jekyll構(gòu)建可自定義的HTML小部件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！