Conseil rapide: comment construire des widgets HTML personnalisables dans Jekyll

Générateur de site Web statique Jekyll: Créez des widgets HTML personnalisables sans plug-in Ruby

Jekyll, ce générateur de sites Web statique léger, est populaire pour ses fonctionnalités puissantes et sa facilité d'utilisation. Cet article expliquera comment créer des widgets HTML personnalisables à l'aide de langages de modèle Jekyll et de liquide, sans aucun plug-ins Ruby, et même les personnes non techniques peuvent facilement démarrer.

Définir les variables personnalisées

Cet article introduira deux méthodes pour définir des variables personnalisées: méthode en ligne et méthode pré-contente.

1. La méthode en ligne est la meilleure option si un widget peut être inclus dans la même page plusieurs fois (comme un article de blog). Ce qui suit est un exemple du bouton PayPal:

Tout d'abord, créez un nouveau fichier nommé

dans le dossier

et ajoutez le code suivant: _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>

et

sont deux variables personnalisées. Lorsque vous incluez ce widget dans l'article de Markdown, écrivez ceci: include.id include.button

Cela crée un bouton marqué "Acheter maintenant | 30 $". Vous pouvez inclure le même fichier plusieurs fois, à chaque fois en utilisant différentes valeurs

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

et

. include.id include.button

2.

Pour les chaînes de texte plus longues et les widgets qui ne contiennent qu'une seule fois par article, la méthode pré-contenue peut être utilisée. Ce qui suit est un exemple de la boîte d'abonnement des nouvelles: même, créez un nouveau fichier dans le dossier

, par exemple

et ajoutez le code suivant:

_includes Dans le préfixe d'un article ou d'une page Markdown, utilisez YAML pour définir les variables: 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>

Ensuite, incluez le widget dans l'article:

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

(Ajoutez quelques effets de style CSS)

{% include signup-widget.html %}

Si vous devez inclure des widgets plusieurs fois dans une page et les personnaliser séparément, vous devez utiliser des variables en ligne.

Résumé

Cet article décrit deux façons faciles de créer des modules puissants dans un projet Jekyll. Vous pouvez utiliser ces deux méthodes de manière flexible car vous souhaitez créer divers widgets personnalisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!