Petua Pantas: Cara Membina Widget HTML Disesuaikan di Jekyll

penjana laman web statik Jekyll: Buat widget HTML yang disesuaikan tanpa plug-in Ruby

Jekyll, penjana laman web statik ringan ini, popular untuk ciri -ciri yang kuat dan kemudahan penggunaannya. Artikel ini akan menerangkan cara membuat widget HTML yang disesuaikan menggunakan bahasa Jekyll dan Templat Cecair, tanpa sebarang pemalam Ruby, dan juga orang bukan teknikal dapat dengan mudah dimulakan.

Tetapkan pembolehubah tersuai

Artikel ini akan memperkenalkan dua kaedah untuk menetapkan pembolehubah tersuai: kaedah inline dan kaedah pra-kandungan.

1 Kaedah inline adalah pilihan terbaik jika widget boleh dimasukkan ke dalam halaman yang sama beberapa kali (seperti catatan blog). Berikut adalah contoh butang PayPal:

Pertama, buat fail baru bernama

dalam folder

dan tambahkan kod berikut:

_includes paypal-widget.html

dan

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

adalah dua pembolehubah tersuai. Apabila termasuk widget ini dalam artikel Markdown, tuliskan ini:

include.id include.button Ini mencipta butang yang ditandakan "Beli Sekarang | $ 30". Anda boleh memasukkan fail yang sama beberapa kali, setiap kali menggunakan nilai

dan

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

yang berbeza.

include.id include.button 2

Untuk rentetan teks dan widget yang lebih panjang yang hanya mengandungi sekali setiap artikel, kaedah pra-kandungan boleh digunakan. Berikut adalah contoh kotak langganan berita:

Sama, buat fail baru dalam folder , contohnya

dan tambahkan kod berikut:

Dalam awalan artikel atau halaman markdown, gunakan YAML untuk menentukan pembolehubah: _includes signup-widget.html

Kemudian, sertakan widget dalam artikel:

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

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

(tambah beberapa kesan gaya CSS)

Jika anda perlu memasukkan widget beberapa kali dalam halaman dan menyesuaikannya secara berasingan, anda harus menggunakan pembolehubah sebaris.

{% include signup-widget.html %}

Ringkasan

Artikel ini menerangkan dua cara mudah untuk membuat modul yang kuat dalam projek Jekyll. Anda boleh menggunakan kedua -dua kaedah ini secara fleksibel kerana anda ingin membuat pelbagai widget tersuai.

Atas ialah kandungan terperinci Petua Pantas: Cara Membina Widget HTML Disesuaikan di Jekyll. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!