クイックヒント：GumroadとJekyllで30秒でeコマース

このチュートリアルは、Gumroadのeコマース機能をJekyllのWebサイトにシームレスに統合する方法を示しています。 このプロセスは、コンテンツ作成者にとって迅速かつ有益です

重要な手順：

1. Gumroadコードを取得：

   Gumroadのウィジェットページに移動し、「埋め込み」または「オーバーレイ」ウィジェットのいずれかを選択して、生成されたコードスニペットをコピーします。 このチュートリアルでは、リダイレクトが有効になっている「埋め込み」ウィジェットを使用します。

2. Gumroadスクリプトの統合：

   GumroadコードからJekyllサイトのファイルに要素を追加します。 それを液体条件付きステートメント（）で包み、ローディングを最適化し、Gumroadウィジェットを使用してスクリプトがページにのみロードされるようにします。 <script></script> /_includes/head.html{% if page.content contains "gumroad" %}ダイナミックウィジェットを作成します：

   フォルダーに新しいファイル（
）を作成します。 Gumroadコードからこのファイルに
3. 要素（またはオーバーレイ用の

   要素）を貼り付けます。 プレースホルダー製品ID（ "demo"）とlink（）値を液体タグ（）に置き換えて、ウィジェットを動的にします。 これにより、同じページで異なる製品IDで再利用できます。 埋め込みの例：gumroad-embed.html /_includes/ <div> <code><a></a> オーバーレイの例：href {{ include.id }} ウィジェットを埋め込んでください：

   <code class="language-html"><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></code>

   液体を使用してステートメント（

   ）を使用して、ジキルページにウィジェットを埋め込みます。

   を実際のGumroad製品IDに置き換え、必要に応じてボタンテキストを調整します。

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

   4. {% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %}"YOUR_PRODUCT_ID"Gumroad統合の利点：

   コンテンツ作成者向けの簡単なeコマースのセットアップ。 詳細な販売分析。

   単純化された支払い処理。 割引機能。

   この合理化されたアプローチにより、Jekyll Webサイト全体にGumroad製品を簡単に組み込むことができ、eコマース機能が強化されます。 液体テンプレートを使用すると、柔軟性と効率が保証されます