Schneller Tipp: So erstellen Sie anpassbare HTML -Widgets in Jekyll

Jekyll statische Website Generator: Erstellen Sie anpassbare HTML-Widgets ohne Ruby-Plug-In

Jekyll, dieser leichte statische Website -Generator, ist beliebt für seine leistungsstarken Funktionen und die Benutzerfreundlichkeit. In diesem Artikel wird erläutert, wie anpassbare HTML-Widgets mit Jekyll- und Liquid-Vorlagensprachen ohne Ruby-Plug-Ins erstellt werden, und selbst nicht-technische Personen können problemlos loslegen.

Setzen Sie benutzerdefinierte Variablen

In diesem Artikel werden zwei Methoden zum Festlegen benutzerdefinierter Variablen eingeführt: Inline-Methode und Methode vor dem Inhalt.

1 Inline -Methode ist die beste Option, wenn ein Widget mehrmals in dieselbe Seite aufgenommen wird (z. B. einen Blog -Beitrag). Das Folgende ist ein Beispiel für die PayPal -Taste:

Erstellen Sie zunächst eine neue Datei mit dem Namen

im Ordner

und fügen Sie den folgenden Code hinzu: _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>

und

sind zwei benutzerdefinierte Variablen. Wenn Sie dieses Widget in den Markus -Artikel aufnehmen, schreiben Sie einfach Folgendes: include.id include.button

Dies schafft eine Schaltfläche "Jetzt kaufen | $ 30". Sie können dieselbe Datei mehrmals einfügen, jedes Mal mit verschiedenen Werten

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

und

. include.id include.button

2

Für längere Textzeichenfolgen und Widgets, die nur einmal pro Artikel enthalten, kann die Methode vor der Instrengung verwendet werden. Das Folgende ist ein Beispiel für das Nachrichtenabonnement -Box: Erstellen Sie im Ordner

eine neue Datei, z. B.

und fügen Sie den folgenden Code hinzu:

_includes Verwenden Sie im Präfix eines Markdown -Artikels oder einer Seite mit YAML, um Variablen zu definieren: 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>

Geben Sie dann das Widget in den Artikel ein:

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

(Fügen Sie einige CSS -Stileffekte hinzu)

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

Wenn Sie mehrmals Widgets in eine Seite einbeziehen und separat anpassen müssen, sollten Sie Inline -Variablen verwenden.

Zusammenfassung

Dieser Artikel beschreibt zwei einfache Möglichkeiten, leistungsstarke Module in einem Jekyll -Projekt zu erstellen. Sie können diese beiden Methoden flexibel verwenden, um verschiedene benutzerdefinierte Widgets zu erstellen.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: So erstellen Sie anpassbare HTML -Widgets in Jekyll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!