快速提示：Gumroad和Jekyll的30秒內電子商務

本教程演示瞭如何將Gumroad的電子商務功能無縫整合到Jekyll網站上。 該過程對內容創建者很快而有益。

>

密鑰步驟：

1. 獲得Gumroad代碼：導航到Gumroad的小部件頁面，然後選擇“嵌入”或“覆蓋”小部件，複製生成的代碼段。 本教程使用啟用重定向的“嵌入”窗口小部件。

   >

2. 集成了gumroad腳本： <script></script>元素從gumroad代碼中添加到jekyll站點的/_includes/head.html>文件中。 將其包裹在液體條件語句（{% if page.content contains "gumroad" %}）中以優化加載，確保腳本僅使用Gumroad Widget上的頁面上加載。

3. 創建動態窗口小部件：在您的文件夾中創建一個新文件（gumroad-embed.html）。將gumroad代碼的/_includes/元素粘貼到該文件中。 用液體標籤（<div>）替換佔位符產品ID（“演示”）和鏈接（<code><a></a>）值，以使小部件動態。 這允許在同一頁面上使用不同的產品ID重複使用。 嵌入的示例：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>

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

   嵌入了小部件：使用液體include語句（
   4. ）將小部件嵌入jekyll頁面上。 用實際的Gumroad產品ID替換，並根據需要調整按鈕文本。 {% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %}"YOUR_PRODUCT_ID"

   gumroad集成的好處：

   >

   內容創建者的簡便電子商務設置。

   >詳細的銷售分析。
   簡化的付款處理。
   折扣功能。
   • 這種簡化的方法允許整個Jekyll網站上輕鬆嵌入Gumroad產品，從而增強其電子商務功能。 液體模板的使用可確保靈活性和效率。