Petua Pantas: e-dagang dalam 30 saat dengan Gumroad dan Jekyll

Tutorial ini menunjukkan bagaimana untuk mengintegrasikan keupayaan e-dagang Gumroad ke dalam laman web Jekyll. Prosesnya cepat dan bermanfaat untuk pencipta kandungan.

Langkah -langkah utama:

1. Dapatkan kod gumroad: Navigasi ke halaman widget Gumroad dan pilih sama ada widget "embed" atau "overlay", menyalin coretan kod yang dihasilkan. Tutorial ini menggunakan widget "Embed" dengan diaktifkan semula.

2. Mengintegrasikan skrip Gumroad: Tambah elemen dari kod Gumroad ke fail <script></script> laman web Jekyll anda. Balut dalam pernyataan bersyarat cecair (/_includes/head.html) untuk mengoptimumkan pemuatan, memastikan skrip hanya dimuatkan pada halaman menggunakan widget Gumroad. {% if page.content contains "gumroad" %}

3. Buat widget dinamik: Buat fail baru () dalam folder gumroad-embed.html anda. Tampal elemen /_includes/ elemen (atau <div> untuk overlay) dari kod gumroad ke dalam fail ini. Gantikan nilai ID Produk Placeholder ("Demo") dan pautan (<st>) dengan tag cecair (<st>) untuk membuat dinamik widget. Ini membolehkan penggunaan semula dengan ID produk yang berbeza pada halaman yang sama. Contoh untuk embed: <code><a></a> href {{ include.id }} Contoh untuk Overlay:

   <div class="gumroad-product-embed" data-gumroad-product-id="{{ include.id }}" data-outbound-embed="true">
     <a href="https://www.php.cn/link/5f353180421dc744d4e204a6c0f330cd"></a>Loading... </div>

   <a class="gumroad-button" href="https://www.php.cn/link/8239a17531bc8edea4ad8a2ddfdbbe17" target="_blank">{{ include.button }}</a>

   Benamkan widget:
   Gunakan cecair termasuk pernyataan (
   4. ) untuk membenamkan widget pada halaman Jekyll anda. Ganti dengan ID produk Gumroad sebenar anda dan sesuaikan teks butang seperti yang diperlukan. {% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %} "YOUR_PRODUCT_ID"

   Manfaat Integrasi Gumroad:

   persediaan e-dagang mudah untuk pencipta kandungan.

   analisis jualan terperinci.
   pemprosesan pembayaran yang dipermudahkan.
   keupayaan diskaun.
   • Pendekatan yang diselaraskan ini membolehkan penanaman produk Gumroad di seluruh laman web Jekyll anda, meningkatkan fungsi e-dagangnya. Penggunaan templat cecair memastikan fleksibiliti dan kecekapan.