Quick Tip: How to Build Customizable HTML Widgets in Jekyll

Jekyll Static Website Generator: Create customizable HTML widgets without Ruby plug-in

Jekyll, this lightweight static website generator, is popular for its powerful features and ease of use. This article will explain how to create customizable HTML widgets using Jekyll and Liquid template languages, without any Ruby plug-ins, and even non-technical people can easily get started.

Set custom variables

This article will introduce two methods to set custom variables: inline method and pre-content method.

1. Inline variable

Inline method is the best option if a widget may be included in the same page multiple times (such as a blog post). The following is an example of the PayPal button:

First, create a new file named _includes in the paypal-widget.html folder and add the following code:

<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 and include.button are two custom variables. When including this widget in the Markdown article, just write this:

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

This creates a button marked "Buy Now | $30". You can include the same file multiple times, each time using different include.id and include.button values.

2. Pre-content variable

For longer text strings and widgets that only contain once per article, the pre-content method can be used. The following is an example of the news subscription box:

Same, create a new file in the _includes folder, for example signup-widget.html and add the following code:

<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>

In the prefix of a Markdown article or page, use YAML to define variables:

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

Then, include the widget in the article:

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

(Add some CSS style effects)

If you need to include widgets multiple times in a page and customize them separately, you should use inline variables.

Summary

This article describes two easy ways to create powerful modules in a Jekyll project. You can use these two methods flexibly as you want to create various custom widgets.

The above is the detailed content of Quick Tip: How to Build Customizable HTML Widgets in Jekyll. For more information, please follow other related articles on the PHP Chinese website!