快速提示：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 }} 覆盖的示例：

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

   嵌入了小部件：使用液体include语句（
   4. ）将小部件嵌入jekyll页面上。 用实际的Gumroad产品ID替换，并根据需要调整按钮文本。 {% include gumroad-embed.html id="YOUR_PRODUCT_ID" button="Buy Now" %}"YOUR_PRODUCT_ID"

   gumroad集成的好处：

   >

   内容创建者的简便电子商务设置。

   >详细的销售分析。
   简化的付款处理。
   折扣功能。
   • 这种简化的方法允许整个Jekyll网站上轻松嵌入Gumroad产品，从而增强其电子商务功能。 液体模板的使用可确保灵活性和效率。